/* Mobless 24.10.2026: исправления по аудиту Impeccable (docs/impeccable-audit-2026-10-24.md) — общий кешируемый файл
 * вместо новых <style> в шапке. Подключён в header.php последним в <head>, поэтому перекрывает main.min.css и стили шапки. */

/* Цвета сайта. Пары «текст на белом» не светлее 4,5:1 (WCAG AA): --sy-subtle 4,8:1, --sy-gold-text 5,1:1. */
:root {
	--sy-blue: #3d67df;
	--sy-blue-hover: #2f53c2;
	--sy-gold: #b08d31;
	--sy-gold-text: #8a6a1f;
	--sy-ink: #141a24;
	--sy-text: #3a4048;
	--sy-muted: #5b6472;
	--sy-subtle: #6b7280;
	--sy-green-text: #3f7d00;
	--sy-line: #e6e9ef;
	--sy-focus: #3d67df;
}

/* ---------- Каталог: пустая выдача фильтра (include/filter_empty.php) ---------- */
.sy-empty {
	flex: 0 0 100%;
	max-width: 560px;
	margin: 8px 0 40px;
	padding: 28px 24px;
	border: 1px solid var(--sy-line);
	border-radius: 14px;
	background: #fff;
	font-family: "Montserrat", sans-serif;
}
.sy-empty__title { margin: 0 0 8px; font: 700 18px/1.35 "Montserrat", sans-serif; color: var(--sy-ink); }
.sy-empty__text { margin: 0 0 18px; font: 400 15px/1.5 "Montserrat", sans-serif; color: var(--sy-muted); }
.sy-empty__btn {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 22px;
	border-radius: 10px;
	background: var(--sy-blue);
	color: #fff !important;
	font: 600 15px/1 "Montserrat", sans-serif;
	text-decoration: none !important;
}
.sy-empty__btn:hover { background: var(--sy-blue-hover); }

/* ---------- Каталог: фильтр нижней панелью на экранах уже 1024 px (sy_filter_panel в app.js) ---------- */
.sy-filter-toggle,
.sy-aside-close { display: none; }

@media (max-width: 1023.98px) {
	.sy-filter-toggle {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		min-height: 44px;
		margin: 0 0 18px;
		padding: 0 18px;
		border: 1px solid #d5dae3;
		border-radius: 10px;
		background: #fff;
		color: var(--sy-ink);
		font: 600 15px/1 "Montserrat", sans-serif;
		cursor: pointer;
	}
	.sy-filter-toggle svg { width: 20px; height: 20px; fill: none; stroke: var(--sy-blue); stroke-width: 2.2; stroke-linecap: round; }
	.sy-filter-toggle__count {
		min-width: 22px;
		height: 22px;
		padding: 0 6px;
		border-radius: 11px;
		background: var(--sy-blue);
		color: #fff;
		font-size: 12px;
		line-height: 22px;
		text-align: center;
	}

	.catalog-wrapper .page-container__aside.is-open {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		top: auto; /* на 992–1023 px тема делает колонку sticky с top:16px — без сброса панель висла сверху */
		bottom: 0;
		z-index: 1200;
		width: auto;
		max-height: 88vh;
		max-height: 88dvh;
		margin: 0;
		padding: 0 16px;
		overflow-y: auto;
		overscroll-behavior: contain;
		scroll-padding: 64px 0 88px; /* фокус с клавиатуры не прячется под липкие шапку и «Показать/Сбросить» */
		background: #fff;
		border-radius: 18px 18px 0 0;
		box-shadow: 0 -12px 40px rgba(20, 26, 36, .25);
		animation: sySheetUp .28s cubic-bezier(.16, 1, .3, 1);
	}
	/* В панели фильтр важнее дерева разделов (покупатель уже в разделе) — ставим его сразу под заголовок */
	.catalog-wrapper .page-container__aside.is-open { display: flex; flex-direction: column; }
	.page-container__aside.is-open > .smart-filter { order: -1; }
	.page-container__aside.is-open > .catalog-filter__header { order: -2; }
	.page-container__aside.is-open .smart-filter .row { margin-left: 0; margin-right: 0; }
	.page-container__aside.is-open .smart-filter [class*="col-"] { padding-left: 0; padding-right: 0; flex: 0 0 100%; max-width: 100%; }
	.page-container__aside.is-open .catalog-filter__header {
		position: sticky;
		top: 0;
		z-index: 2;
		margin: 0 -16px 8px;
		padding: 8px 8px 8px 16px;
		background: #fff;
		border-bottom: 1px solid var(--sy-line);
	}
	.page-container__aside.is-open .catalog-filter__header-text { font: 600 14px/1 "Montserrat", sans-serif; color: var(--sy-ink); }
	.page-container__aside.is-open .sy-aside-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin-left: auto;
		border: 0;
		border-radius: 10px;
		background: transparent;
		cursor: pointer;
	}
	.sy-aside-close svg { width: 22px; height: 22px; fill: none; stroke: var(--sy-ink); stroke-width: 2.2; stroke-linecap: round; }
	/* «Выбрано: N» у фильтра — всплывашка рядом с галочкой; в панели число пишет сама кнопка «Показать N товаров» */
	.page-container__aside.is-open #modef { display: none !important; }
	.page-container__aside.is-open .smart-filter { margin-bottom: 0 !important; }
	/* кнопки «Показать/Сбросить» — в своём .row, прилипает он (родитель — вся форма фильтра) */
	.page-container__aside.is-open .smart-filter-form > .row:last-child {
		position: sticky;
		bottom: 0;
		z-index: 2;
		margin: 0 -16px !important;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
		background: #fff;
		border-top: 1px solid var(--sy-line);
	}
	.page-container__aside.is-open .smart-filter-button-box { padding: 0 !important; }
	.page-container__aside.is-open .smart-filter-button-box .btn { min-height: 48px; font-size: 15px; }
	.page-container__aside.is-open .bx-filter-param-label { min-height: 44px; display: flex !important; align-items: center; }

	.sy-aside-backdrop {
		position: fixed;
		inset: 0;
		z-index: 1199;
		background: rgba(20, 26, 36, .45);
	}
	body.sy-aside-lock { overflow: hidden; }
}
@keyframes sySheetUp { from { transform: translateY(24px); opacity: .6; } }
@media (prefers-reduced-motion: reduce) {
	.catalog-wrapper .page-container__aside.is-open { animation: none; }
}

/* ---------- Клавиатура и экранный диктор (аудит, находки 9–11, 13–15) ---------- */

/* 11. Рамка фокуса. В теме у полей outline:0 (main.min.css: input, input:focus и ещё 20+ правил), у кнопок cookie и
 * summary тоже. Ссылки, кнопки, галочки и переключатели — общая рамка с клавиатуры (:focus-visible, мышью не видна).
 * Текстовые поля — без !important: :focus-visible у них срабатывает и от касания, поэтому поля со своей подсветкой
 * фокуса (поиск в шапке, касса, вход в ЛК) остаются со своей — их правила специфичнее; рамку получают только «голые». */
:where(a[href], button, summary, input[type="checkbox"], input[type="radio"], [tabindex]:not([tabindex="-1"])):focus-visible {
	outline: 2px solid var(--sy-focus) !important;
	outline-offset: 2px !important;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--sy-focus); outline-offset: 0; }
/* поиск в шапке: рамка не на поле (его обрезает overflow:hidden строки поиска), а на всей строке; на телефоне у строки своя золотая */
.search__input:focus-visible { outline: none; }
@media (min-width: 992px) {
	.search__block:has(.search__input:focus-visible) { outline: 2px solid var(--sy-focus); outline-offset: 2px; }
}
/* на синей полосе меню каталога синяя рамка не видна — белая внутри пункта */
.header-menu-block .header-menu__link:focus-visible { outline-color: #fff !important; outline-offset: -6px !important; }

/* 9. Закрытое мобильное меню было прозрачным, но «видимым»: первые ~13 нажатий Tab уходили в него, диктор читал меню дважды */
.mobile-menu-area:not(.mobile-menu-area--open) { visibility: hidden; }

/* 14. Бургер не меньше 44 px; в меню — крестик «Закрыть»; «Каталог» стал кнопкой (раскрывает список разделов) */
.header-body__mobile-menu-button { min-width: 44px; min-height: 44px; }
/* в теме transition:all — видимость тоже «плыла» 0,5 с, и фокус в только что открытое меню не попадал */
.mobile-menu { padding-top: 60px; transition-property: left; }
.sy-mm-close {
	position: absolute;
	top: 8px;
	right: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	cursor: pointer;
}
.sy-mm-close svg { width: 22px; height: 22px; fill: none; stroke: var(--sy-ink); stroke-width: 2.2; stroke-linecap: round; }
.mobile-menu .sy-mm-cat { width: 100%; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; }

/* 13. Мега-меню каталога: открывается и фокусом (Tab), Esc прячет выпадашку (класс sy-drop-off ставит app.js) */
.header-menu-block .header-menu__item:focus-within .menu-drop-block { display: block; }
.header-menu-block .header-menu__item.sy-drop-off .menu-drop-block { display: none !important; }

/* 10. Окно «Заказать звонок»: подписи читаемые (было #777, 4,48:1), галочки крупнее, ошибка и неверное поле видны */
.recall_form label { color: var(--sy-text); }
.recall_form input[type="checkbox"] { width: 20px; height: 20px; flex: 0 0 20px; }
.recall_form .recall_error { display: none; margin-top: 10px; color: #c62828; font: 600 14px/1.45 "Montserrat", sans-serif; }
.recall_form .recall_error.show_error { display: block; }
.recall_form [aria-invalid="true"] { border-color: #c62828 !important; box-shadow: 0 0 0 2px rgba(198, 40, 40, .18); }
.recall_form input[type="checkbox"][aria-invalid="true"] { outline: 2px solid #c62828; outline-offset: 2px; }
.recall_form .sy-recall-send { min-height: 44px; }
/* окно «Отзыв на товар» (та же .recall_form): звёзды — кнопки, подпись «Оценка» как у полей, выбранная оценка текстом */
.recall_form .sy-rate-label { color: var(--sy-text); font: 400 14px/25px "Montserrat", sans-serif; }
.modal-review-rating { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.modal-review-rating button { padding: 2px; border: 0; background: transparent; color: #8b93a1; font-size: 30px; line-height: 1; cursor: pointer; } /* 3,1:1 — граница WCAG для элементов управления */
.modal-review-rating button.activate { color: var(--sy-gold); }
.modal-review-rating .sy-rate-out { margin-left: 10px; color: var(--sy-muted); font: 600 14px/1.3 "Montserrat", sans-serif; }

/* 15. Пауза баннеров на главной (sy_banner_controls в app.js) */
.sy-bnr-pause {
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 10;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(20, 26, 36, .6);
	cursor: pointer;
}
.sy-bnr-pause[hidden] { display: none; }
.sy-bnr-pause:hover { background: rgba(20, 26, 36, .8); }
.sy-bnr-pause svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; }
.sy-bnr-pause__play { display: none; fill: #fff; stroke: none; }
.sy-bnr-pause.is-stopped .sy-bnr-pause__ii { display: none; }
.sy-bnr-pause.is-stopped .sy-bnr-pause__play { display: inline; }
@media (max-width: 767.98px) {
	.sy-bnr-pause { right: 10px; bottom: 10px; width: 32px; height: 32px; }
	.sy-bnr-pause svg { width: 14px; height: 14px; }
}

/* ---------- Читаемость: контраст текста (аудит, находки 1–4) ---------- */
/* Mobless 24.10.2026 (аудит Impeccable, находка 1): серый текст из main.min.css был 2,0–4,48:1 на белом.
 * Перекрываем здесь (файл подключён последним в <head>), main.min.css не трогаем. :hover-правила main.min.css
 * специфичнее и продолжают работать. */
.header__top-menu-link,
.laptop_enter,
.breadcrumb-block__item,
.title-count__text,
.review__header-info-date,
.all-catalog,
.contact-label { color: var(--sy-subtle); }
.search__input::-webkit-input-placeholder { color: var(--sy-muted); }
.search__input::-moz-placeholder { color: var(--sy-muted); }
.search__input::placeholder { color: var(--sy-muted); }
/* общий абзац и вторичный текст #777 (4,48:1) */
p,
.about-info__text,
.review__text,
.city__text,
.info-item__text,
.contact-text,
.card-big-price__text-info,
.nav-pills .nav-link { color: var(--sy-muted); }
/* статусы наличия: «много» #5fa800 3,0:1, «достаточно» #fdde4f 1,4:1; «мало» #da1e48 4,9:1 оставлен */
.count__text { color: var(--sy-green-text); border-bottom-color: var(--sy-green-text); }
.count__text.enough { color: var(--sy-gold-text); border-bottom-color: var(--sy-gold-text); }
/* подписи шкалы цены в фильтре: #6b8086 11px было 4,15:1 (крайние — чёрные, их не трогаем) */
.smart-filter-slider-ruler.p2 span,
.smart-filter-slider-ruler.p3 span,
.smart-filter-slider-ruler.p4 span { color: var(--sy-muted); }
/* промо-строка карточки: чистый красный 4,0:1 → красный сайта */
.card-promo { color: #da1e48; }

/* Mobless 24.10.2026 (аудит Impeccable, находка 2): условия доставки на карточке были оранжевые 700 12px (2,3:1) —
 * графитовый текст 13,5px, золотой акцент только на суммах. Касается и фразы про звонок у закончившегося товара. */
.card-big-price__text { color: var(--sy-text); font: 500 13.5px/1.55 "Montserrat", sans-serif; }
.card-big-price__text a { color: var(--sy-ink); }
.card-big-price__text .sy-dlv-part { display: block; }
.card-big-price__text .sy-dlv-part + .sy-dlv-part { margin-top: 6px; }
.card-big-price__text .sy-dlv-sum { color: var(--sy-gold-text); font-weight: 700; white-space: nowrap; }