/* ============================================================
   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; }
}

/* ============================================================
   ПОЧТА В ШАПКЕ — верхняя строка, справа от телефонов
   Добавлено 2026-09-05, переделано в тот же день по замечаниям.

   Разметка — в шаблоне темы:
     catalog/view/theme/prostore/template/common/header_3.twig
   (вариант шапки №3 — настройка theme_prostore_header_type = 3;
    при её смене блок нужно перенести в соответствующий header_N.twig).

   УСТРОЙСТВО. В строке виден основной адрес sales@silico.ru, а полный
   список из трёх адресов раскрывается по наведению — ровно так же, как
   устроены телефоны рядом («Поддержка +7 (499)…» плюс список).
   Место под длинную надпись освободило снятие max-width у левой группы
   шапки — см. блок «Ширина левой группы шапки» ниже.

   ПОЧЕМУ СВОИ КЛАССЫ, А НЕ .header__call ТЕМЫ.
   Выпадашку телефонов Prostore открывает классом .is-open, который вешает
   её собственный JS на свои блоки. Копия .header__call осталась бы мёртвой.
   Наш блок работает на чистом CSS: :hover плюс :focus-within (последнее
   раскрывает список при переходе табом с клавиатуры). JS не нужен.
   ============================================================ */

/* Верхняя строка шапки существует только на десктопе — тема прячет
   .header__desktop до 1199px. На мобильных адрес доступен в выдвижном меню,
   в блоке «Поддержка в мессенджере» (там же заменена демо-заглушка
   Prostore mail@mail.ru на реальный sales@silico.ru). */
.silico-mail { display: none; }

@media (min-width: 1199px) {

	.silico-mail {
		display: -ms-flexbox;
		display: flex;
		-ms-flex-align: center;
		align-items: center;
		position: relative;      /* система координат для выпадающего списка */
		height: 3.5rem;          /* как у пунктов .header__info-link по соседству */
		margin: 0 0 0 1.6rem;    /* компактнее шага меню (2.5rem): бережём ширину строки */
		white-space: nowrap;
	}

	/* Кнопка-триггер. <button>, а не ссылка: адреса теперь все в списке,
	   а кнопка получает фокус по Tab — за счёт этого :focus-within
	   раскрывает список с клавиатуры без всякого JS. */
	.silico-mail__btn {
		display: -ms-flexbox;
		display: flex;
		-ms-flex-align: center;
		align-items: center;
		height: 100%;
		padding: 0;
		background: none;
		border: 0;
		box-shadow: none;
		color: inherit;
		font: inherit;
		cursor: pointer;
		transition: opacity 0.25s;
	}
	/* ВАЖНО: на наведении НЕ красим текст в var(--theme-primary-color).
	   В этой теме акцент #3498DB почти совпадает с фоном шапки #2E86C1,
	   и надпись на наведении визуально пропадала. Приглушаем прозрачностью. */
	.silico-mail__btn:hover { opacity: 0.75; }

	/* Иконка конверта — готовый спрайт темы, размер как у иконок верхнего меню */
	.silico-mail__btn .icon-social-email {
		display: block;
		width: 1.5rem;
		height: 1.5rem;
		margin: 0 0.8rem 0 0;
		fill: currentColor;
	}

	/* Стрелка — переворачивается, когда список раскрыт */
	.silico-mail__btn .icon-arrow-down {
		display: block;
		width: 1rem;
		height: 1rem;
		margin: 0 0 0 0.6rem;
		fill: currentColor;
		transition: transform 0.25s;
	}
	.silico-mail:hover .silico-mail__btn .icon-arrow-down,
	.silico-mail:focus-within .silico-mail__btn .icon-arrow-down {
		transform: rotate(180deg);
	}

	/* Выпадающий список адресов. Геометрия и тень повторяют
	   .header__call-offcanvas темы, чтобы список почты не отличался
	   от списка телефонов рядом. */
	.silico-mail__list {
		position: absolute;
		top: 100%;
		right: 0;
		z-index: 2100;
		min-width: 100%;
		margin: 0;
		padding: 0.5rem 0;
		list-style: none;
		background: #ffffff;
		border-radius: 0.5rem;
		box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.12);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.25s, visibility 0.25s;
	}
	.silico-mail:hover .silico-mail__list,
	.silico-mail:focus-within .silico-mail__list {
		opacity: 1;
		visibility: visible;
	}

	/* Внутри списка фон белый, поэтому здесь акцент темы читается нормально */
	.silico-mail__link {
		display: block;
		padding: 0.5rem 2rem;
		color: #343434;
		text-decoration: none;
		transition: color 0.25s;
	}
	.silico-mail__link:hover {
		color: var(--theme-primary-color, #3498DB);
		text-decoration: none;
	}
}

/* --- Ширина левой группы шапки -------------------------------------------
   Тема для варианта шапки v3 задаёт:
       .is-header-v3 .header__group--info_call {
           margin: 0 auto 0 23rem; flex: 1; max-width: 80rem;   (это 720px)
       }
   В эти 720px верхнее меню и телефоны и так помещались впритык, а после
   добавления блока почты пункты «Сертификаты» и «Блог» стали переноситься
   на вторую строку — при том, что справа в шапке остаётся пустое место
   (правая группа с валютой и языком на этом сайте не выводится вовсе).

   Снимаем только ограничение ширины; отступ слева (23rem) и flex темы
   не трогаем, чтобы положение меню относительно логотипа не поехало.
   Специфичность селектора та же, что у темы, но наш файл подключается
   после app.min.css — поэтому побеждает. */
@media (min-width: 1199px) {
	.is-header-v3 .header__group--info_call {
		max-width: none;
	}
}

/* ============================================================
   ПОЧТА В МОБИЛЬНОЙ ШАПКЕ — кнопка рядом с трубкой
   Добавлено 2026-09-05. Разметка — в header.twig, блок .silico-mail-m;
   обработчик открытия — в silico-custom.js.

   Тема прячет всю мобильную шапку (.header__mobile) на десктопе, поэтому
   отдельного медиа-запроса для скрытия блока не нужно — он живёт внутри неё.

   Кнопку темы (.header__call-btn) тема прибивает к правому краю шапки
   (position: absolute; right: 0; width: 7.5rem), поэтому вторую кнопку
   нельзя оставить с тем же классом — она легла бы поверх трубки.
   Свой класс, своя позиция: левее трубки ровно на её ширину.
   ============================================================ */
.silico-mail-m__btn {
	position: absolute;
	top: 0;
	right: 7.5rem;          /* ширина кнопки-трубки темы — встаём вплотную слева */
	width: 6rem;
	height: 100%;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: center;
	justify-content: center;
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
}
.silico-mail-m__btn .icon-social-email {
	display: block;
	/* 2.4rem — натуральный размер .icon-social-email в теме; иконка-трубка
	   рядом 2rem, так что конверт получается чуть крупнее (просьба заказчика) */
	width: 2.4rem;
	height: 2.4rem;
	fill: currentColor;
}

/* Всплывающее окно со списком адресов.
   Геометрия скопирована с .header__call-offcanvas темы (тот же затемнённый
   фон на весь экран и карточка снизу), но под своим классом: правило темы
   «.is-call-open .header__call-offcanvas» открыло бы оба окна разом, ведь
   класс .is-call-open висит на <body>. Внутренности окна — темины
   (.header__call-offcanvas-in / -menu / -link), поэтому выглядит один в один
   как список телефонов. */
.silico-mail-m__offcanvas {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2100;
	background: rgba(0, 0, 0, 0.8);
	padding: 3rem;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: end;
	justify-content: flex-end;
	transition: opacity 0.25s, visibility 0.25s;
	opacity: 0;
	visibility: hidden;
}
/* класс вешает silico-custom.js по клику на .js-silico-mail-trigger */
body.is-silico-mail-open .silico-mail-m__offcanvas {
	opacity: 1;
	visibility: visible;
}
/* иконка конверта в строках списка — как иконка трубки у телефонов */
.silico-mail-m__offcanvas .header__call-link .icon-social-email {
	width: 2rem;
	height: 2rem;
	fill: currentColor;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
}

/* Раздел «Почта» в выдвижном меню (бургер): иконки конверта в строках.
   Всё остальное оформление наследуется от классов темы .header__nav-support*. */
.silico-nav-mail .header__nav-support-link .icon-social-email {
	width: 1.9rem;
	height: 1.9rem;
	fill: currentColor;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
}

/* ============================================================
   КАРТОЧКА ТОВАРА: «Артикул товара» — перед статусом наличия, жирным
   Добавлено 2026-09-17.

   В шаблоне (product.twig) блоки .sku__id («Артикул товара: …») и
   .sku__availability («На складе» / «Нет в наличии») уже переставлены
   местами — .sku__id теперь идёт первым по разметке. НО в теме их
   взаимное расположение на экране задаёт не порядок тегов, а float:
   .sku__id — float:right (на десктопе ≥1199px — float:none, но всё равно
   визуально ПОСЛЕ availability, т.к. в потоке идёт за уже отрисованным
   float:left блоком), .sku__availability — float:left. Из-за этого одна
   перестановка тегов в HTML на экране ничего не меняла.
   Меняем направления float местами (наш селектор с двумя классами
   специфичнее темных .sku__id/.sku__availability — перекрывает их без
   !important и без привязки к брейкпоинтам) и делаем шрифт артикула
   таким же жирным (500), как у "На складе" (было 400). */
.sku__desc .sku__id {
	float: left;
	margin: 0 1rem 0 0;
	font-weight: 500;
	color: #343434; /* тот же цвет текста, что у "На складе" (.sku__availability); в теме у .sku__id был #BDC2D3 (серый) */
}
.sku__desc .sku__availability {
	float: right;
}