/* z-index 3010, а не 1200: выдвижное меню телефона живёт на 3002 (#mobilemenu внутри
   #mobileheader, см. ниже), и наша панель открывалась ПОД ним. Со стороны это выглядело
   как жалоба Антона «страница с городами грузится бесконечно»: сверху оставался экран
   регионов самой темы с вечным индикатором, а список городов был под ним. Проверка
   вслепую этого не ловит — getComputedStyle честно говорит «видима» (#6e2fd7c14bed). */
.evg-cities{position:fixed;inset:0;z-index:3010;display:flex;align-items:center;justify-content:center;background:rgba(34,34,40,.45)}
.evg-cities[hidden]{display:none}
.evg-cities__box{position:relative;width:min(520px,calc(100vw - 32px));max-height:80vh;overflow:auto;padding:24px;background:var(--card_bg_black,#fff);border-radius:12px;box-shadow:0 5px 20px rgba(0,0,0,.15)}
.evg-cities__title{margin:0 0 20px;font-size:20px;font-weight:600;color:var(--white_text_black,#222228)}
.evg-cities__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.evg-cities__link{color:var(--white_text_black,#222228);text-decoration:none}
.evg-cities__link:hover{opacity:.72}
.evg-cities__link[aria-current="true"]{font-weight:500}
.evg-cities__close{position:absolute;top:12px;right:12px;width:32px;height:32px;border:0;border-radius:6px;background:none;font-size:22px;line-height:1;cursor:pointer;color:var(--white_text_black,#222228)}
@media (max-width:600px){.evg-cities__title{text-align:center}.evg-cities__box{padding:20px}}

/* Тема держит .status-icon на nowrap — короткие статусы («В наличии», «Ожидается») в это
   укладываются, а «Под заказ (10 рабочих дней)» на мобильной плитке (2 колонки) вылезает за
   тайл. Переносим только nostock, чтобы не менять поведение остальных статусов. */
.status-icon.nostock{white-space:normal;align-items:flex-start}

/* ответ формы заявки: приёмник отвечает текстом, место под него держим всегда */
.evg-form__note{margin-top:12px;min-height:1.2em;font-size:14px;line-height:1.4;color:var(--white_text_black,#222228)}
.evg-form__note--error{color:#c8102e}

/* ловушка для ботов: человек поля не видит и табом в него не попадает, а робот,
   заполняющий подряд все поля формы, себя этим и выдаёт (проверка — в приёмнике) */
.evg-form__trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* Плашка согласия на cookie ложилась на нижнюю панель телефона (жалоба владельца 09.09,
   замер тестировщика #cd34621f). Модуль niges.cookiesaccept печатает плашке инлайновым
   <style> в <head> `bottom:0 !important; z-index:99999`, а панель темы .bottom-icons-panel
   сидит на z-index 992 внизу экрана: на 390px плашка накрывала её целиком (61px из 61),
   и document.elementFromPoint в центре КАЖДОЙ кнопки панели возвращал плашку, а не кнопку.
   Селектор по id + класс и !important — не для красоты: инлайновый <style> модуля идёт в
   <head> ПОСЛЕ ссылки на этот файл, и правка по одному классу проиграла бы ему по порядку. */
#nca-cookiesaccept-line.nca-cookiesaccept-line{
	/* попап формы заявки живёт на 2999/3000, мобильное меню на 3002 — плашке место ниже
	   их и выше контента (шапка 998, панель 992), иначе она перехватывает «Отправить» */
	z-index:1000 !important;
	/* Модуль ставит плашке opacity:0.8, и сквозь неё просвечивает контент страницы:
	   текст согласия читается поверх картинок каталога (замер #4c62f37e). Полупрозрачной
	   плашка задумана не была — это общий стиль модуля; гасим прозрачность целиком, а не
	   красим фон: цвет плашки приходит из настроек темы, и своим мы бы его переопределили. */
	opacity:1 !important
}

/* Тап-таргет «Принимаю» был 101x22 — вдвое ниже минимальных 44px, на которые целится
   палец (замер #4c62f37e). Растим только высоту и поля: ширину задаёт текст кнопки. */
#nca-cookiesaccept-line-accept-btn{
	min-height:44px;
	padding:11px 20px;
	line-height:1.2
}

/* Панель темы показана до 991px включительно (@media (min-width:992px) её прячет), поэтому
   и разводим их до той же границы, а не до 767px. Высота панели = 56px кнопки + 5px ленты
   плюс её собственный отступ под «домашнюю полосу» iPhone: env берём с тем же запасным
   значением 22px, что и у темы, — тогда уступ растёт и уменьшается ровно вместе с панелью. */
@media (max-width:991px){
	#nca-cookiesaccept-line.nca-cookiesaccept-line{
		bottom:calc(61px + env(safe-area-inset-bottom,22px)) !important
	}
}

/* Высота той же нижней панели одной переменной на весь сайт — на неё опирается и виджет
   чата (assets/evgroup-chat.css), чтобы жёсткого числа не было в двух местах. 61px не на
   глаз: 56px кнопки + 5px ленты, замер бокса панели на 390 дал ровно 61. Ниже 992px тема
   панель прячет, поэтому там переменная равна нулю. */
:root{--ev-bottom-bar:0px}
@media (max-width:991px){
	:root{--ev-bottom-bar:calc(61px + env(safe-area-inset-bottom,22px))}
}

/* П2. Панель мобильного меню открывается не на всю ширину — она такой и задана: тема пишет
   `.mmenu_leftside #mobilemenu{width:376px}` (css/mobile-menu.css, стр. 30). На телефоне
   376px из 390 оставляют справа полосу в 14px, сквозь которую видно затемнённую страницу,
   — это и есть «вторая полоса справа» со скриншота владельца. Замер до правки: меню
   открыто, x=0, w=376 при вьюпорте 390, видимых пунктов 14. Второго узла #mobilemenu в
   нашей сборке НЕТ, он ровно один (querySelectorAll вернул 1), удалять нечего.
   Граница 767px, а не 991px: на планшете выдвижная панель в 376px — осознанная ширина
   макета, полосы там не видно и трогать её незачем. */
@media (max-width:767px){
	.mmenu_leftside #mobilemenu{width:100vw}
}

/* Плашка cookie рисовалась ПОВЕРХ открытого мобильного меню, и своим z-index меню это не
   лечится: #mobilemenu (3002) лежит внутри #mobileheader, а тот — position:sticky с
   z-index (993, и 998 пока открыто меню: mobile-header.css, стр. 11). Это контекст
   наложения, внутри него 3002 значит «выше соседей по шапке», а не «выше плашки». Снаружи
   меню участвует в слоях числом ОБЁРТКИ — 998 против 1000 у плашки, и она выигрывала:
   elementFromPoint в центре пунктов «Статьи» и телефона возвращал текст плашки (390px).
   Поднимаем сам контекст на тот уровень, на который тема метила меню, а не число внутри
   него. Класс filter-none тема вешает на #mobileheader ровно на время открытого меню и
   мобильного поиска (js/mobile.js, стр. 151 и 231) и снимает при закрытии — вне этих двух
   состояний шапка остаётся на своих 993. Ладдер слоёв сохраняется: модалка 5000 > меню
   3002 > плашка 1000 > нижняя панель 992. Убрать z-index у обёртки было бы хуже: без него
   sticky-шапка теряет слой и уходит под контент страницы. */
#mobileheader.filter-none{z-index:3002}

/* П10. Нижняя панель навигации: девять пунктов по фиксированным 75px дают ленту в 675px
   при экране 390 — последние («Услуги», «Компания», «Реквизиты») лежат за правым краем, и
   document.elementFromPoint в их центре возвращает не саму ссылку. Контейнер
   .bottom-icons-panel__content стоит на overflow-x:auto, то есть формально лента
   прокручивается, но горизонтальный свайп внутри фиксированной панели никто не ищет — на
   экране это читается как обрезка, а не как скролл.
   Даём пунктам делить ширину поровну вместо фиксированной. Состав пунктов и иконки не
   трогаем: убрать лишнее — решение арт-директора, а не вёрстки. */
@media (max-width:991px){
	.bottom-icons-panel__content{overflow-x:hidden}
	.bottom-icons-panel__content > .bottom-icons-panel__content-link{
		flex:1 1 0;min-width:0;padding-left:2px;padding-right:2px
	}
}

/* П9. Выпадашка телефонов в шапке отсчитывается от левого края родителя и на 1024 уезжает
   за вьюпорт: замер до правки — left=831, right=1111, w=280 при clientWidth=1024, отсюда
   scrollWidth=1111 и горизонтальный сдвиг НА ВСЕХ страницах сайта (дефект шапки, а шапка
   общая). Прижимаем к правому краю родителя: содержимое и оформление те же, меняется
   только точка отсчёта. Правило нужно и при opacity:0 — прозрачный элемент продолжает
   участвовать в scrollWidth, поэтому сдвиг был и с закрытой выпадашкой. */
.phones__dropdown{left:auto;right:0}

/* П4. Плашка «Ваш город …?» на телефоне — не блок над шапкой, а строка под ней.
   Тема рисует её как .confirm_region--top в потоке ДО шапки: padding 18px сверху и снизу,
   заголовок отдельной строкой, под ним две кнопки во всю ширину (`.buttons > span{flex:1}`
   из css/regions.confirm.min.css) — на 390px это ~110px, и шапка начинается с y≈130, то
   есть бургер уезжает за первый экран (замер тестировщика, home_390_top.png).
   Собираем в одну строку: вопрос и обе кнопки в ряд, кнопки — компактные, высота полосы
   ≤44px. Ни текста, ни цветов, ни механики определения города не касаемся — только
   раскладка и размеры. Граница 767px: на планшете места хватает и полоса не мешает. */
@media (max-width:767px){
	.confirm_region--top{
		display:flex;align-items:center;gap:8px;flex-wrap:nowrap;
		min-height:0;padding:6px 34px 6px 12px;
		font-size:13px;line-height:1.2
	}
	.confirm_region--top .title{
		flex:1 1 auto;min-width:0;margin:0;text-align:left;
		overflow:hidden;text-overflow:ellipsis;white-space:nowrap
	}
	.confirm_region--top .buttons{
		flex:0 0 auto;padding:0;gap:6px;white-space:nowrap
	}
	.confirm_region--top .buttons>span{flex:0 0 auto}
	.confirm_region--top .buttons>span .btn{
		width:auto;--button-height:32px;--button-font-size:.8125rem;
		--button-pl:10px;--button-pr:10px;padding-left:10px;padding-right:10px
	}
	/* крестик у правого края той же строки, а не в углу блока в две строки */
	.confirm_region--top .jqmClose.top-close{top:50%;transform:translateY(-50%);right:8px}
}

/* П13. Крошки карточки товара упираются в правый край: последний элемент цепочки
   («Круг нержавею…») меряется right=425 при экране 392 — элементы стоят в строку, а у
   контейнера нет ни переноса, ни прокрутки, и хвост просто вылезает за вьюпорт.
   Даём контейнеру честную горизонтальную прокрутку (состав цепочки и типографику не
   трогаем, как и просит план) плюс отступ справа, чтобы последнее слово не липло к краю.
   Полосу прокрутки прячем: на телефоне она и так не рисуется, а на планшете съедала бы
   строку. touch-action не задаём — вертикальный свайп по странице остаётся обычным. */
@media (max-width:991px){
	.breadcrumbs{
		overflow-x:auto;-webkit-overflow-scrolling:touch;
		white-space:nowrap;padding-right:16px;
		scrollbar-width:none;-ms-overflow-style:none
	}
	.breadcrumbs::-webkit-scrollbar{display:none}
}

/* Н1. Таблица в тексте страницы шире экрана телефона. Замер тестировщика (#e7daba37):
   /catalog/chernyy-metalloprokat/ на 360px — documentElement.scrollWidth 385 при
   clientWidth 360, страница ездит вбок на 25px. Виновник — таблица «Группа / Критические
   параметры / Производственный риск» в SEO-тексте раздела: три текстовые колонки в 360px
   не укладываются, а переносом слов это не лечится — колонка «Что указать в заявке»
   станет столбиком по одной букве.
   Делаем таблице собственную горизонтальную прокрутку — тем же приёмом, что и крошкам
   в П13: вбок едет таблица, а не весь документ. display:block обязателен: у элемента,
   который остаётся табличным боксом, overflow не работает вовсе; строки при этом
   собираются в анонимную таблицу, и колонки шапки с телом не разъезжаются.
   Своим замером по всем 35 типам страниц (qa/overflow360_probe.py) тот же вылет нашёлся
   на странице услуги (/services/izgotovlenie-detaley-iz-titana/, 366 при 360) — поэтому
   селектор идёт по контейнерам текста, а не по одному шаблону каталога. */
@media (max-width:767px){
	.right_block table,
	.detail .content table,
	.detail-text table{
		display:block;
		width:max-content;
		max-width:100%;
		overflow-x:auto;
		-webkit-overflow-scrolling:touch
	}
	/* У темы есть своя обёртка с прокруткой — внутри неё таблица остаётся таблицей. */
	.tables-responsive table{display:table;width:100%}
}

/* Н1 (то же измерение, второй виновник). На обеих страницах политик адрес сайта напечатан
   ссылкой целиком: https://evgroup.pro/company/normativnye-dokumenty/ — для браузера это
   одно неразрывное слово шириной 405px, и на 360px документ уезжал вбок на 61px
   (политика перс. данных) и на 1px (политика cookie). Плашка согласия там же растягивалась
   до 421px — это следствие, а не отдельный дефект: fixed-элемент шириной 100% меряется от
   разъехавшегося документа.
   Разрешаем перенос внутри длинных адресов. На обычный текст правило не влияет:
   break-word рвёт слово только тогда, когда оно иначе вылезет за край строки. */
@media (max-width:767px){
	.right_block a,
	.right_block p,
	.right_block li,
	.detail .content a{overflow-wrap:break-word}
}

/* Б1 (тестировщик #2112e53b). Виджет «поделиться» Яндекса на узком экране уводил документ
   вбок ровно на 2px: 362 при 360, 392 при 390. Виноват не контент, а раскладка — тема
   растягивает попап отрицательными отступами (position:absolute; left:-18px; right:-18px)
   от кнопки, чей правый край и так стоит по краю контейнера (344 при 360). 18px справа
   и вылезают за экран, а плашка согласия следом меряется 362 — это следствие, не дефект.
   Своим замером по 599 страницам этого было не видно: пустой div ничего не занимает,
   коробка появляется только после того, как внешний share.js с yastatic.net нарисует
   кнопки. Поэтому замер Б1 (qa/share_overflow_probe.py) ЖДЁТ инициализации виджета.
   Лечим саму раскладку: на мобильной ширине попап прижимается к правому краю кнопки и
   становится по ширине содержимого, max-width страхует от широкого набора кнопок, а
   перенос строк списка не даёт кнопкам уехать под обрез (у виджета overflow:hidden).
   В разметку не лезем намеренно — её и содержимое виджета рисует внешний скрипт. */
@media (max-width:767px){
	.shares-block .ya-share2{
		left:auto;
		right:0;
		max-width:100vw
	}
	.shares-block .ya-share2__list{flex-wrap:wrap}
}

/* Две навигации на одном экране (жалоба владельца #cc0fd52ce5f9, п.1). На телефоне тема
   Aspro показывает СРАЗУ мобильную шапку с бургером и нижнюю панель иконок — на 390x844
   обе видны одновременно (замер qa/mobile_nav_cc0fd52c_probe.py: шапка 390x61 сверху,
   панель 390x61 снизу, 8 страниц из 8, на бою так же).
   Нижняя панель не несёт ничего своего: «Главная», «Каталог» и «Контакты» есть в бургере,
   «Поиск» и корзина — в самой мобильной шапке (кнопка поиска и ссылка /basket/ там же).
   Поэтому убираем именно её: остаётся одна навигация, а не полторы, и экрану возвращается
   61px высоты. Разметку не трогаем — панель рисует тема, и на широких экранах её и так нет.
   Отдельного отступа под неё снимать не нужно: панель стоит в потоке (position:sticky,
   margin-top:auto, order:9999), а не поверх страницы — скрытая, она не оставляет полосы. */
@media (max-width:991px){
	.bottom-icons-panel{display:none}
}

/* Плашка контактов телефона на мобильном (замечание Антона 14.09, #cc0fd52ce5f9, п.5;
   скрин — qa/anton_contacts_cc0fd52c.png). Замер qa/mobile_contacts_cc0fd52c.py на 390x844:
   белая подложка .phones__dropdown в подвале выходит 155x407 и начинается в x=-4 (отсюда
   белая полоса у левого края), а лежащие внутри .dropdown — по 240px от x=16 до x=256.
   Содержимое шире своей подложки, поэтому «Заказать звонок», e-mail и адрес вылезают на
   текст подвала, и это читается как две наехавшие друг на друга карточки. На бою так же
   (ekaterinburg.evgroup.pro, qa/mobile_contacts_live_cc0fd52c.json: 154x387 от x=-4).

   Причина не в содержимом, а в раскладке: выпадашка позиционируется абсолютно ОТ
   .phones__inner (position:relative), а это обёртка одного телефона шириной ~135px.
   Абсолютный блок без left+right ужимается по ширине этого родителя, тогда как у .dropdown
   внутри стоит min-width:min(240px, 100vw-40px) — ужаться до подложки он не может.

   Лечим саму привязку: на телефоне карточка перестаёт зависеть от узкого родителя и
   меряется от экрана — одна карточка во всю ширину с одинаковыми полями слева и справа.
   Высокое содержимое (телефоны + почта + адрес + режим + мессенджеры) не обрезаем, а
   прокручиваем внутри карточки. Разметку и обработчики не трогаем: показ по-прежнему
   держится на .phones__inner:hover, а карточка остаётся его потомком — наведение при
   тапе по самой карточке не теряется, кнопка заказа звонка нажимается как раньше.

   #mobilephones исключён намеренно: это не плашка, а полноэкранная панель телефонов
   мобильной шапки (390x784 от края до края), с ней всё в порядке. Специфичность :not(#id)
   выше .phones__dropdown--top из темы, поэтому её bottom/top переопределяются здесь же. */
@media (max-width:991px){
	.phones__dropdown:not(#mobilephones){
		position:fixed;
		/* !important здесь по делу, а не для силы: тема на наведении дописывает узлу
		   ИНЛАЙНОВЫЙ left (js/phones.js, строки 13 и 16 — сама пытается втащить выпадашку
		   обратно на экран), а инлайн сильнее любого правила из файла. Без важности
		   карточка так и вставала в left:-20px: замер после правки показывал fixed,
		   bottom и z-index нашими, а left — темы, и поля выходили несимметричными. */
		left:12px !important;
		right:12px;
		top:auto;
		bottom:12px;
		width:auto;
		max-height:calc(100vh - 24px);
		overflow-y:auto;
		-webkit-overflow-scrolling:touch;
		/* выше плашки cookie (1000), но ниже мобильного меню (3002) */
		z-index:1001
	}
	/* Одного z-index карточке мало. Тема на наведении поднимает саму обёртку
	   (.phones__inner:hover{z-index:1000}), а position:relative с числовым z-index — это
	   уже свой слой: 1001 внутри него считается от 1000, а не от страницы. С плашкой
	   cookie на тех же 1000 спор решался порядком в разметке, и плашка (она ниже по
	   документу) накрывала адрес и режим работы — видно на снимке до правки. Поднимаем
	   слой целиком на единицу: карточка выходит поверх плашки и остаётся ниже попапа
	   заявки (2999/3000) и мобильного меню (3002). */
	.phones__inner:hover{z-index:1001}
}
