/* Доводочный CSS дочерней темы. Сюда позже лягут остальные градиенты брендбука. */

/* ════════════════════════════════════════════════════════════════════════
   Цвета здесь записаны переменными --e-global-color-*, а не числами.

   Это та же палитра, которую владелец правит в «Настройки сайта -> Глобальные
   цвета»: Elementor печатает каждый её цвет переменной на теле страницы
   (.elementor-kit-N). Пока в этом файле стояли шестнадцатеричные значения,
   смена «Огненного оранжевого» в панели не доходила до фирменных заливок -
   правило дочерней темы с !important побеждает плоский цвет виджета, и на
   странице менялось 736 пикселей из семи миллионов, то есть ничего.

   Соответствие «имя переменной -> цвет» задаёт build/tokens.py (SYSTEM_COLORS
   и CUSTOM_COLORS), сами числа - ../../site-mockups/tokens.css.

   Числами остаются две вещи. Первое - остановки и углы градиентов: это форма
   градиента, а не цвет. Второе - полупрозрачные вуали, выведенные из графита
   (rgba(24, 24, 24, ...)), полотна (rgba(250, 247, 243, ...)) и белого
   (rgba(255, 255, 255, .09/.13/.14/.32/.85)), а также два тёмных оттенка огня
   в баннере-приглашении (#A32A18 и #4E1A11): таких значений в палитре нет, и
   подменить их переменной нечем.
   ════════════════════════════════════════════════════════════════════════ */

/* Вуаль первого экрана: без неё подзаголовок нечитаем поверх фото камина.
   Градиент - точная копия --gradient-hero-veil из ../../site-mockups/tokens.css
   (числа те же, что и в rgba() исходника: color-paper #FAF7F3 = 250,247,243). */
/* isolation: слои видео, вуали и текста ниже считаются только внутри первого
   экрана. Без этого поднятый над вуалью текст оказывается выше карточки фактов,
   которая налезает на низ первого экрана, и она уходит под фон. */
.danilo-hero {
	position: relative;
	isolation: isolate;
}
.danilo-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	/* 1, а не 0: видеофон Elementor (.elementor-background-video-container)
	   тоже стоит абсолютом с z-index 0 и идёт в разметке позже псевдоэлемента -
	   при равном слое он лёг бы поверх вуали. */
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(90deg,
		rgba(250, 247, 243, .93) 0%, rgba(250, 247, 243, .88) 24%,
		rgba(250, 247, 243, .52) 41%, rgba(250, 247, 243, .05) 58%, rgba(250, 247, 243, 0) 70%);
}
/* Elementor оборачивает содержимое "boxed"-контейнера в .e-con-inner - поверх
   вуали должен оказаться текст внутри него, а не сам .danilo-hero. Поднимается
   колонка текста, а не .e-con-inner: видеофон Elementor кладёт внутрь
   .e-con-inner, и позиционированная обёртка сжала бы видео до ширины контента. */
.danilo-hero > .e-con-inner > .e-con {
	position: relative;
	z-index: 2;
}
/* .hero .lead в ../../site-mockups/main.css: max-width 46ch. Это единственное
   ограничение ширины в первом экране макета - сам заголовок ширину не режет
   (.hero h1: max-width none). Мерой ch контейнер Elementor не владеет, и
   пересчитывать её в пиксели нельзя: она считается по ширине нуля того самого
   начертания, которым набрана подводка. */
.danilo-hero-lead p {
	max-width: 46ch;
}
/* .hero .lead там же: цвет основного текста при прозрачности .78. Цвет приходит
   из палитры ("ink"), прозрачность - свойство элемента, глобальным цветом её не
   задать. */
.danilo-hero-lead {
	opacity: .78;
}

/* Блок телефона в шапке. Elementor даёт контейнеру width:var(--width,100%),
   и как флекс-элемент он претендует на всю строку шапки: свободного места в
   строке не остаётся вовсе, и иконка телефона встаёт вплотную к пункту
   «Контакты». "width: auto" возвращает ширину по содержимому - тот же приём и
   по той же причине, что у бейджа баннера ниже. Остаток ширины после этого
   забирает виджет меню растяжением (build/header_footer.py) - это и есть
   margin-right:auto у .nav в ../../site-mockups/base.css. */
.danilo-topbar-phone {
	width: auto !important;
}

/* Номер в шапке - ссылка tel: (build/header_footer.py). Цвет и вес - те же,
   что у текста виджета, а не ссылочные темы. */
.danilo-phone a {
	color: inherit;
	text-decoration: none;
}

/* Подпись ведущего кадра работ: без затемнения белый текст неразличим на
   светлых участках фото. Градиент - точная копия --gradient-caption из
   ../../site-mockups/tokens.css (числа те же, что и в rgba(): color-graphite
   #181818 = 24,24,24). */
/* .works__lead в том же файле: overflow hidden. Затемнение под подписью лежит
   у самого низа кадра и без обрезки выходит за скруглённые углы - скругление
   21px внизу переставало быть видно вовсе. */
.danilo-work-lead {
	overflow: hidden;
}
.danilo-work-caption {
	position: relative;
}
.danilo-work-caption::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(0deg, rgba(24, 24, 24, .88) 12%, rgba(24, 24, 24, 0) 100%);
}
.danilo-work-caption > .e-con-inner {
	position: relative;
	z-index: 1;
}

/* Огненная заливка кнопки "Подобрать камин": --gradient-cta из
   ../../site-mockups/tokens.css, цвета - из палитры. !important перебивает
   плоский цвет globals/colors?id=primary, который иначе выигрывает по
   специфичности у сгенерированного для этого виджета правила Elementor. */
.danilo-btn-fire .elementor-button {
	background: linear-gradient(95deg, var(--e-global-color-flameyellow) -8%,
		var(--e-global-color-primary) 38%, var(--e-global-color-accent) 100%) !important;
}
/* «Живая» кнопка (просьба 2026-10-12): при наведении огонь в заливке
   перетекает, кнопка чуть поднимается и светится, стрелка шагает вперёд.
   Заливка шире кнопки (180%), при наведении сдвигается к красному краю.
   Свечение - тот же красный палитры, что у .btn--primary:hover в макете
   (215,52,33 = accent). */
.danilo-btn-fire .elementor-button {
	background-size: 180% 100% !important;
	background-position: 0% 50% !important;
	transition: background-position .6s ease, transform .25s ease, box-shadow .25s ease !important;
	will-change: transform;
}
.danilo-btn-fire .elementor-button:hover,
.danilo-btn-fire .elementor-button:focus-visible {
	background-position: 100% 50% !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(215, 52, 33, .38), 0 0 0 4px rgba(234, 87, 41, .14);
}
.danilo-btn-fire .elementor-button:active {
	transform: translateY(0);
	box-shadow: 0 4px 12px rgba(215, 52, 33, .32);
}
.danilo-btn-fire .elementor-button-icon {
	transition: transform .25s ease;
}
.danilo-btn-fire .elementor-button:hover .elementor-button-icon {
	transform: translateX(4px);
}
@media (prefers-reduced-motion: reduce) {
	.danilo-btn-fire .elementor-button,
	.danilo-btn-fire .elementor-button-icon {
		transition: box-shadow .25s ease !important;
	}
	.danilo-btn-fire .elementor-button:hover,
	.danilo-btn-fire .elementor-button:hover .elementor-button-icon {
		transform: none;
		background-position: 0% 50% !important;
	}
}

/* Тёмная половина баннера-приглашения: --gradient-banner из
   ../../site-mockups/tokens.css, чтобы белый текст читался поверх фотографии
   зала. Два тёмных оттенка огня и полупрозрачный графит палитре не
   принадлежат и остаются числами (графит #181818 = 24,24,24). */
.danilo-invite {
	position: relative;
}
.danilo-invite::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	border-radius: inherit;
	background: linear-gradient(97deg, #A32A18 -14%, #4E1A11 18%, var(--e-global-color-secondary) 42%,
		rgba(24, 24, 24, .28) 68%, rgba(24, 24, 24, 0) 84%);
}
.danilo-invite > .e-con-inner {
	position: relative;
	z-index: 1;
}

/* Карточки товара: .good__body h3 и .good__body p в
   ../../site-mockups/main.css несут min-height 34 и 38 - так макет ровняет
   кнопки четырёх карточек, у которых название и описание разной длины.
   Контрола под минимальную высоту у виджета нет, поэтому числа здесь.
   Прежний приём - автоматический верхний отступ у кнопки - давал зазор только
   карточкам с коротким названием: у карточки с двустрочным названием кнопка
   вставала вплотную к сумме. */
.danilo-good .elementor-widget-heading h3 {
	min-height: 34px;
}
.danilo-good-note p {
	min-height: 38px;
}

/* Огненная полоса над карточкой «Дизайнерам». В макете
   (../../site-mockups/main.css, .partner::before) это 2px во всю ширину
   карточки заливкой --gradient-cta - тот же градиент палитры, что и у
   danilo-btn-fire выше. Своего контрола под псевдоэлемент у контейнера нет;
   overflow: hidden - у .partner в макете, без него полоса торчит за
   скруглённые углы. */
.danilo-partner {
	position: relative;
	overflow: hidden;
}
.danilo-partner::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 2px;
	background: linear-gradient(95deg, var(--e-global-color-flameyellow) -8%,
		var(--e-global-color-primary) 38%, var(--e-global-color-accent) 100%);
}

/* Бейдж "Уют / вдохновляет" поверх фото справа в баннере-приглашении: числа -
   точная копия .invite__stamp/.invite__stamp p из ../../site-mockups/main.css
   (рамка - огненный жёлтый палитры, текст - белый на тёмном).
   Разрядка/отступ первой строки/вес 500 - только для этого бейджа, отдельной
   роли типографики под них не заводим: сочетание нигде больше не повторяется. */
.danilo-invite-stamp {
	position: absolute;
	z-index: 1;
	/* Elementor даёт контейнеру по умолчанию width:var(--width,100%) - без
	   явного "width: auto" рамка растягивается на всю ширину баннера вместо
	   того, чтобы облегать текст, как в макете. */
	width: auto !important;
	right: 56px;
	top: 50%;
	transform: translateY(-50%);
	padding: 18px 26px;
	border: 1px solid var(--e-global-color-flameyellow);
	border-left: 0;
	border-bottom: 0;
	text-align: center;
	text-shadow: 0 1px 14px rgba(24, 24, 24, .85);
}
.danilo-invite-stamp p {
	margin: 0;
	font-size: 11px;
	font-weight: 500;
	line-height: 2.2;
	letter-spacing: .34em;
	text-indent: .34em;
	text-transform: uppercase;
	color: var(--e-global-color-ondark);
}

/* Форма заявки (Fluent Forms) на тёмной плашке блока "Заявка": поля и кнопка в
   один ряд, пилюльные полупрозрачные поля - числа дословно из
   .final__form/.final__form input в ../../site-mockups/base.css. Плагин не
   даёт своих полей ни через один контрол Elementor, поэтому переопределяем
   собственные классы плагина (.ff-*), область действия ограничена классом
   виджета (danilo-form), !important - тот же приём, что и у danilo-btn-fire
   выше: у плагина есть свои корневые правила с более высокой специфичностью. */
/* Прямой родитель ".ff-el-group" - не сама <form>, а вложенный в неё
   <fieldset> (плагин оборачивает поля им) - flex нужен именно на нём, иначе
   поля остаются блочными и стоят колонкой независимо от display у <form>. */
/* Ширина формы - .final__form { max-width: 560px } из того же файла. В макете
   этим потолком и задана ширина поля: 560 минус кнопка и два зазора пополам.
   Записан он как width, а не как max-width: в макете до потолка форму
   дотягивает естественная ширина голых <input>, а у полей плагина её нет -
   мы сами дали им width: 100%. Без явного числа форма не подпирала бы левую
   колонку, а от этого зависит её ширина (см. ниже). max-width: 100% -
   страховка для узкого окна, где 560 уже не влезают. */
.danilo-form fieldset {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	width: 560px;
	max-width: 100%;
}
.danilo-form .ff-el-group {
	flex: 1;
	min-width: 110px;
	margin: 0 !important;
}
.danilo-form .ff_submit_btn_wrapper {
	/* width:auto!important - у плагина .ff-el-group несёт свою ширину 100%,
	   а flex-basis:auto (значение по умолчанию для flex:none) при таком width
	   резолвится в него же (п.4 спецификации flexbox: auto-basis берёт width
	   элемента) - кнопка тянулась на всю ширину строки, пока не переопределили. */
	flex: none;
	width: auto !important;
	min-width: 0 !important;
}
/* Поля по бокам 20px, а не 26px макета: в макете поле одно, у нас два рядом, и при
   26px подсказка «Как к вам обращаться» не влезала и обрезалась на последней букве. */
.danilo-form input.ff-el-form-control {
	width: 100%;
	height: 52px;
	padding: 0 20px;
	border: 1px solid transparent !important;
	border-radius: 100px !important;
	outline: 2px solid transparent;
	background: rgba(255, 255, 255, .09) !important;
	color: var(--e-global-color-ondark) !important;
	font-family: "Montserrat", "Segoe UI", sans-serif;
	font-size: 13px;
}
.danilo-form input.ff-el-form-control::placeholder {
	color: var(--e-global-color-ondark3);
}
.danilo-form input.ff-el-form-control:hover {
	background: rgba(255, 255, 255, .14) !important;
}
.danilo-form input.ff-el-form-control:focus-visible {
	outline: 2px solid var(--e-global-color-flameyellow);
	outline-offset: 1px;
}
/* Заливка кнопки "Отправить": --gradient-cta из
   ../../site-mockups/tokens.css, как у .danilo-btn-fire выше. Ленивая загрузка
   фонов Elementor градиент не гасит: контейнер блока несёт e-no-lazyload,
   см. комментарий в build/blocks_main.py, функция final(). */
/* Набор кнопки - .btn в ../../site-mockups/base.css: 12px, вес 700, разрядка
   .09em, капитель, поля 28px по бокам (вертикальные не нужны - высота 52px
   задана здесь же). !important по той же причине, что и у заливки выше: у
   плагина есть свои правила той же специфичности, и без него кнопка остаётся
   набранной 16px/500 - на 20px шире макетной, и эту ширину она отнимает
   у полей. */
.danilo-form .ff-btn-submit {
	height: 52px;
	padding: 0 28px !important;
	border: 0 !important;
	border-radius: 100px !important;
	background: linear-gradient(95deg, var(--e-global-color-flameyellow) -8%,
		var(--e-global-color-primary) 38%, var(--e-global-color-accent) 100%) !important;
	color: var(--e-global-color-ondark) !important;
	font-family: "Montserrat", "Segoe UI", sans-serif;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: .09em !important;
	text-transform: uppercase !important;
}
/* .btn--primary:hover в ../../site-mockups/base.css: градиент остаётся тем же,
   добавляется только свечение. */
.danilo-form .ff-btn-submit:hover {
	background: linear-gradient(95deg, var(--e-global-color-flameyellow) -8%,
		var(--e-global-color-primary) 38%, var(--e-global-color-accent) 100%) !important;
	box-shadow: 0 8px 22px rgba(215, 52, 33, .30);
}
.danilo-form .ff-btn-submit:disabled {
	opacity: .55;
	cursor: wait;
}

/* Три строки вместо одной: имя и телефон, размеры ниши во всю ширину, затем
   «Приложить фото» слева и «Отправить» справа. Размеры и фото - просьба
   владельца 2026-09-25: заголовок блока просит их прислать, а вписать было
   некуда. Ширина 560 и зазор 12 - прежние, из макета. Порядок задан через
   order: кнопку фото вставляет скрипт после кнопки отправки. */
.danilo-form .ff-el-group.danilo-dims {
	flex-basis: 100%;
}
.danilo-form .dm-photos {
	order: 1;
	flex: 1;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-family: "Montserrat", "Segoe UI", sans-serif;
	font-size: 13px;
}
/* align-self: когда фото приложены, строка растёт вниз, а кнопка остаётся
   вровень с «Приложить фото», а не съезжает к середине. */
.danilo-form .ff_submit_btn_wrapper {
	order: 2;
	align-self: flex-start;
}
/* Кнопка фото - вторичная, как «Посмотреть вживую» у товара: контур, без заливки.
   Все свойства заданы явно: у темы Hello свой набор кнопок (розовая рамка,
   розовая заливка при наведении и фокусе), и без этого он проступает. */
.danilo-form button.dm-photos__add,
.danilo-form button.dm-photos__add:hover,
.danilo-form button.dm-photos__add:focus {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 52px;
	padding: 0 22px;
	border: 0;
	border-radius: 100px;
	background: transparent;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32);
	color: var(--e-global-color-ondark);
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
}
.danilo-form button.dm-photos__add:hover { box-shadow: inset 0 0 0 1px var(--e-global-color-ondark); }
.danilo-form button.dm-photos__add:focus-visible {
	outline: 2px solid var(--e-global-color-flameyellow);
	outline-offset: 1px;
}
.danilo-form .dm-photos__add[hidden] { display: none; }
.danilo-form .dm-photos__add svg { flex: none; color: var(--e-global-color-flameyellow); }
.danilo-form .dm-photos__add small { font-size: 12px; font-weight: 400; color: var(--e-global-color-ondark3); }
.danilo-form .dm-photos__list {
	display: contents;
	list-style: none;
	margin: 0;
	padding: 0;
}
.danilo-form .dm-photos__list li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 180px;
	padding: 7px 8px 7px 14px;
	border-radius: 100px;
	background: rgba(255, 255, 255, .09);
	color: var(--e-global-color-ondark);
	font-size: 12px;
}
.danilo-form .dm-photos__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.danilo-form .dm-photos__state { padding-right: 6px; color: var(--e-global-color-ondark3); }
.danilo-form button.dm-photos__remove,
.danilo-form button.dm-photos__remove:focus {
	flex: none;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: var(--e-global-color-ondark);
	font-size: 15px;
	line-height: 22px;
	cursor: pointer;
}
.danilo-form button.dm-photos__remove:hover { background: rgba(255, 255, 255, .32); color: var(--e-global-color-ondark); }
.danilo-form .dm-photos__error {
	flex-basis: 100%;
	margin: 0;
	font-size: 12px;
	color: var(--e-global-color-flameyellow);
}

/* Правая половина блока заявки. В макете (../../site-mockups/base.css) это
   .final__shot: фотография залита в половину карточки (position absolute,
   inset 0, object-fit cover - на сайте это фон колонки), а поверх неё лежит
   вуаль .final__shot i - градиент от графита палитры к почти прозрачному
   (полупрозрачная остановка числом: #181818 = 24,24,24). Без вуали белый текст
   формы теряется на светлых участках снимка. */
.danilo-final-shot {
	position: relative;
}
.danilo-final-shot::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(90deg, var(--e-global-color-secondary), rgba(24, 24, 24, .12));
}
/* .final в том же файле: overflow hidden. Фон дочерней колонки квадратный и
   без этого вылезает за скруглённые углы карточки. */
.danilo-final {
	overflow: hidden;
}

/* Ширина колонок заявки. В макете .final - сетка 1.1fr / minmax(0, 1fr), но
   отрисована она не по долям: минимум первого трека - auto, и его поднимает
   сама форма (.final__form max-width 560px) вместе с полями .final__in (56px
   с каждой стороны). Выходит 672 из 1208, фотографии остаётся 536. Elementor
   гасит этот же механизм, выставляя контейнерам min-width: 0, - здесь он
   возвращён, и колонки встают как в макете. Только пока колонки стоят рядом:
   в макете (@media max-width 900px) они расходятся в одну, и запирать узкую
   раскладку шириной формы нельзя. */
@media (min-width: 901px) {
	.danilo-final-text {
		min-width: auto;
	}
}

/* Аккордеон «Вопросы до покупки»: кружок вокруг значка раскрытия. В макете
   (../../site-mockups/base.css, .faq__q i) это 34x34 с обводкой внутренней
   тенью цветом волосяной линии палитры и подсветкой её же тёплой заливкой
   при наведении. Контрола под рамку
   вокруг значка у виджета нет: сам значок, его размер, цвет и сторону задают
   контролы в build/blocks_main.py, здесь только кружок вокруг него. */
.danilo-faq .e-n-accordion-item-title-icon {
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px var(--e-global-color-rule);
}
.danilo-faq .e-n-accordion-item-title:hover .e-n-accordion-item-title-icon {
	background: var(--e-global-color-flametint);
}

/* «Что входит в цену»: сетка из четырёх колонок равной доли с шагом
   var(--space-sm) var(--space-lg) - числа .includes из
   ../../site-mockups/main.css. У виджета-списка Elementor есть только «в
   столбец» и «в строку», колонок он не умеет; заголовок и оговорка в макете
   занимают всю строку сетки, но на сайте это отдельные виджеты рядом со
   списком, и в сетку попадают ровно четыре пункта. */
.danilo-includes .elementor-icon-list-items {
	display: grid;
	/* В макете четыре колонки под четыре пункта; пунктов три с 2026-10-05
	   (доставка снята), колонок столько же - иначе справа пустая ячейка. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px 26px;
}

/* Подвал: линии макета. Цвета текста (on-dark-2 у тэглайна, ссылок и
   контактов, on-dark-3 у копирайта) переехали в глобальную палитру - Elementor
   печатает полупрозрачный цвет в CSS вместе с альфой. Здесь остались линии и
   рамки: их глобальным цветом не задать. Все значения - точная копия
   ../../site-mockups/tokens.css и base.css (--color-hairline-dark). */

/* .footer__cols > * + *: вертикальная линия слева у каждой колонки, кроме
   первой, и отступ var(--space-xl) = 36px. */
.danilo-footer-col + .danilo-footer-col {
	padding-left: 36px;
	border-left: 1px solid rgba(255, 255, 255, .13);
}

/* .contacts svg: color var(--color-on-dark). Список Elementor красит svg только
   заливкой (fill), а контурные значки макета рисуются обводкой currentColor -
   цвет обводки берётся из глобального «ondark», как и в настройке виджета. */
.danilo-contacts .elementor-icon-list-icon svg {
	color: var(--e-global-color-ondark);
}

/* .footer__tagline: max-width 24ch - слоган в две короткие строки, как в макете. */
.danilo-footer-tagline p {
	max-width: 24ch;
}

/* .footer__bottom: линия над строкой копирайта, тот же волосяной цвет. */
.danilo-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, .13);
}

/* Яндекс.Карта в подвале (шорткод danilo_yandex_map, functions.php): картинка
   с меткой, вся плашка - ссылка на карточку организации. overflow: hidden -
   иначе прямоугольная картинка вылезает за скругление плашки. Высоту задают
   пропорции картинки (464x360), а не 132px макета: без обрезки остаётся
   видна подпись Яндекса в нижнем углу. */
.danilo-map {
	overflow: hidden;
}
.danilo-map .elementor-shortcode {
	line-height: 0;
}.danilo-map__link {
	position: relative;
	display: block;
}
.danilo-map__img {
	display: block;
	width: 100%;
	height: auto;
	transition: filter .2s ease;
}
.danilo-map__link:hover .danilo-map__img,
.danilo-map__link:focus-visible .danilo-map__img {
	filter: brightness(.94);
}
/* Подпись вверху слева: внизу слева на узкой плашке её перекрыла бы подпись
   Яндекса. Цвета - «Карточка» и «Графит» палитры. */
.danilo-map__label {
	position: absolute;
	left: 10px;
	top: 10px;
	padding: 6px 11px;
	border-radius: 999px;
	background: var(--e-global-color-paper2);
	color: var(--e-global-color-secondary);
	box-shadow: 0 2px 8px rgba(24, 24, 24, .18);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}

/* Крупная карта на странице контактов: заливает колонку по высоте текста
   рядом. Виджет шорткода снят с потока, иначе высоту колонки задавала бы сама
   картинка. Обрезка идёт от левого верхнего угла - правый нижний, где подпись
   Яндекса, остаётся целым. Под текстом (одна колонка) - снова по пропорциям. */
.danilo-map--page {
	position: relative;
	min-height: 320px;
}
.danilo-map--page > .elementor-widget-shortcode {
	position: absolute;
	inset: 0;
}
.danilo-map--page .elementor-widget-container,
.danilo-map--page .elementor-shortcode,
.danilo-map--page .danilo-map__link {
	height: 100%;
}
.danilo-map--page .danilo-map__img {
	height: 100%;
	object-fit: cover;
	object-position: 100% 100%;
}
@media (max-width: 900px) {
	.danilo-map--page {
		min-height: 0;
	}
	.danilo-map--page > .elementor-widget-shortcode {
		position: relative;
		inset: auto;
	}
	.danilo-map--page .danilo-map__img {
		height: auto;
	}
}

/* Крошки шапки внутренней страницы (.crumbs, ../../site-mockups/base.css):
   ссылка ink-2 и красная при наведении, разделитель ink-3 с зазором 8px. */
.danilo-crumbs a {
	color: var(--e-global-color-text);
	text-decoration: none;
}
.danilo-crumbs a:hover {
	color: var(--e-global-color-accent);
}
.danilo-crumbs span {
	margin: 0 8px;
	color: var(--e-global-color-ink3);
}

/* Текст виджета "Текстовый редактор" Elementor пропускает через wpautop, и
   каждый абзац получает нижний отступ темы (14.4px). В макете
   (../../site-mockups/base.css) действует p { margin: 0 } без единого
   исключения: расстояние между двумя соседями там задано margin-top у нижнего
   из них. Поэтому отступ гасится на всей странице разом, а все вертикальные
   расстояния стоят явными числами макета в build/blocks_main.py. Точечное
   гашение по классам закрывало два места из сорока трёх. */
.elementor-widget-text-editor p {
	margin: 0;
}

/* Ширина текстовой колонки в мере ch: .invite p и .final p - 46ch,
   .faq__a - 70ch (../../site-mockups/main.css и base.css). Тем же приёмом и по
   той же причине, что и подводка первого экрана выше: контейнер Elementor
   мерой ch не владеет, а пересчитать её в пиксели нельзя - она считается по
   ширине нуля того начертания, которым набран сам текст. В макете .final p
   ловит и подводку, и оговорку под формой - здесь так же, по классу колонки. */
.danilo-invite-lead p {
	max-width: 46ch;
}
.danilo-final-text .elementor-widget-text-editor p {
	max-width: 46ch;
}
.danilo-faq-answer p {
	max-width: 70ch;
}

/* .invite__in (../../site-mockups/main.css): max-width 560px. Контрол "width"
   у контейнера Elementor стоит под условием content_width: full (плагин
   elementor, includes/elements/container.php), а текстовая колонка баннера
   boxed - записанное туда число до страницы не доезжало вовсе. */
.danilo-invite-in {
	max-width: 560px;
}

/* Размер стрелки у надписи. Контрола под него у виджета кнопки нет: значок
   идёт от кегля, а кегль кнопки 12px. Числа - .btn .arr (15px) и
   .section__more .arr (17px) из ../../site-mockups/base.css: это два разных
   правила макета, одно число на оба не переносится. */
.elementor-widget-button .elementor-button-icon {
	font-size: 15px;
}
.danilo-section-more .elementor-button-icon {
	font-size: 17px;
}

/* Строка цены: приставка «от» и само число. В макете (.good__price в
   ../../site-mockups/main.css) это два элемента одной строки - <span> с
   приставкой и текст цены, - и браузер кладёт их на общую базовую линию сам.
   В дереве это два виджета, а виджет Elementor - блок внутри флекс-контейнера;
   выравнивания по базовой линии у контейнера нет вовсе (у контрола четыре
   варианта: начало, центр, конец, растянуть), и при кеглях 13 и 21px любой из
   них ставит приставку не на ту высоту. Поэтому обоим возвращается строчное
   поведение: тогда работает обычная типографика строки, а пробел между
   приставкой и числом приходит из разметки - ровно как «от&nbsp;» в макете.
   Роль и цвет каждого из двух виджетов заданы в дереве глобальными именами
   ("price_prefix" и "product_price"), числами здесь ничего не задаётся. */
.danilo-good-price {
	display: block;
}
.danilo-good-price > .elementor-element,
.danilo-good-price .elementor-heading-title {
	display: inline;
}

/* Вопрос в аккордеоне (.faq__q в ../../site-mockups/base.css: 17px, вес 600).
   Тем же приёмом и по той же причине, что и приставка к цене выше: своего
   контрола под глобальную роль у вложенного аккордеона в дереве не задать, не
   собирая ссылку globals/... руками в обход примитивов build/elementor.py.
   Числа приезжают из роли "faq_question". Собственное правило плагина
   (.elementor-widget-n-accordion .e-n-accordion-item-title-text, кегль 20px)
   той же специфичности, но подключается раньше - !important не нужен. */
.danilo-faq .e-n-accordion-item-title-text {
	font-family: var(--e-global-typography-faq_question-font-family);
	font-size: var(--e-global-typography-faq_question-font-size);
	font-weight: var(--e-global-typography-faq_question-font-weight);
	line-height: var(--e-global-typography-faq_question-line-height);
}

/* Кегль и вес кнопки: 12px и 700 по правилу .btn макета
   (../../site-mockups/base.css: font-size: var(--text-xs), font-weight: 700).
   Остальной общий вид кнопки - поля, пилюля, капитель, разрядка, гарнитура -
   задан в наборе стилей кита (build/tokens.py) и доходит до страницы как есть.
   Кегль и вес - не доходят: Elementor своим же правилом виджета
   `.elementor-widget-button .elementor-button` привязывает их к глобальной
   роли "accent" (13px/600) и выигрывает у правила кита по порядку следования
   при равной специфичности. Роль "accent" под это не подогнать - она занята
   акцентными пометками макета. Поэтому здесь ровно два свойства и селектор на
   класс длиннее, чем у Elementor, без !important. */
.elementor .elementor-widget-button .elementor-button {
	font-size: 12px;
	font-weight: 700;
}


/* ════════════════════════════════════════════════════════════════════════
   Узкие экраны. Здесь только то, чего у Elementor нет своим контролом:
   градиенты, пропорция кадра, ширина в мере ch, разделители колонок подвала,
   форма Fluent Forms и ширина включения бургера у виджета меню. Всё, что
   выражается настройкой виджета или контейнера, задано в build/ и правится
   мышкой - см. build/blocks_main.py и build/header_footer.py.

   Числа - правила @media из ../../site-mockups/base.css и main.css.
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1120px) {
	/* .footer__cols > *:nth-child(odd) (base.css): в два столбца разделитель
	   и левое поле остаются только у правой колонки ряда. */
	.danilo-footer-col:nth-child(odd) {
		padding-left: 0;
		border-left: 0;
	}
	/* .includes (main.css): сетка «Что входит в цену» - две колонки. */
	.danilo-includes .elementor-icon-list-items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* .nav (base.css): с 1100 меню исчезает, вместо него бургер. У виджета меню
   Header Footer Builder ширина включения зашита в его собственный CSS
   (inc/widgets-css/frontend.css: @media only screen and (max-width: 1024px)) и
   за точками перелома Elementor не следует - вариантов у контрола всего два,
   768 и 1025. Здесь то же самое поведение теми же селекторами плагина
   поднимается до макетной ширины; сам бургер, его разметка и обработчик клика
   остаются плагиновыми. */
@media (max-width: 1100px) {
	.hfe-nav-menu__breakpoint-tablet .hfe-layout-horizontal .hfe-nav-menu__toggle {
		display: block;
		visibility: visible;
		opacity: 1;
	}
	.hfe-nav-menu__breakpoint-tablet .hfe-nav-menu__layout-horizontal {
		visibility: hidden;
		opacity: 0;
		height: 0;
	}
	.hfe-nav-menu__breakpoint-tablet .hfe-active-menu + .hfe-nav-menu__layout-horizontal {
		visibility: visible;
		opacity: 1;
		height: auto;
	}
	.hfe-nav-menu__breakpoint-tablet .hfe-nav-menu__layout-horizontal li.menu-item,
	.hfe-nav-menu__breakpoint-tablet .hfe-nav-menu {
		width: 100%;
		margin-right: 0;
	}
	/* Закрытое меню плагин гасит видимостью и высотой, но из потока не
	   вынимает: ряд пунктов продолжает занимать свою десктопную ширину
	   (замер на 768: 410px), и шапка распирается за край окна. Вынимаем -
	   тогда ширину виджета задаёт один бургер, а раскрытое меню ложится
	   панелью во всю ширину шапки под ней. position !important: при клике
	   скрипт плагина пишет position прямо в стиль элемента.
	   Точкой отсчёта служит строка шапки, поэтому у самого виджета
	   позиционирование снимается. */
	.danilo-topbar-row {
		position: relative;
	}
	.hfe-nav-menu__breakpoint-tablet .hfe-nav-menu__layout-horizontal,
	.hfe-nav-menu__breakpoint-tablet .hfe-active-menu + .hfe-nav-menu__layout-horizontal {
		position: absolute !important;
		left: 0;
		right: 0;
		top: 100%;
		z-index: 30;
		/* .topbar (base.css): фон шапки - var(--color-paper-2). */
		background: var(--e-global-color-paper2);
		box-shadow: 0 10px 30px rgba(24, 24, 24, .06);
	}
	/* В вёрстке макета <button class="burger"> стоит первым элементом строки,
	   до логотипа, а остаток ширины собирает логотип (.topbar__logo
	   { margin-right: auto }). На десктопе остаток собирает меню растяжением -
	   на узком экране растяжение снимается, иначе бургер растолкал бы строку.
	   Порядок и растяжение Elementor держит переменными (--order, --flex-grow):
	   своего контрола «порядок по устройству» у него нет. */
	.danilo-topbar-menu.elementor-element {
		position: static;
		--order: -1;
		/* !important - у растяжения есть своё правило Elementor с селектором
		   из четырёх классов (.elementor-50 .elementor-element.elementor-element-<id>.elementor-element),
		   перебить его классом виджета нельзя: id шаблона в дочернюю тему не
		   переносится. У порядка своего правила нет, ему !important не нужен. */
		--flex-grow: 0 !important;
	}
	.danilo-topbar-logo {
		margin-right: auto;
	}
	/* .burger (base.css): padding 0, border 0, background none - ширина кнопки
	   ровно 28px значка. У кнопки плагина свои отступы 0.35em, и с ними бургер
	   шире макетного на 20px: на 768 этих двадцати не хватало, и номер телефона
	   ломался на две строки. */
	.danilo-topbar-menu .hfe-nav-menu-icon {
		padding: 0;
	}
}

@media (max-width: 900px) {
	/* .final__shot i (base.css): колонки заявки встали друг под друга, и вуаль
	   над фотографией ложится сверху вниз, а не слева направо. */
	.danilo-final-shot::before {
		background: linear-gradient(180deg, rgba(24, 24, 24, .55), rgba(24, 24, 24, .12));
	}
}

@media (max-width: 760px) {
	/* .hero__veil (main.css): текст лежит поверх всего кадра, поэтому вуаль
	   сплошная сверху вниз, а не боковая. */
	.danilo-hero::before {
		background: linear-gradient(180deg, rgba(250, 247, 243, .86) 0%,
			rgba(250, 247, 243, .78) 54%, rgba(250, 247, 243, .58) 100%);
	}
	/* .hero h1, .hero .lead (main.css): max-width none - на телефоне ширину
	   строки задаёт сам экран. */
	.danilo-hero-lead p {
		max-width: none;
	}
	/* .works__lead img (main.css): aspect-ratio 4 / 3. Пропорции у контейнера
	   Elementor нет; высота снята настройкой (build/blocks_main.py). */
	.danilo-work-lead {
		aspect-ratio: 4 / 3;
	}
	/* .invite (main.css): фотография перестаёт быть фоном карточки и уезжает
	   отдельной полосой наверх (контейнер «Фото баннера»), вуаль снимается,
	   под текстом остаётся графит - фон самой карточки. */
	.danilo-invite {
		/* !important - фон карточки печатает сам Elementor селектором из
		   четырёх классов (.elementor-33 .elementor-element.elementor-element-<id>
		   плюс :not(...)), и id страницы в дочернюю тему не переносится.
		   Без снятия фотография остаётся под текстом плашки, и текст ложится
		   прямо на неё. */
		background-image: none !important;
	}
	.danilo-invite::before {
		display: none;
	}
	/* .invite__in (main.css): max-width none. */
	.danilo-invite-in {
		max-width: none;
	}
	/* .includes (main.css): одна колонка. */
	.danilo-includes .elementor-icon-list-items {
		grid-template-columns: minmax(0, 1fr);
	}
	/* .footer__cols > * + * (base.css): колонка одна, разделителей нет вовсе. */
	.danilo-footer-col + .danilo-footer-col {
		padding-left: 0;
		border-left: 0;
	}
	/* .final__form (base.css): поле и кнопка встают друг под друга, кнопка -
	   во всю ширину. Форму рисует Fluent Forms, контролов Elementor у неё нет. */
	.danilo-form fieldset {
		flex-direction: column;
		align-items: stretch;
	}
	.danilo-form .ff_submit_btn_wrapper {
		width: 100% !important;
	}
	.danilo-form .ff-btn-submit {
		width: 100%;
	}
	/* В одну строку надпись шире телефона и распирает форму за край:
	   «необязательно» переносится вниз. */
	.danilo-form button.dm-photos__add,
	.danilo-form button.dm-photos__add:hover,
	.danilo-form button.dm-photos__add:focus {
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 0;
		width: 100%;
		height: auto;
		min-height: 52px;
		padding: 8px 16px;
		white-space: normal;
	}
}

/* Флажок согласия на обработку персональных данных в форме заявки (152-ФЗ,
   build/form.py, CONSENT_FIELD). Отдельной строкой во всю ширину, над
   «Приложить фото» и «Отправить»: order по умолчанию 0 ставит её раньше
   них. Мелкий слабый текст, как оговорка под формой, ссылки - жёлтым, как
   акценты на тёмном в макете. */
.danilo-form .ff-el-group.danilo-consent {
	flex-basis: 100%;
}
.danilo-form .danilo-consent .ff_tc_label {
	display: flex !important;
	align-items: flex-start;
	gap: 10px;
	margin: 0 !important;
	cursor: pointer;
}
.danilo-form .danilo-consent .ff_tc_checkbox {
	flex: none;
	padding-top: 2px;
}
.danilo-form .danilo-consent input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--e-global-color-primary);
}
.danilo-form .danilo-consent .ff_t_c {
	color: var(--e-global-color-ondark3);
	font-family: "Montserrat", "Segoe UI", sans-serif;
	font-size: 12px;
	line-height: 1.5;
}
.danilo-form .danilo-consent .ff_t_c a {
	color: var(--e-global-color-flameyellow);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.danilo-form .danilo-consent .error {
	margin-top: 6px;
	color: var(--e-global-color-flameyellow);
	font-size: 12px;
}

/* Реквизиты и ссылки на документы под копирайтом подвала
   (build/header_footer.py, footer_legal_html). Абзацы виджета гасят отступы
   глобальным правилом выше - расстояние между ними задаём здесь. */
.danilo-footer-legal p + p {
	margin-top: 4px;
}
.danilo-footer-legal a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.danilo-footer-legal a + a {
	margin-left: 18px;
}
.danilo-footer-legal a:hover {
	color: var(--e-global-color-ondark);
}
/* На телефоне две длинные ссылки в строку не влезают, и вторая рвалась
   посередине - ставим каждую своей строкой. 760 - точка макета, где нижняя
   строка подвала и так встаёт колонкой. */
@media (max-width: 760px) {
	.danilo-footer-legal a {
		display: table;
	}
	.danilo-footer-legal a + a {
		margin: 4px 0 0;
	}
}

/* Страницы документов (build/blocks_legal.py): политика и согласие. Текст
   длинный, поэтому мера строки 75ch и явные отступы между абзацами -
   глобальное правило выше их гасит. Мера - на самих абзацах, а не на
   виджете: ширину виджета внутри контейнера Elementor держит своё правило
   с большей специфичностью. */
.danilo-legal h2,
.danilo-legal h3,
.danilo-legal p,
.danilo-legal ul {
	max-width: 75ch;
}
.danilo-legal h2 {
	margin: 32px 0 10px;
	color: var(--e-global-color-secondary);
	font-family: "Montserrat", "Segoe UI", sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
}
.danilo-legal h2:first-child {
	margin-top: 0;
}
.danilo-legal h3 {
	margin: 20px 0 8px;
	color: var(--e-global-color-secondary);
	font-family: "Montserrat", "Segoe UI", sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}
/* Раздел согласия, на который ведёт сообщение о cookie (/soglasie/#cookie):
   при переходе заголовок не должен уходить под шапку. */
.danilo-legal [id] {
	scroll-margin-top: 110px;
}
.danilo-legal h3 + p,
.danilo-legal h3 + ul,
.danilo-legal h2 + p {
	margin-top: 0;
}
.danilo-legal p + p,
.danilo-legal ul + p,
.danilo-legal p + ul {
	margin-top: 10px;
}
.danilo-legal ul {
	margin: 0;
	padding-left: 1.2em;
}
.danilo-legal li + li {
	margin-top: 4px;
}
.danilo-legal a {
	color: var(--e-global-color-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ── Ротация роликов первого экрана (шорткод danilo_hero_reel, functions.php) ──
   Виджет шорткода стоит внутри первого экрана рядом с колонкой текста, но
   растягивается на весь экран абсолютом: .e-con-inner не позиционирован,
   поэтому inset: 0 отсчитывается от .danilo-hero. Абсолютный элемент выпадает
   из флекс-потока, отступ между детьми контейнера на текст не влияет. Слой 0 -
   под вуалью (1) и текстом (2). */
.danilo-hero > .e-con-inner > .danilo-hero-reel-host {
	position: absolute !important;
	inset: 0;
	z-index: 0;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
}
.danilo-hero-reel-host .elementor-widget-container,
.danilo-hero-reel-host .elementor-shortcode,
.danilo-reel {
	position: absolute;
	inset: 0;
}
.danilo-reel {
	overflow: hidden;
	background: var(--e-global-color-secondary);
}
.danilo-reel__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1s ease;
}
.danilo-reel__slide.is-active {
	opacity: 1;
}
/* Точка кадра, которая остаётся видна при обрезке, - у каждого ролика своя
   (атрибут focus шорткода, functions.php): камин в кадре стоит не по центру. */
.danilo-reel__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	display: block;
}
/* Затемнение низа кадра под подписью: без него белая подпись пропадала на
   светлой стене или белой колонне портала. */
.danilo-reel__slide::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(0deg, rgba(24, 24, 24, .62) 0%, rgba(24, 24, 24, .25) 30%, rgba(24, 24, 24, 0) 55%);
}
/* Видео - панель справа от текста, а не фон под ним. На весь экран под
   вуалью камин оказывался ровно под заголовком и кнопками и высветлялся, а на
   1920 первый экран 3,5:1 растягивал кадр. Текст стоит на чистом полотне,
   вуаль первого экрана не нужна; край панели растворяется в полотне.
   Левый край - за правым краем заголовка (около 670px от начала колонки). */
@media (min-width: 761px) {
	.danilo-hero:has(.danilo-reel)::before {
		display: none;
	}
	.danilo-reel {
		--reel-left: max(54%, calc((100% - 1280px) / 2 + 700px));
		background: var(--e-global-color-paper);
	}
	.danilo-reel__slide {
		left: var(--reel-left);
	}
	.danilo-reel::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: var(--reel-left);
		width: 160px;
		z-index: 1;
		pointer-events: none;
		background: linear-gradient(90deg, var(--e-global-color-paper) 0%, rgba(250, 247, 243, 0) 100%);
	}
}
/* Планшет: колонка контента во всю ширину, заголовок кончается около 65% -
   панель уже, край перехода ложится на хвост заголовка, где полотно ещё плотное. */
@media (min-width: 761px) and (max-width: 1120px) {
	.danilo-reel {
		--reel-left: 62%;
	}
}
/* Подпись слайда - справа, по краю колонки контента (1280) и выше карточки
   фактов, которая налезает на низ первого экрана на 46px. Подпись лежит в
   слайде, а он уже экрана, поэтому отступ от ширины окна (vw), а не от 100%. */
.danilo-reel__caption,
.danilo-reel__dots {
	position: absolute;
	right: max(24px, calc((100vw - 1280px) / 2));
	z-index: 3;
	text-align: right;
}
.danilo-reel__caption {
	bottom: 104px;
	color: var(--e-global-color-paper);
	text-shadow: 0 1px 12px rgba(24, 24, 24, .55);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .6s ease .35s, transform .6s ease .35s;
}
.danilo-reel__slide.is-active .danilo-reel__caption {
	opacity: 1;
	transform: none;
}
.danilo-reel__caption p {
	margin: 0;
}
.danilo-reel__title {
	font-family: var(--e-global-typography-primary-font-family), "Montserrat", sans-serif;
	font-weight: 850;
	font-size: 34px;
	line-height: 1.1;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.danilo-reel__note {
	font-family: "Montserrat", "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 1.4;
	margin-top: 6px !important;
}
.danilo-reel__dots {
	bottom: 72px;
	display: flex;
	gap: 8px;
}
/* !important - против общих стилей кнопок из настроек сайта Elementor
   (отступы, рамка, скругление): без него полоски становились «таблетками». */
.danilo-reel__dot {
	appearance: none;
	width: 28px;
	height: 4px !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 2px !important;
	box-shadow: none !important;
	background: rgba(250, 247, 243, .45);
	cursor: pointer;
	transition: background .3s ease, width .3s ease;
}
.danilo-reel__dot:hover,
.danilo-reel__dot:focus-visible {
	background: rgba(250, 247, 243, .8);
}
.danilo-reel__dot.is-active {
	width: 44px;
	background: var(--e-global-color-primary);
}
/* На телефоне в обычном первом экране текст лежит на сплошной вуали во весь
   экран - подпись и переключатели там только мешали бы. В показе одних роликов
   они видны (ниже, .danilo-hero--reel-only). */
@media (max-width: 760px) {
	.danilo-hero:not(.danilo-hero--reel-only) .danilo-reel__caption,
	.danilo-hero:not(.danilo-hero--reel-only) .danilo-reel__dots {
		display: none;
	}
}

/* ВРЕМЕННО (2026-10-12): показ роликов почти без текста, флаг
   preview_video_only в content/main.toml. Высота первого экрана задана
   настройкой контейнера, поэтому спрятанный текст её не меняет. Вуаль и светлый край
   панели убраны, видео на всю ширину. Снять флаг - и правила ниже не действуют. */
/* Из текста виден главный заголовок, прижатый к верху первого экрана.
   Заголовок светлый: тёмный на видео не читается. */
.danilo-hero.danilo-hero--reel-only {
	--justify-content: flex-start !important;
	--padding-top: 40px !important;
}
/* Подводка спрятана; из кнопок видна только «Подобрать камин» (открывает окно
   подбора) - слева внизу, на уровне подписи слайда. Колонка текста растянута на
   всю высоту экрана, кнопки прижаты к её низу. */
.danilo-hero--reel-only .danilo-hero-lead,
.danilo-hero--reel-only .elementor-widget-button:has(a[href="/catalog/"]) {
	display: none;
}
.danilo-hero--reel-only > .e-con-inner,
.danilo-hero--reel-only > .e-con-inner > .e-con {
	flex-grow: 1;
}
.danilo-hero--reel-only > .e-con-inner > .e-con > .e-con {
	margin-top: auto !important;
}
.danilo-hero--reel-only .elementor-heading-title {
	color: var(--e-global-color-paper) !important;
	text-shadow: 0 2px 18px rgba(24, 24, 24, .6);
}
/* В одну строку и по центру: размер от ширины окна, чтобы строка влезала в колонку. */
@media (min-width: 761px) {
	.danilo-hero--reel-only .elementor-heading-title {
		white-space: nowrap;
		font-size: clamp(24px, 2.7vw, 42px) !important;
		text-align: center !important;
	}
}
/* Затемнение верха кадра под заголовком - пара к нижнему под подписью. */
.danilo-hero--reel-only .danilo-reel__slide::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(24, 24, 24, .75) 0%, rgba(24, 24, 24, .45) 30%, rgba(24, 24, 24, .12) 55%, rgba(24, 24, 24, 0) 70%);
}
.danilo-hero.danilo-hero--reel-only::before,
.danilo-hero--reel-only .danilo-reel::before {
	display: none;
}
.danilo-hero--reel-only .danilo-reel {
	--reel-left: 0px;
}
/* Телефон: на 393px первый экран был 258px высотой, заголовок в три строки по
   34px упирался в кнопку и уходил под неё. Экран выше (кадр камина виден между
   заголовком и кнопкой), заголовок мельче и ровнее по строкам, кнопка внизу
   с запасом. svh, а не vh: в Safari vh считается без панели адреса, и низ
   экрана с кнопкой уезжал бы под неё. */
@media (max-width: 760px) {
	.danilo-hero.danilo-hero--reel-only {
		--min-height: min(72svh, 600px) !important;
		--padding-top: 32px !important;
		--padding-bottom: 28px !important;
	}
	.danilo-hero--reel-only .elementor-heading-title {
		font-size: 28px !important;
		line-height: 1.12 !important;
		text-wrap: balance;
		text-align: center !important;
	}
	.danilo-hero--reel-only .danilo-reel__slide::before {
		background: linear-gradient(180deg, rgba(24, 24, 24, .72) 0%, rgba(24, 24, 24, .4) 28%, rgba(24, 24, 24, 0) 50%);
	}
	/* Подпись и полоски - по центру над кнопкой: кнопка во всю ширину колонки
	   (поля 18px), её верх в 81px от низа экрана (отступ 28 + высота 53). */
	.danilo-hero--reel-only .danilo-reel__caption,
	.danilo-hero--reel-only .danilo-reel__dots {
		left: 18px;
		right: 18px;
		text-align: center;
	}
	.danilo-hero--reel-only .danilo-reel__caption {
		bottom: 117px;
	}
	.danilo-hero--reel-only .danilo-reel__dots {
		bottom: 97px;
		justify-content: center;
	}
	/* Колонка текста растянута на весь экран и лежит выше роликов - без этого
	   она перехватывала касания полосок. Касания ловят только сами виджеты. */
	.danilo-hero--reel-only > .e-con-inner > .e-con:not(.danilo-hero-reel-host) {
		pointer-events: none;
	}
	.danilo-hero--reel-only > .e-con-inner > .e-con .elementor-widget {
		pointer-events: auto;
	}
	/* Полоска 4px пальцем не попасть: зона касания 28px по высоте. */
	.danilo-hero--reel-only .danilo-reel__dot {
		position: relative;
	}
	.danilo-hero--reel-only .danilo-reel__dot::before {
		content: "";
		position: absolute;
		inset: -12px -4px;
	}
	.danilo-hero--reel-only .danilo-reel__title {
		font-size: 24px;
	}
	.danilo-hero--reel-only .danilo-reel__note {
		font-size: 14px;
		margin-top: 4px !important;
	}
}
/* Повёрнутый телефон: первый экран около 250px, подпись и полоски наезжали на
   заголовок (скриншот владельца 2026-10-18). Там остаются огонь и кнопка. */
@media (max-width: 760px) and (orientation: landscape) {
	.danilo-hero--reel-only .danilo-reel__caption,
	.danilo-hero--reel-only .danilo-reel__dots {
		display: none;
	}
	/* Кнопка по ширине текста, по центру под заголовком: во всю ширину
	   альбомного экрана она была полосой (просьба владельца 2026-10-18). */
	.danilo-hero--reel-only .elementor-widget-button {
		text-align: center;
	}
	.danilo-hero--reel-only .elementor-widget-button .elementor-button {
		width: auto;
	}
}

/* Главная в повёрнутом iPhone (viewport-fit=cover, functions.php): страница
   сама держится в безопасной зоне, как раньше держал её Safari, а первый экран
   с роликами выходит до краёв. Переменные --safe-l/--safe-r - чтобы проверить
   вёрстку без iPhone: в обычном браузере env() даёт 0. */
body.home {
	--safe-l: env(safe-area-inset-left, 0px);
	--safe-r: env(safe-area-inset-right, 0px);
	padding-left: var(--safe-l);
	padding-right: var(--safe-r);
}
body.home .danilo-hero {
	margin-left: calc(-1 * var(--safe-l)) !important;
	margin-right: calc(-1 * var(--safe-r)) !important;
	width: auto !important;
	max-width: none !important;
}
body.home .danilo-hero > .e-con-inner {
	padding-left: var(--safe-l);
	padding-right: var(--safe-r);
}
/* Повёрнутый телефон шире 760px (с viewport-fit=cover это любой iPhone с
   вырезом, без него - Pro Max) получает компьютерную раскладку, а в ней первый
   экран 556px при высоте окна 340-430: кнопка уходила за низ. Первый экран -
   видимая часть окна под шапкой; снизу 70px - карточка фактов заходит на
   первый экран на 46px. Подпись и полоски, как в узком повёрнутом, не влезают. */
@media (min-width: 761px) and (max-height: 500px) and (orientation: landscape) {
	.danilo-hero.danilo-hero--reel-only {
		--min-height: max(250px, calc(100svh - 90px)) !important;
		--padding-top: 24px !important;
		--padding-bottom: 70px !important;
	}
	.danilo-hero--reel-only .danilo-reel__caption,
	.danilo-hero--reel-only .danilo-reel__dots {
		display: none;
	}
}
/* Плашка cookie закреплена у края окна, а не страницы: отодвигаем от выреза
   и от полоски «домой» внизу. */
body.home .dm-cookies {
	left: calc(18px + var(--safe-l));
	bottom: max(18px, env(safe-area-inset-bottom, 0px));
}

/* Страница «не найдено» (template-parts/404.php). Заголовок - роль «Заголовок
   внутренней страницы», текст - «Основной текст», как у /contacts/ и других
   внутренних страниц; кнопка повторяет огненную «Подобрать камин»: у неё вид
   задают настройки виджета Elementor, а здесь виджета нет, поэтому отступы,
   скругление и шрифт прописаны рядом. */
/* Селектор длиннее обычного: Hello ограничивает .site-main страниц без
   Elementor правилом body:not([class*=elementor-page-]) .site-main
   (1140px и боковые 10px на телефоне), и текст не вставал по краю шапки.
   1256px = 1208px содержимого шапки + два боковых отступа по 24px. */
body:not([class*=elementor-page-]) .site-main.danilo-404 {
	max-width: 1256px;
	margin: 0 auto;
	padding: 72px 24px 96px;
}
.danilo-404__code {
	margin: 0 0 12px;
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-size: var(--e-global-typography-accent-font-size);
	font-weight: var(--e-global-typography-accent-font-weight);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--e-global-color-accent);
}
.danilo-404__title {
	margin: 0 0 20px;
	font-family: var(--e-global-typography-page_title-font-family), sans-serif;
	font-size: var(--e-global-typography-page_title-font-size);
	font-weight: var(--e-global-typography-page_title-font-weight);
	line-height: var(--e-global-typography-page_title-line-height);
	letter-spacing: var(--e-global-typography-page_title-letter-spacing);
	text-transform: uppercase;
	color: var(--e-global-color-secondary);
}
.danilo-404__text {
	max-width: 640px;
	margin: 0 0 32px;
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: var(--e-global-typography-text-font-size);
	line-height: var(--e-global-typography-text-line-height);
	color: var(--e-global-color-text);
}
.danilo-404__text a {
	color: var(--e-global-color-secondary);
	font-weight: 600;
	white-space: nowrap;
}
.danilo-404__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 28px;
}
.danilo-404__btn {
	display: inline-block;
	padding: 16px 32px;
	border-radius: 999px;
	background: linear-gradient(95deg, var(--e-global-color-flameyellow) -8%,
		var(--e-global-color-primary) 38%, var(--e-global-color-accent) 100%);
	background-size: 180% 100%;
	background-position: 0% 50%;
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-size: var(--e-global-typography-accent-font-size);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--e-global-color-ondark);
	text-decoration: none;
	transition: background-position .6s ease, transform .25s ease, box-shadow .25s ease;
}
.danilo-404__btn:hover,
.danilo-404__btn:focus-visible {
	background-position: 100% 50%;
	color: var(--e-global-color-ondark);
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(215, 52, 33, .38), 0 0 0 4px rgba(234, 87, 41, .14);
}
.danilo-404__link {
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-size: var(--e-global-typography-accent-font-size);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--e-global-color-secondary);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}
.danilo-404__link:hover,
.danilo-404__link:focus-visible {
	color: var(--e-global-color-accent);
}
@media (max-width: 760px) {
	body:not([class*=elementor-page-]) .site-main.danilo-404 {
		padding: 44px 16px 64px;
	}
	.danilo-404__title {
		font-size: 30px;
	}
	.danilo-404__btn {
		width: 100%;
		text-align: center;
	}
}
@media (prefers-reduced-motion: reduce) {
	.danilo-404__btn {
		transition: box-shadow .25s ease;
	}
	.danilo-404__btn:hover {
		transform: none;
	}
}