/* =========================================================================
   mobile.css — адаптив для планшетов и телефонов (v1)

   Файл подключается ПОСЛЕДНИМ (см. functions.php), поэтому переопределяет
   style.css и media.css без !important везде, где это возможно.

   Порядок брейкпоинтов — от широкого к узкому, каскадом:
     0. база (все ширины) — защита от горизонтального скролла
     1. <= 1199px — планшеты в альбомной ориентации
     2. <=  991px — планшеты в портретной ориентации
     3. <=  767px — телефоны
     4. <=  575px — узкие телефоны
     5. <=  380px — самые узкие экраны

   Ключевые исправления, которые касаются не только мобильных:
   жёсткие высоты .feedback{height:825px} и .big-title{height:170px}
   переведены в height:auto — именно из-за них форма заявки наезжала
   на слайдер брендов, а заголовок раздела — на слайдер портфолио.
   ========================================================================= */


/* =========================================================================
   0. БАЗА — действует на всех ширинах
   ========================================================================= */

/* Ни один элемент не должен создавать горизонтальную прокрутку.
   Это лечит п.6 (заголовок каталога выходил за пределы экрана). */
html,
body {
	max-width: 100%;
	overflow-x: hidden;
}

img,
iframe,
video,
table {
	max-width: 100%;
}

/* Длинные слова в заголовках (например «ПРОКЛАДКИ») переносятся,
   а не расталкивают страницу по горизонтали. */
.big-title,
.litle-title,
.litle-bottom-title,
.title h1,
.content .title h2,
.building-solution-heading,
.portfolio-slide__client,
.feedback .title {
	overflow-wrap: anywhere;
	word-break: break-word;
	hyphens: auto;
	max-width: 100%;
}

/* Шапка становится точкой отсчёта для выпадающего мобильного меню. */
.site-header {
	position: relative;
}


/* =========================================================================
   1. <= 1199px — ПЛАНШЕТЫ (альбомная ориентация)
   ========================================================================= */
@media screen and (max-width: 1199.98px) {

	/* ---- Типографика: фиксированные px заменяем на текучие clamp ---- */
	.big-title {
		height: auto;
		font-size: clamp(30px, 8.5vw, 78px);
		line-height: 1.05;
		margin-top: 56px;
		margin-bottom: 24px;
	}

	/* У секции портфолио отступ уже задан собственным padding — не удваиваем */
	.objects .big-title {
		margin-top: 0;
	}

	.we-offer,
	.contacts,
	.products-title,
	.about-company,
	.sentens-heading {
		font-size: clamp(30px, 8.5vw, 78px);
		height: auto;
	}

	.title h1 {
		font-size: clamp(24px, 4.6vw, 44px);
		line-height: 1.15;
		margin-bottom: 28px;
		border-bottom-width: 4px;
	}

	.content .title h2 {
		font-size: clamp(22px, 4vw, 36px);
		line-height: 1.2;
	}

	.litle-title,
	.litle-bottom-title,
	.client,
	.sentens,
	.how-to-find-us {
		font-size: clamp(20px, 3.4vw, 32px);
		margin-bottom: 24px;
		border-bottom-width: 4px;
	}

	/* ---- Форма заявки: снимаем фиксированную высоту 825px ----
	   Это первопричина п.4: содержимое формы на узком экране выше 825px,
	   поэтому оно выходило за границы блока и накладывалось на слайдер
	   брендов и футер. */
	.feedback {
		height: auto;
		min-height: 0;
		padding: 48px 0;
		margin: 40px 0 0;
		overflow: hidden;
	}

	.feedback .title {
		font-size: clamp(26px, 5vw, 46px);
		line-height: 1.2;
		margin-bottom: 24px;
	}

	.feedback p {
		font-size: 16px;
		margin-bottom: 24px;
	}

	.feedback form {
		margin-top: 24px;
	}

	.feedback .form-group {
		margin-bottom: 1.25rem;
	}

	.feedback textarea.form-control {
		height: 160px;
	}

	/* ---- Карточки разделов каталога ----
	   У .building-solution-block жёсткая высота 160px, а у .building-solution-text
	   стоит overflow:hidden — длинные названия («КАБЕЛИ, ПРОВОДА И ИЗДЕЛИЯ ДЛЯ
	   ПРОКЛАДКИ КАБЕЛЯ») просто обрезались. Высота — по содержимому. */
	.building-solution-block {
		height: auto;
		min-height: 150px;
	}

	.building-solution-img,
	.building-solution-img--placeholder {
		width: 170px;
		height: auto;
		min-height: 150px;
		align-self: stretch;
		object-fit: cover;
	}

	.building-solution-text {
		padding: 22px 24px;
		overflow: visible;
		display: flex;
		align-items: center;
	}

	.building-solution-heading {
		font-size: 18px;
		line-height: 1.28;
		margin-bottom: 0;
	}

	/* ---- Портфолио: секция и слайдер ---- */
	.objects {
		margin-top: 50px;
		padding: 50px 0;
	}

	.portfolio-slide__inner {
		min-height: 0;
	}

	/* ---- Карта и контакты: воздух вокруг ---- */
	.call-ft {
		padding: 13px 18px;
		font-size: 13px;
		line-height: 1.25;
	}

	#map {
		height: 380px;
		margin-top: 24px;
	}

	.contacts-row {
		margin-bottom: 32px;
	}
}


/* =========================================================================
   2. <= 991px — ПЛАНШЕТЫ (портретная ориентация) и крупные телефоны
   ========================================================================= */
@media screen and (max-width: 991.98px) {

	/* -------------------------------------------------------------------
	   ШАПКА (п.1) — логотип слева, бургер справа, одной строкой.
	   Было: логотип 220px слева, а .site-header__nav занимал 100% ширины
	   отдельной строкой, из-за чего бургер уезжал в центр.
	   ------------------------------------------------------------------- */
	/* Панель каталога ниже имеет z-index:30 и перекрывала выпадающее меню:
	   пункты были видны наполовину и не нажимались. Поднимаем всю шапку
	   в отдельный слой над панелью. */
	.site-header.menu-hd {
		min-height: 0;
		padding: 12px 0;
		z-index: 50;
	}

	.site-header__inner {
		flex-wrap: wrap;
		align-items: center;
		gap: 12px;
		padding: 0 16px;
	}

	.site-header__logo {
		order: 1;
		flex: 1 1 auto;
		max-width: none;
	}

	.site-header__logo img,
	.custom-logo-link img {
		max-height: 78px;
	}

	.site-header__logo-text {
		font-size: 18px;
	}

	/* Бургер возвращается на свою строку справа от логотипа */
	.site-header__nav {
		order: 2;
		flex: 0 0 auto;
		width: auto;
		position: static;
		padding: 0;
	}

	.site-header__nav .navbar-toggler {
		width: auto;
		padding: 6px 10px;
		margin: 0;
		font-size: 1.5rem;
		line-height: 1;
		border: 1px solid #e3e3e3;
		border-radius: 4px;
	}

	/* Раскрытое меню — выпадающей панелью на всю ширину шапки,
	   а не встроенным блоком, который раздвигает строку с логотипом. */
	.site-header__nav .navbar-collapse {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 60;
		background: #fff;
		border-top: 1px solid #ececec;
		box-shadow: 0 14px 30px rgba(0, 0, 0, .14);
		padding: 6px 16px 12px;
		max-height: 70vh;
		overflow-y: auto;
	}

	.site-header__nav .navbar-nav {
		display: block;
		width: 100%;
		text-align: left;
	}

	.site-header__nav .nav-item {
		margin: 0;
		border-bottom: 1px solid #f2f2f2;
	}

	.site-header__nav .nav-item:last-child {
		border-bottom: none;
	}

	.site-header__nav .nav-link {
		padding: 13px 2px !important;
		font-size: 15px;
	}

	/* Телефон / адрес / кнопка — отдельной строкой под логотипом */
	.site-header__aside {
		order: 3;
		width: 100%;
		margin: 0;
		gap: 14px;
		align-items: center;
		justify-content: space-between;
		padding-top: 10px;
		border-top: 1px solid #f0f0f0;
	}

	.site-header__contacts {
		min-width: 0;
	}

	.site-header__contacts .number,
	.site-header__contacts .street {
		text-align: left;
		width: auto;
		margin: 0;
		float: none;
	}

	.site-header__contacts .number {
		font-size: 16px;
		line-height: 1.25;
	}

	.site-header__contacts .street {
		font-size: 13px;
		line-height: 1.3;
	}

	.menu-hd .call {
		margin: 0;
		float: none;
		padding: 11px 18px;
		font-size: 13px;
		line-height: 1.2;
		white-space: normal;
		text-align: center;
	}

	/* -------------------------------------------------------------------
	   ПАНЕЛЬ КАТАЛОГ / KASPI / ПОИСК (п.1, вторая часть)
	   Было: каталог прижат влево, Kaspi — вправо на следующей строке.
	   Стало: два равных блока в строку, поиск — во всю ширину под ними.
	   ------------------------------------------------------------------- */
	.shop-bar__inner {
		flex-wrap: wrap;
		gap: 10px;
		padding: 12px 16px;
	}

	.catalog-menu {
		order: 1;
		flex: 1 1 0;
		min-width: 0;
	}

	.catalog-menu__button {
		width: 100%;
		justify-content: center;
		padding: 12px 14px;
		font-size: 13px;
		white-space: normal;
		line-height: 1.2;
	}

	.shop-bar__kaspi {
		order: 2;
		flex: 1 1 0;
		min-width: 0;
		margin-left: 0;
		justify-content: center;
		padding: 12px 14px;
		font-size: 13px;
		white-space: normal;
		line-height: 1.2;
		text-align: center;
	}

	.shop-search {
		order: 3;
		flex: 1 1 100%;
		width: 100%;
	}

	/* Выпадающее меню каталога — не абсолютной панелью поверх контента,
	   а раскрывающимся списком в потоке: на узком экране так надёжнее. */
	.catalog-menu__dropdown {
		position: static;
		width: 100%;
		min-width: 0;
		max-width: none;
		margin-top: 10px;
		box-shadow: none;
		max-height: 65vh;
		overflow-y: auto;
	}

	/* -------------------------------------------------------------------
	   ГЛАВНЫЙ БАННЕР — снимаем position:absolute и margin-top:438px.
	   Две фото-плашки становятся полосой, карточки идут под ними в потоке.
	   ------------------------------------------------------------------- */
	.bg-general {
		position: static;
		flex-direction: column;
		height: auto;
	}

	.left,
	.right {
		width: 100%;
		height: 200px;
		background-size: cover;
		background-position: center;
	}

	.container-general {
		margin-top: -40px;
	}

	.block-l,
	.block-r {
		position: relative;
		height: auto;
		min-height: 0;
		margin: 0 0 16px;
		border-radius: 12px;
		overflow: hidden;
	}

	.block-l-b,
	.block-r-b {
		padding-left: 15px;
		padding-right: 15px;
	}

	.header-cl {
		padding: 24px 60px 24px 24px;
	}

	.text-header {
		font-size: 18px;
		line-height: 1.25;
		margin-bottom: 8px;
	}

	.text-s {
		font-size: 14px;
		line-height: 1.45;
		margin-bottom: 0;
	}

	/* Стрелка позиционируется внутри своей карточки, а не контейнера */
	.arrow {
		right: 20px;
		bottom: auto;
		top: 24px;
	}

	/* -------------------------------------------------------------------
	   ПОЛОСА ПРЕИМУЩЕСТВ — 2 колонки вместо растянутой строки
	   ------------------------------------------------------------------- */
	.perks-bar {
		padding: 24px 16px;
	}

	.perks-bar .perk {
		flex: 1 1 calc(50% - 20px);
		margin: 8px;
		gap: 12px;
	}

	.perks-bar .perk i {
		font-size: 26px;
	}

	/* -------------------------------------------------------------------
	   КАТАЛОГ РАЗДЕЛОВ (п.2) — сетка компактных карточек.
	   Было: одна карточка на строку, картинка 100% × 160px, из-за чего
	   фото кадрировалось узкой полосой. Стало: сетка 2 × N, картинка
	   в пропорции 4:3 — кадрирование минимально.
	   ------------------------------------------------------------------- */
	.catalog-sections {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
		margin-left: 0;
		margin-right: 0;
	}

	.catalog-sections__col {
		width: 100%;
		max-width: none;
		flex: none;
		padding: 0;
	}

	.catalog-sections__col > a {
		display: block;
		height: 100%;
	}

	.catalog-sections .building-solution-block {
		flex-direction: column;
		height: 100%;
		margin-bottom: 0;
		border-radius: 12px;
	}

	.catalog-sections .building-solution-img,
	.catalog-sections .building-solution-img--placeholder {
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
		object-fit: cover;
		object-position: center;
		flex: none;
	}

	.catalog-sections .building-solution-img--placeholder {
		display: flex;
		font-size: 32px;
	}

	.catalog-sections .building-solution-text {
		padding: 14px 16px 18px;
		flex: 1 1 auto;
		display: flex;
		align-items: center;
	}

	.catalog-sections .building-solution-heading {
		font-size: 14px;
		line-height: 1.3;
		margin-bottom: 0;
	}

	/* Убираем hover-подъём: на тач-экранах он «залипает» после тапа */
	.catalog-sections .building-solution-block:hover {
		transform: none;
	}

	/* -------------------------------------------------------------------
	   ПОРТФОЛИО — секция и слайдер

	   ВАЖНО: в media.css у .objects задан top:220px при position:relative.
	   Такой сдвиг двигает секцию визуально, но не меняет её место в потоке,
	   поэтому следующий раздел («КОНТАКТЫ») оказывался под слайдером —
	   это и есть причина наложения из п.3. Сбрасываем смещение.
	   ------------------------------------------------------------------- */
	.objects {
		top: 0;
		left: 0;
	}

	.v380-slider--full {
		padding: 0 56px;
	}

	.v380-slider--full .v380-slider__arrow--prev {
		left: 6px;
	}

	.v380-slider--full .v380-slider__arrow--next {
		right: 6px;
	}

	.portfolio-slide__inner {
		flex-direction: column;
	}

	.portfolio-slide__info {
		flex: none;
		padding: 28px 24px;
	}

	.portfolio-slide__client {
		font-size: 20px;
		margin-bottom: 18px;
	}

	/* -------------------------------------------------------------------
	   КОНТАКТЫ / КАРТА / ФУТЕР
	   ------------------------------------------------------------------- */
	.call-ft {
		float: none;
		margin: 12px 0 0;
		display: inline-block;
	}

	.footer {
		height: auto;
		padding: 28px 16px 32px;
	}

	.ftr-cp {
		justify-content: flex-start;
		flex-wrap: wrap;
		gap: 8px 20px;
		padding-left: 0;
	}

	/* -------------------------------------------------------------------
	   ВНУТРЕННИЕ СТРАНИЦЫ
	   ------------------------------------------------------------------- */
	.page_bg {
		height: 48px;
		margin-bottom: 28px;
	}

	.content img {
		margin: 12px 0;
		height: auto;
	}
}


/* =========================================================================
   3. <= 767px — ТЕЛЕФОНЫ
   ========================================================================= */
@media screen and (max-width: 767.98px) {

	/* ---- Базовая типографика (п.5) ---- */
	body {
		font-size: 15px;
		line-height: 1.55;
	}

	.container,
	.container-fluid {
		padding-left: 16px;
		padding-right: 16px;
	}

	.big-title,
	.we-offer,
	.contacts,
	.products-title,
	.about-company {
		font-size: clamp(28px, 9.5vw, 46px);
		margin-top: 44px;
		margin-bottom: 18px;
	}

	.objects .big-title {
		margin-top: 0;
	}

	.title h1 {
		font-size: clamp(22px, 6.4vw, 32px);
		margin-bottom: 22px;
	}

	.content .title h2 {
		font-size: clamp(20px, 5.6vw, 28px);
	}

	.content h3 {
		font-size: 18px;
		margin: 22px 0 12px;
	}

	.content h5.stage {
		font-size: 18px;
	}

	.litle-title,
	.litle-bottom-title,
	.client,
	.how-to-find-us {
		font-size: clamp(18px, 5.4vw, 26px);
		margin-bottom: 18px;
	}

	.litle-bottom-title--brands {
		font-size: 15px;
		margin-bottom: 20px;
	}

	.bx-breadcrumb-item-link,
	.bx-breadcrumb-item-text {
		font-size: 13px;
	}

	/* ---- Шапка: телефон и кнопка в столбик ---- */
	.site-header__aside {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.site-header__contacts .number,
	.site-header__contacts .street {
		text-align: center;
	}

	.menu-hd .call {
		display: block;
		width: 100%;
	}

	/* ---- Панель магазина: каталог и Kaspi в столбик, во всю ширину ---- */
	.catalog-menu,
	.shop-bar__kaspi {
		flex: 1 1 100%;
	}

	.shop-bar__kaspi {
		border-radius: 6px;
	}

	.catalog-menu__button,
	.shop-bar__kaspi {
		font-size: 14px;
		padding: 13px 16px;
	}

	/* ---- Баннер: фото-полоса ниже, карточки в столбик ---- */
	.left,
	.right {
		height: 180px;
	}

	.header-cl {
		padding: 20px 56px 20px 20px;
	}

	/* ---- Преимущества: один столбец ---- */
	.perks-bar .perk {
		flex: 1 1 100%;
		margin: 6px 0;
	}

	/* ---- Каталог разделов: сетка остаётся 2 колонки ---- */
	.catalog-sections {
		gap: 12px;
	}

	.catalog-sections .building-solution-text {
		padding: 12px 12px 14px;
	}

	.catalog-sections .building-solution-heading {
		font-size: 13px;
	}

	/* -------------------------------------------------------------------
	   ПОРТФОЛИО (п.3) — стрелки уезжают из-под картинки вниз.
	   Порядок в разметке: стрелка «назад», вьюпорт, стрелка «вперёд»,
	   точки (создаются скриптом). Через order собираем строку управления
	   под слайдом, а картинке отдаём всю ширину.
	   ------------------------------------------------------------------- */
	.v380-slider,
	.v380-slider--full {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 0 12px;
		padding: 0 16px;
	}

	.v380-slider__viewport,
	.v380-slider__track {
		order: 1;
		flex: 1 1 100%;
		width: 100%;
	}

	.v380-slider__arrow,
	.v380-slider--full .v380-slider__arrow {
		position: static;
		transform: none;
		left: auto;
		right: auto;
		flex: 0 0 auto;
		width: 42px;
		height: 42px;
		font-size: 18px;
		margin-top: 18px;
		background: rgba(0, 0, 0, .5);
	}

	.v380-slider__arrow--prev {
		order: 2;
	}

	.v380-slider__dots {
		order: 3;
		flex: 0 1 auto;
		margin: 18px 0 0;
	}

	.v380-slider__arrow--next {
		order: 4;
	}

	/* Слайд-карточка: аккуратная пропорция вместо растянутого фото */
	.objects {
		margin-top: 32px;
		padding: 36px 0;
	}

	.portfolio-slide__inner {
		border-radius: 12px;
	}

	.portfolio-slide--photo .portfolio-slide__inner {
		max-width: 100%;
	}

	.portfolio-slide__media {
		height: auto;
		aspect-ratio: 4 / 3;
		padding: 0;
	}

	.portfolio-slide__img {
		width: 100%;
		height: 100%;
		max-width: 100%;
		max-height: none;
		object-fit: cover;
		box-shadow: none;
	}

	.portfolio-slide__placeholder {
		height: 100%;
	}

	.portfolio-slide__info {
		padding: 22px 20px;
	}

	/* Бренды: два логотипа в кадре */
	.v380-slider--brands .v380-slider__slide {
		flex: 0 0 calc((100% - 20px) / 2);
	}

	.brands-strip {
		padding: 32px 0 40px;
	}

	/* ---- Контакты и карта: не вплотную (п.3, вторая часть) ---- */
	.contacts-row {
		margin-bottom: 28px;
		row-gap: 12px;
	}

	.info-ft,
	.info-ft--fixed {
		width: auto;
		max-width: none;
		margin-left: 0;
		text-align: left;
	}

	.number-ft {
		font-size: 22px;
		margin-top: 0;
	}

	.street-ft {
		font-size: 15px;
	}

	.call-ft {
		display: block;
		width: 100%;
		text-align: center;
		margin: 4px 0 0;
		padding: 14px 20px;
	}

	#map {
		height: 300px;
		margin-top: 28px;
		margin-bottom: 8px;
	}

	/* -------------------------------------------------------------------
	   ФОРМА ЗАЯВКИ (п.4) — вся высота по содержимому, кнопка во всю ширину
	   ------------------------------------------------------------------- */
	.feedback {
		padding: 36px 0 40px;
		margin: 32px 0 0;
	}

	.feedback__container {
		padding-left: 16px;
		padding-right: 16px;
	}

	.feedback .title {
		font-size: clamp(24px, 7vw, 34px);
		line-height: 1.2;
		margin-bottom: 18px;
		padding-bottom: 8px;
		border-bottom-width: 4px;
	}

	.feedback p {
		font-size: 15px;
		margin-bottom: 20px;
	}

	.feedback form {
		margin-top: 20px;
	}

	.feedback .form-control {
		font-size: 16px; /* 16px — чтобы iOS не зумил страницу при фокусе */
		height: calc(1.6em + .75rem + 2px);
	}

	.feedback textarea.form-control {
		height: 130px;
	}

	.feedback .form-group {
		margin-bottom: 1rem;
	}

	.feedback .btn-danger {
		float: none;
		display: block;
		width: 100%;
		margin-top: 8px;
		padding: .95rem 1rem !important;
		font-size: 16px;
	}

	/* Contact Form 7: колонки формы в один столбец, капча не распирает блок */
	.feedback .wpcf7 .row > [class*="col-"] {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.feedback .wpcf7-form-control-wrap {
		display: block;
		width: 100%;
	}

	.feedback .g-recaptcha,
	.feedback .wpcf7 iframe {
		max-width: 100%;
	}

	.feedback .g-recaptcha > div {
		max-width: 100%;
	}

	/* ---- Футер: копирайт и меню в столбик, по центру ---- */
	.footer {
		padding: 24px 16px 28px;
		text-align: center;
	}

	.ppb {
		text-align: center;
		margin-bottom: 12px;
	}

	.ftr-cp {
		flex-direction: column;
		align-items: center;
		gap: 10px;
		margin: 0;
	}

	.list-ft,
	.list-in {
		font-size: 14px;
	}

	/* ---- Каталог товаров и карточка товара ---- */
	.catalog-toolbar {
		padding: 12px;
	}

	.catalog-toolbar__row {
		gap: 10px;
	}

	.catalog-toolbar__controls {
		gap: 12px;
	}

	.product-detail__price {
		font-size: 26px;
	}

	.product-gallery__main img,
	.product-detail__slide img {
		max-height: 280px;
	}

	.product-gallery__main--placeholder,
	.product-detail__slide--placeholder {
		height: 240px;
	}

	.product-detail__char-table td {
		padding: 9px 10px;
		font-size: 14px;
	}
}


/* =========================================================================
   4. <= 575px — УЗКИЕ ТЕЛЕФОНЫ
   ========================================================================= */
@media screen and (max-width: 575.98px) {

	/* Отменяем старое правило из media.css, растягивавшее бургер на 100% */
	.navbar-light .navbar-toggler,
	.navbar-toggler {
		width: auto;
		font-size: 1.5rem;
	}

	.site-header__logo img,
	.custom-logo-link img {
		max-height: 66px;
	}

	.left,
	.right {
		height: 160px;
	}

	.container-general {
		margin-top: -30px;
	}

	/* Каталог товаров: одна колонка — карточка товара информативнее сетки */
	.catalog-products--grid,
	.catalog-main .catalog-products--grid {
		grid-template-columns: 1fr;
	}

	/* Разделы каталога на главной остаются сеткой 2 × N */
	.catalog-sections {
		gap: 10px;
	}

	.v380-slider--full {
		padding: 0 12px;
	}

	.list {
		font-size: 15px;
	}

	.perks-bar .perk .perk-title {
		font-size: 13px;
	}

	.perks-bar .perk .perk-desc {
		font-size: 12px;
	}
}


/* =========================================================================
   5. <= 380px — САМЫЕ УЗКИЕ ЭКРАНЫ
   ========================================================================= */
@media screen and (max-width: 380px) {

	.site-header__inner,
	.shop-bar__inner {
		padding-left: 12px;
		padding-right: 12px;
	}

	.container,
	.container-fluid,
	.feedback__container {
		padding-left: 12px;
		padding-right: 12px;
	}

	.catalog-sections .building-solution-heading {
		font-size: 12px;
	}

	/* Контейнер сузили до 12px, а у .row отрицательные поля -15px —
	   строка вылезала бы на 3px за экран. Приводим гуттеры в соответствие. */
	.row {
		margin-left: -12px;
		margin-right: -12px;
	}

	.row > [class*="col-"] {
		padding-left: 12px;
		padding-right: 12px;
	}

	.catalog-sections {
		margin-left: 0;
		margin-right: 0;
	}

	.catalog-sections__col {
		padding-left: 0;
		padding-right: 0;
	}

	.catalog-menu__button,
	.shop-bar__kaspi {
		font-size: 13px;
		padding: 12px 10px;
	}

	/* Виджет reCAPTCHA имеет фиксированную ширину 302px — ужимаем,
	   иначе он распирает форму и создаёт горизонтальную прокрутку. */
	.feedback .g-recaptcha,
	.feedback .wpcf7-recaptcha {
		transform: scale(.88);
		transform-origin: left top;
		margin-bottom: -12px;
	}
}


/* =========================================================================
   6. ТАЧ-УСТРОЙСТВА — убираем hover-эффекты, которые «залипают» после тапа
   ========================================================================= */
@media (hover: none) {

	.building-solution-block:hover,
	.catalog-sections .building-solution-block:hover {
		transform: none;
		box-shadow: 0 14px 34px -16px rgba(0, 0, 0, .45);
	}

	.shop-bar__kaspi:hover {
		transform: none;
	}

	/* Многоуровневое меню каталога раскрывается по клику (класс is-open
	   ставит скрипт), а не по наведению — иначе первый тап «проваливается». */
	.catalog-menu__item:hover > .catalog-mega {
		display: none;
	}

	.catalog-menu__item.is-open > .catalog-mega {
		display: block;
	}
}