/* ============================================================
   АС-КЛЕМАТИС · мокапы главной — общая база
   Палитра/шрифты боевого сайта: cream / sage / pine / gold,
   Cormorant Garamond (заголовки) + DM Sans (интерфейс).
   Подключается всеми вариантами (a/b/c) + index.html.
   ============================================================ */

:root {
	--cream: #f8f5ee;
	--cream-2: #f1ebdd;
	--paper: #efe9db;
	--ink: #1c2a22;
	--pine: #1e3a2c;
	--pine-deep: #12241b;
	--sage: #486d57;
	--sage-soft: #899c79;
	--gold: #c6a675;
	--gold-deep: #9a7b4f;
	--blush: #c79a8c;
	--line: rgba(28, 42, 34, .14);
	--line-light: rgba(248, 245, 238, .22);

	--font-display: 'Cormorant Garamond', Georgia, serif;
	--font-ui: 'DM Sans', 'Segoe UI', sans-serif;

	--ease-out: cubic-bezier(.22, 1, .36, 1);
	--ease-soft: cubic-bezier(.45, 0, .15, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
	font-family: var(--font-ui);
	font-size: 16px;
	line-height: 1.55;
	color: var(--ink);
	background: var(--cream);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	/* Подвал прижат к низу окна даже на коротких страницах (пустая
	   корзина и т.п.) — без этого на страницах короче экрана подвал
	   зависал сразу под контентом, а не у нижнего края. */
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }

#flower-canvas {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	pointer-events: none;
	z-index: 9999;
}

/* ---------- Типографика ---------- */

.display {
	font-family: var(--font-display);
	font-weight: 500;
	line-height: .98;
	letter-spacing: -.02em;
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}
.eyebrow::before { content: ''; width: 30px; height: 1px; background: currentColor; opacity: .7; }

/* ---------- Кнопки ---------- */

.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 16px 26px;
	border: 0;
	border-radius: 100px;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	transition: transform .35s var(--ease-out), background .25s, color .25s, box-shadow .35s;
	will-change: transform;
}
/* \FE0E — селектор текстового начертания: без него iOS рисует ↗ цветным
   эмодзи вместо тонкого текстового глифа (не совпадает с десктопом). */
.btn::after { content: '\2197\FE0E'; font-size: 13px; transition: transform .35s var(--ease-out); }
.btn:hover::after { transform: translate(3px, -3px); }

.btn--light { background: var(--cream); color: var(--ink); }
.btn--light:hover { box-shadow: 0 12px 32px rgba(18, 36, 27, .3); }

.btn--dark { background: var(--pine); color: var(--cream); }
.btn--dark:hover { background: var(--pine-deep); box-shadow: 0 12px 32px rgba(18, 36, 27, .28); }

.btn--ghost {
	background: transparent;
	border: 1px solid currentColor;
}
.btn--ghost:hover { background: rgba(28, 42, 34, .06); }

/* ---------- Scroll-reveal ---------- */

[data-reveal] {
	opacity: 0;
	transform: translateY(34px);
	transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
	transition-delay: var(--reveal-delay, 0s);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	[data-reveal] { opacity: 1; transform: none; transition: none; }
	html { scroll-behavior: auto; }
}

/* ---------- Бегущая строка ---------- */

.marquee { overflow: hidden; white-space: nowrap; }
.marquee__track {
	display: inline-flex;
	gap: 48px;
	padding-right: 48px;
	animation: marquee 28s linear infinite;
	will-change: transform;
}
@keyframes marquee {
	to { transform: translateX(-50%); }
}

/* ---------- Утилиты ---------- */

.container { max-width: 1320px; margin: 0 auto; padding: 0 32px; }

@media (max-width: 720px) {
	.container { padding: 0 20px; }

	/* iOS Safari зумит страницу при фокусе на поле с font-size < 16px —
	   зум ломает раскладку (контейнеры "уезжают"). Держим 16px на вводе.
	   !important — иначе проигрывает более специфичным правилам полей
	   (.vfield input, .chip input и т.д.), которые задают меньший размер. */
	input, select, textarea { font-size: 16px !important; }
}

/* ---------- Rich-контент из редактора (списки-тире, отступы) ---------- */
.asc-list-dash { list-style: none; margin-left: 0; padding-left: 18px; }
.asc-list-dash li { position: relative; }
.asc-list-dash li::before {
	content: '—';
	position: absolute;
	left: -14px;
	color: inherit;
}
.asc-list-dash ul, .asc-list-dash ol { margin: 0 0 12px 1.4em; padding: 0; }