/*
 * 01-base.css — База: переменные цветов и шрифтов из темы, сетка, заголовки, кнопки.
 * Порядок подключения файлов важен: см. MLD_Plugin::STYLES.
 */

/*
 * Мильфей — шаблон страницы аппарата.
 * Сетка, размеры и отступы повторяют пример (mimiclinic.ru, SMAS-лифтинг Ultraformer MPT 4).
 * Цвета и шрифт берутся из «Настройки темы» Impreza, в скобках — значения из примера на случай,
 * если переменной темы нет.
 *
 * Брейкпоинты как в примере: ≥1200 ПК, 640–1199 планшет, <640 телефон.
 */

.mld {
	--mld-font: var(--font-family, "Aeroport", "Montserrat", system-ui, sans-serif);
	/* Заголовки: шрифт и насыщенность заголовков темы. «Мильфей → Настройки → Шрифт заголовков»
	   переопределяет их строкой .mld{--mld-head-font…} (MLD_Settings::css_vars). */
	--mld-head-font: var(--h1-font-family, var(--mld-font));
	--mld-head-weight: var(--h1-font-weight, 400);
	--mld-text: var(--color-content-text, #313131);
	--mld-heading: var(--color-content-heading, #313131);
	--mld-dark: var(--color-content-secondary, #60656b);       /* тёмные кнопки */
	--mld-accent: var(--color-content-primary, #eae1d8);       /* кнопка на баннере */
	--mld-grey: var(--color-content-bg-alt, #f4f4f4);          /* плашка «О процедуре» */
	--mld-line: var(--color-content-border, #e0d5d5);          /* рамки, линии прайса */
	--mld-muted: var(--color-content-faded, #696761);          /* чипы, крошки */
	--mld-bg: var(--color-content-bg, #fff);
	--mld-warm: #f8f4f0;                                        /* плашка «Оборудование» */
	--mld-warm: color-mix(in srgb, var(--mld-accent) 30%, var(--mld-bg));

	--mld-gutter: max(24px, 4vw);   /* поля слева и справа: 4% ширины экрана */
	--mld-radius: 48px;            /* скругление плашек у края экрана */
	--mld-pad: 72px;           /* внутренний отступ плашек */
	--mld-gap: 60px;           /* между секциями */
	--mld-h2: 30px;
	--mld-h2-ls: 2px;
	--mld-h3: 30px;
	--mld-body: 14px;
	--mld-body-lh: 1.45;
	--mld-small: 12px;
	--mld-row: 16px;

	font-family: var(--mld-font);
	color: var(--mld-text);
	font-size: var(--mld-body);
	line-height: var(--mld-body-lh);
	font-weight: 300;
	width: 100%;
	overflow-x: clip;           /* выезжающие секции не дают горизонтальной прокрутки */
	-webkit-font-smoothing: antialiased;
}

.mld *,
.mld *::before,
.mld *::after { box-sizing: border-box; }

.mld p { margin: 0; }
.mld img { display: block; max-width: 100%; }

.mld-wrap {
	padding-left: var(--mld-gutter);
	padding-right: var(--mld-gutter);
}

/* ---------- Заголовки ---------- */

.mld .mld-h2,
.mld-hero .mld-hero__title,
.mld .mld-h3,
.mld .mld-card__title {
	font-family: var(--mld-head-font);
	color: var(--mld-heading);
	margin: 0;
	padding: 0;
}

.mld .mld-h2 {
	font-size: var(--mld-h2);
	line-height: 1.1;
	font-weight: var(--mld-head-weight);
	letter-spacing: var(--mld-h2-ls);
	text-transform: uppercase;
}

.mld-head { margin-bottom: 30px; }

.mld-kicker {
	display: block;
	margin-bottom: 10px;
	font-size: 14px;
	line-height: 1.3;
	color: var(--mld-dark);
	opacity: .6;
}

.mld .mld-h3 {
	font-size: var(--mld-h3);
	line-height: 1.1;
	font-weight: var(--mld-head-weight);
	letter-spacing: 0;
	text-transform: none;
	margin-bottom: 35px;
}

.mld-sec { margin-top: var(--mld-gap); }

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

.mld .mld-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 264px;
	min-height: 48px;
	padding: 12px 34px;
	border: 0;
	border-radius: 30px;
	background: var(--mld-dark);
	color: #fff;
	font-family: var(--mld-font);
	font-size: 12px;
	line-height: 1.3;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease, transform .25s ease;
}

.mld .mld-btn:hover { background: var(--mld-heading); color: #fff; }
.mld .mld-btn:focus-visible { outline: 2px solid var(--mld-heading); outline-offset: 3px; }

.mld .mld-btn--hero {
	min-width: 300px;
	min-height: 55px;
	background: var(--mld-accent);
	color: var(--mld-heading);
	font-size: 14px;
}

.mld .mld-btn--hero:hover { background: #fff; color: var(--mld-heading); }
.mld .mld-btn--hero:focus-visible { outline-color: #fff; }

/* Пилюли: зоны, вкладки, группы прайса */
.mld-zone,
.mld .mld-pill {
	display: inline-flex;
	align-items: center;
	padding: 7px 12px;
	border: 1px solid var(--mld-line);
	border-radius: 30px;
	background: transparent;
	color: var(--mld-muted);
	font-family: var(--mld-font);
	font-size: 12px;
	line-height: 1.3;
	font-weight: 400;
	white-space: nowrap;
}

.mld .mld-pill {
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.mld .mld-pill:hover { border-color: var(--mld-dark); color: var(--mld-heading); }

.mld .mld-pill[aria-selected="true"] {
	background: var(--mld-dark);
	border-color: var(--mld-dark);
	color: #fff;
}

.mld .mld-pill:focus-visible { outline: 2px solid var(--mld-heading); outline-offset: 2px; }