.eh *, .eh *::before, .eh *::after{ box-sizing: border-box; }
.eh a{ color: inherit; text-decoration: none; }
.eh img{ display: block; max-width: 100%; height: auto; }
.eh ul{ margin: 0; padding: 0; list-style: none; }
.eh button,
.ehf button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	padding: 0;
	margin: 0;
	min-width: 0;
	min-height: 0;
	height: auto;
	line-height: normal;
	text-transform: none;
	letter-spacing: normal;
}
.eh :focus-visible{ outline: 2px solid var(--red); outline-offset: 3px; }

.eh .eh-wrap,
.ehf .eh-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* ── Маршрут: рельс с отметками ──────────────────────────────────────── */
.eh .eh-route{
	position: fixed;
	top: 0; bottom: 0; left: 0;
	width: var(--rail);
	z-index: 90;
	display: none;
	pointer-events: none;
}

.eh .eh-route__line{
	position: absolute;
	left: 47px; top: 0; bottom: 0;
	width: 1px;
	background: var(--line);
}

.eh .eh-route__fill{
	position: absolute;
	left: 47px; top: 0;
	width: 1px;
	height: 0;
	background: var(--red);
	transition: height .12s linear;
}

.eh .eh-route__marks{ position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding-left: 24px; }

.eh .eh-mark{
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .1em;
	color: #56514e;
	pointer-events: auto;
	transition: color .3s var(--ease);
}

.eh .eh-mark::before{
	content: "";
	width: 7px; height: 7px;
	border-radius: 50%;
	background: #2a2726;
	outline: 3px solid var(--ground);
	transition: background .3s var(--ease), transform .3s var(--ease);
}

.eh .eh-mark__name{
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	opacity: 0;
	transition: max-width .35s var(--ease), opacity .25s var(--ease);
	text-transform: uppercase;
}

.eh .eh-mark.is-active{ color: var(--text); }
.eh .eh-mark.is-active::before{ background: var(--red); transform: scale(1.25); }
.eh .eh-mark.is-active .eh-mark__name,
.eh .eh-mark:hover .eh-mark__name{ max-width: 160px; opacity: 1; }

/* ── Заголовки секций ────────────────────────────────────────────────── */
.eh .eh-sec{ padding: 96px 0; position: relative; }
.eh .eh-sec--tight{ padding: 64px 0; }

.eh .eh-head{ display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 40px; }

.eh .eh-km{
	display: block;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .18em;
	color: var(--red);
	margin-bottom: 14px;
}

.eh .eh-h2{
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(28px, 3.6vw, 46px);
	line-height: 1.02;
	letter-spacing: .01em;
	margin: 0;
	text-transform: uppercase;
	text-wrap: balance;
}

.eh .eh-sub{ color: var(--muted); max-width: 52ch; margin: 14px 0 0; }

.eh .eh-more{
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 18px;
	border: 1px solid var(--line-strong);
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}

.eh .eh-more:hover{ background: var(--red); border-color: var(--red); color: #fff; }
.eh .eh-more svg{ width: 13px; height: 13px; transition: transform .25s var(--ease); }
.eh .eh-more:hover svg{ transform: translateX(4px); }

/* ── Кнопки ──────────────────────────────────────────────────────────── */
.eh .eh-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 54px;
	padding: 0 28px;
	font-family: var(--display);
	font-size: 14px;
	letter-spacing: .06em;
	text-transform: uppercase;
	background: var(--red);
	color: #fff;
	position: relative;
	overflow: hidden;
	transition: background .22s var(--ease);
}

.eh .eh-btn::after{
	content: "";
	position: absolute;
	top: 0; bottom: 0; left: -60%;
	width: 40%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .3), transparent);
	transform: skewX(-18deg);
	transition: left .6s var(--ease);
}

.eh .eh-btn:hover{ background: var(--red-dark); }
.eh .eh-btn:hover::after{ left: 130%; }
.eh .eh-btn--ghost{ background: none; border: 1px solid var(--line-strong); }
.eh .eh-btn--ghost:hover{ background: rgba(255, 255, 255, .06); border-color: #fff; }

/* ── 01. Хиро ────────────────────────────────────────────────────────── */
.eh .eh-hero{ position: relative; padding: 56px 0 0; overflow: hidden; }

.eh .eh-hero__bg{
	position: absolute;
	top: -10%; right: -12%;
	width: 62vw; height: 120%;
	background: radial-gradient(60% 55% at 60% 40%, rgba(227, 30, 36, .18), transparent 70%);
	pointer-events: none;
}

.eh .eh-hero__grid{
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: 48px;
	align-items: center;
	min-height: 560px;
}

.eh .eh-season{
	display: inline-flex;
	gap: 10px;
	padding: 6px;
	border: 1px solid var(--line);
	border-radius: 2px;
	margin-bottom: 26px;
	background: rgba(255, 255, 255, .03);
}

.eh .eh-season__btn{
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 26px;
	border-radius: 2px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
	transition: color .2s var(--ease), background .2s var(--ease);
}

.eh .eh-season__btn svg{ width: 15px; height: 15px; }
.eh .eh-season__btn:hover{ color: var(--text); }
[data-season="winter"] .eh .eh-season__btn[data-set="winter"],
[data-season="summer"] .eh .eh-season__btn[data-set="summer"]{ background: var(--red); color: #fff; }

.eh .eh-title{
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(40px, 6.4vw, 86px);
	line-height: .94;
	letter-spacing: -.01em;
	margin: 0 0 6px;
	text-transform: uppercase;
}

.eh .eh-title span{
	display: block;
	color: transparent;
	-webkit-text-stroke: 1px var(--line-strong);
}

.eh .eh-hero__lead{ font-size: 18px; color: var(--muted); max-width: 46ch; margin: 22px 0 32px; }
.eh .eh-hero__lead b{ color: var(--text); font-weight: 500; }
.eh .eh-hero__cta{ display: flex; flex-wrap: wrap; gap: 14px; }

/* Карточка флагмана */
.eh .eh-flag{ position: relative; }

.eh .eh-flag__plate{
	position: relative;
	padding: 34px;
	overflow: hidden;
	background:
		radial-gradient(farthest-side at 50% 48%,
			#f3f1ee 0%, #ebe8e4 40%, #c9c6c2 60%, #7e7b78 78%, rgba(18, 18, 18, 0) 96%),
		linear-gradient(180deg, #262c35, #1c2027);
}

.eh .eh-flag__plate::before{
	content: "";
	position: absolute;
	inset: auto -20% -55% -20%;
	height: 70%;
	background: var(--red);
	transform: rotate(-8deg);
	opacity: .07;
}

.eh .eh-flag__plate img{ position: relative; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; mix-blend-mode: multiply; }

.eh .eh-flag__tag{
	position: absolute;
	top: 0; left: 0;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	background: var(--red);
	color: #fff;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	z-index: 2;
}

.eh .eh-flag__body{
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	padding: 22px 0 0;
	border-top: 1px solid var(--line);
	margin-top: 22px;
}

.eh .eh-flag__brand{ font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--red); text-transform: uppercase; }
.eh .eh-flag__name{ font-family: var(--display); font-size: 22px; line-height: 1.15; margin: 8px 0 0; text-transform: uppercase; }
.eh .eh-flag__meta{ font-size: 13px; color: var(--muted); margin-top: 8px; }
.eh .eh-flag__price{ font-family: var(--mono); font-size: 26px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Факты под хиро */
.eh .eh-facts{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid var(--line);
	margin-top: 56px;
}

.eh .eh-fact{
	padding: 26px 24px;
	border-right: 1px solid var(--line);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	text-align: center;
}
.eh .eh-fact:last-child{ border-right: 0; }
.eh .eh-fact__k{ font-family: var(--display); font-size: 20px; text-transform: uppercase; }
.eh .eh-fact__v{ font-size: 14px; color: var(--muted); margin-top: 0; max-width: 32ch; }

/* ── 02. Категории — бенто ───────────────────────────────────────────── */
.eh .eh-bento{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 210px;
	gap: 14px;
}

.eh .eh-tile{
	position: relative;
	overflow: hidden;
	background: color-mix(in srgb, var(--panel) 82%, transparent);
	display: flex;
	align-items: flex-end;
	padding: 22px;
	isolation: isolate;
}

.eh .eh-tile img{
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	opacity: .55;
	transition: transform .7s var(--ease), opacity .4s var(--ease);
	z-index: -2;
}

.eh .eh-tile::after{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, rgba(20, 23, 27, .12) 18%, rgba(20, 23, 27, .90) 92%);
	z-index: -1;
}

.eh .eh-tile:hover img{ transform: scale(1.06); opacity: .8; }
.eh .eh-tile--xl{ grid-column: span 2; grid-row: span 2; }
.eh .eh-tile--tall{ grid-row: span 2; }
.eh .eh-tile--wide{ grid-column: span 2; }

.eh .eh-tile--plain{ background: linear-gradient(150deg, #2a303a, #1c2027); border: 1px solid var(--line); }
.eh .eh-tile--plain::after{ display: none; }

.eh .eh-tile__name{ font-family: var(--display); font-size: 20px; text-transform: uppercase; line-height: 1.1; }
.eh .eh-tile--xl .eh-tile__name{ font-size: 34px; }
.eh .eh-tile__count{ font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 6px; letter-spacing: .08em; }

.eh .eh-tile__go{
	position: absolute;
	right: 18px; bottom: 22px;
	width: 38px; height: 38px;
	display: grid;
	place-items: center;
	border: 1px solid var(--line-strong);
	border-radius: 50%;
	transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}

.eh .eh-tile__go svg{ width: 14px; height: 14px; }
.eh .eh-tile:hover .eh-tile__go{ background: var(--red); border-color: var(--red); transform: translateX(3px); }

/* ── 03. Лента товаров ───────────────────────────────────────────────── */
.eh .eh-rail-wrap{ position: relative; }

.eh .eh-rail{
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(258px, 1fr);
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 8px;
	scrollbar-width: none;
}

.eh .eh-rail::-webkit-scrollbar{ display: none; }
.eh .eh-rail[hidden]{ display: none; }

.eh .eh-card{ scroll-snap-align: start; background: color-mix(in srgb, var(--panel) 80%, transparent); display: flex; flex-direction: column; transition: background .25s var(--ease); }
.eh .eh-card:hover{ background: var(--panel-2); }

/* Фото товаров сняты на белом фоне. Чтобы белый прямоугольник не резал
   тёмную страницу, кладём под снимок мягкое световое пятно и режим
   multiply: белое становится цветом пятна и тает к краям карточки. */
.eh .eh-card__media{
	position: relative;
	padding: 18px;
	overflow: hidden;
	background:
		radial-gradient(farthest-side at 50% 46%,
			#f2f0ed 0%, #eae7e3 38%, #cbc8c4 58%, #83807d 76%, rgba(24, 24, 24, 0) 96%),
		var(--panel);
}

.eh .eh-card__media img{ width: 100%; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; transition: transform .55s var(--ease); }
/* фон подложки при наведении не меняем — раньше он вспыхивал белым */
.eh .eh-card:hover .eh-card__media img{ transform: scale(1.05); }

.eh .eh-card__label{
	position: absolute;
	top: 12px; left: 12px;
	padding: 5px 9px;
	background: var(--red);
	color: #fff;
	font-family: var(--mono);
	font-size: 9.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.eh .eh-card__body{ padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.eh .eh-card__brand{ font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--red); text-transform: uppercase; }
.eh .eh-card__name{ font-size: 14.5px; line-height: 1.35; margin: 0; min-height: 2.7em; }
.eh .eh-card__cat{ font-size: 12px; color: var(--muted); }
.eh .eh-card__price{ font-family: var(--mono); font-size: 17px; font-weight: 600; margin-top: auto; padding-top: 12px; font-variant-numeric: tabular-nums; }

.eh .eh-rail-nav{ display: flex; gap: 8px; }

.eh .eh-rail-nav button{
	width: 44px; height: 44px;
	display: grid;
	place-items: center;
	border: 1px solid var(--line-strong);
	transition: background .2s var(--ease), border-color .2s var(--ease);
}

.eh .eh-rail-nav button:hover{ background: var(--red); border-color: var(--red); }
.eh .eh-rail-nav svg{ width: 15px; height: 15px; }

/* ── 04. Сервис и прокат ─────────────────────────────────────────────── */
.eh .eh-duo{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.eh .eh-panel{
	position: relative;
	background: color-mix(in srgb, var(--panel) 78%, transparent);
	padding: 40px;
	border-left: 3px solid var(--red);
	overflow: hidden;
}

.eh .eh-panel__no{
	position: absolute;
	top: 18px; right: 24px;
	font-family: var(--display);
	font-size: 84px;
	line-height: 1;
	color: rgba(255, 255, 255, .04);
}

.eh .eh-panel h3{ font-family: var(--display); font-size: 26px; text-transform: uppercase; margin: 0 0 14px; }
.eh .eh-panel p{ color: var(--muted); margin: 0 0 20px; max-width: 46ch; }
.eh .eh-panel ul{ display: grid; gap: 10px; margin-bottom: 26px; }
.eh .eh-panel li{ position: relative; padding-left: 26px; font-size: 15px; }

.eh .eh-panel li::before{
	content: "";
	position: absolute;
	left: 0; top: 9px;
	width: 12px; height: 1px;
	background: var(--red);
}

/* ── 05. Бренды ──────────────────────────────────────────────────────── */
.eh .eh-marquee{ position: relative; overflow: hidden; border-block: 1px solid var(--line); padding: 26px 0; }
.eh .eh-marquee::before, .eh .eh-marquee::after{
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	width: 140px;
	z-index: 2;
	pointer-events: none;
}
.eh .eh-marquee::before{ left: 0; background: linear-gradient(90deg, var(--ground), transparent); }
.eh .eh-marquee::after{ right: 0; background: linear-gradient(270deg, var(--ground), transparent); }

.eh .eh-marquee__track{ display: flex; align-items: center; gap: 78px; width: max-content; animation: eh-run 46s linear infinite; }
.eh .eh-marquee:hover .eh-marquee__track{ animation-play-state: paused; }
/* Логотипы брендов — тёмные на белом фоне. Инвертируем и накладываем
   в режиме screen: белая подложка исчезает, остаётся светлый логотип. */
.eh .eh-marquee__track img{
	height: 58px;
	width: auto;
	opacity: .62;
	filter: invert(1) grayscale(1) contrast(1.08);
	mix-blend-mode: screen;
	transition: opacity .25s var(--ease), filter .25s var(--ease);
}
.eh .eh-marquee__track img:hover{ opacity: 1; filter: invert(1) contrast(1.12); }

@keyframes eh-run { to { transform: translateX(-50%); }}

/* ── 06. Условия ─────────────────────────────────────────────────────── */
.eh .eh-terms{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

.eh .eh-term{ background: color-mix(in srgb, var(--panel) 78%, transparent); padding: 32px; display: flex; flex-direction: column; gap: 12px; transition: transform .3s var(--ease); }
.eh .eh-term:hover{ transform: translateY(-3px); }
.eh .eh-term__ico{ width: 34px; height: 34px; color: var(--red); }
.eh .eh-term h4{ font-family: var(--display); font-size: 17px; text-transform: uppercase; margin: 6px 0 0; }
.eh .eh-term p{ color: var(--muted); font-size: 14.5px; margin: 0; }
.eh .eh-term b{ color: var(--text); font-weight: 500; }

/* ── 07. Магазины ────────────────────────────────────────────────────── */
.eh .eh-shops{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.eh .eh-shop{
	position: relative;
	background: color-mix(in srgb, var(--panel) 78%, transparent);
	padding: 36px;
	display: grid;
	gap: 18px;
	border-top: 3px solid var(--red);
}

.eh .eh-shop__name{ font-family: var(--display); font-size: 24px; text-transform: uppercase; }
.eh .eh-shop dl{ display: grid; grid-template-columns: 92px 1fr; gap: 10px 18px; margin: 0; font-size: 15px; }
.eh .eh-shop dt{ font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-top: 4px; }
.eh .eh-shop dd{ margin: 0; }
.eh .eh-shop dd a{ border-bottom: 1px solid var(--line-strong); }
.eh .eh-shop dd a:hover{ color: var(--red); border-color: var(--red); }

.eh .eh-up{
	position: fixed;
	right: 22px; bottom: 22px;
	width: 44px; height: 44px;
	display: grid;
	place-items: center;
	background: rgba(227, 30, 36, .82);
	backdrop-filter: blur(4px);
	color: #fff;
	z-index: 95;
	opacity: 0;
	pointer-events: none;
	transform: translateY(10px);
	transition: opacity .3s var(--ease), transform .3s var(--ease), background .2s var(--ease);
}

.eh .eh-up.is-on{ opacity: .9; pointer-events: auto; transform: none; }
.eh .eh-up:hover{ background: var(--red-dark); opacity: 1; }
.eh .eh-up svg{ width: 18px; height: 18px; }

/* ── Сезонное переключение ───────────────────────────────────────────── */
[data-season="winter"] [data-set="summer"].eh-swap,
[data-season="summer"] [data-set="winter"].eh-swap{ display: none; }

/* ── Крупные экраны: включаем рельс маршрута ─────────────────────────── */
/* Рельс маршрута показываем только там, где для него есть свободное поле
   слева: содержимое остаётся ровно по центру, отступы слева и справа равны. */
@media (min-width: 1560px){
	.eh .eh-route{ display: block; }
}

/* ── Планшет ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px){
	.eh .eh-hero__grid{ grid-template-columns: 1fr; gap: 36px; min-height: 0; padding-bottom: 8px; }
	.eh .eh-bento{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 190px; }
	.eh .eh-tile--xl{ grid-column: span 2; grid-row: span 1; }
	.eh .eh-tile--tall{ grid-row: span 1; }
	.eh .eh-duo, .eh .eh-terms, .eh .eh-shops{ grid-template-columns: 1fr; }
	.ehf .ehf-top{ grid-template-columns: 1fr 1fr; gap: 34px; }
}

/* ── Телефон ─────────────────────────────────────────────────────────── */
@media (max-width: 720px){
	.eh .eh-sec{ padding: 62px 0; }
	.eh .eh-wrap,
	.ehf .eh-wrap { padding: 0 16px; }
	.eh .eh-head{ flex-direction: column; align-items: flex-start; gap: 18px; }
	.eh .eh-facts{ grid-template-columns: 1fr; }
	.eh .eh-fact{ border-right: 0; border-bottom: 1px solid var(--line); padding: 18px 0; }
	.eh .eh-fact__v{ max-width: none; }
	.eh .eh-fact:last-child{ border-bottom: 0; }
	.eh .eh-bento{ grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; gap: 10px; }
	.eh .eh-tile{ padding: 16px; }
	.eh .eh-tile--xl, .eh .eh-tile--wide{ grid-column: span 2; }
	.eh .eh-tile--xl{ grid-row: span 1; }
	.eh .eh-tile__name{ font-size: 17px; }
	.eh .eh-tile__count{ font-size: 10px; }
	.eh .eh-tile__go{ width: 32px; height: 32px; right: 14px; bottom: 16px; }
	.eh .eh-tile--xl .eh-tile__name{ font-size: 26px; }
	.eh .eh-rail{ grid-auto-columns: 76vw; }
	.eh .eh-panel{ padding: 28px 22px; }
	.eh .eh-shop{ padding: 26px 22px; }
	.eh .eh-shop dl{ grid-template-columns: 1fr; gap: 2px 0; }
	.eh .eh-shop dt{ padding-top: 12px; }
	.ehf .ehf-top{ grid-template-columns: 1fr; gap: 30px; }
	.ehf .ehf-contacts{ grid-template-columns: 1fr; }
	.ehf .ehf-bottom{ flex-direction: column; align-items: flex-start; }
	.eh .eh-hero__cta .eh-btn{ flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.eh *, .eh *::before, .eh *::after{ animation-duration: .01ms !important; transition-duration: .01ms !important; }
	.eh .eh-marquee__track{ animation: none; }}

/* ── Баннеры: те же большие картинки, что и сейчас ────────────────────── */
.eh .eh-banners{ position: relative; background: #0f1215; }

.eh .eh-banners__track{
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.eh .eh-banners__track::-webkit-scrollbar{ display: none; }
.eh .eh-banner{ scroll-snap-align: start; display: block; position: relative; }
.eh .eh-banner img{ width: 100%; aspect-ratio: 1920 / 800; object-fit: cover; display: block; }

.eh .eh-banners__arrow{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 52px; height: 52px;
	display: grid;
	place-items: center;
	background: rgba(18, 21, 26, .55);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .16);
	z-index: 3;
	transition: background .22s var(--ease), border-color .22s var(--ease);
}

.eh .eh-banners__arrow:hover{ background: var(--red); border-color: var(--red); }
.eh .eh-banners__arrow svg{ width: 18px; height: 18px; }
.eh .eh-banners__arrow--prev{ left: 22px; }
.eh .eh-banners__arrow--next{ right: 22px; }

.eh .eh-banners__dots{
	position: absolute;
	left: 0; right: 0; bottom: 22px;
	display: flex;
	justify-content: center;
	gap: 8px;
	z-index: 3;
}

.eh .eh-banners__dot{
	width: 22px; height: 3px;
	min-width: 22px; min-height: 3px;
	padding: 0;
	flex: none;
	background: rgba(255, 255, 255, .32);
	transition: background .25s var(--ease), width .25s var(--ease);
}

.eh .eh-banners__dot.is-on{ background: var(--red); width: 34px; min-width: 34px; }

@media (max-width: 720px) {
	.eh .eh-banners__arrow{ display: none; }
	.eh .eh-banners__dots{ bottom: 12px; }
	/* Картинку 1920×800 на телефоне не режем — показываем целиком.
	   Если в списке баннеров задана отдельная мобильная картинка,
	   она подставляется и заполняет кадр 4:5. */
	.eh .eh-banner img{ aspect-ratio: 1920 / 800; object-fit: contain; }
	.eh .eh-banner.has-mobile img{ aspect-ratio: 4 / 5; object-fit: cover; }
	.eh .eh-banners{ background: #12151a; }

	/* Кнопка «наверх» не должна лезть под нижнюю панель темы */
	.eh .eh-up{ right: 14px; bottom: 84px; width: 40px; height: 40px; }}

/* ── Живой фон всей страницы ──────────────────────────────────────────
   Три медленно плывущих световых пятна, поверх — переливающийся блик,
   который проходит по диагонали, и лёгкая «разметка трассы».
   Слой лежит за контентом и не перехватывает клики.                     */
.eh .eh-bg{
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.eh .eh-bg::before,
.eh .eh-bg::after,
.eh .eh-bg > span{ content: ""; position: absolute; inset: -30%; display: block; }

/* Световые пятна */
.eh .eh-bg::before{
	background:
		radial-gradient(46% 40% at 18% 12%, rgba(227, 30, 36, .46), transparent 66%),
		radial-gradient(44% 38% at 84% 34%, rgba(96, 150, 220, .38), transparent 68%),
		radial-gradient(42% 36% at 42% 78%, rgba(255, 160, 100, .26), transparent 68%),
		radial-gradient(52% 44% at 74% 98%, rgba(227, 30, 36, .30), transparent 70%),
		radial-gradient(60% 50% at 50% 50%, rgba(255, 255, 255, .07), transparent 72%);
	filter: blur(8px);
	animation: eh-drift 26s ease-in-out infinite alternate;
}

/* Медленно вращающееся цветное «переливание» */
.eh .eh-bg__aurora{
	background: conic-gradient(from 0deg at 50% 50%,
		rgba(227, 30, 36, .20),
		rgba(96, 150, 220, .18),
		rgba(255, 175, 110, .16),
		rgba(140, 110, 220, .16),
		rgba(227, 30, 36, .20));
	filter: blur(70px);
	animation: eh-aurora 48s linear infinite;
}

@keyframes eh-aurora {
	from { transform: rotate(0deg) scale(1.25); }
	to   { transform: rotate(360deg) scale(1.25); }}

/* Переливающийся блик — широкая полоса света, идущая по диагонали */
.eh .eh-bg__sheen{
	background: linear-gradient(112deg,
		transparent 32%,
		rgba(255, 255, 255, .11) 45%,
		rgba(170, 210, 255, .16) 50%,
		rgba(255, 255, 255, .11) 55%,
		transparent 68%);
	background-size: 260% 100%;
	animation: eh-sheen 13s linear infinite;
}

/* Разметка трассы */
.eh .eh-bg::after{
	background-image: repeating-linear-gradient(114deg,
		rgba(255, 255, 255, .07) 0 1px,
		transparent 1px 54px);
	animation: eh-lines 60s linear infinite;
}

/* Виньетка, чтобы края не спорили с текстом */
.eh .eh-bg__vignette{
	background: radial-gradient(130% 100% at 50% 38%, transparent 58%, rgba(8, 10, 13, .40) 100%);
	animation: none;
}

@keyframes eh-drift {
	from { transform: translate3d(-3%, -2%, 0) scale(1); }
	to   { transform: translate3d(4%, 3%, 0) scale(1.1); }}

@keyframes eh-sheen {
	from { background-position: 160% 0; }
	to   { background-position: -60% 0; }}

@keyframes eh-lines { to { transform: translate3d(-108px, 0, 0); }}

/* .eh-bg должен остаться fixed — исключаем его из этого правила */
.eh > *:not(.eh-bg):not(.eh-up), .ehf.ehf{ position: relative; z-index: 1; }

/* Часть снимков снята на чёрном фоне (например, Colnago C72). Для них
   светлое пятно и multiply не годятся — чёрный фон превращается в плашку.
   Здесь наоборот: тёмная подложка и режим lighten, тогда чёрный фон
   снимка сливается с карточкой. */
.eh .eh-card__media.is-dark,
.eh .eh-flag__plate.is-dark{
	background:
		radial-gradient(farthest-side at 50% 46%,
			#39404b 0%, #2b313a 45%, #212630 72%, rgba(20, 24, 30, 0) 96%),
		#1b1f26;
}

.eh .eh-card__media.is-dark img,
.eh .eh-flag__plate.is-dark img{ mix-blend-mode: lighten; }
.eh .eh-flag__plate.is-dark::before{ opacity: .16; }

/* ── Элементы на фоне: колёса, звёзды-искры и сезонные частицы ─────────
   Всё рисуется на слое .eh-bg, лежит за контентом и не ловит клики.     */
.eh .eh-bg__shapes{ position: absolute; inset: 0; }

/* Холст с погодой и скоростными линиями */
.eh .eh-fx{ position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }

/* Колесо: тонкий обод + спицы конической заливкой */
.eh .eh-wheel{
	position: absolute;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .17);
	background:
		conic-gradient(from 0deg,
			rgba(255, 255, 255, .085) 0 1deg, transparent 1deg 30deg,
			rgba(255, 255, 255, .085) 30deg 31deg, transparent 31deg 60deg,
			rgba(255, 255, 255, .085) 60deg 61deg, transparent 61deg 90deg,
			rgba(255, 255, 255, .085) 90deg 91deg, transparent 91deg 120deg,
			rgba(255, 255, 255, .085) 120deg 121deg, transparent 121deg 150deg,
			rgba(255, 255, 255, .085) 150deg 151deg, transparent 151deg 180deg,
			rgba(255, 255, 255, .085) 180deg 181deg, transparent 181deg 210deg,
			rgba(255, 255, 255, .085) 210deg 211deg, transparent 211deg 240deg,
			rgba(255, 255, 255, .085) 240deg 241deg, transparent 241deg 270deg,
			rgba(255, 255, 255, .085) 270deg 271deg, transparent 271deg 300deg,
			rgba(255, 255, 255, .085) 300deg 301deg, transparent 301deg 330deg,
			rgba(255, 255, 255, .085) 330deg 331deg, transparent 331deg 360deg);
	animation: eh-spin linear infinite;
	will-change: transform;
}

.eh .eh-wheel::after{
	content: "";
	position: absolute;
	inset: 42%;
	border-radius: 50%;
	border: 1px solid rgba(227, 30, 36, .5);
}

@keyframes eh-spin { to { transform: rotate(360deg); }}

/* Красный «маршрут» — пунктирная дуга, медленно ползёт */
.eh .eh-track{
	position: absolute;
	height: 1px;
	background: repeating-linear-gradient(90deg,
		rgba(227, 30, 36, .55) 0 22px, transparent 22px 46px);
	transform-origin: left center;
	animation: eh-track-run linear infinite;
	will-change: transform, opacity;
}

@keyframes eh-track-run {
	0%   { opacity: 0; transform: translateX(-8%) rotate(var(--rot, -12deg)); }
	12%  { opacity: .9; }
	88%  { opacity: .9; }
	100% { opacity: 0; transform: translateX(18%) rotate(var(--rot, -12deg)); }}

@media (max-width: 720px) {
	.eh .eh-wheel{ display: none; }}


/* ── Вывод внутри страницы WordPress ──────────────────────────────────
   Тема заворачивает содержимое в контейнер с полями — выводим блок
   во всю ширину экрана и убираем мигание сезона до старта скрипта.   */
.eh{
	margin-inline: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
}

body:not([data-season]) [data-set="summer"].eh-swap{ display: none; }


/* ── Размеры иконок ───────────────────────────────────────────────────
   В макете SVG сидели без класса и получали размер от родителя.
   В плагине у всех иконок класс .eh-i — задаём размеры явно,
   иначе браузер растягивает SVG до размеров контейнера.            */
.eh .eh-i{ width: 18px; height: 18px; flex: none; }
.eh .eh-panel h3 .eh-i,
.eh .eh-term > .eh-i{ width: 30px; height: 30px; color: var(--red); }
.eh .eh-more .eh-i,
.eh .eh-flag__tag .eh-i,
.eh .eh-panel__all .eh-i{ width: 13px; height: 13px; }
.eh .eh-season__btn .eh-i{ width: 15px; height: 15px; }
.eh .eh-rail-nav .eh-i,
.eh .eh-banners__arrow .eh-i{ width: 15px; height: 15px; }
.eh .eh-tile__go .eh-i{ width: 14px; height: 14px; }
.eh .eh-btn .eh-i{ width: 16px; height: 16px; }
.eh .eh-up .eh-i{ width: 18px; height: 18px; }

/* ── Страница с новой главной ─────────────────────────────────────────
   Убираем поля контейнера темы и прячем старый подвал —
   свой выводится вместе с блоком.                                   */
body.esh-home .wd-content-layout,
body.esh-home .site-content,
body.esh-home .wd-content-area,
body.esh-home .entry-content{ padding-top: 0 !important; padding-bottom: 0 !important; margin: 0 !important; }

body.esh-home .wd-footer{ display: none !important; }
body.esh-home .scrollToTop{ display: none !important; }

/* Контейнер темы на этой странице делаем во всю ширину — тогда и блок,
   и подвал занимают весь экран без трюков с 100vw (а значит, без риска
   горизонтальной прокрутки из-за полосы прокрутки). */
body.esh-home .wd-content-layout,
body.esh-home .wd-content-layout > .container,
body.esh-home .site-content,
body.esh-home .wd-content-area,
body.esh-home article.entry-content {
	max-width: none !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}