/* =====================================================================
   HOOKAHTRADE — РЕДИЗАЙН 2026
   redesign.css — токены + шрифт Roboto Flex + ШАПКА + ПОДВАЛ
   Этап 1 (глобальный каркас). Префикс классов: .rd-*
   Заголовки: TT_Travels (уже в движке). Текст: Roboto Flex (ниже @font-face).
   Источник стилей: NEW DESIGN/IMG EXPORT FROM FIGMA/ukit.txt
   ===================================================================== */

/* ------------------------------------------------------------------ */
/* 1. ШРИФТ ROBOTO FLEX (вариативный, самохостинг, 4 subset'а)         */
/* ------------------------------------------------------------------ */
@font-face {
	font-family: 'Roboto Flex';
	font-style: normal;
	font-weight: 100 1000;
	font-stretch: 100%;
	font-display: swap;
	src: url('../fonts/RobotoFlex/robotoflex-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'Roboto Flex';
	font-style: normal;
	font-weight: 100 1000;
	font-stretch: 100%;
	font-display: swap;
	src: url('../fonts/RobotoFlex/robotoflex-cyrillic-ext.woff2') format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
	font-family: 'Roboto Flex';
	font-style: normal;
	font-weight: 100 1000;
	font-stretch: 100%;
	font-display: swap;
	src: url('../fonts/RobotoFlex/robotoflex-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Roboto Flex';
	font-style: normal;
	font-weight: 100 1000;
	font-stretch: 100%;
	font-display: swap;
	src: url('../fonts/RobotoFlex/robotoflex-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
		U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------ */
/* 2. ТОКЕНЫ (CSS-переменные) — из ukit.txt                            */
/* ------------------------------------------------------------------ */
:root {
	/* Палитра */
	--rd-bg:        #151515; /* фон шапки/подвала/тёмных секций */
	--rd-dark:      #212121; /* поиск, верхнее меню, тёмные карточки */
	--rd-accent:    #A247FC; /* акцентный фиолетовый */
	--rd-black:     #000000;
	--rd-gray:      #EFEFEF; /* светло-серый фон карточек */
	--rd-white:     #FFFFFF;

	/* Шрифты */
	--rd-font-head: 'TT_Travels', 'Roboto Flex', Arial, sans-serif; /* заголовки */
	--rd-font-text: 'Roboto Flex', Arial, sans-serif;               /* текст */

	/* Сетка / контейнер */
	--rd-container: 1600px; /* ширина контента */
	--rd-gutter:    160px;  /* боковые отступы на десктопе */
	--rd-radius:    6px;
}

/* Контейнер контента (центрируем 1600px) */
.rd-container {
	width: 100%;
	max-width: calc(var(--rd-container) + var(--rd-gutter) * 2);
	margin: 0 auto;
	padding-left: var(--rd-gutter);
	padding-right: var(--rd-gutter);
	box-sizing: border-box;
}

/* ====================================================================
   3. ШАПКА  (.rd-header)
   Верхнее меню (40px) + основная шапка (160px)
   ==================================================================== */
.rd-topbar {
	background: var(--rd-dark);
	font-family: var(--rd-font-text);
}
.rd-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 40px;
}
.rd-topbar__menu {
	display: flex;
	align-items: center;
	gap: 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.rd-topbar__menu a {
	color: var(--rd-white);
	opacity: .8;
	font-size: 14px;
	line-height: 16px;
	text-decoration: none;
	transition: opacity .2s;
}
.rd-topbar__menu a:hover { opacity: 1; }

/* --- Основная шапка --- */
/* #header.rd-header — повышенная специфичность: перебиваем старое правило
   style.css `#header { background:#964cf2 }` (иначе фон шапки фиолетовый). */
.rd-header,
#header.rd-header {
	position: relative;
	background: var(--rd-bg);

	font-family: var(--rd-font-text);
}
.rd-header__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 115px;
}

/* Логотип */
.rd-header__logo {
	display: block;
	flex: 0 0 auto;
	text-decoration: none;
}
.rd-header__logo img {
	display: block;
	width: 226px;
	height: 38px;
}
.rd-header__logo span {
	display: block;
	margin-top: 8px;
	color: var(--rd-white);
	opacity: .8;
	font-size: 12px;
	line-height: 14px;
	letter-spacing: .19em;
	text-transform: uppercase;
}

/* Обёртка кнопки «Каталог». position:static — чтобы мега-меню тянулось на всю
   ширину шапки (containing block = .rd-header). Штатный JS-тоггл .с-btn работает. */
.rd-header__catalogwrap {
	position: static;
	flex: 0 0 auto;
}

/* ----- Десктопное мега-меню каталога (на всю ширину) ----- */
.rd-header .panel__nav--pane {
	display: none;
	position: absolute;
	top: calc(100% + 0px); /* +1px — чтобы была видна нижняя граница шапки (разделитель) */
	left: 0;
	right: 0;
	width: 100%;
	box-sizing: border-box;
	padding: 32px 0 40px;
	overflow: hidden;     /* клипуем тёмный блок справа (full-bleed) */
	background: #151515;  /* светлая (левая) часть — список категорий, на всю ширину */
	box-shadow: 0 24px 40px rgba(0,0,0,.5);
	border-top: 1px solid rgba(255, 255, 255, 0.3);
	/* выше элементов фильтра каталога (ползунок цены/бар z-index до 100, попап-результат 915),
	   иначе фиолетовые ручки слайдера проступают поверх открытого мега-меню */
	z-index: 1000;
}
/* Квадратные ручки слайдера цены создают свой stacking-контекст и проступают
   поверх открытого мега-меню (z-index 1000 их не перекрывает). Поэтому, пока
   меню каталога открыто (.rd-header__catalog.active), прячем их визуально. */
body:has(.rd-header__catalog.active) .bx-filter .bx-ui-slider-handle,
body:has(.rd-header__catalog.active) .bx-filter .bx-ui-slider-pricebar-v {
	visibility: hidden;
}
/* Контент каталога выровнен по контейнеру (как контент шапки), чтобы меню не было шире шапки */
.rd-header .rd-catalog-inner {
	position: relative;
	min-height: 420px;
	background: none;
}
/* Тёмная ПРАВАЯ часть (подкатегории) — отдельным слоем, full-bleed до правого края и на всю высоту.
   Левая граница привязана к контейнеру (левый край контента + ширина списка), поэтому совпадает с контентом. */
.rd-header .rd-catalog-inner::after {
	content: "";
	position: absolute;
	top: -32px;     /* до верха панели (компенсируем padding-top 32) */
	bottom: -40px;  /* до низа панели (компенсируем padding-bottom 40) */
	left: calc(var(--rd-gutter) + 300px);
	right: -100vw;  /* за правый край экрана (обрезается overflow:hidden панели) */
	background: var(--rd-dark);  /* #212121 — светлее левой части, как поиск/верхняя панель */
	z-index: -1;    /* позади контента, поверх левого фона панели */
}
.rd-header .panel__nav--pane .rd-cat-title {
	margin: 0 0 24px;
	max-width: 280px;
	font-family: var(--rd-font-head);
	font-weight: 900;
	font-size: 32px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--rd-white);
}
/* левый столбец — список категорий 1 уровня */
.rd-header .rd-catalog-inner > ul {
	display: block;
	position: static; /* перебиваем старое position:relative */
	width: 280px;
	max-width: 280px;
	margin: 0;
	padding: 0;
	background: none;
	box-shadow: none;
	list-style: none;
}
.rd-header .rd-catalog-inner > ul > li { display: block; }
.rd-header .rd-catalog-inner > ul > li > a {
	display: block;
	padding: 9px 0;
	font-size: 16px;
	font-weight: 500;
	color: var(--rd-white);
	text-decoration: none;
}
.rd-header .rd-catalog-inner > ul > li > a img { display: none; } /* шеврон убран */
.rd-header .rd-catalog-inner > ul > li:hover > a,
.rd-header .rd-catalog-inner > ul > li.rd-cat-active > a { color: var(--rd-accent); }

/* правая область — подкатегории активной категории в 3 колонки (относительно контейнера) */
.rd-header .rd-catalog-inner > ul > li > .subcats {
	display: none;
	position: absolute;
	top: 0;
	left: calc(var(--rd-gutter) + 320px);
	right: var(--rd-gutter);
	bottom: 0;
	width: auto;
	height: auto; /* перебиваем старое height:100% из :hover-правила */
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	overflow-y: auto;
}
.rd-header .rd-catalog-inner > ul > li.rd-cat-active > .subcats { display: block; }
.rd-header .panel__nav--pane .subcats ul {
	column-count: 3;
	column-gap: 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.rd-header .panel__nav--pane .subcats li { break-inside: avoid; }
.rd-header .panel__nav--pane .subcats a {
	display: block;
	padding: 8px 0;
	font-size: 16px;
	color: var(--rd-white);
	text-decoration: none;
}
.rd-header .panel__nav--pane .subcats a:hover { color: var(--rd-accent); }
.rd-header .panel__nav--pane .subcats .rd-viewall a { color: var(--rd-accent); font-weight: 600; }

/* Кнопка «Каталог» */
.rd-header__catalog {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 56px;
	padding: 0 14px;
	flex: 0 0 auto;
	box-sizing: border-box;
	background: var(--rd-accent);
	border: 1px solid transparent;
	border-radius: var(--rd-radius);
	color: var(--rd-white);
	font-family: var(--rd-font-text);
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	box-shadow: none;   /* перебиваем свечение старого .с-btn */
	text-shadow: none;
	transition: background .2s, border-color .2s;
}
.rd-header__catalog:hover:not(.active) { background: var(--rd-dark); box-shadow: none; } /* #212121, без подсветки */
.rd-header__catalog img { width: 24px; height: 24px; }
/* Активное состояние (меню открыто): прозрачный фон + белая обводка + крестик вместо полосок */
.rd-header__catalog.active { background: transparent; border-color: var(--rd-white); filter: none; }
.rd-header__catalog.active img { display: none; }
.rd-header__catalog.active::before {
	content: "✕";
	font-size: 18px;
	line-height: 1;
	color: var(--rd-white);
}

/* Поиск */
.rd-header__search {
	flex: 1 1 auto;
	max-width: 520px;
}
.rd-search {
	display: flex;
	align-items: center;
	height: 56px;
	padding: 0 16px;
	background: var(--rd-dark);
	border-radius: var(--rd-radius);
}
.rd-search input {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	border: none;
	outline: none;
	background: transparent;
	color: var(--rd-white);
	font-family: var(--rd-font-text);
	font-size: 14px;
}
.rd-search input::placeholder { color: rgba(255,255,255,.3); }
/* ⚠️ iOS Safari автоматически ЗУМИТ страницу при фокусе на поле, если у него
   font-size < 16px (из-за этого «уезжали» края сайта при вводе в поиск).
   На мобиле поднимаем до 16px — зум перестаёт срабатывать. Пинч-зум не трогаем
   (user-scalable=no отключать нельзя — это ломает доступность). */
@media (max-width: 1100px) {
	.rd-search input { font-size: 16px; }
}
.rd-search button {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
}
.rd-search button img { width: 24px; height: 24px; }

/* Правый блок действий */
.rd-header__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	flex: 0 0 auto;
}

/* Круглая иконка-кнопка (соцсети, профиль, избранное) */
.rd-iconbtn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border: none;            /* у <button> убираем системную рамку */
	background: transparent;  /* и системный фон (иначе белый круг у кнопки-лупы) */
	border-radius: 500px;
	cursor: pointer;
	text-decoration: none;
	transition: background .2s;
}
.rd-iconbtn:hover { background: var(--rd-dark); }
.rd-iconbtn img { width: 24px; height: 24px; }                /* избранное / профиль / поиск — 24×24 */
.rd-iconbtn--soc img { width: auto; height: 18px; }           /* соц. иконки (YouTube/VK/Telegram) — высота 18, ширина по пропорции */

/* Бейдж-счётчик (избранное/корзина) */
.rd-iconbtn__badge {
	position: absolute;
	top: 5px;
	right: 3px;
	min-width: 24px;
	height: 20px;
	padding: 0 5px;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--rd-accent);
	border: 2px solid var(--rd-white);
	border-radius: 350px;
	color: var(--rd-white);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

/* Телефон + время работы */
.rd-header__phone {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 12px;
	white-space: nowrap;
}
.rd-header__phone a {
	color: var(--rd-white);
	font-size: 16px;
	font-weight: 600;
	line-height: 20px;
	text-decoration: none;
}
.rd-header__phone span {
	color: var(--rd-white);
	font-size: 12px;
	line-height: 16px;
	letter-spacing: .02em;
	opacity: .6;
}

/* Бургер и мобильная лупа (скрыты на десктопе) */
.rd-burger {
	display: none;
	flex: 0 0 auto;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 48px;
	height: 48px;
	padding: 0 12px;
	border: none;
	background: var(--rd-dark);
	border-radius: var(--rd-radius);
	cursor: pointer;
}
.rd-burger span {
	display: block;
	height: 2px;
	width: 100%;
	background: var(--rd-white);
	border-radius: 2px;
}
.rd-msearch-toggle { display: none; }

/* ====================================================================
   4. ПОДВАЛ  (.rd-footer)
   ==================================================================== */
.rd-footer {
	background: var(--rd-bg);
	color: var(--rd-white);
	font-family: var(--rd-font-text);
	padding: 80px 0 40px;
}
.rd-footer__top {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1.2fr;
	gap: 40px;
	align-items: start;
}

/* Колонка с логотипом и соцсетями */
.rd-footer__brand .rd-footer__logo img { display: block; width: 226px; height: 38px; }
.rd-footer__brand .rd-footer__logo span {
	display: block;
	margin-top: 8px;
	opacity: .8;
	font-size: 12px;
	line-height: 14px;
	letter-spacing: .19em;
	text-transform: uppercase;
}
.rd-footer__socials {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-top: 32px;
}
.rd-footer__socials a { display: inline-flex; transition: opacity .2s; }
.rd-footer__socials a:hover { opacity: .7; }

/* Заголовок колонки подвала */
.rd-footer__title {
	margin: 0 0 32px;
	font-family: var(--rd-font-head);
	font-weight: 900;
	font-size: 24px;
	line-height: 24px;
	text-transform: uppercase;
	color: var(--rd-white);
}

/* Список ссылок «Информация» */
.rd-footer__menu { margin: 0; padding: 0; list-style: none; }
.rd-footer__menu li + li { margin-top: 12px; }
.rd-footer__menu a {
	color: var(--rd-white);
	font-size: 16px;
	line-height: 20px;
	text-decoration: none;
	transition: color .2s;
}
.rd-footer__menu a:hover { color: var(--rd-accent); }

/* Контакты */
.rd-footer__contacts .rd-fc-block { margin-bottom: 24px; }
.rd-footer__contacts .rd-fc-label {
	display: block;
	margin-bottom: 6px;
	font-size: 16px;
	line-height: 20px;
}
.rd-footer__contacts .rd-fc-value {
	color: var(--rd-white);
	font-size: 24px;
	font-weight: 700;
	line-height: 24px;
	text-decoration: none;
}
.rd-footer__contacts .rd-fc-note {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	line-height: 16px;
	opacity: .6;
}

/* Нижняя юридическая полоса (4 зоны: права | реквизиты | политики | 18+) */
.rd-footer__bottom {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.9fr) auto;
	align-items: start;
	gap: 24px 40px;
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid rgba(239,239,239,.2);
}
.rd-footer__legal {
	font-size: 16px;
	line-height: 20px;
	opacity: .6;
}
.rd-footer__legal p { margin: 0 0 4px; }
.rd-footer__legal br { display: none; }
.rd-footer__policies { display: flex; flex-direction: column; gap: 2px; }
.rd-footer__policies a {
	color: var(--rd-white);
	opacity: .6;
	font-size: 16px;
	line-height: 20px;
	text-decoration: none;
	transition: opacity .2s;
}
.rd-footer__policies a:hover { opacity: 1; }

/* Блок 18+ */
.rd-footer__age {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-left: auto;
	max-width: 381px;
}
.rd-footer__age .ico18 {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--rd-white);
	border-radius: 100px;
	font-size: 16px;
}
.rd-footer__age p { margin: 0; font-size: 16px; line-height: 20px; }

/* ====================================================================
   5. МОБИЛЬНЫЕ ЭЛЕМЕНТЫ: выпадающий поиск + overlay (меню/каталог)
   ==================================================================== */

/* Выпадающая строка поиска (моб.) */
.rd-msearch {
	background: var(--rd-bg);
	border-bottom: 1px solid rgba(255,255,255,.1);
	padding: 12px 0;
}
.rd-msearch[hidden] { display: none; }
.rd-msearch .rd-search { background: var(--rd-dark); }

/* Полноэкранные overlay (бургер-меню и каталог) */
.rd-overlay {
	position: fixed;
	inset: 0;
	/* выше старой шапки adaptive.css (#header z-index:9999), иначе шапка перекрывает overlay */
	z-index: 100000;
	background: var(--rd-bg);
	color: var(--rd-white);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 24px var(--rd-gutter) 48px;
	font-family: var(--rd-font-text);
}
.rd-overlay[hidden] { display: none; }
.rd-overlay__close {
	position: absolute;
	top: 20px;
	right: var(--rd-gutter);
	width: 32px;
	height: 32px;
	border: none;
	background: transparent;
	color: var(--rd-white);
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
}
body.rd-noscroll { overflow: hidden; }

/* Бургер-меню */
.rd-mmenu__logo { display: inline-block; margin-bottom: 40px; margin-top: 40px;}
.rd-mmenu__logo img { display: block; width: 200px; height: auto; }
.rd-mmenu__nav { list-style: none; margin: 0 0 80px; padding: 0; }
.rd-mmenu__nav li + li { margin-top: 20px; }
.rd-mmenu__nav a { color: var(--rd-white); font-size: 16px; font-weight: 500; line-height: 24px; text-decoration: none; }
.rd-mmenu__phone a { display: block; color: var(--rd-white); font-size: 24px; font-weight: 700; line-height: 24px; text-decoration: none; }
.rd-mmenu__phone span { display: block; margin-top: 6px; font-size: 14px; line-height: 16px; opacity: .6; }
.rd-mmenu__divider { height: 1px; background: rgba(255,255,255,.2); margin: 32px 0; }
.rd-mmenu__socials { display: flex; align-items: center; gap: 24px; margin-bottom: 32px; }
.rd-mmenu__socials a { display: inline-flex; }
.rd-mmenu__links { list-style: none; margin: 0; padding: 0; }
.rd-mmenu__links li + li { margin-top: 16px; }
.rd-mmenu__links a { color: var(--rd-white); opacity: .6; font-size: 16px; line-height: 20px; text-decoration: none; }

/* Каталог overlay — открывается НИЖЕ шапки (шапка остаётся видна сверху) */
.rd-mcat { top: 64px; }
.rd-mcat__title {
	margin: 0 0 24px;
	font-family: var(--rd-font-head);
	font-weight: 900;
	font-size: 20px;
	line-height: 1;
	text-transform: uppercase;
}
.rd-mcat__list ul { list-style: none; margin: 0; padding: 0; }
.rd-mcat__list > ul > li { border-bottom: 1px solid rgba(255,255,255,.1); }
.rd-mcat__list a { color: var(--rd-white); text-decoration: none; }
.rd-mcat__list a img { display: none; } /* убираем шеврон-стрелку (на случай старого шаблона) */

/* Пункт верхнего уровня: текст + стрелка справа */
.rd-mcat__list > ul > li > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 0;
	font-size: 16px;
	line-height: 22px;
}
.rd-mcat__list > ul > li > a img {
	flex: 0 0 auto;
	width: 8px;
	height: auto;
	transition: transform .2s;
}
/* Раскрытый пункт — фиолетовый + стрелка вниз */
.rd-mcat__list > ul > li.rd-open > a { color: var(--rd-accent); }
.rd-mcat__list > ul > li.rd-open > a img { transform: rotate(90deg); }

/* Подкатегории — скрыты по умолчанию, показываются при .rd-open */
.rd-mcat__list .subcats { display: none; padding-bottom: 8px; }
.rd-mcat__list > ul > li.rd-open > .subcats { display: block; }
.rd-mcat__list .subcats a { display: block; padding: 12px 0 12px 16px; font-size: 16px; opacity: .7; }
.rd-mcat__list .subcats .rd-viewall a { color: var(--rd-accent); opacity: 1; font-weight: 600; }

/* ====================================================================
   6. АДАПТИВ
   ==================================================================== */
@media (max-width: 1430px) {
	:root { --rd-gutter: 40px; }
	.rd-footer__top { grid-template-columns: 1fr 1fr; }
	.rd-footer__bottom { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1100px) {
	/* Планшет: прячем верхнее меню, телефон и соцсети в шапке */
	.rd-topbar { display: none; }
	.rd-header__phone,
	.rd-header__actions .rd-iconbtn--soc { display: none; }
}

/* ---------- МОБИЛЬНАЯ ШАПКА (≤900px) ---------- */
@media (max-width: 900px) {
	:root { --rd-gutter: 16px; }

	/* Шапка липкая — остаётся сверху; каталог-overlay открывается ниже неё,
	   бургер-меню (z-index выше) перекрывает её полностью. z-index 9999 из adaptive.css. */
	#header.rd-header { position: sticky; top: 0; }

	.rd-header__inner { min-height: 64px; gap: 8px; }

	/* прячем десктопные элементы */
	.rd-header__logo,
	.rd-header__search { display: none; }

	/* десктопный дропдаун каталога не используем — на моб. открывается overlay */
	.rd-header .panel__nav--pane { display: none !important; }

	/* показываем бургер (слева) и мобильную лупу */
	.rd-burger { display: flex; }
	.rd-msearch-toggle { display: inline-flex; }

	/* Каталог — только текст (без иконки-полосок и без крестика) */
	.rd-header__catalog { height: 44px; padding: 0 16px; font-size: 14px; }
	.rd-header__catalog img { display: none; }
	.rd-header__catalog.active::before { display: none; }

	/* Иконки действий компактнее */
	.rd-iconbtn { width: 40px; height: 40px; }
	.rd-header__actions { gap: 2px; }
	.rd-header__actions .rd-iconbtn img { width: 22px; height: 22px; }

	/* Бейдж-счётчик меньше */
	.rd-iconbtn__badge {
		min-width: 16px;
		height: 13px;
		top: 4px;
		right: 4px;
		padding: 0 4px;
		border-width: 1.5px;
		font-size: 10px;
	}

	/* ---- Подвал (моб.) ---- */
	.rd-footer { padding: 40px 0 24px; }
	.rd-footer__top { grid-template-columns: 1fr; gap: 32px; }
	.rd-footer__bottom { grid-template-columns: 1fr; }
	.rd-footer__age { margin-left: 0; }

	/* Меню «Информация» — 2 колонки (заполнение по столбцам, как в макете) */
	.rd-footer__menu {
		display: grid;
		grid-auto-flow: column;
		grid-template-rows: repeat(4, auto);
		grid-template-columns: 1fr 1fr;
		gap: 16px 24px;
	}
	.rd-footer__menu li + li { margin-top: 0; }

	/* ---- Размеры шрифтов подвала (моб.) ---- */
	.rd-footer__title { font-size: 18px; line-height: 20px; }
	.rd-footer__menu a { font-size: 14px; line-height: 18px; }
	.rd-footer__contacts .rd-fc-value { font-size: 20px; line-height: 22px; }
	.rd-footer__legal,
	.rd-footer__legal p,
	.rd-footer__requisites,
	.rd-footer__policies a,
	.rd-footer__age p { font-size: 14px; line-height: 18px; }
}

/* ====================================================================
   6. КАРТОЧКА ТОВАРА (ОБЩАЯ) — единый стиль «плитки» для «Новинок»
   (главная) и «Каталога». Сетку/обёртки задаёт контекст
   (.rd-new__grid, .rd-catalog__grid и т.п.), сам вид карточки — здесь.
   ==================================================================== */
.rd-pcard {
	display: flex;
	flex-direction: column;
	background: var(--rd-dark);          /* #212121 */
	border-radius: 20px;
	padding: 16px;
	box-sizing: border-box;
}
/* Фото на белой подложке */
.rd-pcard__imgwrap {
	position: relative;            /* контекст для бейджа NEW */
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-radius: 14px;
	padding: 20px;
	aspect-ratio: 1;
	overflow: hidden;
}
.rd-pcard__imgwrap img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
/* Бейдж NEW — зелёный круг поверх фото (слева сверху). Рендерится в шаблоне Новинок. */
.rd-pcard__new {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #2FB44C;
	color: #fff;
	font-family: var(--rd-font-text);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	z-index: 2;
	pointer-events: none;
}
.rd-pcard__body { display: flex; flex-direction: column; gap: 14px; padding-top: 16px; flex: 1 1 auto; }
.rd-pcard__name {
	font-family: var(--rd-font-text);
	font-weight: 400; font-size: 20px; line-height: 1.3;
	color: var(--rd-white); text-decoration: none;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Ховер названия товара — приглушённый белый (НЕ фиолетовый) */
.rd-pcard__name:hover { color: rgba(255,255,255,.65); }
.rd-pcard__bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.rd-pcard__price { font-family: var(--rd-font-text); font-weight: 500; font-size: 24px; line-height: 1; color: var(--rd-white); }
.rd-pcard__price-old { font-weight: 400; font-size: 14px; color: rgba(255,255,255,.45); margin-left: 6px; }
.rd-pcard__actions { display: flex; gap: 8px; flex: 0 0 auto; }
/* Иконка-кнопка: круг и значок уже внутри SVG (42×42), свой фон не рисуем */
.rd-pcard__btn { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; cursor: pointer; transition: opacity .2s, transform .2s; }
.rd-pcard__btn:hover { opacity: .85; transform: translateY(-2px); }
.rd-pcard__btn img { width: 42px; height: 42px; display: block; }

@media (max-width: 600px) {
	.rd-pcard__name { font-size: 16px; }
	.rd-pcard__price { font-size: 20px; }                 /* .rd-pcard__price-cur наследует (десктоп 24) */
	.rd-pcard__btn, .rd-pcard__btn img { width: 36px; height: 36px; }
	/* Бейдж NEW на моб. — меньше на ~40% (44→26) */
	.rd-pcard__new { width: 26px; height: 26px; top: 8px; left: 8px; font-size: 9px; }
}

/* РЕДИЗАЙН: цену больше не блюрим у неавторизованных (старое правило в style.css). */
body.sblured .productBlockItem__prices--price,
body.sblured .pageProdInfo > .pfPrice,
body.sblured .pfBlockInfo .pfPrice { filter: none !important; }

/* ====================================================================
   7. РАЗДЕЛИТЕЛЬ ПОД ШАПКОЙ (все внутренние страницы, кроме главной)
   ==================================================================== */
body.rd-inner .rd-header,
body.rd-inner #header.rd-header { border-bottom: 1px solid #3C3C3C; }
/* На мобильной разделитель не нужен (только десктоп) */
@media (max-width: 900px) {
	body.rd-inner .rd-header,
	body.rd-inner #header.rd-header { border-bottom: none; }
}

/* ====================================================================
   8. ХЛЕБНЫЕ КРОШКИ (.bx-breadcrumb) — глобально на всех страницах.
   Рендерятся компонентом bitrix:breadcrumb в header.php. Шрифт 16.
   (Раньше стили жили только в catalog.css → на остальных внутренних
   страницах крошки оставались в старом виде.)
   ==================================================================== */
.bx-breadcrumb.max {
	width: 100%;
	max-width: calc(var(--rd-container) + var(--rd-gutter) * 2);
	margin: 0 auto;
	padding: 20px var(--rd-gutter) 0;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
	font-family: var(--rd-font-text);
}
.bx-breadcrumb .bx-breadcrumb-item {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-size: 16px;
	line-height: 1;
}
.bx-breadcrumb .bx-breadcrumb-item a,
.bx-breadcrumb .bx-breadcrumb-item span {
	color: rgba(255,255,255,.55);
	text-decoration: none;
	transition: color .2s;
}
.bx-breadcrumb .bx-breadcrumb-item a:hover { color: var(--rd-white); }
.bx-breadcrumb .bx-breadcrumb-item:last-child span { color: var(--rd-white); }
.bx-breadcrumb .bx-breadcrumb-item svg { display: block; }
.bx-breadcrumb .bx-breadcrumb-item svg path { fill: rgba(255,255,255,.55); }

/* Отступы у слеша — дублируем здесь с повышенной специфичностью (body …),
   чтобы правило применялось даже если style.css компонента крошек закэширован
   (у компонентного CSS нет ?v). Слеш прилегает к предыдущему слову, 6px справа. */
body .bx-breadcrumb.max { gap: 0; }
body .bx-breadcrumb.max > .bx-breadcrumb-item { gap: 12px; padding-right: 12px;}
body .bx-breadcrumb.max > .bx-breadcrumb-item .bx-breadcrumb-sep { margin: 0; color: rgba(255,255,255,.35); }

/* ====================================================================
   9. ПОП-АП «ПОДТВЕРЖДЕНИЕ ВОЗРАСТА 18+» (новый дизайн)
   База .popup / .popup__body / .active — из style.css (показ/анимация).
   Здесь — фиолетовая модалка с маскотом. Функциональные классы
   .rev-modal / .close-popup / .m-login сохранены для JS в footer.php.
   ==================================================================== */
/* Прижимаем модалку к верху + большой верхний отступ под выступающего маскота.
   ВАЖНО: top-align (а не center) — иначе на низких экранах высокий попап
   центрируется и кнопки/низ уходят за пределы и становятся недоступными
   (окно нельзя закрыть → оверлей блокирует тапы по бургеру/каталогу). */
.rd-age.popup {
	padding: 40px 0 !important;
	align-items: center !important;       /* десктоп — по центру по вертикали */
	overflow-y: auto !important;          /* если окно ниже модалки — прокрутка */
}
.rd-age .rd-age__body {
	width: calc(100% - 32px) !important;
	max-width: 600px !important;
	margin: 0 auto !important;
	box-sizing: border-box;
	padding: 96px 56px 48px;
	background: var(--rd-accent);
	background-image: radial-gradient(85% 60% at 50% 112%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 60%);
	border: none;
	border-radius: 28px;
	color: var(--rd-white);
	text-align: center;
	font-family: var(--rd-font-text);
	overflow: visible;
}
/* В новом дизайне логотип и строка «18+ Просмотр сайта…» не используются */
.rd-age .logo-box,
.rd-age .teen { display: none !important; }
/* Маскот-динозавр — поверх верхнего края модалки, по центру */
.rd-age__mascot {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -58%);
	width: 190px;
	height: auto;
	pointer-events: none;
	user-select: none;
}
/* Крестик закрытия */
.rd-age__close {
	position: absolute;
	top: 20px;
	right: 24px;
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--rd-white);
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	opacity: .9;
	transition: opacity .2s;
}
.rd-age__close:hover { opacity: 1; }
/* Текст-описание (повторно используем класс .m-text из старой разметки) */
.rd-age .m-text {
	margin: 0 0 22px;
	font-size: 15px;
	line-height: 21px;
	font-weight: 400;
	letter-spacing: 0;
	color: rgba(255,255,255,.92);
}
/* Вопрос (класс .m-bold из старой разметки) */
.rd-age .m-bold {
	display: block;
	margin: 0 0 26px;
	font-size: 18px;
	line-height: 24px;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--rd-white);
}
.rd-age .rd-age__actions {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
}
.rd-age .rd-age__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 150px;
	padding: 15px 28px !important;       /* перебиваем мобильный !important у .m-login из style.css */
	border: none;
	border-radius: 14px;
	font-size: 16px !important;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
	text-decoration: none;
	cursor: pointer;
	transition: opacity .2s, transform .2s;
}
.rd-age .rd-age__btn:hover { transform: translateY(-2px); opacity: .92; }
.rd-age .rd-age__btn--yes { background: #F1E9FE; color: #1A1A1A; }
.rd-age .rd-age__btn--no  { background: #1C1C1C; color: var(--rd-white); }

@media (max-width: 600px) {
	.rd-age.popup { padding: 90px 0 24px !important; align-items: flex-start !important; }  /* моб.: высокая модалка → top-align + прокрутка */
	.rd-age .rd-age__body { padding: 78px 20px 28px; border-radius: 22px; }
	.rd-age__mascot { width: 128px; }   /* по центру сверху, как в макете */
	.rd-age__close { top: 14px; right: 16px; }
	.rd-age .m-text { font-size: 14px; line-height: 20px; }
	.rd-age .m-bold { font-size: 16px; }
	.rd-age .rd-age__actions { gap: 10px; flex-wrap: nowrap; }
	.rd-age .rd-age__btn { min-width: 0; flex: 1; padding: 14px 12px !important; }
}

/* ------------------------------------------------------------------ */
/* Cookie-баннер модуля awz_cookies (системный, не из шаблона).        */
/* На мобильном у плавающей плашки большой отступ снизу — прижимаем     */
/* её к нижнему краю экрана.                                            */
/* ------------------------------------------------------------------ */
@media (max-width: 900px) {
	.awz_cookies_sett__message {
		bottom: 0 !important;
		margin-bottom: 0 !important;
	}
}

/* ------------------------------------------------------------------ */
/* Honeypot для форм-заявок (rd-forms.js) — скрытое поле-ловушка ботов. */
/* ------------------------------------------------------------------ */
.rd-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px;
	opacity: 0; pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Согласие с политикой — ОБЯЗАТЕЛЬНО на всех формах (rd-forms.js).    */
/* Пока не отмечено: кнопка приглушена; при попытке отправки —         */
/* чекбокс подсвечивается и в .rd-form__success выводится причина.     */
/* ------------------------------------------------------------------ */
.rd-btn.is-locked { opacity: .55; }
.rd-check.is-error input {
	box-shadow: 0 0 0 2px #FF8A8A;
	animation: rd-check-shake .25s ease;
}
@keyframes rd-check-shake {
	0%, 100% { transform: translateX(0); }
	25%      { transform: translateX(-3px); }
	75%      { transform: translateX(3px); }
}

/* ====================================================================
   9. «ТОВАР ОТСУТСТВУЕТ» / 404 (.rd-nores) — фиол. hero с паттерном,
   H1 (название раздела / сообщение) + подпись + маскот-динозавр.
   В redesign.css (не в отдельном css), т.к. 404 может открыться по
   любому URL, где условные css не подключаются. Маскот — картинка
   assets/img/redesign/notfound/dino_binocular.png (заменить на нужную).
   ==================================================================== */
.rd-nores {
	position: relative;
	overflow: hidden;
	background: var(--rd-accent);
	min-height: clamp(440px, 42vw, 640px);
	display: flex;
	align-items: center;
	padding: 52px 0;
	box-sizing: border-box;
}
.rd-nores::before {
	content: "";
	position: absolute; inset: 0;
	background: url('../img/redesign/career/hero_bg.png') center/cover no-repeat;
	opacity: .9;
	pointer-events: none;
}
.rd-nores .rd-container { position: relative; z-index: 2; }
.rd-nores__crumbs {
	font-family: var(--rd-font-text);
	font-size: 16px;
	color: rgba(255,255,255,.65);
	margin-bottom: 72px;
}
.rd-nores__crumbs a { color: rgba(255,255,255,.65); text-decoration: none; }
.rd-nores__crumbs a:hover { color: #fff; }
.rd-nores__crumbs .sep { margin: 0 8px; }
.rd-nores__crumbs .cur { color: #fff; }
.rd-nores__title {
	font-family: var(--rd-font-head);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	line-height: 0.98;
	font-size: clamp(40px, 5.6vw, 88px);
	color: #fff;
	margin: 0;
	max-width: 12ch;
}
.rd-nores__text {
	font-family: var(--rd-font-text);
	font-size: 20px;
	line-height: 1.45;
	color: #fff;
	margin: 28px 0 0;
	max-width: 34ch;
}
.rd-nores__actions { margin-top: 36px; }
.rd-nores__mascot {
	position: absolute;
	right: 4%;
	    bottom: -15%;
	width: clamp(320px, 33vw, 560px);
	height: auto;
	z-index: 1;
	pointer-events: none;
	user-select: none;
}
@media (max-width: 1100px) {
	/* flex-direction:column — маскот уходит ПОД заголовок/текст (в полный рост),
	   а не сбоку справа (иначе оставался flex-строкой из базового правила и обрезался). */
	.rd-nores { flex-direction: column; align-items: stretch; text-align: center; padding: 24px 0 32px; min-height: 0; }
	.rd-nores .rd-container { display: flex; flex-direction: column; align-items: center; }
	.rd-nores__crumbs { margin-bottom: 20px; align-self: flex-start; }
	.rd-nores__title { font-size: 34px; max-width: none; }
	.rd-nores__text { font-size: 16px; margin-inline: auto; }
	.rd-nores__mascot { position: static; display: block; margin: 28px auto 0; width: clamp(240px, 76vw, 340px); }
}

/* ====================================================================
   10. ШРИФТЫ — ЖЁСТКОЕ ПРАВИЛО: на сайте только ДВА шрифта.
   Старые style.css/adaptive.css раздают 'Montserrat': база
   `html, body, textarea, input, button, select` (style.css:83) и
   `h1, h2, h3` (style.css:154) + ряд старых компонентов. Из-за этого
   на страницах, где редизайн не задал font-family явно (О нас, Адреса,
   Опт, заголовки карточек блога), текст наследовал Montserrat.
   redesign.css подключается ПОСЛЕ style.css → при равной спецификации
   выигрывает. Текст/кнопки/поля → Roboto Flex, заголовки → TT_Travels.
   ⚠️ Если где-то заголовок по макету должен быть Roboto (напр.
   .rd-blog__title, .rd-policy__content h2) — задавать font-family явно
   классом (спецификация выше, чем у h1/h2/h3).
   ==================================================================== */
html, body, textarea, input, button, select { font-family: var(--rd-font-text); }
h1, h2, h3 { font-family: var(--rd-font-head); }

/* Старые компоненты, где style.css/adaptive.css явно ставят Montserrat */
.rw,
.с-btn, a.с-btn,
.btn, a.btn,
.panel__buttons .panel__buttons--item > span,
.productBlockItem .productBlockItem__img > .fitchs > .fitchs__item,
.pfBlockImages .fitchs > .fitchs__item,
ul.hitsTabs > li > span,
ul.prodTabs > li > span,
.footer_info .footer_text2,
.newsListItem .datetime,
.newsListItem .description,
.newsPage > .newsBody .datetime,
.pfBlockInfo .isnal,
.pfBlockInfo .sendToCart > a,
.mpc18 { font-family: var(--rd-font-text); }
.newsListItem h3 { font-family: var(--rd-font-head); }