/* ========================= css-04-clean =========================
Bootstrap 5-compatible CSS keeping the original BS3 look.
Consolidated: duplicates removed, conflicts resolved.
Only navbar-related parts were normalized; other sections preserved.
================================================================= */

/* ============ Базовые настройки ============= */
body { /* селектор */
font-family: "Arial"; /* семейство шрифтов */
font-size: 14px; /* размер шрифта */
color: #333333; /* цвет текста */
background-image: url(../img/bg2.jpg); /* фоновое изображение */
font-weight: normal; /* начертание шрифта */
max-width: 1460px; /* макс. ширина */
margin: 0 auto; /* выравнивание всего контента по центру */
} /* конец блока */


/* ============ Цвета ============= */
.ddred { color: #990000; }
.dred { color: #cc0000; }
.red { color: #ff0000; }
.white { color: #ffffff; }
.yellow { color: #ffff00; }
.orange { color: #ff6600; }
.dblue { color: #003471; }
.blue { color: #0054a6; }
.lblue { color: #448ccb; }
.dgreen { color: #004b24; }
.green { color: #006633; }
.lgreen { color: #009933; }
.lgray { color: #cccccc; }
.gray { color: #999999; }
.dgray { color: #666666; }

.a-white { color: #FFFFFF; text-decoration: none; }
.a-white:hover { color: #ffff99; text-decoration: none; }

.a-yellow { color: #ffff99; text-decoration: none; }
.a-yellow:hover { color: #ffff00; text-decoration: none; }

.a-red { color: #990000; text-decoration: none; }
.a-red:hover { color: #ff0000; text-decoration: none; }

.a-blue {
color: #047dd1; 
font-size: 1.05rem;    /* чуть крупнее обычного текста */
font-weight: 500;      /* лёгкое утолщение, без «жирного» */
text-decoration: none; /* убираем подчёркивание */
}
.a-blue:hover,
.a-blue:focus {
color: #055790;  
text-decoration: none; /* даже при ховере без подчёркивания */
}

.a-blue-sm {
color: #047dd1; 
font-size: 0.9rem;    /* чуть крупнее обычного текста */
font-weight: 500;      /* лёгкое утолщение, без «жирного» */
text-decoration: none; /* убираем подчёркивание */
}
.a-blue-sm:hover,
.a-blue-sm:focus {
color: #055790;  
text-decoration: none; /* даже при ховере без подчёркивания */
}

/* ================= Индивидуальные заголовки ================= */
h1.dblue-smaller { /* селектор */
font-size: 26px; /* размер шрифта */
font-weight: normal; /* начертание шрифта */
color: #003471; /* цвет текста */
margin-top: 15px; /* верхний внешний отступ */
margin-bottom: 10px; /* нижний внешний отступ */
text-align: center; /* выравнивание текста */
} /* конец блока */

h1.ddred-smaller { /* селектор */
font-size: 26px; /* размер шрифта */
font-weight: normal; /* начертание шрифта */
color: #990000; /* цвет текста */
margin-top: 15px; /* верхний внешний отступ */
margin-bottom: 10px; /* нижний внешний отступ */
text-align: center; /* выравнивание текста */
} /* конец блока */




/* ============ Пользовательские блоки содержимого ============= */
.hidden-stroke { display: none; }

/* === Телефоны/иконки в верхней плашке — без подчёркиваний/обводок === */
.index-content-6 a,
.index-content-6 a:hover,
.index-content-6 a:focus,
.index-content-6 a:active { /* селектор */
text-decoration: none !important; /* оформление текста (подчёркивание) */
border-bottom: none !important; /* нижняя рамка */
outline: none !important; /* внешняя обводка (outline) */
box-shadow: none !important; /* тень блока */
color: inherit; /* цвет текста */
} /* конец блока */

.index-content-1 { /* селектор */
background: #ffffff; /* фон (сокращённо) */
border-left: 2px solid #333333; /* левая рамка */
border-right: 2px solid #333333; /* правая рамка */
padding: 15px 35px 1px; /* внутренние отступы */
} /* конец блока */
.index-content-2 { /* селектор */
background: #333333; /* фон (сокращённо) */
border-left: 2px solid #333333; /* левая рамка */
border-right: 2px solid #333333; /* правая рамка */
padding: 20px 40px 20px; /* внутренние отступы */
} /* конец блока */
/* Убираем боковые паддинги у bootstrap-контейнера внутри футера */
.index-content-2 .container{ /* селектор */
padding-left: 0 !important; /* левый внутренний отступ */
padding-right: 0 !important; /* правый внутренний отступ */
} /* конец блока */
.index-content-3 { /* селектор */
background: #000000; /* фон (сокращённо) */
border-left: 2px solid #333333; /* левая рамка */
border-right: 2px solid #333333; /* правая рамка */
border-bottom: 2px solid #333333; /* нижняя рамка */
padding: 10px 35px; /* внутренние отступы */
} /* конец блока */
.index-content-4 { /* селектор */
background: #000000; /* фон (сокращённо) */
border-left: 2px solid #333333; /* левая рамка */
border-right: 2px solid #333333; /* правая рамка */
border-bottom: 0; /* нижняя рамка */
padding: 0; /* внутренние отступы */
} /* конец блока */
.index-content-5 { /* селектор */
background: #ffffff; /* фон (сокращённо) */
border-left: 2px solid #333333; /* левая рамка */
border-right: 2px solid #333333; /* правая рамка */
padding: 1px 35px; /* внутренние отступы */
} /* конец блока */
.index-content-6 { /* верхняя телефонная плашка */
background: #2E0000; /* фон (сокращённо) */
border-left: 2px solid #333333; /* левая рамка */
border-right: 2px solid #333333; /* правая рамка */
border-bottom: 0; /* нижняя рамка */
padding: 3px 35px; /* внутренние отступы */
} /* конец блока */
.index-content-7 { /* селектор */
background: #FF0000; /* фон (сокращённо) */
border-left: 2px solid #333333; /* левая рамка */
border-right: 2px solid #333333; /* правая рамка */
border-bottom: 0; /* нижняя рамка */
padding: 3px 35px; /* внутренние отступы */
} /* конец блока */

/* Выравнивание текста */
.txt-justify {
	text-align: justify;
	text-justify: inter-word; /* улучшает распределение пробелов */
}

/* кнопка для контактов */
.button-gray { /* селектор */
display: block; /* тип отображения */
background: #ebebeb; /* фон (сокращённо) */
color: #000000; /* цвет текста */
font-size: 14px; /* размер шрифта */
border: 1px solid #ffffff; /* рамка (сокращённо) */
outline: none; /* внешняя обводка (outline) */
text-decoration: none; /* оформление текста (подчёркивание) */
} /* конец блока */
.button-gray:hover { /* селектор */
background: #d7d7d7; /* фон (сокращённо) */
color: #000000; /* цвет текста */
outline: none; /* внешняя обводка (outline) */
text-decoration: none; /* оформление текста (подчёркивание) */
cursor: pointer; /* указатель курсора */
border: 1px solid #ffffff; /* рамка (сокращённо) */
} /* конец блока */
.button-gray:focus { outline: none; text-decoration: none; }

.dilers-grid-1 .col-md-4 { padding: 5px 0 0 0; }
.dilers-grid-2 .col-md-6 { padding: 5px 0 0 0; }
.call-form {}

/* Кнопки-переключатели категорий */
.btn-category { /* селектор */
border-radius: 1.5rem; /* скругление углов */
padding: .75rem 1.25rem; /* внутренние отступы */
background: #e9f5ff; /* фон (сокращённо) */
border: 1px solid #bde1ff; /* рамка (сокращённо) */
color: #0b5ed7; /* цвет текста */
} /* конец блока */
.btn-category:hover { background: #dff0ff; color:#0a58ca; }
.btn-category.active { /* селектор */
background: #9fd6ff; /* фон (сокращённо) */
border-color: #6cc1ff; /* цвет рамки */
color: #073c8a; /* цвет текста */
box-shadow: 0 0 0 .2rem rgba(13,110,253,.08); /* тень блока */
} /* конец блока */



/* ================================== КНОПКИ ВЫБОРА ТИПА КОТЛОВ =================================== */
.btn-boiler { /* селектор */
min-width: 370px; /* мин. ширина */
padding: 0.75rem 1rem; /* внутренние отступы */
border-radius: 0.75rem; /* скругление углов */
font-weight: 500; /* начертание шрифта */
font-size: 1.05rem; /* размер шрифта */
text-align: center; /* выравнивание текста */
border: none; /* рамка (сокращённо) */
transition: all 0.2s ease-in-out; /* анимация переходов */
box-shadow: 0 2px 6px rgba(0,0,0,0.08); /* тень блока */
} /* конец блока */

/* Голубая (газовые котлы) */
.btn-boiler.gas { /* селектор */
background-color: #9fd6ff; /* цвет фона */
color: #003366; /* цвет текста */
} /* конец блока */
.btn-boiler.gas:hover:not(:disabled) { /* селектор */
background-color: #86cbff; /* цвет фона */
color: #002b55; /* цвет текста */
} /* конец блока */

/* Светло-коричневая (угольные котлы) */
.btn-boiler.coal { /* селектор */
background-color: #d7b980; /* цвет фона */
color: #4a3310; /* цвет текста */
} /* конец блока */
.btn-boiler.coal:hover { /* селектор */
background-color: #cda96b; /* цвет фона */
color: #3a270c; /* цвет текста */
} /* конец блока */

/* Анимация иконок при наведении */
.btn-boiler i { /* селектор */
display: inline-block;               /* нужно для transform */
margin-right: .4rem; /* правый внешний отступ */
vertical-align: -0.1em; /* вертикальное выравнивание */
transition: transform 0.25s ease, color 0.25s ease; /* анимация переходов */
} /* конец блока */

/* Иконки внутри наших кнопок */
.btn-boiler i { margin-right: .4rem; vertical-align: -0.1em; }
i.blue   { color: #0b5ed7; }   /* газ — холодно-голубой акцент */
i.orange { color: #B85000; }   /* уголь — оранжевый акцент */

/* При наведении на угольную кнопку — иконка вспыхивает */
.btn-boiler.coal:hover i.orange { /* селектор */
color: #ff7b00;             /* ярко-оранжевый */
transform: scale(1.25); /* трансформация */
} /* конец блока */
/* При наведении на голубую кнопку — оживляем пламя */
.btn-boiler.gas:hover i.blue { /* селектор */
color: #1e7fff;             /* ярко-голубой, «вспышка газа» */
transform: scale(1.25); /* трансформация */
} /* конец блока */

/* Активная (нажатая) кнопка */
.btn-boiler.active,
.btn-boiler:disabled { /* селектор */
cursor: default; /* указатель курсора */
opacity: 1; /* прозрачность */
background: linear-gradient(180deg, #9fd6ff 0%, #8ecdfc 100%); /* фон (сокращённо) */
box-shadow:
inset 0 2px 4px rgba(0,0,0,0.25),  /* вдавленность */
0 1px 2px rgba(255,255,255,0.3);   /* лёгкий блик сверху */
transform: translateY(1px);          /* чуть опущена */
} /* конец блока */


/* ПРЕИМУЩЕСТВА КОТЛОВ */
.feature-col {
margin-top: 20px;
}

@media (min-width: 768px) {
.feature-col {
margin-top: 40px; /* на десктопе чуть больше */
}
}




/* ================= ОБЩИЙ БЛОК "КАРТОЧКИ КОТЛОВ" ============================= */

.boiler-card { /* селектор */
display: flex; /* тип отображения */
align-items: stretch; /* выравнивание по поперечной оси */
gap: 1.25rem; /* интервал между элементами */
padding: 1rem; /* внутренние отступы */
flex-wrap: nowrap; /* свойство CSS */
} /* конец блока */
.boiler-media {        /* левая колонка с превью */
flex: 0 0 320px;     /* фиксированная колонка ~ как раньше minmax(...) */
max-width: 340px; /* макс. ширина */
} /* конец блока */
.boiler-info {         /* правая колонка (таблица) */
flex: 1 1 auto; /* параметры flex-элемента */
} /* конец блока */

@media (max-width: 992px) { /* медиа-правило */
.boiler-card { flex-direction: column; }
.boiler-media { flex: 0 0 auto; max-width: 100%; }
} /* конец блока */

/* Медиа-блок: миниатюры и превью теперь рядом, без наложения */
.boiler-media { /* селектор */
display: flex; /* тип отображения */
align-items: center; /* выравнивание по поперечной оси */
gap: 1rem;              /* расстояние между миниатюрами и фото */
min-width: 240px; /* мин. ширина */
justify-content: center; /* выравнивание по основной оси */
} /* конец блока */
/* Размер превью */
.boiler-preview { /* селектор */
display: block; /* тип отображения */
width: 230px;       /* ← изменяешь это значение вручную */
aspect-ratio: 1 / 1; /* сохраняет форму квадрата */
} /* конец блока */
.boiler-preview img { /* селектор */
border-radius: 10px;  /* закруглённые углы у превью-картинок котлов */
overflow: hidden;	
object-fit: contain; /* вписывание изображения */
width: 100%; /* ширина */
height: 100%; /* высота */
} /* конец блока */

/* 1. Миниатюры отделены от превью */
.thumbs-vert { /* селектор */
position: relative;     /* убираем абсолютное позиционирование */
left: 0; top: 0;        /* сброс */
display: flex; /* тип отображения */
flex-direction: column; /* направление flex */
justify-content: flex-start; /* выравнивание по основной оси */
gap: 10px; /* интервал между элементами */
margin-right: 0rem;  /* отступ между миниатюрами и фото */
} /* конец блока */
.thumbs-vert .thumb { /* селектор */
width: 48px; height: 48px; /* ширина */
border-radius: .5rem; /* скругление углов */
border: 1px solid rgba(0,0,0,.1); /* рамка (сокращённо) */
cursor: pointer; /* указатель курсора */
object-fit: cover; /* вписывание изображения */
background: #f2f2f2; /* фон (сокращённо) */
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; /* анимация переходов */
} /* конец блока */
.thumbs-vert .thumb:hover { transform: translateX(-2px); }
.thumbs-vert .thumb.is-active { /* селектор */
box-shadow: 0 0 0 .2rem rgba(13,110,253,.2); /* тень блока */
border-color: rgba(13,110,253,.6); /* цвет рамки */
} /* конец блока */





/* ======================================== МОДАЛКИ =================================================== */

body.modal-open { padding-right: 0 !important; } /* Когда открыта модалка — не даём Bootstrap добавлять паддинг справа на body */

.modal-image {
	border-radius: 13px;
	overflow: hidden;
	background: #ffffff;
	border: 8px solid #e5e5e5;
	box-shadow: 0 0 20px rgba(0,0,0,0.15); /* мягкая тень вокруг */
}

/* Миниатюры в таблицах — курсор-рука */
.img-part {
    cursor: pointer;
}

/* картинка без зазоров вокруг */
#modal-boiler-image img {
display: block;            /* убирает "строчный" белый зазор */
}
/* крестик поверх изображения */
.modal-image-close {
position: absolute;
top: 8px;
right: 8px;
z-index: 2;
background-color: rgba(255,255,255,.85); /* важно: background-color, не background */
border-radius: 9999px;
padding: 6px;
line-height: 0;
}
/* прозрачные зоны для переключения изображений */
.modal-img-nav {
position: absolute;
top: 0;
width: 50%;
height: 100%;
cursor: pointer;
}
.modal-img-nav.nav-left  { left: 0; }
.modal-img-nav.nav-right { right: 0; }

/* ===== стрелки ===== */
.modal-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 38px;
font-weight: 300;
color: white;
opacity: 0;
transition: opacity 0.2s ease;
pointer-events: none; /* стрелка сама не ловит клик */
text-shadow: 0 0 10px rgba(0,0,0,0.7);
}

.modal-arrow.arrow-left  { left: 16px; }
.modal-arrow.arrow-right { right: 16px; }
#modal-boiler-wrapper:hover .modal-arrow { opacity: 1; } /* показывать стрелки при наведении на изображение или зону */

/* Галерея напольных котлов на floorboiler.html */
.floor-gallery .ratio {
	border-radius: 0.75rem;
	overflow: hidden;
}
.floor-gallery .gallery-thumb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}


/* === фикс: модальное изображение не должно выходить за ширину сайта === */
@media (max-width: 768px) {

#modal-boiler-image .modal-dialog {
max-width: calc(100vw - 20px);   /* не создаём горизонтальный скролл */
margin: 10px auto;               /* небольшие отступы от краёв */
}

#modal-boiler-image .modal-image {
width: 100%;
max-width: 100%;
}

#modal-boiler-image img {
width: 100%;
height: auto;
max-width: 100%;
}
}

/* Модальные окна на узких экранах — строго в пределах экрана */
@media (max-width: 576px) {
    .modal-dialog {
        max-width: 100%;
        margin: 0.5rem;
    }
}

/* немного компактнее на очень маленьких экранах */
@media (max-width: 480px) {
.modal-image-close {
top: 6px;
right: 6px;
padding: 4px;
}
}


/* Правая колонка с таблицей */
.boiler-info { padding: .5rem; }
.boiler-info h2 { color: #8B0000; font-weight: 700; } /* Заголовок карточки — тёмно-красный и жирный */
.boiler-table thead th { border-bottom-width: 2px; }
.boiler-table td, .boiler-table th { white-space: nowrap; }
.boiler-table td:nth-child(2) { white-space: normal; }

/* Центрируем столбец "Стоимость" (цены) */
.boiler-table td:last-child,
.boiler-table th:last-child { /* селектор */
text-align: center !important; /* выравнивание текста */
} /* конец блока */


@media (max-width: 767.98px) { /* медиа-правило */
/* Внешние поля карточки */
.boiler-card { /* селектор */
padding: 0.4rem 0.4rem;  /* было 1rem */
gap: 0.4rem;              /* чуть меньше расстояние между блоками */
}	 /* конец блока */

/* Поля внутри правого блока (таблица) */
.boiler-info { /* селектор */
padding: 0.25rem 0.25rem;   /* уменьшено */
} /* конец блока */
/* Заголовок и ссылка ближе друг к другу */
.boiler-info h2 { /* селектор */
margin-bottom: 0.25rem; /* нижний внешний отступ */
font-size: 1.1rem; /* размер шрифта */
text-align: center;  /* Заголовок по центру */
width: 100%; /* ширина */
} /* конец блока */

.boiler-table { /* селектор */
table-layout: fixed;   /* фиксируем расчёт колонок */
width: 100%; /* ширина */
} /* конец блока */

/* Таблица — более плотное расположение */
.boiler-table td,
.boiler-table th { /* селектор */
padding: 0.4rem 0.3rem; /* внутренние отступы */
font-size: 0.75rem;        /* немного меньше шрифт */
}	 /* конец блока */

.boiler-table td:last-child,
.boiler-table th:last-child { /* селектор */
min-width: 90px; /* мин. ширина */
} /* конец блока */

/* Раскладка карточки */
.boiler-table th:first-child,
.boiler-table td:first-child  { width: 20% !important; }  /* Модель */
.boiler-table th:nth-child(2),
.boiler-table td:nth-child(2) { width: 60% !important; }  /* Комплектация */
.boiler-table th:last-child,
.boiler-table td:last-child   { width: 20% !important; }  /* Стоимость */

/* цены центрируем, даже если в ячейке есть .text-end */
.boiler-table td:last-child,
.boiler-table th:last-child,
.boiler-table td.text-end { text-align: center !important; }

.boiler-table thead th,
.boiler-table tbody td { /* селектор */
/* Таблица — всё содержимое по центру */
text-align: center !important; /* выравнивание текста */
/* Разрешаем перенос во всех колонках */  
white-space: normal !important; /* правила переноса */
word-break: break-word; /* перенос слов */
font-size: 0.9rem;   /* размер шрифта */
}	 /* конец блока */
/* Центрирование заголовков таблицы */
.boiler-table thead td,
.boiler-table thead th { /* селектор */
text-align: center !important; /* выравнивание текста */
vertical-align: middle; /* вертикальное выравнивание */
font-weight: normal; /* начертание шрифта */
} /* конец блока */

/* Держим миниатюры сбоку, как и на десктопе */
.boiler-media { /* селектор */
flex-direction: row; /* направление flex */
align-items: center; /* выравнивание по поперечной оси */
justify-content: center; /* выравнивание по основной оси */
gap: 0.75rem; /* интервал между элементами */
} /* конец блока */

/* Превью уменьшаем на ~30% */
.boiler-preview { /* селектор */
width: 70%;            /* уменьшено на 30% */
max-width: 180px;      /* верхний предел — маленький квадрат */
} /* конец блока */

/* Миниатюры немного компактнее */
.thumbs-vert { /* селектор */
flex-direction: column; /* направление flex */
align-items: center; /* выравнивание по поперечной оси */
gap: 8px; /* интервал между элементами */
margin-right: 0.5rem; /* правый внешний отступ */
} /* конец блока */
.thumbs-vert .thumb { /* селектор */
width: 40px; /* ширина */
height: 40px; /* высота */
} /* конец блока */

/* Таблица: убираем горизонтальный скролл у остальных таблиц,
но НЕ трогаем таблицу теххарактеристик (tech-table-wrapper) */
.table-responsive:not(.tech-table-wrapper) {
overflow-x: visible !important;
}


} /* конец блока */

/* На маленьких экранах миниатюры чуть меньше */
@media (max-width: 575.98px) { /* медиа-правило */
.thumbs-vert .thumb { width: 40px; height: 40px; }
.boiler-preview { width: 100%; }
} /* конец блока */

/* Анимация вращающейся шестерёнки */
.spin { /* селектор */
display: inline-block; /* тип отображения */
animation: spin 6s linear infinite; /* анимация */
vertical-align: 0; /* вертикальное выравнивание */
} /* конец блока */

@keyframes spin { /* кадры анимации */
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
} /* конец блока */

/* === Десктоп: одинаковая сетка колонок во всех карточках === */
@media (min-width: 768px) { /* медиа-правило */
.boiler-table { /* селектор */
table-layout: fixed;     /* фиксируем расчёт колонок */
width: 100%; /* ширина */
} /* конец блока */

/* Раскладка колонок (как у «правильной» карточки КГВ-12) */
.boiler-table thead td:first-child,
.boiler-table tbody td:first-child { width: 20% !important; }  /* Модель */
.boiler-table thead td:nth-child(2),
.boiler-table tbody td:nth-child(2) { width: 65% !important; } /* Комплектация */
.boiler-table thead td:last-child,
.boiler-table tbody td:last-child   { width: 15% !important; } /* Стоимость */

/* Центр для цен (перекрываем .text-end из разметки) */
.boiler-table td:last-child,
.boiler-table th:last-child,
.boiler-table td.text-end { text-align: center !important; }
} /* конец блока */
/* ================= END OF ОБЩИЙ БЛОК "КАРТОЧКИ КОТЛОВ" ============================= */





/* ==================== МОДАЛЬНОЕ ОКНО ТЕХ ХАРАКТЕРИСТИК ============================== */

.modal-specs { border-radius: 12px; }
.modal-specs .modal-header { border-bottom: 0; }

/* компактный зазор между подзаголовком и таблицей */
.modal-specs .modal-header { padding: 8mm 8mm 2mm !important; } /* снизу 2мм */
.modal-specs .modal-body   { padding: 2mm 8mm 8mm !important; } /* сверху 2мм */
.modal-specs .modal-footer { padding: 8mm !important; }

/* страховка на случай, если первый элемент внутри body имеет margin-top */
.modal-specs .modal-body > *:first-child { margin-top: 0 !important; }

/* двухколоночная раскладка: таблица слева, фото справа */
.specs-grid {
display: grid;
grid-template-columns: 3fr 2fr; /* было 2fr 1fr */
gap: 12px;
}

.specs-table { width: 100%; } /* ширина таблицы */ 
.specs-table th { width: 70%; } /* левый столбец таблицы */ 
.specs-table td { width: 30%; } /* правый столбец таблицы */ 

.specs-table th,
.specs-table td {
font-size: 0.85rem; /* размер шрифта в таблице  */
vertical-align: middle; /* центрируем */
background: #fff;
}

/* полосатая таблица характеристик + подсветка при наведении */
.specs-table.table > tbody > tr:nth-of-type(even) > * {
background-color: #f5f5f5;   /* светло-серая полоска */
}

.specs-table.table > tbody > tr:nth-of-type(odd) > * {
background-color: #ffffff;   /* чётко белые нечётные строки */
}

/* подсветка строки при наведении */
.specs-table.table > tbody > tr:hover > * {
background-color: #fff8e1;   /* мягкая жёлтая подсветка */
}

.specs-table.table > :not(caption) > * > * {
padding: 0.30rem 0.75rem !important; /* высота строк таблицы */
}

/* блок фото */
.specs-photo img {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
display: block;
}

/* ====== Крестик и кнопка "Закрыть" ====== */
.desktop-only { display: block; }
.mobile-only { display: none; }

/* Мобилка: колонки в столбик */
@media (max-width: 992px) {
.specs-grid { grid-template-columns: 1fr; }
.specs-table th, .specs-table td { font-size: .95rem; }
}

@media (max-width: 768px) {
.modal-specs .modal-header { padding: 5mm 5mm 2mm !important; }
.modal-specs .modal-body   { padding: 2mm 5mm 5mm !important; }
.modal-specs .modal-footer { padding: 5mm !important; }

.specs-table.table > :not(caption) > * > * {
padding: 0.2rem 0.5rem !important;  /* максимально компактно по высоте */
font-size: 0.9rem;                  /* можно вернуть 0.95rem, если мелко */
}

.desktop-only { display: none !important; } /* На мобильных скрываем крестик и показываем кнопку */
.mobile-only { display: block !important; }	
}

@media (max-width: 576px) {
.specs-table th, .specs-table td { font-size: .9rem; }
}
/* ====== END OF МОДАЛЬНОЕ ОКНО ТЕХ ХАРАКТЕРИСТИК ====== */








/* ================= КАТАЛОГ (старая версия сайта 6.2) ===================== */
.catalog-button-kgv { display:block; background:#66ccff; color:#333333; font-size:16px; border:1px solid #fff; outline:none; text-decoration:none; }
.catalog-button-kgv:hover { background:#3399ff; color:#fff; outline:none; text-decoration:none; cursor:pointer; border:1px solid #fff; }
.catalog-button-kgv:focus { outline:none; text-decoration:none; }

.catalog-button-kuv { display:block; background:#ffcc33; color:#333333; font-size:16px; border:1px solid #fff; outline:none; text-decoration:none; }
.catalog-button-kuv:hover { background:#cc9900; color:#fff; outline:none; text-decoration:none; }
.catalog-button-kuv:focus { outline:none; text-decoration:none; }

.catalog-button-kuvba { display:block; background:#ff9966; color:#333333; font-size:16px; border:1px solid #fff; outline:none; text-decoration:none; }
.catalog-button-kuvba:hover { background:#ff6633; color:#fff; outline:none; text-decoration:none; }
.catalog-button-kuvba:focus { outline:none; text-decoration:none; }

.catalog-button-kuvdg { display:block; background:#cc9966; color:#333333; font-size:16px; border:1px solid #fff; outline:none; text-decoration:none; }
.catalog-button-kuvdg:hover { background:#996633; color:#fff; outline:none; text-decoration:none; }
.catalog-button-kuvdg:focus { outline:none; text-decoration:none; }

.catalog-button-kpv { display:block; background:#66cc66; color:#333333; font-size:16px; border:1px solid #fff; outline:none; text-decoration:none; }
.catalog-button-kpv:hover { background:#339933; color:#fff; outline:none; text-decoration:none; }
.catalog-button-kpv:focus { outline:none; text-decoration:none; }

.modal-user-option p { margin: 0; }
.boiler-banner-img { border: 1px solid #ffffff; }










/* ============================== ТАБЛИЦА ТЕХ ХАРАКТЕРИСТИК ================================ */


/* Десктоп — показываем только одну большую картинку */
.tech-img-desktop {
display: block;
}
/* Мобилка — блок скрыт на десктопе */
.tech-img-mobile {
display: none;
}
/* Размеры десктопной версии */
.kgv-tech-img {
width: 75%;
max-width: 820px;
height: auto;
}

/* ?????????????????????????????????????????????*/
.kgv-tech-img-xs {
width: 95%;
max-width: 480px;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 8px;
}

/* Размер превью в таблицах (boilerpart.html)*/
.tech-table img {
	max-width: 105%;
	width: 105px;          
	height: auto;
	display: block;
	margin: 0 auto;
}

/* Таблица только с горизонтальными линиями */
.horizontal-lines-only,
.horizontal-lines-only * {
    border-left: none !important;
    border-right: none !important;
}

.horizontal-lines-only th,
.horizontal-lines-only td {
    border-left: none !important;
    border-right: none !important;
}

/* Верхняя и нижняя граница остаются */
.horizontal-lines-only {
    border-top: 1px solid #dee2e6 !important;
    border-bottom: 1px solid #dee2e6 !important;
}




/* Обёртка, даёт горизонтальный скролл на узких экранах */
.tech-table-wrapper {
margin: 0 auto;
max-width: 100vw;              /* ширина не больше экрана */
overflow-x: auto;              /* свой горизонтальный скролл */
-webkit-overflow-scrolling: touch; /* приятный скролл на iOS/Android */	
}
.table-responsive.tech-table-wrapper {
max-width: 100vw;
overflow-x: auto !important;   /* свой горизонтальный скролл */
-webkit-overflow-scrolling: touch;
}

.tech-table {
min-width: 980px;          /* чтобы было что скроллить на мобилке */
font-size: 0.85rem;
}

/* Базовые ячейки */
.tech-table th,
.tech-table td {
text-align: center;
vertical-align: middle;
white-space: nowrap;
}

/* Первый столбец, который всегда остаётся видимым */
.tech-table .sticky-col {
position: sticky;
left: 0;
z-index: 3;
background-color: #ffffff;
}

/* Чтобы заголовок первого столбца не прятался под остальными */
.tech-table thead .sticky-col {
z-index: 4;
}

/* Полосатость + подсветка строки при наведении */
.tech-table tbody tr:nth-of-type(even) > * {
background-color: #f5f5f5;
}

.tech-table tbody tr:nth-of-type(odd) > * {
background-color: #ffffff;
}

.tech-table tbody tr:hover > * {
background-color: #fff8e1;
}

/* ===== Убрать полосатость, но оставить подсветку ===== */
.tech-table.no-stripes tbody tr > * {
	background-color: #ffffff !important; /* белый фон всегда */
}
.tech-table.no-stripes tbody tr:hover > * {
	background-color: #FBFBFB !important; /* светло-серая подсветка */
}

/* Таблица сервисных услуг: без принудительной ширины и с переносами, с отступами */
.tech-table.services-table {
	min-width: 100%;        /* не растягиваем шире контейнера */
	table-layout: fixed;    /* фиксированная сетка, всё влезает в ширину */
}

/* Переопределяем bootstrap-овские ячейки именно для этой таблицы */
.tech-table.services-table > :not(caption) > * > * {
	white-space: normal;    /* отменяем nowrap из базового .tech-table */
	word-break: break-word; /* при необходимости ломаем длинные слова */
	padding: 0.35rem 0.35rem; /* вертикальный и горизонтальный отступы */
}


/* Отключаем "телефонный" стиль у цен в таблицах услуг */
.tech-table a[href^="tel"] {
	color: inherit;
	text-decoration: none;
	pointer-events: none;   /* чтобы по ним нельзя было нажать */
}

@media (max-width: 768px) {
.tech-table { 
font-size: 0.8rem; 
min-width: 720px;
}
.tech-img-desktop {
display: none;
}
.tech-img-mobile {
display: block;
}
	
}

@media (max-width: 576px) {
.tech-table {
font-size: 0.75rem;
min-width: 640px;
}
}






/* ================= НАВИГАЦИОННАЯ ПАНЕЛЬ ============================== */
.navbar { /* селектор */
padding: 0 !important;                 /* контролируем высоту через ссылки */
border-radius: 0;                      /* вид BS3 */
border-left: 2px solid #333333 !important; /* левая рамка */
border-right: 2px solid #333333 !important; /* правая рамка */
border-top: 0 !important; /* верхняя рамка */
position: relative;                    /* для нижней красной линии */
} /* конец блока */
.menu { /* селектор */
background: #990000; /* фон (сокращённо) */
border: 0; /* рамка (сокращённо) */
margin: 0; /* внешние отступы */
} /* конец блока */
/* Тонкая ярко-красная линия под навбаром */
.navbar.menu::after { /* селектор */
content: ""; /* содержимое псевдоэлемента */
position: absolute; /* позиционирование */
left: 0; right: 0; bottom: 0; /* смещение слева */
height: 2px; /* высота */
background-color: #ff0000; /* можно #cc0000, если так точнее к старому */
z-index: 2; /* слой (z-index) */
} /* конец блока */

/* Бренд/логотип — по центру по Y, без top:-10px */
.navbar-brand { /* селектор */
display: flex; /* тип отображения */
align-items: center; /* выравнивание по поперечной оси */
padding: 6px 0 !important; /* внутренние отступы */
margin-right: 80px; /* внешний отступ между логотипом и меню */
} /* конец блока */
.navbar-brand img { /* селектор */
position: static; /* позиционирование */
top: auto; /* смещение сверху */
max-height: 60px;                      /* десктопная высота */
vertical-align: middle; /* вертикальное выравнивание */
} /* конец блока */

/* Верхнее меню (десктоп) */
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a.nav-link { /* селектор */
color: #ffcccc; /* цвет текста */
font-size: 16px; /* размер шрифта */
padding: 29px 18px; /* внутренние отступы */
} /* конец блока */
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a.nav-link:hover { /* селектор */
background: #660000; /* фон (сокращённо) */
color: #ffff00; /* цвет текста */
} /* конец блока */
.navbar-default .navbar-nav > li.active-link > a,
.navbar-default .navbar-nav > li.active-link > a.nav-link,
.navbar-default .navbar-nav > li.active-link > a:hover,
.navbar-default .navbar-nav > li.active-link > a.nav-link:hover { /* селектор */
background: #cc0000; /* фон (сокращённо) */
color: #ffffff; /* цвет текста */
cursor: pointer; /* указатель курсора */
} /* конец блока */

/* Dropdown (десктоп) */
.dropdown-menu { /* селектор */
background-color: #660000; /* цвет фона */
border: 0; /* рамка (сокращённо) */
border-radius: 6px;      /* лёгкое скругление, как было в оригинале */
margin-top: 6px;         /* небольшой отступ от верхнего пункта */
box-shadow: 0 2px 6px rgba(0,0,0,0.2); /* мягкая тень, чуть приподнимает */
overflow: hidden;        /* чтобы внутренние углы оставались ровными */
} /* конец блока */
/* поддержка как старых li > a, так и .dropdown-item */
.dropdown-menu > li > a,
.dropdown-menu .dropdown-item { /* селектор */
color: #ffcccc; /* цвет текста */
padding: 15px 20px; /* внутренние отступы */
} /* конец блока */
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus { /* селектор */
background-color: #ff3333; /* цвет фона */
color: #ffffff; /* цвет текста */
} /* конец блока */
.dropdown-menu .dropdown-divider { border-top-color: #ffcccc; }

/* Состояния BS3 → BS5 (open → show) */
.navbar-default .navbar-nav > .show > a,
.navbar-default .navbar-nav > .show > a:hover,
.navbar-default .navbar-nav > .show > a:focus { /* селектор */
background: #660000; /* фон (сокращённо) */
color: #ffcccc; /* цвет текста */
} /* конец блока */
.nav .show > a,
.nav .show > a:hover,
.nav .show > a:focus { border-color: #999999; }
.navbar-default .navbar-nav .show .dropdown-menu > li > a { color: #333333; }
.navbar-nav .show .dropdown-menu { background-color: #999999; }

/* Кнопка-бургер (BS5, вид как BS3) */
.navbar-toggler.navbar-toggle { /* селектор */
background: #990000; /* фон (сокращённо) */
border: 1px solid #ffff00; /* рамка (сокращённо) */
border-radius: 0; /* скругление углов */
padding: 6px 8px; /* внутренние отступы */
margin: 0; /* внешние отступы */
line-height: 1; /* межстрочный интервал */
box-shadow: none !important; /* тень блока */
outline: none !important; /* внешняя обводка (outline) */
} /* конец блока */
.navbar-toggler.navbar-toggle:hover,
.navbar-toggler.navbar-toggle:focus { /* селектор */
background: #cc0000; /* фон (сокращённо) */
box-shadow: none !important; /* тень блока */
} /* конец блока */
.navbar-toggler.navbar-toggle .icon-bar { /* селектор */
display: block; /* тип отображения */
width: 20px; /* ширина */
height: 2px; /* высота */
margin: 3px 0; /* внешние отступы */
background-color: #ffffff; /* цвет фона */
} /* конец блока */

/* ================= Работа с картинками ============================= */
.scale-pic { transition: 1s; }
.scale-pic:hover { transform: scale(1.1); }
.flow-pic { display:inline-block; overflow:hidden; }
.flow-pic img { transition:1s; display:block; }
.flow-pic img:hover { transform: scale(1.2); }

/* ================= Слайдеры ============================= */
.caption-intro-1 { right: 40%; top: 2%; }
.caption-intro-2 { right: 0%; top: 5%; }
.caption-intro-3 { right: 45%; top: 2%; }
.caption-intro-4 { right: 53%; top: 5%; }

.carousel-inner { border-left: 0px solid #333333; border-right: 0px solid #333333; }
.carousel-control { width: 10%; }

.menu-carousel .item { padding-top: 31.25%; }
.menu-carousel .bg-intro { /* селектор */
background-size: 100%; /* размер фон. картинки */
background-repeat: no-repeat; /* повтор фон. картинки */
position: absolute; /* позиционирование */
height: 100%; /* высота */
width: 100%; /* ширина */
left: 0; /* смещение слева */
top: 0; /* смещение сверху */
} /* конец блока */
.intro-img1 { background-image: url(../img/intro_img1.jpg); }
.intro-img2 { background-image: url(../img/intro_img2.jpg); }
.intro-img3 { background-image: url(../img/intro_img3.jpg); }
.intro-img4 { background-image: url(../img/intro_img4.jpg); }

/* Кнопка "наверх" */
.go-to-top { /* селектор */
cursor: pointer; /* указатель курсора */
display: none;           /* по умолчанию скрыта */
position: fixed; /* позиционирование */
bottom: 15px; /* смещение снизу */
right: 15px; /* смещение справа */
z-index: 1050;           /* поверх контента */
} /* конец блока */

.go-to-top.btn-lg { /* селектор */
padding: 10px 15px; /* внутренние отступы */
border-radius: 50%;      /* круглая */
width: 48px; height: 48px; /* ширина */
display: flex; align-items: center; justify-content: center; /* тип отображения */
} /* конец блока */

@media screen and (min-width: 768px) { /* медиа-правило */
.carousel-caption { left: 0%; }
} /* конец блока */




/* ******************************************************************************************* */
/* ====================== Медиа: планшеты (≤992px) ====================== */
@media only screen and (max-width: 992px) { /* медиа-правило */
.navbar-brand { margin-right: 45px; }
.navbar-brand img { max-height: 50px; } /* компактнее на планшете */

.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a.nav-link { /* селектор */
color: #ffcccc; /* цвет текста */
font-size: 15px; /* размер шрифта */
padding: 20px 15px; /* внутренние отступы */
} /* конец блока */

/* заголовки */
h1, .h1 { font-size: 28px; margin: 0 0 10px; }
h2, .h2 { font-size: 24px; margin: 0 0 10px; }
h3, .h3 { font-size: 19px; margin: 5px 0; }
h4, .h4 { font-size: 14px; margin: 10px 0; }

.intro-table { width:70%; margin:-3% 10%; color:#fff; font-size:16px; font-weight:normal; }
.intro-table > tbody > tr > td { border-top:0; padding:2.7%; }
} /* конец блока */

/* ******************************************************************************************* */
/* ====================== Медиа: мобилки (≤867px) ====================== */
@media only screen and (max-width: 867px) { /* медиа-правило */
/* Логотип — маленький и по центру по Y */
.navbar-brand { padding: 6px 0 !important; }
.navbar-brand img { max-height: 34px; position: static; top: auto; }

/* Кнопка бургер (совместимость со старыми селекторами) */
.navbar-default .navbar-toggle { /* селектор */
border-color: #ffff00 !important; /* цвет рамки */
border: 1px solid transparent; /* рамка (сокращённо) */
border-radius: 0; /* скругление углов */
} /* конец блока */
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus { background: #cc0000; }
.navbar-default .navbar-toggle .icon-bar { background-color: #ffffff; }

/* Ссылки в раскрытом меню (главные пункты) */
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a.nav-link { /* селектор */
color: #ffffff; /* цвет текста */
font-size: 16px; /* размер шрифта */
padding: 15px 15px; /* внутренние отступы */
text-align: right; /* выравнивание текста */
border-bottom: 2px solid #333333; /* нижняя рамка */
background: #666666; /* фон (сокращённо) */
margin: 0; /* внешние отступы */
line-height: 1.2; /* межстрочный интервал */
} /* конец блока */

.navbar-default .navbar-nav > li.active-link > a,
.navbar-default .navbar-nav > li.active-link > a.nav-link { /* селектор */
background: #333333; /* фон (сокращённо) */
color: #ffff00; /* цвет текста */
} /* конец блока */
.navbar-default .navbar-nav > li.active-link > a:hover,
.navbar-default .navbar-nav > li.active-link > a.nav-link:hover { /* селектор */
background: #333333; /* фон (сокращённо) */
color: #ffff66; /* цвет текста */
} /* конец блока */
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a.nav-link:hover { /* селектор */
background: #333333; /* фон (сокращённо) */
color: #ffff00; /* цвет текста */
} /* конец блока */

/* Дадим «воздух» логотипу и бургеру… */
.navbar .container { /* селектор */
padding-left: 12px;  /* левый внутренний отступ */
padding-right: 12px; /* правый внутренний отступ */
} /* конец блока */
/* …но серое меню растянем в край, компенсируя паддинги контейнера */
.navbar-collapse { /* селектор */
background-color: #666666; /* цвет фона */
border-top: 0; /* верхняя рамка */
margin-left: -12px;  /* левый внешний отступ */
margin-right: -12px; /* правый внешний отступ */
padding-left: 0;      /* внутренние паддинги не нужны */
padding-right: 0; /* правый внутренний отступ */
} /* конец блока */

.navbar-nav { margin-left: 0; margin-right: 0; }


/* Dropdown состояния (open → show) и фон */
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus { color: #ffffff; }

.navbar-default .navbar-nav > .show > a,
.navbar-default .navbar-nav > .show > a:hover,
.navbar-default .navbar-nav > .show > a:focus { /* селектор */
background: #333333; /* фон (сокращённо) */
color: #666666; /* цвет текста */
} /* конец блока */
.nav .show > a, .nav .show > a:hover, .nav .show > a:focus { border-color: #999999; }
.navbar-default .navbar-nav .show .dropdown-menu > li > a { color: #333333; }

/* Подменю (мобилка) */
.dropdown-menu { text-align: right; background-color: #999999; border: 0; border-radius: 0; margin: 0; padding: 0; }
.navbar-nav .dropdown-menu .dropdown-item { padding: 12px 25px; color: #333333; }
.navbar-nav .dropdown-menu .dropdown-item:hover { background-color: #ff3333; color: #ffffff; }
/* Разделители подменю (мобилка) */
.dropdown-menu .dropdown-divider { border-top: 1px solid #000000 !important; }


/* Иные мобильные правки */
.price-table p { font-size: 12px; line-height: 1.2; }
.tech-table p { font-size: 9px; margin: 0; line-height: 1.1; }
.tech-table > tbody > tr > td { padding: 1px; vertical-align: middle; }
.table-middle > tbody > tr > td { vertical-align: middle; }

h1, .h1 { font-size: 25px; margin: 0 0 10px; }
h2, .h2 { font-size: 22px; margin: 0 0 10px; }
h3, .h3 { font-size: 18px; margin: 5px 0; }
h4, .h4 { font-size: 16px; margin: 5px 0; }

.modal-user-option p { margin: -3px; font-size: 12px; }

.index-content-1 { padding: 15px; }
.index-content-2 { padding: 15px; }
.index-content-6 { padding: 2px 15px 2px 10px; }

.img-boiler-in-hat { height: 250px; width: 236px; }
.img-made-in-kz   { height: 267px; width: 200px; }

/* кругляшки слайдера */
.carousel-indicators .active { width: 9px; height: 9px; }
.carousel-indicators li { width: 7px; height: 7px; }
.carousel-indicators { bottom: 0; }

/* intro images для мобилки */
.menu-carousel .item { padding-top: 50%; }
.intro-img1 { background-image: url(../img/intro_img1_767.jpg); }
.caption-intro-1 { display: none; }
.intro-img2 { background-image: url(../img/intro_img2_767.jpg); }
.caption-intro-2 { display: none; }
.intro-img3 { background-image: url(../img/intro_img3_767.jpg); }
.caption-intro-3 { display: none; }
.intro-img4 { background-image: url(../img/intro_img4_767.jpg); }
.caption-intro-4 { display: none; }

/* отображение строки "меню" на мобилке */
.hidden-stroke { /* селектор */
display: flex; /* тип отображения */
justify-content: flex-end; /* выравнивание блока вправо */
align-items: center; /* выравнивание по поперечной оси */
margin: 0; /* внешние отступы */
padding-right: 0px;       /* отступ от правого края экрана */
height: 40px; /* высота */
color: #ff6666; /* цвет текста */
} /* конец блока */

.hidden-stroke h3 { /* селектор */
color: #ff6666; /* цвет текста */
font-size: 16px; /* размер шрифта */
font-weight: normal; /* начертание шрифта */
margin: 0; /* внешние отступы */
position: relative; /* позиционирование */
right: 0px;               /* точно центрирует слово относительно бургера */
top: 0px; /* смещение сверху */
} /* конец блока */
.no-underline { text-decoration: none; }
} /* конец блока */


/* Нижнее меню */
#bottom-menu .nav { /* селектор */
justify-content: center; /* выравнивание по основной оси */
align-items: center; /* выравнивание по поперечной оси */
flex-wrap: wrap; /* свойство CSS */
} /* конец блока */

#bottom-menu .nav-label { /* селектор */
font-weight: 600; /* начертание шрифта */
} /* конец блока */

/* единые правила для элементов */
#bottom-menu .nav-link,
#bottom-menu .nav-label { /* селектор */
display: inline-flex; /* тип отображения */
align-items: center; /* выравнивание по поперечной оси */
line-height: 1.4; /* межстрочный интервал */
padding: .25rem 0;            /* вертикальные отступы */
} /* конец блока */

#bottom-menu .nav-link { /* селектор */
color: #0054a6;               /* твой цвет ссылки */
text-decoration: none; /* оформление текста (подчёркивание) */
} /* конец блока */
#bottom-menu .nav-link:hover { /* селектор */
text-decoration: underline; /* оформление текста (подчёркивание) */
} /* конец блока */

#bottom-menu .nav-item + .nav-item { /* селектор */
position: relative; /* позиционирование */
margin-left: .75rem; /* левый внешний отступ */
padding-left: .75rem; /* левый внутренний отступ */
} /* конец блока */

/* рисуем палочку псевдоэлементом */
#bottom-menu .nav-item + .nav-item::before { /* селектор */
content: ""; /* содержимое псевдоэлемента */
position: absolute; /* позиционирование */
left: 0; /* смещение слева */
top: 25%;                     /* палочка будет начинаться чуть ниже верха */
height: 50%;                  /* ← высота палочки — половина строки */
border-left: 1px solid rgba(0,0,0,.45); /* левая рамка */
} /* конец блока */

/* на узких экранах убираем палочки, чтобы переносы были мягкими */
@media (max-width: 420px) { /* медиа-правило */
#bottom-menu .nav-item + .nav-item { /* селектор */
border-left: none; /* левая рамка */
margin-left: .5rem; /* левый внешний отступ */
padding-left: .5rem; /* левый внутренний отступ */
} /* конец блока */
} /* конец блока */