/* Мобильная версия: шапка, пара «цена + Быстрый заказ», стык блоков на странице
 * раздела — замечания Антона, тикет #824f84c7a6df.
 *
 * Правится ТОЛЬКО поведение на узких экранах. Десктоп темы не трогаем: всё, что ниже,
 * живёт внутри @media и повторяет breakpoints самой темы (1200 / 768 / 600), чтобы
 * правило не включалось там, где раскладка и так в порядке.
 *
 * Тема магазина лежит в main.3e2163d5.css и принадлежит не нам — её не редактируем,
 * перекрываем отсюда. Файл подключается после темы, поэтому !important почти не нужен.
 */

/* ── 1. Мобильное меню ─────────────────────────────────────────────────────────
 * Панель занимала 344 px из 360 — вне неё оставалась полоса в 8 px, и «закрыть
 * тапом по затемнению» физически было некуда нажать (замер 18.09.2026). Оставляем
 * под затемнение honest-полосу: её видно и в неё попадает палец.
 */
@media (max-width: 600px) {
	.modal-overlay[data-modal="mobile-menu"] .modal,
	.modal-overlay[data-modal="mobile-catalog"] .modal,
	.modal-overlay[data-modal="mobile-services"] .modal {
		max-width: calc(100% - 56px);
	}
}

/* Крестик. В теме это 48x48 с полупрозрачной иконкой — размер пальцу подходит,
 * а вот увидеть его на светлой панели трудно: Антон написал «крестика нет».
 * Даём иконке полный контраст и подложку, не меняя её места.
 */
@media (max-width: 1200px) {
	.modal-overlay[data-modal="mobile-menu"] .close-btn,
	.modal-overlay[data-modal="mobile-catalog"] .close-btn,
	.modal-overlay[data-modal="mobile-services"] .close-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		border-radius: 50%;
		background-color: #f2f2f2;
		color: #1a1a1a;
	}

	.modal-overlay[data-modal="mobile-menu"] .close-btn .icon,
	.modal-overlay[data-modal="mobile-catalog"] .close-btn .icon,
	.modal-overlay[data-modal="mobile-services"] .close-btn .icon {
		opacity: 1;
	}

	/* Затемнение — кликабельная зона, а не просто фон. Курсор здесь нужен не ради
	 * вида: iOS Safari шлёт mouse-события только «кликабельным» элементам, и без
	 * этого признака тап по обычному div мимо обработчика темы проходил молча. */
	.modal-overlay[data-modal="mobile-menu"],
	.modal-overlay[data-modal="mobile-catalog"],
	.modal-overlay[data-modal="mobile-services"] {
		cursor: pointer;
	}

	.modal-overlay[data-modal="mobile-menu"] .modal,
	.modal-overlay[data-modal="mobile-catalog"] .modal,
	.modal-overlay[data-modal="mobile-services"] .modal {
		cursor: auto;
	}

	/* Иконка бургера тоже тап-цель: у неё была высота строки, а не пальца. */
	.header__burger {
		min-width: 44px;
		min-height: 44px;
	}
}

/* Блокировка фона. `.stop-scroll{overflow:hidden}` темы на iOS не держит — страница
 * под открытым меню продолжает ехать (замечание Антона, воспроизведено замером).
 * Скрипт baihu-mobile-nav.js вешает класс ниже и сам возвращает прокрутку на место.
 */
body.baihu-nav-locked {
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
	overflow: hidden;
	overscroll-behavior: none;
}

/* ── 2. Цена и «Быстрый заказ» ─────────────────────────────────────────────────
 * Один набор правил на ВСЕ шаблоны, где стоит эта пара: строки разделов каталога
 * (.product-category.mobile) и блок цены на карточке позиции (.product-detail).
 *
 * Что чиним: кнопка была 40 px (палец требует 44), пара стояла в nowrap-флексе с
 * зазором 32 px — длинная цена или длинная подпись выталкивали кнопку за край.
 */
@media (max-width: 1200px) {
	.product-category.mobile .product-category__bottom {
		flex-wrap: wrap;
		gap: 12px 16px;
		row-gap: 12px;
	}

	.product-category.mobile .product-category__price {
		flex: 1 1 auto;
		min-width: 0;
		overflow-wrap: anywhere;
	}

	.product-category.mobile .product-category__btns {
		flex: 0 0 auto;
		min-width: 0;
		max-width: 100%;
	}

	/* Длинное название без пробелов не должно распирать строку до горизонтального
	 * скролла всей страницы. */
	.product-category.mobile .product-category__title p,
	.product-category.mobile .product-category__title a {
		overflow-wrap: anywhere;
	}

	.product-category.mobile .product-category__btns .button,
	.product-detail__price-buttons .button {
		min-height: 44px;
		height: auto;
		white-space: normal;
	}

	/* Блок цены на карточке тема уже кладёт в КОЛОНКУ (flex-direction: column на
	 * ≤576px), поэтому здесь нельзя ни flex-wrap, ни flex-basis: в колоночном
	 * флексе basis — это высота, а wrap переносит не на новую строку, а в новую
	 * КОЛОНКУ. Проверено 18.09.2026: от такого «исправления» кнопка уехала на
	 * 219 px вправо за край блока на целой и невиновной вёрстке. Трогаем только
	 * то, что надо: перенос длинной цены и высоту кнопки. */
	.product-detail__price-amount {
		min-width: 0;
		overflow-wrap: anywhere;
	}

	.product-detail__price-buttons {
		max-width: 100%;
	}
}

/* ── 3. Блок «Позиции в наличии» под плитками подразделов ──────────────────────
 * Блок наш (собирается tools/build_node_listings.py) и вставал в стык с плитками
 * темы: на /catalog/chernyj-metalloprokat/ — той самой странице со скриншота
 * Антона — `.category__list` кончается на 474 px и заголовок начинается ровно на
 * 474 px (замер 18.09.2026). На узком экране это и читается как «блоки наложены
 * друг на друга»: у нижней плитки не видно собственного края, заголовок лежит
 * на нём. Разводим их воздухом ровно там, где стоят рядом.
 */
@media (max-width: 1200px) {
	.category__list + .category__products {
		margin-top: 32px;
	}
}

/* Самые узкие экраны: цена и кнопка встают друг под другом, кнопка во всю ширину —
 * так она заведомо не жмётся к цене и остаётся тапабельной. */
@media (max-width: 480px) {
	.product-category.mobile .product-category__price,
	.product-category.mobile .product-category__btns {
		flex: 1 1 100%;
	}

	.product-category.mobile .product-category__btns {
		justify-content: stretch;
	}

	.product-category.mobile .product-category__btns .button {
		width: 100%;
	}
}