/* ==========================================================================
   Capymapa — single listing page styles.
   Дизайн-система: ТЗ §4 + wireframe_reference.html (визуальный источник истины).
   ========================================================================== */

/* ---------- 0. Variables (§4.1) ---------- */
.cm-listing {
	--cm-brand: #047079;
	--cm-brand-alt: #0267bd;
	--cm-brand-tint: rgba(4, 112, 121, 0.08);
	--cm-brand-border: rgba(4, 112, 121, 0.25);
	--cm-bg: #ffffff;
	--cm-bg-soft: #f8f8f4;
	--cm-bg-warm: #f4f5ed;
	--cm-chip-bg: #f1efe8;
	--cm-text: #2c2c2a;
	--cm-text-muted: #6b6a63;
	--cm-text-hint: #9a998f;
	--cm-border: rgba(0, 0, 0, 0.08);
	--cm-border-strong: rgba(0, 0, 0, 0.15);
	--cm-info-bg: #fef9ec;
	--cm-info-border: #fac775;

	color: var(--cm-text);
	font-size: 14px;
	line-height: 1.6;
	background: var(--cm-bg);
}
.cm-listing *,
.cm-listing *::before,
.cm-listing *::after { box-sizing: border-box; }

.cm-listing h2 {
	font-size: 18px;
	font-weight: 500;
	line-height: 1.35;
	margin: 0 0 10px;
}
.cm-listing h3 {
	font-size: 13px;
	font-weight: 500;
	margin: 0 0 10px;
}
.cm-listing button { font-family: inherit; }
.cm-listing :focus-visible {
	outline: 2px solid var(--cm-brand);
	outline-offset: 2px;
}
.cm-listing .screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- 1. Hero (§3.2) ---------- */
.cm-hero {
	position: relative;
	height: 480px;
	overflow: hidden;
	background: linear-gradient(135deg, #4a5568 0%, #718096 100%);
}
.cm-hero-media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cm-hero video.cm-hero-media ~ .cm-hero-fallback { display: none; }
/* prefers-reduced-motion: JS ставит .no-motion — прячем видео, оставляем постер */
.cm-hero.no-motion video.cm-hero-media { display: none; }
.cm-hero.no-motion .cm-hero-fallback { display: block; }
/* Слайд-шоу обложки: фото листаются по таймеру (ит.2 §3) — плавный кроссфейд */
.cm-hero-slideshow { position: absolute; inset: 0; }
.cm-hero-slide {
	opacity: 0;
	transition: opacity 1s ease-in-out;
	z-index: 0;
}
.cm-hero-slide.is-active { opacity: 1; z-index: 1; }
.cm-hero.no-motion .cm-hero-slide { opacity: 0; }
.cm-hero.no-motion .cm-hero-slide.is-active { opacity: 1; }
.cm-hero-yt { position: absolute; inset: 0; overflow: hidden; background: #0b1622; }
.cm-hero-yt iframe {
	position: absolute;
	top: 50%; left: 50%;
	width: 100vw;
	height: 56.25vw;        /* 16:9 от ширины экрана */
	min-height: 100%;
	min-width: 177.78vh;    /* 16:9 от высоты — всегда перекрывает hero */
	/* scale = overscan: выносим верхнюю плашку YouTube (иконка-ссылка) и низ за кадр */
	transform: translate(-50%, -50%) scale(1.25);
	border: 0;
	pointer-events: none;
}
/* Постер лежит ПОВЕРХ плеера и плавно уходит, когда видео реально играет */
.cm-hero-yt .cm-hero-media { z-index: 1; transition: opacity .6s ease; }
.cm-hero-yt .cm-hero-media.is-hidden { opacity: 0; }
.cm-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%);
	pointer-events: none;
}
.cm-hero-chips {
	position: absolute;
	top: 16px; left: 20px;
	display: flex;
	gap: 8px;
	z-index: 2;
}
.cm-chip-curated {
	background: rgba(255,255,255,0.95);
	color: var(--cm-brand);
	padding: 4px 10px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 500;
}
.cm-chip-category {
	background: rgba(0,0,0,0.5);
	color: #fff;
	padding: 4px 10px;
	border-radius: 6px;
	font-size: 11px;
}
.cm-hero-actions {
	position: absolute;
	top: 16px; right: 20px;
	display: flex;
	gap: 8px;
	z-index: 2;
}
.cm-hero-btn {
	background: rgba(0,0,0,0.5);
	color: #fff;
	padding: 6px 12px;
	border-radius: 6px;
	font-size: 11px;
	border: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	transition: background 0.15s;
}
.cm-hero-btn:hover { background: rgba(0,0,0,0.7); }
.cm-hero-btn .ti { font-size: 13px; }
.cm-hero-btn.is-saved .ti-heart { color: #ff6b6b; }
.cm-hero-title {
	position: absolute;
	left: 20px; right: 20px;
	bottom: 84px;
	z-index: 2;
}
.cm-hero-title h1 {
	color: #fff;
	font-size: 32px;
	font-weight: 500;
	line-height: 1.2;
	margin: 0 0 4px;
}
.cm-hero-subtitle {
	color: rgba(255,255,255,0.85);
	font-size: 14px;
	margin: 0;
}
.cm-hero-thumbs {
	position: absolute;
	bottom: 16px; left: 20px;
	display: flex;
	gap: 6px;
	z-index: 2;
}
.cm-thumb {
	width: 60px; height: 44px;
	border: none;
	border-radius: 6px;
	overflow: hidden;
	padding: 0;
	cursor: pointer;
	background: rgba(255,255,255,0.15);
	flex-shrink: 0;
}
.cm-thumb img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
.cm-thumb-more {
	width: 90px;
	background: rgba(0,0,0,0.6);
	color: #fff;
	font-size: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ---------- 2. Trust-line (§3.3) ---------- */
.cm-trust {
	padding: 14px 20px;
	background: var(--cm-bg);
	border-bottom: 0.5px solid var(--cm-border);
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 12px;
}
.cm-trust strong { font-weight: 500; }
.cm-muted { color: var(--cm-text-muted); }
.cm-trust-verified { color: var(--cm-brand); }
.cm-sep { color: var(--cm-border-strong); }

/* ---------- 3. Facts chips (§3.4) ---------- */
.cm-facts {
	padding: 12px 20px;
	background: var(--cm-bg);
	border-bottom: 0.5px solid var(--cm-border);
	display: flex;
	gap: 8px;
	overflow-x: auto;             /* мобильный горизонтальный скролл */
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.cm-facts::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) {
	.cm-facts { flex-wrap: wrap; overflow: visible; }
}
.cm-fact,
#cm-feature-chips .cm-fact {
	background: var(--cm-chip-bg);
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	flex-shrink: 0;
}
.cm-fact .ti { font-size: 14px; }
.cm-fact svg { width: 14px; height: 14px; flex-shrink: 0; }
#cm-feature-chips { display: contents; }
.cm-fact.is-open   { color: #0a7a40; }
.cm-fact.is-closed { color: #b0483a; }

/* ---------- 4. Main grid (§3.5) ---------- */
.cm-main {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 32px;
	padding: 24px 20px;
	background: var(--cm-bg);
	max-width: 1240px;
	margin: 0 auto;
}
.cm-content,
.cm-sidebar { min-width: 0; }
.cm-section { margin-bottom: 22px; }

/* a) Pull-quote */
.cm-quote {
	border-left: 3px solid var(--cm-brand);
	padding: 6px 16px;
	margin: 0 0 22px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 16px;
	line-height: 1.5;
	/* Гасим декор blockquote родительской темы Listeo (огромная «❝» налезала на текст) */
	background: none;
	quotes: none;
	position: static;
}
.cm-quote::before,
.cm-quote::after { content: none !important; display: none !important; }
.rtl .cm-quote { border-left: none; border-right: 3px solid var(--cm-brand); }
/* Гасим тире-декор blockquote footer::before из Bootstrap Listeo — тире уже есть в тексте подписи. */
.cm-quote-attr::before { content: none !important; }
.cm-quote-attr {
	font-family: inherit;
	font-size: 11px;
	color: var(--cm-text-muted);
	margin-top: 6px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* b) Video teaser */
.cm-video { margin-bottom: 22px; }
.cm-video-frame {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 8px;
	background: #2c2c2a center / cover no-repeat;
	position: relative;
	overflow: hidden;
	border: none;
}
.cm-video-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	border: 0;
}
.cm-video-play {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 56px; height: 56px;
	border-radius: 50%;
	border: none;
	background: rgba(255,255,255,0.92);
	color: var(--cm-brand);
	font-size: 18px;
	cursor: pointer;
	transition: transform 0.15s;
}
.cm-video-play:hover { transform: translate(-50%, -50%) scale(1.08); }
.cm-video-caption {
	font-size: 12px;
	color: var(--cm-text-muted);
	margin: 8px 0 0;
}

/* c) Описание с clamp */
.cm-description { margin-bottom: 22px; }
.cm-description-body {
	font-size: 14px;
	line-height: 1.7;
	color: var(--cm-text-muted);
}
.cm-description.is-clamped .cm-description-body {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	position: relative;
}
.cm-description.is-clamped.is-expanded .cm-description-body {
	display: block;
	-webkit-line-clamp: unset;
}
.cm-expand {
	background: none;
	border: none;
	padding: 0;
	font-size: 12px;
	color: var(--cm-text-hint);
	margin-top: 8px;
	cursor: pointer;
}
.cm-expand:hover { color: var(--cm-text-muted); }

/* d) Reasons */
.cm-reasons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}
.cm-reason {
	background: var(--cm-bg-soft);
	padding: 12px 14px;
	border-radius: 6px;
	font-size: 13px;
	line-height: 1.4;
}
.cm-reason .ti {
	color: var(--cm-brand);
	font-size: 15px;
	margin-right: 4px;
}

/* e) Insights */
.cm-insights {
	background: var(--cm-info-bg);
	border: 0.5px solid var(--cm-info-border);
	border-radius: 6px;
	padding: 14px;
	font-size: 13px;
	line-height: 1.6;
}
.cm-insights p { margin: 0 0 6px; }
.cm-insights p:last-child { margin: 0; }

/* f) Logistics */
.cm-logistics {
	display: flex;
	gap: 8px;
}
.cm-logi-card {
	flex: 1;
	background: var(--cm-bg-soft);
	padding: 12px;
	border-radius: 6px;
	font-size: 12px;
	line-height: 1.4;
}
.cm-logi-head { font-weight: 500; margin-bottom: 4px; }
.cm-logi-head .ti { font-size: 14px; margin-right: 4px; }
.cm-logi-body { color: var(--cm-text-muted); font-size: 11px; }

/* g) Telegram CTA */
.cm-telegram {
	background: linear-gradient(90deg, var(--cm-brand-tint) 0%, rgba(4,112,121,0.02) 100%);
	border: 0.5px solid var(--cm-brand-border);
	border-radius: 8px;
	padding: 14px 16px;
	margin-bottom: 22px;
	display: flex;
	gap: 12px;
	align-items: center;
}
.cm-telegram-icon { font-size: 28px; }
.cm-telegram-body { flex: 1; min-width: 0; }
.cm-telegram-head { font-size: 13px; font-weight: 500; margin-bottom: 2px; }
.cm-telegram-desc { font-size: 11px; color: var(--cm-text-muted); }
.cm-telegram-btn {
	background: var(--cm-brand);
	color: #fff;
	padding: 8px 14px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
}
.cm-telegram-btn:hover { background: #035d65; color: #fff; }

/* h) Routes */
.cm-routes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.cm-route-card {
	border: 0.5px solid var(--cm-border);
	border-radius: 6px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	display: block;
	transition: border-color 0.15s;
}
.cm-route-card:hover { border-color: var(--cm-brand-border); color: inherit; }
.cm-route-cover {
	display: block;
	height: 80px;
	background: linear-gradient(135deg, #b8b6ac 0%, #d3d1c7 100%) center / cover no-repeat;
}
.cm-route-info { display: block; padding: 10px 12px; }
.cm-route-title { display: block; font-size: 12px; font-weight: 500; margin-bottom: 2px; }
.cm-route-meta { display: block; font-size: 11px; color: var(--cm-text-muted); }

/* i) Affiliate */
.cm-affiliate-head {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 10px;
}
.cm-affiliate-head h2 { margin: 0; }
.cm-affiliate-tag { font-size: 10px; color: var(--cm-text-hint); }
.cm-affiliate { display: flex; gap: 8px; }
.cm-aff-card {
	flex: 1;
	border: 0.5px solid var(--cm-border);
	border-radius: 6px;
	padding: 10px 12px;
	font-size: 12px;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s;
}
.cm-aff-card:hover { border-color: var(--cm-brand-border); color: inherit; }
.cm-aff-title { display: block; font-weight: 500; margin-bottom: 2px; }
.cm-aff-meta { display: block; color: var(--cm-text-muted); font-size: 11px; }

/* ---------- 5. Sidebar (§3.5.2) ---------- */
.cm-sidebar-sticky {
	position: sticky;
	top: 80px;
}
.cm-side-card {
	background: var(--cm-bg);
	border: 0.5px solid var(--cm-border);
	border-radius: 8px;
	padding: 16px;
	margin-bottom: 12px;
}
.cm-cta {
	background: var(--cm-brand);
	color: #fff;
	height: 40px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	text-decoration: none;
	margin-bottom: 10px;
	transition: background 0.15s;
}
.cm-cta:hover { background: #035d65; color: #fff; }
.cm-secondary-row {
	display: flex;
	gap: 6px;
	margin-bottom: 12px;
}
.cm-secondary-btn {
	flex: 1;
	border: 0.5px solid var(--cm-border);
	background: none;
	padding: 8px 4px;
	border-radius: 6px;
	font-size: 11px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	color: var(--cm-text);
	transition: border-color 0.15s;
}
.cm-secondary-btn:hover { border-color: var(--cm-border-strong); }
.cm-secondary-btn.is-saved .ti-heart { color: #ff6b6b; }

/* Билет онлайн (ТЗ ит.2 §1): при наличии capymapa_ticket_url кнопка билета
   становится primary (.cm-cta), маршрут — secondary full-width под ней. */
.cm-route-secondary {
	width: 100%;
	height: 36px;
	border: 0.5px solid var(--cm-border);
	background: none;
	border-radius: 6px;
	font-size: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	color: var(--cm-text);
	text-decoration: none;
	margin-bottom: 10px;
	transition: border-color 0.15s;
}
.cm-route-secondary:hover { border-color: var(--cm-border-strong); color: var(--cm-text); }
.cm-ticket-note {
	font-size: 11px;
	color: var(--cm-text-hint);
	text-align: center;
	margin: -4px 0 10px;
}
.cm-address {
	display: block;
	width: 100%;
	background: none;
	border: none;
	border-top: 0.5px solid var(--cm-border);
	padding: 10px 0 0;
	font-size: 11px;
	color: var(--cm-text-muted);
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
}
.cm-address .ti { font-size: 12px; margin-right: 4px; }
.cm-address:hover { color: var(--cm-text); }

.cm-nearby-item {
	display: flex;
	gap: 8px;
	padding: 6px 0;
	text-decoration: none;
	color: inherit;
}
.cm-nearby-item + .cm-nearby-item { border-top: 0.5px solid var(--cm-border); }
.cm-nearby-item:hover .cm-nearby-name { color: var(--cm-brand); }
.cm-nearby-thumb {
	width: 34px; height: 34px;
	background: linear-gradient(135deg, #b8b6ac 0%, #d3d1c7 100%) center / cover no-repeat;
	border-radius: 4px;
	flex-shrink: 0;
}
.cm-nearby-info { font-size: 11px; line-height: 1.35; min-width: 0; }
.cm-nearby-name { display: block; font-weight: 500; }
.cm-nearby-meta { display: block; color: var(--cm-text-muted); font-size: 10px; }

.cm-claim-card {
	background: var(--cm-bg-soft);
	border-radius: 6px;
	padding: 10px 12px;
	font-size: 11px;
	line-height: 1.5;
	color: var(--cm-text-muted);
}
.cm-claim-lead { font-weight: 500; color: var(--cm-text); margin-bottom: 4px; }
.cm-claim-link { color: var(--cm-brand); margin-top: 4px; display: block; text-decoration: none; }
.cm-claim-link:hover { text-decoration: underline; color: var(--cm-brand); }

/* ---------- 6. Map (§3.6) ---------- */
.cm-map-section {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 20px 24px;
	background: var(--cm-bg);
}
.cm-map-wrap { position: relative; }
.cm-map {
	height: 400px;
	border-radius: 8px;
	background: var(--cm-bg-soft);
	overflow: hidden;
}
.cm-map-cta {
	position: absolute;
	bottom: 16px; left: 16px;
	background: var(--cm-brand);
	color: #fff;
	padding: 9px 14px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 500;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.18);
	z-index: 2;
}
.cm-map-cta:hover { background: #035d65; color: #fff; }
/* Категорийный пин (ТЗ ит.2 §2) — тот же SVG, что на карте v2, вставлен как
   background-image (data URI, собран в JS из categoryConfig). */
.cm-map-marker {
	width: 40px; height: 46px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center bottom;
	filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
	cursor: pointer;
}

/* ---------- 6.5. Related (Куда ещё сходить, ит.3) ---------- */
/* Та же сетка, что у .cm-map-section: без этого блок #cm-related
   не имел max-width/margin/padding и прилипал к левому краю вьюпорта. */
#cm-related {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 20px 24px;
	background: var(--cm-bg);
}

/* ---------- 7. Reviews wrapper (§3.7) ---------- */
.cm-reviews {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 20px 32px;
	background: var(--cm-bg);
}

/* ---------- 8. Mobile sticky bar (§3.8) ---------- */
.cm-mobile-cta {
	display: none;
	position: fixed;
	bottom: 0; left: 0; right: 0;
	background: #fff;
	border-top: 0.5px solid var(--cm-border);
	padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
	gap: 6px;
	z-index: 900;
	transform: translateY(105%);
	transition: transform 0.25s ease;
}
.cm-mobile-cta.is-visible { transform: translateY(0); }
.cm-mobile-primary {
	flex: 1;
	background: var(--cm-brand);
	color: #fff;
	padding: 11px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}
.cm-mobile-primary:hover { color: #fff; }
.cm-mobile-icon {
	border: 0.5px solid var(--cm-border-strong);
	background: #fff;
	padding: 11px 14px;
	border-radius: 6px;
	font-size: 14px;
	cursor: pointer;
	color: var(--cm-text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}
.cm-mobile-icon.is-saved .ti-heart { color: #ff6b6b; }

/* ---------- 9. Toast ---------- */
.cm-toast {
	position: fixed;
	bottom: 84px;
	left: 50%;
	transform: translateX(-50%) translateY(8px);
	background: #2c2c2a;
	color: #fff;
	padding: 9px 16px;
	border-radius: 6px;
	font-size: 12px;
	z-index: 1000;
	opacity: 0;
	transition: opacity 0.2s, transform 0.2s;
	pointer-events: none;
	max-width: 90vw;
}
.cm-toast.is-shown { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- 10. Share modal fallback ---------- */
.cm-share-modal {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.45);
	z-index: 1001;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.cm-share-box {
	background: #fff;
	border-radius: 8px;
	padding: 20px;
	width: 100%;
	max-width: 340px;
}
.cm-share-box h3 { margin: 0 0 14px; font-size: 14px; }
.cm-share-row { display: flex; gap: 8px; }
.cm-share-opt {
	flex: 1;
	border: 0.5px solid var(--cm-border);
	border-radius: 6px;
	padding: 12px 6px;
	text-align: center;
	font-size: 11px;
	text-decoration: none;
	color: var(--cm-text);
	background: none;
	cursor: pointer;
}
.cm-share-opt:hover { border-color: var(--cm-brand-border); color: var(--cm-text); }
.cm-share-close {
	display: block;
	margin: 14px auto 0;
	background: none;
	border: none;
	font-size: 12px;
	color: var(--cm-text-hint);
	cursor: pointer;
}

/* ---------- 11. Responsive (§3.5, §3.8) ---------- */
@media (max-width: 1023px) {
	.cm-hero { height: 320px; }
	.cm-hero-title h1 { font-size: 24px; }
	.cm-hero-title { bottom: 76px; }
	.cm-hero-btn span { display: none; }        /* только иконки на мобильном */
	.cm-hero-btn { padding: 8px 10px; }
	.cm-hero-btn .ti { font-size: 15px; }

	.cm-main { grid-template-columns: 1fr; gap: 24px; }
	.cm-sidebar-sticky { position: static; }

	.cm-mobile-cta { display: flex; }

	.cm-map { height: 300px; }

	.cm-logistics { flex-direction: column; }
	.cm-reasons { grid-template-columns: 1fr; }
	.cm-routes { grid-template-columns: 1fr; }
	.cm-affiliate { flex-direction: column; }

	/* чтобы sticky bar не перекрывал последний контент */
	.cm-reviews { padding-bottom: 96px; }
}

@media (prefers-reduced-motion: reduce) {
	.cm-mobile-cta,
	.cm-toast,
	.cm-video-play { transition: none; }
}