/* ============================================================
   silico-custom.css — накладные правки внешности поверх темы Prostore.
   Тему (app.min.css) НЕ трогаем (защита IonCube) — этот файл подключается
   ПОСЛЕ неё через OCMOD в header.twig и перекрывает нужные правила.

   Задача (Aweb, «перед переносом», п.1): на мобильных у трёх блоков темы
   вместо горизонтальной прокрутки с видимой полосой — перенос в несколько
   строк (как на десктопе). На десктопе (>1199px) тема и так переносит,
   поэтому правки ограничены брейкпоинтом мобилы/планшета.
   ============================================================ */

/* --- Общее: до 1199px тема включает у этих блоков nowrap+overflow-x:auto --- */
@media (max-width: 1199px) {

	/* 1. Хлебные крошки: тема ставит flex-wrap:nowrap; white-space:nowrap;
	   overflow-x:auto; min-width:100vw — из-за этого длинная цепочка уезжает
	   в горизонтальный скролл. Возвращаем перенос. */
	.breadcrumbs__menu {
		-ms-flex-wrap: wrap !important;
		flex-wrap: wrap !important;
		white-space: normal !important;
		overflow-x: visible !important;
		min-width: 0 !important;
	}

	/* 2. Вкладки карточки товара (Описание/Характеристики/Отзывы/Вопросы):
	   тема — white-space:nowrap; overflow-x:auto. Переносим лентой в 2 ряда,
	   но текст внутри каждой кнопки не ломаем. */
	.details__control-menu {
		-ms-flex-wrap: wrap !important;
		flex-wrap: wrap !important;
		white-space: normal !important;
		overflow-x: visible !important;
	}
	.details__control-menu .details__control-btn {
		white-space: nowrap;
	}

	/* 2b. Та же лента вкладок в компактном (верхнем) виде карточки товара —
	   отдельный класс sku__compact-control-menu, тоже nowrap+overflow-x:auto. */
	.sku__compact-control-menu {
		-ms-flex-wrap: wrap !important;
		flex-wrap: wrap !important;
		white-space: normal !important;
		overflow-x: visible !important;
	}
	.sku__compact-control-menu .sku__compact-control-btn {
		white-space: nowrap;
	}

	/* 3. Плитки подкатегорий вверху категории (.products-categories__grid):
	   тема — flex; overflow-x:auto (одна прокручиваемая строка). Убираем
	   прокрутку, разрешаем перенос. */
	.products-categories__grid {
		-ms-flex-wrap: wrap !important;
		flex-wrap: wrap !important;
		overflow-x: visible !important;
	}

	/* 4. Лента вкладок товарных блоков главной («Рекомендуемые | Вы смотрели»):
	   тема — display:flex; overflow-x:auto, причём полоса прокрутки скрыта
	   (::-webkit-scrollbar{display:none}). На 375px лента занимает 459px, то
	   есть вторая вкладка уезжает за край экрана и посетитель не догадывается,
	   что она есть. Переносим кнопки во второй ряд. */
	.products-featured__filter {
		-ms-flex-wrap: wrap !important;
		flex-wrap: wrap !important;
		overflow-x: visible !important;
		row-gap: 8px;
	}
}

/* --- Плитки подкатегорий на мобильных: каждая на всю ширину окна, друг под
   другом, с вертикальным зазором; текст внутри — тоже на всю ширину плитки. ---
   Тема на ≤1199px даёт плитке фикс. ширину 24.8rem (~248px). На телефоне
   растягиваем плитку на всю ширину ряда (flex-basis 100%), высота — по
   содержимому (направление ряда не меняем, поэтому 100% = ширина, а не высота). */
@media (max-width: 767px) {
	.products-categories .products-categories__grid > li {
		-ms-flex: 0 0 100% !important;
		flex: 0 0 100% !important;
		max-width: 100% !important;
		width: 100% !important;
		/* тема даёт плитке margin-right:1rem — вместе с width:100% это выходит
		   за пределы вьюпорта (100% + 1rem) и уводит страницу вправо. Обнуляем. */
		margin-right: 0 !important;
	}
	/* вертикальный интервал между плитками (у первой сверху не нужен) */
	.products-categories .products-categories__grid > li + li {
		margin-top: 1.2rem !important;
	}
	/* текст-название на всю ширину плитки, с переносом длинных имён */
	.products-categories__item,
	.products-categories__item-title {
		width: 100% !important;
		max-width: 100% !important;
		white-space: normal !important;
		overflow-wrap: break-word;
		word-break: break-word;
	}
	/* страховка: контейнер плиток не выходит за ширину вьюпорта */
	.products-categories,
	.products-categories__grid {
		max-width: 100% !important;
	}
}

/* --- Главная, мобильные: товарные блоки сеткой 2×2 вместо карусели ---
   «Новинки» и «Лидеры продаж» тема выводит горизонтальным Swiper: на телефоне
   видно одну карточку из четырёх. silico-custom.js снимает у этих блоков класс
   js-swiper-products (до инициализации Swiper) и вешает .silico-grid2 — то есть
   инлайн-стилей Swiper на разметке нет, и её можно спокойно разложить сеткой.
   Блоки «Рекомендуемые / Вы смотрели» устроены иначе (обычный ul.products__list,
   тема даёт по одной карточке в ряд) — им отдельное правило ниже.
   Итог: все четыре блока одинаковые, 4 товара = 2 ряда. */
@media (max-width: 767px) {
	/* карусельные блоки (Новинки, Лидеры продаж) */
	.silico-grid2 {
		overflow: visible !important;   /* у .swiper-container стоит overflow:hidden */
	}
	.silico-grid2 > .swiper-wrapper {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		transform: none !important;     /* страховка от остатков позиционирования Swiper */
	}
	.silico-grid2 > .swiper-wrapper > .swiper-slide {
		width: auto !important;         /* ширину задаёт колонка грида */
		margin: 0 !important;           /* Swiper ставил бы здесь spaceBetween */
	}
	.silico-grid2 .swiper-scrollbar {
		display: none !important;       /* полоса прокрутки каруселью больше не нужна */
	}

	/* блок вкладок (Рекомендуемые / Вы смотрели): у темы li = 100% ширины,
	   переводим в две колонки тем же шагом, что и грид выше */
	.products-featured__content .products__list {
		margin: 0 -0.5rem -1rem !important;
	}
	.products-featured__content .products__list > li {
		-ms-flex: 0 0 50% !important;
		flex: 0 0 50% !important;
		max-width: 50% !important;
		padding: 0 0.5rem 1rem !important;
	}
}

/* --- Пагинация на мобильных: прижать к левому краю ровным шагом ---
   Тема даёт .pagination { flex:1 } — лента растягивается на всю ширину, и
   элементы разъезжаются; при переносе нижний ряд выглядит смещённым. Убираем
   растяжение, задаём одинаковый зазор (gap) и упаковку влево (flex-start),
   чтобы перенесённые ряды вставали ровно под первым. */
@media (max-width: 767px) {
	.container-pagination .pagination,
	.container-pagination .pagination__menu {
		/* лента — ровно на ширину контейнера, чтобы элементы переносились у
		   правого края (а не уезжали за вьюпорт), и не растягивались */
		-ms-flex: 1 1 100% !important;
		flex: 1 1 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		-ms-flex-pack: start !important;
		justify-content: flex-start !important;
		gap: 0.8rem 0.6rem !important;   /* ряд / колонка */
	}
	.container-pagination .pagination > li {
		-ms-flex: 0 0 auto !important;
		flex: 0 0 auto !important;
		margin: 0 !important;
	}
}

/* --- Главная: скрыть блок «Как мы делаем формы» (4 шага + видео) на мобильных ---
   Это раздел .process внутри кастомной главной .silico-home. На малых экранах
   пошаговый блок с видео громоздкий — убираем (десктоп не трогаем). */
@media (max-width: 767px) {
	.silico-home .process {
		display: none !important;
	}
}

/* --- Блок «Похожие категории» (Aweb п.2, перелинковка) — карточки с иконкой ---
   Генерируется в контроллере категории и выводится в .seo__desc внизу страницы.
   Внутри .editor у темы есть свои стили ссылок/типографики — критичные свойства
   ставим с !important, чтобы не переопределялись. */
.silico-rel { margin: 28px 0 8px; }
.silico-rel__title {
	font-size: 19px; font-weight: 700; color: #1f2c3a; margin: 0 0 14px;
	display: flex; align-items: center; gap: 10px;
}
.silico-rel__title::before {
	content: ""; width: 5px; height: 22px; border-radius: 3px; background: #2b8fd6; flex: 0 0 auto;
}
.silico-rel__grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px;
}
.silico-rel__item {
	display: flex !important; align-items: center; gap: 12px;
	text-decoration: none !important; color: #1f2c3a !important;
	background: #fff !important; border: 1px solid #e3e9ef !important; border-radius: 14px;
	padding: 12px 14px; box-shadow: 0 2px 10px rgba(20,60,100,.07);
	transition: .18s;
}
.silico-rel__item:hover {
	border-color: #2b8fd6 !important; transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(43,143,214,.18);
}
.silico-rel__ic {
	flex: 0 0 42px; height: 42px; border-radius: 12px; background: #eaf4fc;
	display: flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1;
}
.silico-rel__tx { display: flex; flex-direction: column; min-width: 0; }
.silico-rel__nm { font-weight: 600; font-size: 14px; line-height: 1.25; }
.silico-rel__ct { color: #7a8896; font-size: 12.5px; }
@media (max-width: 640px) {
	.silico-rel__grid { grid-template-columns: 1fr 1fr; }
	.silico-rel__item { flex-direction: column; text-align: center; gap: 8px; padding: 14px 8px; }
	.silico-rel__tx { align-items: center; }
}

/* --- Aweb: кнопка «Сбросить» фильтр — приглушить ---
   Тема красит её и иконку ярко-красным (#F0164A/#F45656), из-за чего кажется,
   что фильтры уже выбраны. Делаем спокойно-серой (как вторичное действие). */
.filter-aside__reset,
.filter-aside__reset svg.icon-reset {
	color: #9aa5b1 !important;
}
.filter-aside__reset:hover,
.filter-aside__reset:hover svg.icon-reset {
	color: #6b7785 !important;
}

/* --- Aweb: виджет отзывов Яндекс.Бизнеса на /otzyvy/ (как на silico) --- */
.silico-yreviews { margin: 0 0 24px; }
.silico-yreviews__frame {
	width: 100%; height: 720px; border: 1px solid #e3e9ef; border-radius: 12px;
	background: #fff; display: block;
}
.silico-yreviews__link {
	display: inline-block; margin-top: 12px; color: #2b8fd6; font-weight: 600;
	text-decoration: none;
}
.silico-yreviews__link:hover { text-decoration: underline; }
@media (max-width: 640px) {
	.silico-yreviews__frame { height: 560px; }
}