/* hc-w5-mobile.css — аудит A1, волна W5 «телефон и визуальная доступность» (агент W5a), 27.09.2026.
   Подключается одной строкой в include/header_include/head_custom.php сразу после блока hc-w4-assets-2026-09-26
   (?v= = md5 содержимого). Парный скрипт — hc-w5-mobile.js (раскладка плавающих элементов по факту на экране).
   Вендорные файлы Aspro и hc-w4-*.css не правились: всё здесь — перекрытия с узкими селекторами.
   Откат: убрать строку подключения из head_custom.php (копия до правки — /hc_backups/w5-2026-09-27/). */

/* ============ 1. Плавающие элементы над липкими панелями (gap_scenarios_e2e-02, u1_mobile_a11y-02, калькуляторы) ============
   27.09.2026 (аудит A1 W5, gap_scenarios_e2e-02 + u1_mobile_a11y-02): на телефоне пилюля квиза «Подбор за 1 минуту»
   (left/bottom 10px) и плашка города .hc-citybar (bottom 8px) ложились на «−», количество и «+» липкой панели покупки
   карточки .counter_wrapp.fixed (Aspro FIXED_BUY_MOBILE=Y, решение 12.09 оставить) — «+» открывал квиз, «−» разворачивал
   плашку. Исключения в hc-ux/hc-ux2 были только для #hc-cta-stick раздела. Здесь — то же для карточки: квиз прячется,
   плашка города и подсказка региона .hc-rhint встают над панелью (панель 55 px → 64 px + safe-area, по поправке проверяющего).
   Точную высоту любой нижней панели потом ставит hc-w5-mobile.js (html.hc-w5-dock + --hc-w5-dock), правила ниже —
   страховка до его запуска. */
@media (max-width:767px){
	body:has(.counter_wrapp.fixed) .hcq-float{display:none!important}
	body:has(.counter_wrapp.fixed) .hc-citybar,
	body:has(.counter_wrapp.fixed) .hc-rhint{bottom:calc(64px + env(safe-area-inset-bottom))}
}
/* 27.09.2026 (аудит A1 W5, замечание W2 к калькуляторам): на 390 px развёрнутая плашка города закрывала липкую плашку итога
   калькуляторов .hcc-sticky (≤900 px, высота ~91 px) вместе с «Отправить расчёт»: верхняя треть кнопки попадала в
   «Санкт-Петербург» — тап уводил на spb; свёрнутая пилюля потом закрывала «Итого / Смотреть смету». */
@media (max-width:900px){
	body:has(#sticky.hcc-sticky:not([hidden])) .hcq-float{display:none!important}
	body:has(#sticky.hcc-sticky:not([hidden])) .hc-citybar,
	body:has(#sticky.hcc-sticky:not([hidden])) .hc-rhint{bottom:calc(100px + env(safe-area-inset-bottom))}
}
/* то же для нижней панели действий /contacts/ (#hc-contacts .mobile-actions, ≤760 px) */
@media (max-width:760px){
	body:has(#hc-contacts .mobile-actions) .hcq-float{display:none!important}
	body:has(#hc-contacts .mobile-actions) .hc-citybar,
	body:has(#hc-contacts .mobile-actions) .hc-rhint{bottom:calc(76px + env(safe-area-inset-bottom))}
}
/* Измеренная скриптом высота нижней липкой панели (любой: карточка, калькулятор, контакты, #hc-cta-stick). В высоту панели
   уже входит её собственный отступ safe-area, поэтому env() здесь не добавляем. */
html.hc-w5-dock .hc-citybar,
html.hc-w5-dock .hc-rhint{bottom:calc(var(--hc-w5-dock, 64px) + 8px)!important}
html.hc-w5-dock .hcq-float{display:none!important}

/* ============ 2. Виджет Битрикс24 (u1_mobile_a11y-10) ============
   27.09.2026 (аудит A1 W5, u1_mobile_a11y-10): кнопка виджета стоит на bottom 120/132 px (hc-ux 27.08) и при прокрутке
   садилась на «Перейти к оформлению» / «Оформить заказ»; приветствие «Добрый день! Поможем сориентироваться…»
   закрывало CTA квиза, калькулятора и кнопку оформления; при открытом мобильном фильтре и меню кнопка (z-index 10150)
   лежала поверх затемнения. По поправке проверяющего виджет НЕ прячем (канал лидов, формы 4/6/7): гасим только окно
   приветствия там, где оно мешает, а кнопку отодвигаем. Настройки открытой линии в портале не трогаем. */
/* корзина и оформление: приветствие не показываем, кнопку на телефоне — в нижний угол (липкой панели там нет,
   в конце прокрутки под кнопкой оказывается подвал, а не «Перейти к оформлению») */
html.hc-w5-cart .b24-widget-button-popup{display:none!important}
@media (max-width:767px){
	html.hc-w5-cart .b24-widget-button-wrapper.b24-widget-button-position-bottom-right{bottom:calc(14px + env(safe-area-inset-bottom))!important}
}
/* открыт мобильный фильтр или меню: виджет и пилюля квиза уходят ПОД затемнение (у затемнений z-index 3005 и 2999) */
body:has(#mobilefilter.show) .b24-widget-button-wrapper,
body:has(#mobilemenu.show) .b24-widget-button-wrapper{z-index:2990!important}
body:has(#mobilefilter.show) .b24-widget-button-popup,
body:has(#mobilemenu.show) .b24-widget-button-popup,
body:has(#mobilefilter.show) .hcq-float,
body:has(#mobilemenu.show) .hcq-float{display:none!important}
/* приветствие легло на основную кнопку страницы (проверяет hc-w5-mobile.js) — прячем его до конца просмотра страницы;
   кнопка чата остаётся */
html.hc-w5-b24quiet .b24-widget-button-popup{display:none!important}
/* развёрнутая плашка города / подсказка региона: кнопка виджета встаёт НАД ней (иначе закрывала «×» и «другой город»);
   высоту считает скрипт */
html.hc-w5-b24up .b24-widget-button-wrapper.b24-widget-button-position-bottom-right{bottom:var(--hc-w5-b24, 132px)!important}

/* ============ 3. Тап-цели на тач-экранах (u1_mobile_a11y-09) ============
   27.09.2026 (аудит A1 W5, u1_mobile_a11y-09): основные действия были 22–40 px. Глобальных правил на button НЕТ
   (на ФинТерме так разъехалась вёрстка — fintherm-mobile-tap-target-rule): только точечные селекторы; где вид менять
   нельзя — зона нажатия расширена псевдоэлементом или внутренним отступом с компенсирующим margin. */
@media (pointer:coarse){
	/* корзина: «−»/«+» 30×32 → 44×44 (Aspro кладёт их absolute по краям .basket-item-amount с padding 0 30px) */
	.basket-items-list-item-amount-outer .basket-item-amount{padding:0 44px!important;min-width:158px!important;max-width:none!important}
	.basket-items-list-item-amount-outer .basket-item-btn-minus,
	.basket-items-list-item-amount-outer .basket-item-btn-plus{width:44px!important;height:44px!important}
	.basket-items-list-item-amount-outer .basket-item-amount-filed{height:44px!important}
	/* корзина: удаление строки 25×25 → 44×44; крестик рисуют ::before/::after по центру (top/left 50%), центр почти на месте */
	body .basket-item-block-info .basket-item-actions-remove{width:44px;height:44px;top:-13px;right:-14px}
	/* мобильный фильтр: крестик 22×22 (absolute top/right, значок 12 px + padding 5) → 44×44; margin −11 держит значок на месте */
	#mobilefilter .slide-block__head .svg-close{width:44px;height:44px;padding:16px;margin:-11px;box-sizing:border-box}
	/* ручки ползунка цены 22×22 → зона 44×44 (::before у них не занят, ::after занят темой) */
	#mobilefilter .bx_ui_slider_handle::before{content:"";position:absolute;left:-11px;right:-11px;top:-11px;bottom:-11px}
	/* кнопка «Фильтр» 85×30 → зона высотой 44 без изменения строки */
	.filter-panel__filter .bx-filter-title{position:relative}
	.filter-panel__filter .bx-filter-title::after{content:"";position:absolute;left:0;right:0;top:-7px;bottom:-7px}
	/* карточка: текстовые переключатели ТП («шт/м²», размер) высотой 31 → зона 45 (цветные квадраты 50×50 не трогаем);
	   у темы .sku_props ul li:before{display:none} — возвращаем block */
	.sku_props li.item:has(> .cnt)::before{content:"";display:block;position:absolute;left:-2px;right:-2px;top:-7px;bottom:-7px}
	/* ряд переключателей обрезается контейнером прокрутки (overflow hidden auto) по краю — даём ему поля 7 px,
	   компенсируя отрицательным margin: раскладка не меняется, а зона нажатия не срезается */
	.sku_props .bx_size_scroller_container{padding-top:7px;padding-bottom:7px;margin-top:-7px;margin-bottom:-7px}
	/* «Заказать образец» 158×36 и «Купить в 1 клик» 286×42 → зона высотой 44 */
	.hc-sample-btn{position:relative}
	.hc-sample-btn::after{content:"";position:absolute;left:0;right:0;top:-5px;bottom:-5px}
	.wrapp-one-click .one_click{position:relative}
	.wrapp-one-click .one_click::after{content:"";position:absolute;left:0;right:0;top:-1px;bottom:-1px}
	/* «Гарантия и возврат / Сертификаты / Доставка» высотой 19 px: зона 33 px (≥ 24 px по WCAG 2.5.8) без наложения строк —
	   вертикальный отступ строк 6 → 14 px; зона — псевдоэлементом (::before у них — точка-маркер, а подчёркивание —
	   border-bottom, поэтому padding не годится) */
	.hc-trust{row-gap:14px}
	.hc-trust a{position:relative}
	.hc-trust a::after{content:"";position:absolute;left:0;right:0;top:-7px;bottom:-7px}
}
/* шапка на 768–991 px: телефон и поиск 17–18 px в ширину. Как в правке 28.08 для 360–767 (hc-w4-site.css): ширину
   добираем за счёт паддингов ячейки (строка не растёт), по вертикали ничего не навязываем — line-height темы 63 px */
@media (min-width:768px) and (max-width:991px){
	#mobileheader .wrap_icon:not(.wrap_basket){padding-left:0;padding-right:0}
	#mobileheader .top-btn,#mobileheader .personal-link{min-width:48px;text-align:center}
	#mobileheader .personal-link{display:inline-block}
}
/* «Заказать звонок» в выпадашке телефонов шапки — 109×13 → высота 43 */
#mobilePhone .more_phone .callback{display:inline-block;padding:15px 0}

/* ============ 4. Кегль на телефоне (u1_mobile_a11y-08) ============
   27.09.2026 (аудит A1 W5, u1_mobile_a11y-08): мобильные блоки contacts.css и services.css УМЕНЬШАЛИ шрифт до 8–11 px
   (на /contacts/ мельче 12 px было 41–51 % знаков, на /services/ — 30–32 %). Минимум 12 px, ответы FAQ — 14 px.
   Сами файлы страниц не правились (перекрытие специфичнее: html + id). Длину строк не трогаем (решение 31.08). */
@media (max-width:760px){
	html #hc-contacts :is(.topline,.header-phone,.crumb,.crumb a,.eyebrow,.place-tabs button,.tab-number,.photo-top,.button,
		.mobile-actions a,.section-label,.text-button,.tiny-num,.visit-guide a,.visit-guide p,.contact-methods small,.notice,
		.detail,.intro-copy,#copy-address,#route,#mobile-route,#visit-call,#place-label,.hc-allp__kind,a > span > small){font-size:12px}
	html #hc-contacts :is(.questions summary,.questions details p){font-size:14px;line-height:1.5}
	html #hc-services :is(.hs-crumb,.hs-crumb a,.hs-crumb span,.hs-eyebrow,.hs-button,.hs-photo-caption,.hs-feature-foot,
		.hs-feature-foot span,.hs-feature-foot a,.hs-count,.hs-filters button,.hs-filters small,.hs-back,.hs-facts > div,
		.hs-prepare > p,.hs-prepare > a,.hs-prepare > span,.hs-toc nav a,.hs-toc > span,.hs-toc-all,.hc-svc th,.hc-svc td,
		.hs-card-photo > span,.hs-card-stage,.hs-tags,.hs-tags span,.hs-card-more,.hs-phones small,.hc-svc__links-ttl,
		.hc-svc__links a,.hs-detail-intro .hs-eyebrow){font-size:12px}
}
/* подвал и формы на всех страницах: копирайт 10 px, «Подписаться» 11 px, «Заказать звонок» 10 px, ошибки полей 10 px */
@media (max-width:767px){
	#footer .footer-bottom__item.copy,
	#footer .subscribe_button .subscribe_btn,
	#footer .callback_wrap .callback-block,
	footer .footer-bottom__item.copy,
	footer .subscribe_button .subscribe_btn,
	footer .callback_wrap .callback-block,
	.form label.error,label.error{font-size:12px!important}
	/* подпись под «Заказать образец» на карточке — 11,5 px */
	.hc-sample-wrap .hc-sample-hint{font-size:12px}
}

/* ============ 5. Контраст (u1_mobile_a11y-07, без развилки) ============
   27.09.2026 (аудит A1 W5, u1_mobile_a11y-07): серые подписи и крошки #b6b5b5 (2,05:1) / #999 (2,85:1) / #888 (3,54:1)
   и наши #8a8a8a (3,45:1) → #767676 (4,54:1 на белом); стикер «На складе» белым по #60c339 (2,24:1) → #3a8522 (4,61:1) жирным; подсказка ошибки
   оформления #F55 (3,14:1) → #d93a2f (4,57:1), на розовой подложке #EDD → #b3261e (4,99:1).
   Вместо #3d8b24 из вопроса взят #3a8522: у #3d8b24 4,27:1 — для текста 10–12 px (не «крупного» по WCAG) порога 4,5 нет.
   Фирменный красный #f35c50 / #EE2C2D НЕ меняется — ждёт решения Кирилла.
   Только светлая тема: в тёмной эти серые стоят на тёмном фоне и затемнение сделало бы хуже (там свои правки 11.09).
   Префикс темы — в :where(), поэтому специфичность правил равна исходным правилам темы: заменяется только базовый цвет,
   а :hover и более узкие контексты темы продолжают работать. */
@media not all and (prefers-color-scheme:dark){
	:where(body:not(.theme-dark)) .breadcrumbs__item-name{color:#767676}
	:where(body:not(.theme-dark)) .muted:not(:where(#footer *, footer *)),
	:where(body:not(.theme-dark)) .color_999:not(:where(#footer *, footer *)){color:#767676}
	:where(body:not(.theme-dark)) .basket-item-amount-field-description,
	:where(body:not(.theme-dark)) .basket_action .delete_all,
	:where(body:not(.theme-dark)) .back-url-text{color:#767676}
	:where(body:not(.theme-dark)) .basket-items-list-item-price-for-one .basket-item-price-current-text{color:#767676}
	:where(body:not(.theme-dark)) .hc-blog-goods li .hc-bg-price,
	:where(body:not(.theme-dark)) .page_not_found .hc404-note{color:#767676}
	:where(body:not(.theme-dark)) .bx_filter .bx_ui_slider_part span{color:#767676}
	:where(body:not(.theme-dark)) .bx_item_section_name,
	:where(body:not(.theme-dark)) .bx_item_section_name span{color:#767676}
	:where(body:not(.theme-dark)) .stickers .sticker_na_sklade{background-color:#3a8522;color:#fff;font-weight:700}
	:where(body:not(.theme-dark)) #bx-soa-order .bx-soa-tooltip .tooltip-inner{color:#d93a2f}
	:where(body:not(.theme-dark)) #bx-soa-order .bx-soa-tooltip.bx-soa-tooltip-danger .tooltip-inner,
	:where(body:not(.theme-dark)) .bx-soa-tooltip.bx-soa-tooltip-danger .tooltip-inner{color:#b3261e}
}
@media (prefers-color-scheme:dark){
	:where(body.theme-light) .breadcrumbs__item-name{color:#767676}
	:where(body.theme-light) .muted:not(:where(#footer *, footer *)),
	:where(body.theme-light) .color_999:not(:where(#footer *, footer *)){color:#767676}
	:where(body.theme-light) .basket-item-amount-field-description,
	:where(body.theme-light) .basket_action .delete_all,
	:where(body.theme-light) .back-url-text{color:#767676}
	:where(body.theme-light) .basket-items-list-item-price-for-one .basket-item-price-current-text{color:#767676}
	:where(body.theme-light) .hc-blog-goods li .hc-bg-price,
	:where(body.theme-light) .page_not_found .hc404-note{color:#767676}
	:where(body.theme-light) .bx_filter .bx_ui_slider_part span{color:#767676}
	:where(body.theme-light) .bx_item_section_name,
	:where(body.theme-light) .bx_item_section_name span{color:#767676}
	:where(body.theme-light) .stickers .sticker_na_sklade{background-color:#3a8522;color:#fff;font-weight:700}
	:where(body.theme-light) #bx-soa-order .bx-soa-tooltip .tooltip-inner{color:#d93a2f}
	:where(body.theme-light) #bx-soa-order .bx-soa-tooltip.bx-soa-tooltip-danger .tooltip-inner,
	:where(body.theme-light) .bx-soa-tooltip.bx-soa-tooltip-danger .tooltip-inner{color:#b3261e}
}
@media not all and (prefers-color-scheme:dark){body:not(.theme-dark){--gray_text_black:#767676}}
@media (prefers-color-scheme:dark){body.theme-light{--gray_text_black:#767676}}