/*
 * REDMAY.RU — фирменный стиль «алый мазок».
 *
 * Слой поверх штатного оформления: файл только переопределяет цвета и вид
 * главных кнопок, поэтому старая тема остаётся целой и включается обратно
 * одной настройкой в админке.
 *
 * Цвета из бренд-пакета: алый #E40D2D, наведение #C80A25, нажатие #A9071F,
 * чёрный #090909, молочный фон #FCFBFA.
 *
 * Красным окрашены только главные действия, активные состояния и счётчики.
 * Заливать красным весь магазин нельзя: на витрине с тысячами фотографий
 * товара цветной фон спорит с упаковками и мешает их различать.
 */

/*
 * Переменные шаблона объявлены в :root, но переопределяем их на body —
 * так тема включается одним классом и не трогает исходный файл.
 */
body.rm-theme-brush {
	--rm-red: #E40D2D;
	--rm-red-hover: #C80A25;
	--rm-red-active: #A9071F;

	/* Имена оставлены прежние: их читает вся вёрстка шаблона. */
	--rm-pink: #E40D2D;
	--rm-wine: #A9071F;
	--rm-coral: #E40D2D;
	--rm-plum: #C80A25;
	--rm-ink: #090909;
	--rm-muted: #6E6E73;
	--rm-line: #E8E6E4;
	--rm-soft: #FCFBFA;
	--rm-cream: #FCFBFA;

	/* В новом стиле переходов цвета нет — только плотный алый. */
	--rm-gradient: #E40D2D;
	--rm-shadow: 0 18px 45px rgba(9, 9, 9, .10);

	/* Файлы из бренд-пакета: 02_site/buttons/svg. */
	--rm-brush: url("../assets/redmay/brush/brush-primary-normal.svg");
	--rm-brush-hover: url("../assets/redmay/brush/brush-primary-hover.svg");
	--rm-brush-pressed: url("../assets/redmay/brush/brush-primary-pressed.svg");
	--rm-brush-disabled: url("../assets/redmay/brush/brush-primary-disabled.svg");

	/* Короткий мазок — для узких кнопок, длинный на них сжимался в кляксу. */
	--rm-brush-small: url("../assets/redmay/brush/brush-small-normal.svg");
	--rm-brush-small-hover: url("../assets/redmay/brush/brush-small-hover.svg");
	--rm-brush-small-pressed: url("../assets/redmay/brush/brush-small-pressed.svg");

	--rm-brush-chip: url("../assets/redmay/brush/brush-chip-normal.svg");
	--rm-brush-chip-hover: url("../assets/redmay/brush/brush-chip-hover.svg");

	--rm-brush-underline: url("../assets/redmay/brush/brush-underline-normal.svg");
	--rm-brush-underline-hover: url("../assets/redmay/brush/brush-underline-hover.svg");

	background: var(--rm-soft);
}

/* ---------- логотип ---------- */

/*
 * Новый знак шире и ниже прежнего: в нём подпись под словом, а не рядом.
 * Высоту ведём от ширины, чтобы подпись не съезжала на узких экранах.
 */
.rm-theme-brush .redmay-header-logo img {
	/*
	 * Шаблон держит логотип правилом с !important (255px и потолок высоты
	 * 64px). Прежний знак был вытянутым и в эти рамки укладывался, новый —
	 * почти вдвое выше, и под старым потолком подпись «Парфюмерия и
	 * косметика» превращается в серую полоску. Поэтому перебиваем.
	 */
	width: 236px !important;
	max-width: 34vw !important;
	height: auto !important;
	max-height: none !important;
}

@media (max-width: 991px) {
	.rm-theme-brush .redmay-header-logo img {
		width: 178px !important;
		max-width: 48vw !important;
	}
}

/* ---------- главные кнопки ---------- */

/*
 * Мазок ставим фоном самой кнопки, а не псевдоэлементом: у кнопок шаблона
 * ::before и ::after уже заняты галочками и стрелками, и подмена ломала бы их.
 * Рамка убирается совсем — под рваным краем ровная линия выдаёт прямоугольник.
 */
.rm-theme-brush .redmay-home-button,
.rm-theme-brush .redmay-empty-section-actions a.is-primary,
.rm-theme-brush .rm-kit__buy,
.rm-theme-brush .redmay-season-cta {
	border: 0 !important;
	border-radius: 0 !important;
	color: #fff !important;
	background: var(--rm-brush) center / 100% 100% no-repeat !important;
	box-shadow: none !important;
	text-shadow: 0 1px 2px rgba(9, 9, 9, .25);
	transition: background-image .15s ease, transform .18s ease;
}

.rm-theme-brush .redmay-home-button:hover,
.rm-theme-brush .redmay-empty-section-actions a.is-primary:hover,
.rm-theme-brush .rm-kit__buy:hover:not(:disabled),
.rm-theme-brush .redmay-season-cta:hover {
	background-image: var(--rm-brush-hover) !important;
	transform: translateY(-1px);
	filter: none;
}

.rm-theme-brush .redmay-home-button:active,
.rm-theme-brush .redmay-empty-section-actions a.is-primary:active,
.rm-theme-brush .rm-kit__buy:active:not(:disabled),
.rm-theme-brush .redmay-season-cta:active {
	background-image: var(--rm-brush-pressed) !important;
	transform: translateY(1px);
}

/* Кнопка «в корзину», пока набор не собран: мазок сюда не ставим — серое
   пятно кистью читается как случайный мазок, а не как запрет. */
.rm-theme-brush .rm-kit__buy:disabled {
	background: #EFEDEB !important;
	color: #A9A6A2 !important;
	text-shadow: none;
}

/*
 * Кнопка поиска короче остальных, и длинный мазок на ней сжимался бы в
 * плотный прямоугольник — рваный край пропадает. Для таких кнопок в пакете
 * есть отдельный короткий мазок.
 */
.rm-theme-brush .search-title-button {
	border: 0 !important;
	border-radius: 0 !important;
	color: #fff !important;
	background: var(--rm-brush-small) center / 100% 100% no-repeat !important;
	box-shadow: none !important;
	text-shadow: 0 1px 2px rgba(9, 9, 9, .25);
	transition: background-image .15s ease, transform .18s ease;
}

.rm-theme-brush .search-title-button:hover {
	background-image: var(--rm-brush-small-hover) !important;
	transform: translateY(-1px);
}

.rm-theme-brush .search-title-button:active {
	background-image: var(--rm-brush-small-pressed) !important;
	transform: translateY(1px);
}

/* ---------- второстепенные кнопки ---------- */

/*
 * Обводки и ссылки-кнопки остаются светлыми: если сделать мазком каждую
 * кнопку, страница превратится в набор красных пятен и главное действие
 * перестанет выделяться.
 */
.rm-theme-brush .redmay-empty-section-actions a:not(.is-primary),
.rm-theme-brush .rm-kit__more-btn {
	border-color: #E3E0DD;
	border-radius: 2px;
	color: var(--rm-ink);
}

.rm-theme-brush .redmay-empty-section-actions a:not(.is-primary):hover,
.rm-theme-brush .rm-kit__more-btn:hover {
	border-color: var(--rm-red);
	color: var(--rm-red);
}

/*
 * Счётчики избранного и корзины описаны ниже, в блоке «элементы шапки»:
 * вместе с рисованными иконками они получили янтарный цвет из того же
 * пакета, и держать их правила в двух местах было бы той же ошибкой, что
 * с меню категорий.
 */

/* ---------- алфавит брендов ---------- */

.rm-theme-brush .redmay-header-brand-line a.is-all {
	position: relative;
	color: #fff;
	background: var(--rm-brush-chip) center / 100% 100% no-repeat;
	border-radius: 0;
	padding: 4px 12px;
}

.rm-theme-brush .redmay-header-brand-line a.is-all:hover {
	background-image: var(--rm-brush-chip-hover);
	color: #fff;
}

.rm-theme-brush .redmay-header-brand-line a:not(.is-all):hover { color: var(--rm-red); }

/*
 * Меню категорий целиком описано ниже, в блоке «меню категорий с иконками»:
 * первая версия темы красила там только подпись, и два набора правил для
 * одного элемента разъезжались — мазок у выбранного раздела вставал по
 * старым отступам.
 */

/* ---------- виджет связи ---------- */

.rm-theme-brush .redmay-cc__launcher {
	background: var(--rm-red) !important;
	box-shadow: 0 12px 30px rgba(228, 13, 45, .28) !important;
}

.rm-theme-brush .redmay-cc__launcher:hover {
	background: var(--rm-red-hover) !important;
	transform: translateY(-2px) rotate(-2deg);
}

/* ---------- мелкие акценты ---------- */

.rm-theme-brush a { color: var(--rm-ink); }
.rm-theme-brush a:hover { color: var(--rm-red); }

.rm-theme-brush .redmay-header-benefit span[aria-hidden] { color: var(--rm-red); }

/*
 * Цена и скидка. Старая тема красила их в малиновый через переменную, здесь
 * достаточно того, что переменная уже алая, — но у зачёркнутой цены свой
 * серый, его не трогаем: она должна оставаться второстепенной.
 */
.rm-theme-brush .price_matrix_block .price,
.rm-theme-brush .product-item-price-current { color: var(--rm-ink); }

/* Фокус с клавиатуры — заметный, но не красный поверх красного. */
.rm-theme-brush :focus-visible {
	outline: 3px solid rgba(228, 13, 45, .28);
	outline-offset: 3px;
}

/* ---------- главный баннер ---------- */

/*
 * Баннер целиком нарисован стилями: фон, флаконы, лепестки. В прежней теме он
 * розово-сиреневый, и рядом с алой шапкой это читается как две разные витрины.
 * Перекрашиваем теми же средствами — молочный фон, алое стекло, чёрные крышки.
 */
.rm-theme-brush .redmay-home-hero {
	background: var(--rm-soft);
	box-shadow: 0 24px 60px rgba(9, 9, 9, .10);
	border-radius: 28px;
}

/* Белый овал прежней темы гасил розовый градиент — на молочном он не нужен. */
.rm-theme-brush .redmay-home-hero::after { display: none; }

/*
 * Мазки за флаконами — то, что делает баннер фирменным. Два слоя: широкий
 * алый и короткий чёрный поверх, оба развёрнуты, чтобы не читались полосами.
 */
.rm-theme-brush .redmay-home-hero-art::before,
.rm-theme-brush .redmay-home-hero-art::after {
	content: "";
	position: absolute;
	z-index: 0;
	pointer-events: none;
}

.rm-theme-brush .redmay-home-hero-art::before {
	inset: 20% -14% 26% 2%;
	background: var(--rm-brush) center / 100% 100% no-repeat;
	transform: rotate(-5deg);
	opacity: .95;
}

/*
 * Чёрный мазок — короткий росчерк позади флаконов, а не вторая плашка:
 * во всю ширину он превращается в тёмный прямоугольник и забивает баннер.
 */
.rm-theme-brush .redmay-home-hero-art::after {
	inset: 34% -6% 34% 40%;
	background: var(--rm-brush-small) center / 100% 100% no-repeat;
	transform: rotate(7deg);
	filter: grayscale(1) brightness(.22);
	opacity: .88;
}

/* Флаконы поверх мазков, иначе мазок закрасит их целиком. */
.rm-theme-brush .redmay-home-bottle,
.rm-theme-brush .redmay-home-petal { z-index: 2; }

/*
 * Стекло: прозрачный корпус с алым содержимым внизу — так флакон читается
 * даже поверх алого мазка, потому что у него светлый верх и тёмный кант.
 */
.rm-theme-brush .redmay-home-bottle {
	/*
	 * Поверх алого мазка полупрозрачное стекло теряется, поэтому корпус почти
	 * непрозрачный: светлый верх, плотный кант и тень — по ним флакон читается
	 * на любом фоне.
	 */
	border-color: rgba(9, 9, 9, .45);
	background: linear-gradient(160deg, #FFFFFF, #FBF7F7 46%, rgba(228, 13, 45, .32) 100%);
	box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .65), 0 26px 44px rgba(9, 9, 9, .3);
	backdrop-filter: none;
}

/* Крышка — плотный чёрный, как в фирменном знаке. */
.rm-theme-brush .redmay-home-bottle::before {
	background: linear-gradient(90deg, #090909, #2A2A2C 45%, #090909);
	box-shadow: 0 8px 0 rgba(255, 255, 255, .3);
}

.rm-theme-brush .redmay-home-bottle span {
	border-top-color: rgba(9, 9, 9, .18);
	border-bottom-color: rgba(9, 9, 9, .18);
}

.rm-theme-brush .redmay-home-bottle span::after { color: var(--rm-red); }

/* Орбиты и лепестки: тонкие серые круги и алые брызги вместо розовых. */
.rm-theme-brush .redmay-home-orbit { border-color: rgba(9, 9, 9, .12); }

.rm-theme-brush .redmay-home-petal {
	background: var(--rm-red);
	opacity: .85;
}

/* ---------- текст баннера ---------- */

.rm-theme-brush .redmay-home-kicker,
.rm-theme-brush .redmay-home-eyebrow { color: var(--rm-red); }

.rm-theme-brush .redmay-home-hero h1 { color: var(--rm-ink); }

/* Одно слово алым — как в фирменном макете. Обводит его скрипт темы. */
.rm-theme-brush .redmay-home-hero h1 .rm-accent { color: var(--rm-red); }

.rm-theme-brush .redmay-home-hero-copy > p { color: #5A585A; }

.rm-theme-brush .redmay-home-hero-points { color: var(--rm-ink); }

/*
 * «Все бренды» — ссылка с кистевым подчёркиванием вместо ровной линии:
 * ровная под алой кнопкой выглядела бы её бледной копией.
 */
.rm-theme-brush .redmay-home-text-link {
	position: relative;
	border-bottom: 0;
	padding-bottom: 9px;
	color: var(--rm-ink);
}

.rm-theme-brush .redmay-home-text-link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 8px;
	background: var(--rm-brush-underline) center / 100% 100% no-repeat;
}

.rm-theme-brush .redmay-home-text-link:hover { color: var(--rm-red); }
.rm-theme-brush .redmay-home-text-link:hover::after { background-image: var(--rm-brush-underline-hover); }

/* ---------- меню категорий с иконками ---------- */

/*
 * Иконки навешиваем на готовое меню по адресам ссылок, а не заменяем его
 * компонентом из пакета: в нынешнем меню своя логика (пункты собираются
 * в .top.menu_ext.php), и её замена сломала бы и прежнюю тему.
 *
 * Адрес раздела хранится в переменной --rm-cat-icon: она нужна дважды —
 * как картинка в обычном состоянии и как маска при наведении, когда рисунок
 * заливается алым целиком.
 */
/*
 * Список категорий шаблон растягивает на всю ширину (justify-content:
 * space-between), из-за чего «Парфюмерия» упирается в левый край, а
 * «Конструктор» — в правый, и промежутки между пунктами получаются разными.
 * Собираем ряд по центру с равным шагом — так же, как стоит алфавит брендов
 * строкой ниже.
 */
/*
 * Сам блок меню шире содержимого не становится (flex: 0 1 auto), поэтому ряд
 * прижимался к левому краю обёртки и до правого не доставал. Растягиваем блок
 * на всю ширину — тогда центрирование списка внутри него ставит ряд ровно
 * посередине, вровень с алфавитом строкой ниже.
 */
.rm-theme-brush .top-catalog-menu {
	/*
	 * Ширину задаём напрямую: свойство flex здесь не долетает — в шаблоне оно
	 * объявлено в правиле, которое до этого элемента не доходит, и блок
	 * остаётся шириной по содержимому.
	 */
	width: 100% !important;
	flex-grow: 1 !important;
}

.rm-theme-brush .top-catalog-menu ul {
	justify-content: center;
}

/*
 * Пункту нельзя ставить position: relative. Выпадающий список внутри него
 * позиционируется абсолютно и без этого тянется по ширине всей шапки; с
 * relative он привязывается к самому пункту, сжимается до его ширины (129 px)
 * и обрезает названия подразделов. Подчёркивание обходится без него —
 * относительной сделана сама ссылка.
 */

.rm-theme-brush .top-catalog-menu .bx-nav-1-lvl-link {
	/*
	 * !important обязателен: у пунктов с подменю («Парфюмерия», «Для мужчин»)
	 * стоит класс hidden-xs, и правило шаблона делает ссылку строчной. Внутри
	 * строчной ссылки псевдоэлемент тоже становится строчным, а строчный не
	 * принимает ширину с высотой — из-за этого у этих двух рисунок не
	 * появлялся вовсе.
	 */
	display: inline-flex !important;
	position: relative;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding-bottom: 8px;
	line-height: 1.15;
	color: var(--rm-ink);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .02em;
}

/*
 * Рисунок берём в удвоенном размере и ужимаем: файлы 320×240 показываются
 * в 64 px и остаются резкими на любом экране.
 */
.rm-theme-brush .top-catalog-menu .bx-nav-1-lvl-link::before {
	content: "";
	display: block;
	/*
	 * Поля у файлов обрезаны (icons_trim), поэтому рисунок занимает блок
	 * целиком. Высота у всех одна, ширина своя — так значки выглядят
	 * одинаковыми по величине, хотя формы у них разные.
	 */
	width: 92px;
	height: 56px;
	background: var(--rm-cat-icon) center bottom / contain no-repeat;
	transition: transform .18s ease;
}

/*
 * Сам рисунок не перекрашиваем. В фирменном макете у выбранного раздела он
 * остаётся чёрно-красным — краснеют подпись и мазок под ней; заливка всего
 * значка съедала бы его рисованные детали (брызги, штриховку флакона).
 */

.rm-theme-brush .top-catalog-menu .bx-nav-1-lvl-link:hover::before { transform: translateY(-2px) rotate(-2deg); }

.rm-theme-brush .top-catalog-menu .bx-nav-1-lvl-link:hover { color: var(--rm-red); }

/*
 * Мазок под подписью. Прижат к тексту вплотную: в макете он читается частью
 * надписи, а с прежним отступом висел отдельной полоской.
 */
.rm-theme-brush .top-catalog-menu .bx-nav-1-lvl-link::after {
	content: "";
	position: absolute;
	left: -3%;
	right: -3%;
	bottom: 0;
	height: 8px;
	background: url("../assets/redmay/categories/brush/underline-black.png") center / 100% 100% no-repeat;
	opacity: .9;
}

.rm-theme-brush .top-catalog-menu .bx-nav-1-lvl-link:hover::after {
	background-image: url("../assets/redmay/categories/brush/underline-red.png");
	opacity: 1;
}

/* Текущий раздел: алая подпись и алый мазок. */
.rm-theme-brush .top-catalog-menu a.rm-nav-active {
	color: var(--rm-red) !important;
}

.rm-theme-brush .top-catalog-menu a.rm-nav-active::after {
	background-image: url("../assets/redmay/categories/brush/underline-red.png");
	opacity: 1;
}

/* Соответствие «адрес раздела → рисунок». */
.rm-theme-brush .top-catalog-menu a[href="/catalog/parfyumeriya-rw-e9e00ffb/"] {
	--rm-cat-icon: url("../assets/redmay/categories/icons_trim/perfume.png");
}
.rm-theme-brush .top-catalog-menu a[href="/catalog/ukhod/"] {
	--rm-cat-icon: url("../assets/redmay/categories/icons_trim/care.png");
}
.rm-theme-brush .top-catalog-menu a[href="/catalog/dlya-volos/"] {
	--rm-cat-icon: url("../assets/redmay/categories/icons_trim/hair.png");
}
.rm-theme-brush .top-catalog-menu a[href*="muzhskaya-parfyumeriya"] {
	--rm-cat-icon: url("../assets/redmay/categories/icons_trim/men.png");
}
.rm-theme-brush .top-catalog-menu a[href="/ai-podbor/"] {
	--rm-cat-icon: url("../assets/redmay/categories/icons_trim/ai.png");
}
.rm-theme-brush .top-catalog-menu a[href="/catalog/podarki/"] {
	--rm-cat-icon: url("../assets/redmay/categories/icons_trim/gifts.png");
}
.rm-theme-brush .top-catalog-menu a[href="/stock/"] {
	--rm-cat-icon: url("../assets/redmay/categories/icons_trim/sales.png");
}
.rm-theme-brush .top-catalog-menu a[href="/catalog/skidki/"] {
	--rm-cat-icon: url("../assets/redmay/categories/icons_trim/discounts.png");
}
.rm-theme-brush .top-catalog-menu a[href="/catalog/konstruktor-nabora/"] {
	--rm-cat-icon: url("../assets/redmay/categories/icons_trim/constructor.png");
}

/*
 * Подпись. У шаблона на ней padding 17px со всех сторон — он и создавал весь
 * воздух между значком, текстом и мазком: отступы в самой теме были уже
 * нулевыми, а пустоту давал этот внутренний отступ.
 */
.rm-theme-brush .top-catalog-menu .bx-nav-1-lvl-link-text {
	display: block;
	padding: 0 6px !important;
	margin: 0 !important;
	line-height: 1.15;
}

/*
 * Наведение. Шаблон подкладывает под подпись серую плашку, а у пунктов с
 * подменю («Парфюмерия», «Для мужчин») ещё и красит текст в тёмный — в новом
 * стиле подпись должна просто становиться алой, без подложки.
 */
.rm-theme-brush .top-catalog-menu .bx-nav-1-lvl > .bx-nav-1-lvl-link,
.rm-theme-brush .top-catalog-menu .bx-nav-1-lvl-link-text,
.rm-theme-brush .top-catalog-menu .bx-nav-1-lvl:hover > .bx-nav-1-lvl-link,
.rm-theme-brush .top-catalog-menu .bx-nav-1-lvl.bx-hover > .bx-nav-1-lvl-link,
.rm-theme-brush .top-catalog-menu .bx-nav-1-lvl:hover > .bx-nav-1-lvl-link .bx-nav-1-lvl-link-text,
.rm-theme-brush .top-catalog-menu .bx-nav-1-lvl.bx-hover > .bx-nav-1-lvl-link .bx-nav-1-lvl-link-text {
	background: transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.rm-theme-brush .top-catalog-menu .bx-nav-1-lvl:hover > .bx-nav-1-lvl-link,
.rm-theme-brush .top-catalog-menu .bx-nav-1-lvl.bx-hover > .bx-nav-1-lvl-link,
.rm-theme-brush .top-catalog-menu .bx-nav-1-lvl:hover > .bx-nav-1-lvl-link .bx-nav-1-lvl-link-text,
.rm-theme-brush .top-catalog-menu .bx-nav-1-lvl.bx-hover > .bx-nav-1-lvl-link .bx-nav-1-lvl-link-text {
	color: var(--rm-red) !important;
}

/* Мазок краснеет вместе с подписью — за наведение на весь пункт, не только на текст. */
.rm-theme-brush .top-catalog-menu .bx-nav-1-lvl:hover .bx-nav-1-lvl-link::after,
.rm-theme-brush .top-catalog-menu .bx-nav-1-lvl.bx-hover .bx-nav-1-lvl-link::after {
	background-image: url("../assets/redmay/categories/brush/underline-red.png");
	opacity: 1;
}

/*
 * Наклон мазкам. Все линии под одним углом выдают штамп: в фирменном макете
 * они нарисованы от руки и каждая лежит чуть по-своему. Угол задаём по
 * порядковому номеру пункта — рисунок повторяется, но глазом это читается
 * как живая линия, а не копия.
 */
.rm-theme-brush .top-catalog-menu .bx-nav-1-lvl:nth-child(1) .bx-nav-1-lvl-link::after { transform: rotate(-1.1deg); }
.rm-theme-brush .top-catalog-menu .bx-nav-1-lvl:nth-child(2) .bx-nav-1-lvl-link::after { transform: rotate(.8deg) translateY(.5px); }
.rm-theme-brush .top-catalog-menu .bx-nav-1-lvl:nth-child(3) .bx-nav-1-lvl-link::after { transform: rotate(-.6deg); }
.rm-theme-brush .top-catalog-menu .bx-nav-1-lvl:nth-child(4) .bx-nav-1-lvl-link::after { transform: rotate(1.3deg) translateY(.5px); }
.rm-theme-brush .top-catalog-menu .bx-nav-1-lvl:nth-child(5) .bx-nav-1-lvl-link::after { transform: rotate(-1.4deg); }
.rm-theme-brush .top-catalog-menu .bx-nav-1-lvl:nth-child(6) .bx-nav-1-lvl-link::after { transform: rotate(.5deg); }
.rm-theme-brush .top-catalog-menu .bx-nav-1-lvl:nth-child(7) .bx-nav-1-lvl-link::after { transform: rotate(-.9deg) translateY(.5px); }
.rm-theme-brush .top-catalog-menu .bx-nav-1-lvl:nth-child(8) .bx-nav-1-lvl-link::after { transform: rotate(1.1deg); }
.rm-theme-brush .top-catalog-menu .bx-nav-1-lvl:nth-child(9) .bx-nav-1-lvl-link::after { transform: rotate(-.7deg); }

/* Часть мазков зеркалим: иначе у всех одинаково задран правый край. */
.rm-theme-brush .top-catalog-menu .bx-nav-1-lvl:nth-child(3) .bx-nav-1-lvl-link::after,
.rm-theme-brush .top-catalog-menu .bx-nav-1-lvl:nth-child(6) .bx-nav-1-lvl-link::after,
.rm-theme-brush .top-catalog-menu .bx-nav-1-lvl:nth-child(8) .bx-nav-1-lvl-link::after { scale: -1 1; }

/* В выдвижной панели узких экранов рисунки мельче. */
@media (max-width: 1399px) {
	.rm-theme-brush .top-catalog-menu .bx-nav-1-lvl-link::before { width: 60px; height: 38px; }
}

/* ---------- элементы шапки: избранное, корзина, вход ---------- */

/*
 * Пакет REDMAY_header_controls_bitrix_v1_0: рисованные иконки в стиле
 * «гранж / кисть» — сердце, сумка, силуэт — с брызгами и мазком под
 * подписью. Палитра пакета намеренно без красного (утверждена владельцем):
 * чернила #141310, оливковый #97913D, оранжевый #D75A22, янтарный #DCA22B,
 * коричневый #6A381C.
 *
 * Пакет предлагал свою разметку (.rm-header-actions) и правку header.php
 * вместе с шаблонами корзины и авторизации — этого не делали, как и с меню
 * категорий. У шаблона уже есть всё, что нужно: обычная картинка в ::before,
 * картинка наведения в ::after с перекрёстным затуханием, подпись .icon-txt
 * и счётчик .goods_icon-counter. Иконки навешаны на эти же элементы, поэтому
 * скрипты шаблона (счётчик избранного из cookie, выпадающая корзина, меню
 * кабинета) работают без изменений, а прежняя тема остаётся прежней.
 *
 * Файлы: assets/redmay/header-controls/ (12 SVG: default / hover / active /
 * disabled на каждую из трёх иконок). Шрифт подписи в пакете — Bebas Neue,
 * которого на сайте нет; берём GothamPro, как у заголовков и меню.
 */
body.rm-theme-brush {
	--rm-hc-ink: #141310;
	--rm-hc-olive: #97913D;
	--rm-hc-orange: #D75A22;
	--rm-hc-orange-hover: #ED681E;
	--rm-hc-amber: #DCA22B;
	--rm-hc-brown: #6A381C;

	--rm-hc-favorite: url("../assets/redmay/header-controls/favorite-default.svg");
	--rm-hc-favorite-hover: url("../assets/redmay/header-controls/favorite-hover.svg");
	--rm-hc-favorite-active: url("../assets/redmay/header-controls/favorite-active.svg");
	--rm-hc-cart: url("../assets/redmay/header-controls/cart-default.svg");
	--rm-hc-cart-hover: url("../assets/redmay/header-controls/cart-hover.svg");
	--rm-hc-cart-active: url("../assets/redmay/header-controls/cart-active.svg");
	--rm-hc-account: url("../assets/redmay/header-controls/account-default.svg");
	--rm-hc-account-hover: url("../assets/redmay/header-controls/account-hover.svg");
	--rm-hc-account-active: url("../assets/redmay/header-controls/account-active.svg");
}

/*
 * Размер иконки. У шаблона она 30×21 — под тонкие контурные значки. Рисунок
 * с брызгами в таком окне превращается в кляксу, поэтому окно 60×52: на
 * широкой шапке (высота 112 px) остаётся место под подпись с мазком.
 */
.rm-theme-brush .redmay-header-actions .icon-box-link .icon-item {
	width: 60px;
	height: 52px;
	transition: transform .18s ease;
}

/* Значки. Селектор повторяет шаблонный слово в слово — так побеждает порядок файлов. */
.rm-theme-brush .header .top-icon-box .icon-box_item .favour-icon::before { background-image: var(--rm-hc-favorite); }
.rm-theme-brush .header .top-icon-box .icon-box_item .favour-icon::after { background-image: var(--rm-hc-favorite-hover); }
.rm-theme-brush .header .top-icon-box .icon-box_item .basket-icon::before { background-image: var(--rm-hc-cart); }
.rm-theme-brush .header .top-icon-box .icon-box_item .basket-icon::after { background-image: var(--rm-hc-cart-hover); }
.rm-theme-brush .header .top-icon-box .icon-box-link .user-icon::before { background-image: var(--rm-hc-account); }
.rm-theme-brush .header .top-icon-box .icon-box-link .user-icon::after { background-image: var(--rm-hc-account-hover); }

/* Нажатие: третий рисунок пакета вместо наведённого. */
.rm-theme-brush .header .top-icon-box .icon-box_item:active .favour-icon::after { background-image: var(--rm-hc-favorite-active); }
.rm-theme-brush .header .top-icon-box .icon-box_item:active .basket-icon::after { background-image: var(--rm-hc-cart-active); }
.rm-theme-brush .header .top-icon-box .icon-box_item:active .icon-box-link .user-icon::after { background-image: var(--rm-hc-account-active); }

/* Наведение: значок чуть приподнимается и наклоняется, как в демо пакета. */
.rm-theme-brush .redmay-header-actions .icon-box_item:hover .icon-box-link .icon-item {
	transform: translateY(-2px) rotate(-1deg) scale(1.035);
}
.rm-theme-brush .redmay-header-actions .icon-box_item:active .icon-box-link .icon-item {
	transform: translateY(1px) scale(.98);
}

/*
 * Подпись. Шаблон держит её на 12px с !important, поэтому размер тоже с
 * !important. Мазок под ней — не картинка, а рваный многоугольник clip-path
 * из пакета: у избранного и входа оливковый, у корзины оранжевый, как на
 * утверждённом макете.
 */
.rm-theme-brush .redmay-header-actions .icon-box-link .icon-txt {
	position: relative;
	z-index: 1;
	margin-top: 3px;
	padding: 0 4px 6px;
	font-family: "Bebas Neue", "GothamPro", Impact, "Arial Narrow", sans-serif;
	font-size: 14px !important;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .01em;
	color: var(--rm-hc-ink);
	--rm-hc-underline: var(--rm-hc-olive);
}

.rm-theme-brush .redmay-header-actions #basket_in .icon-txt { --rm-hc-underline: var(--rm-hc-orange); }

.rm-theme-brush .redmay-header-actions .icon-box-link .icon-txt::after {
	content: "";
	position: absolute;
	z-index: -1;
	left: 3%;
	right: 3%;
	bottom: 0;
	height: 5px;
	background: var(--rm-hc-underline);
	opacity: .82;
	clip-path: polygon(0 35%, 9% 12%, 23% 30%, 41% 4%, 58% 25%, 72% 8%, 100% 30%, 96% 80%, 76% 65%, 58% 92%, 39% 68%, 18% 91%, 0 67%);
	transform: rotate(-1.2deg) scaleX(.92);
	transform-origin: center;
	transition: background-color .18s ease, transform .18s ease;
}

.rm-theme-brush .redmay-header-actions .icon-box_item:hover .icon-box-link .icon-txt::after {
	background: var(--rm-hc-orange-hover);
	transform: rotate(-.4deg) scaleX(1.04);
}

.rm-theme-brush .redmay-header-actions .icon-box_item:active .icon-box-link .icon-txt::after {
	background: var(--rm-hc-brown);
}

/* Открытая корзина или меню кабинета красили подпись в розовый — в новом стиле текст не меняется. */
.rm-theme-brush .header .icon-box_item.open-in .icon-txt { color: var(--rm-hc-ink); }

/*
 * Счётчик: янтарный кружок неровной формы с белым кантом, тёмная цифра.
 * Шаблон задаёт ему 16×16 и розовый с !important — перебиваем тем же.
 */
.rm-theme-brush .header .top-icon-box .icon-box_item .goods_icon-counter {
	top: -4px;
	right: -9px;
	display: grid;
	place-items: center;
	width: auto;
	min-width: 24px;
	height: 24px;
	padding: 0 5px;
	box-sizing: border-box;
	border: 2px solid #fff;
	border-radius: 48% 52% 46% 54% / 53% 47% 55% 45%;
	background: var(--rm-hc-amber) !important;
	color: #17110A !important;
	box-shadow: 0 0 0 2px rgba(106, 56, 28, .35), 0 3px 8px rgba(42, 26, 14, .14);
	font-family: "Bebas Neue", "GothamPro", Impact, "Arial Narrow", sans-serif;
	font-size: 12px !important;
	font-weight: 800;
	line-height: 1;
	transform: rotate(2deg);
	transition: transform .18s ease, background-color .18s ease, color .18s ease;
}

.rm-theme-brush .header .top-icon-box .icon-box_item:hover .goods_icon-counter {
	background: var(--rm-hc-orange-hover) !important;
	color: #fff !important;
	transform: rotate(-2deg) translateY(-2px) scale(1.06);
}

/*
 * Пустой счётчик прячем: «0» на янтарном кружке читается как «ноль товаров,
 * но что-то есть». Класс ставит скрипт темы — сами цифры пишут скрипты
 * шаблона (избранное из cookie, корзина из AJAX), и стилями текст не прочесть.
 */
.rm-theme-brush .goods_icon-counter.rm-empty { display: none !important; }

/* Пункты шире прежних: подпись с мазком должна помещаться без переносов. */
.rm-theme-brush .redmay-header-actions { gap: 14px; }
.rm-theme-brush .redmay-header-actions .icon-box_item { min-width: 76px; }
.rm-theme-brush .redmay-header-actions .icon-box-link { gap: 0; padding: 0 2px; }

/* Прилипшая шапка ниже (82 px), подписи в ней шаблон прячет — значок мельче. */
.rm-theme-brush .redmay-header.sticky .redmay-header-actions .icon-box-link .icon-item {
	width: 48px;
	height: 42px;
}

/*
 * Узкие экраны: шаблон сжимает каждый пункт до 40×50 (!important) и прячет
 * подписи — значок должен влезть в эти 40 px. Счётчик тоже мельче.
 */
@media (max-width: 1280px) {
	.rm-theme-brush .redmay-header-actions .icon-box_item { min-width: 40px; }
	.rm-theme-brush .redmay-header-actions .icon-box-link .icon-item,
	.rm-theme-brush .redmay-header.sticky .redmay-header-actions .icon-box-link .icon-item {
		width: 40px;
		height: 36px;
	}
	.rm-theme-brush .header .top-icon-box .icon-box_item .goods_icon-counter {
		top: -5px;
		right: -6px;
		min-width: 20px;
		height: 20px;
		padding: 0 4px;
		font-size: 11px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rm-theme-brush .redmay-header-actions .icon-box-link .icon-item,
	.rm-theme-brush .redmay-header-actions .icon-box-link .icon-txt::after,
	.rm-theme-brush .header .top-icon-box .icon-box_item .goods_icon-counter { transition: none; }
}