/*
 * Стили блоков главной страницы, которых нет в теме bizmaster.
 * Файл копируется в child-тему скриптом build_home.py, править нужно здесь.
 *
 * Фирменная палитра задана заказчиком и объявлена в style.css child-темы
 * (--fg-wine, --fg-choco, --fg-gold, --fg-beige): бордовый —
 * основной, бежевый — подложки, шоколад — текст, золото — рамки и акценты,
 * премиальный синий — верхний сегмент предложений. Здесь на них ссылаемся,
 * а fallback оставляем на случай, если blocks.css подключат отдельно.
 */

.fg-block { --fg-gold: #A98552; --fg-gold-dark: #8C6F47;
	--fg-ink: var(--fg-choco, #33241C); --fg-muted: #5A5148;
	--fg-sand: #F6F2EB; --fg-line: rgba(43, 38, 32, .1); }

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

.fg-lead { max-width: 780px; margin: -10px auto 44px; text-align: center;
	color: var(--fg-muted); font-size: 18px; line-height: 1.6; }

/* кнопки ---------------------------------------------------------------- */
.fg-cta-row { display: flex; justify-content: center; margin-top: 44px; }
.fg-btn { display: inline-flex; align-items: center; gap: 10px; border: 0;
	padding: 17px 38px; border-radius: 999px; background: var(--fg-gold);
	color: #fff; font-size: 17px; font-weight: 500; line-height: 1;
	text-decoration: none; cursor: pointer; transition: background .25s ease,
	transform .25s ease; }
.fg-btn:hover { background: var(--fg-gold-dark); color: #fff; }
.fg-btn--ghost { background: transparent; color: var(--fg-ink);
	box-shadow: inset 0 0 0 1px var(--fg-gold); }
.fg-btn--ghost:hover { background: var(--fg-gold); color: #fff; }

/* карточки предложений --------------------------------------------------- */
/* Вёрстка по образцу заказчика (site_example.jpg): две панели во всю ширину,
   без рамок и теней, разделённые тонкой золотой линией. Слева арочное фото,
   справа — золотая черта, сегмент, описание и особенности. */
.fg-block--wide { max-width: none; }
.fg-offers { display: grid; grid-template-columns: 1.15fr .85fr; gap: 0;
	align-items: stretch; }
.fg-offer { --fg-accent: var(--fg-gold);
	display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
	gap: 40px; align-items: center; padding: 54px 5% 58px; }
/* тонкая золотая линия-шов между панелями */
.fg-offer + .fg-offer { box-shadow: inset 1px 0 0 rgba(169, 133, 82, .45); }
/* панели чуть разного тона — как в образце */
.fg-offer--wine { --fg-accent: var(--fg-wine, #5E1A26); background: #FBF6EE; }
.fg-offer--gold { --fg-accent: var(--fg-gold); background: #F1E5D4; }

/* золотая линейка с ромбом под блоком */
.fg-offers__rule { position: relative; height: 1px; margin-top: 0;
	background: linear-gradient(90deg, rgba(169, 133, 82, 0) 0%,
		rgba(169, 133, 82, .5) 22%, rgba(169, 133, 82, .5) 78%,
		rgba(169, 133, 82, 0) 100%); }
.fg-offers__rule::after { content: ""; position: absolute; left: 50%; top: 50%;
	width: 12px; height: 12px; margin: -6px 0 0 -6px; transform: rotate(45deg);
	background: var(--fg-gold-light, #D8B478); }

/* левая панель — арка (верх скруглён на половину ширины), правая —
   прямоугольник с мягкими углами: так же в образце */
/* align-self оставляем по умолчанию: со stretch высоту задавала бы
   колонка, а aspect-ratio пересчитывал бы из неё ширину — фото вылезало
   за свою колонку и наезжало на текст. */
/* Соотношение 0.62, а не 3/4: у кадров фигурок по бокам оставалось пустое
   поле студийного фона — кадры перекадрированы под узкую карточку. */
.fg-offer__gallery { align-self: center; width: 100%; aspect-ratio: 62 / 100;
	border-radius: 14px; overflow: hidden; background: var(--fg-wine-deep, #45111B);
	box-shadow: 0 0 0 1px rgba(169, 133, 82, .45),
		0 16px 34px rgba(51, 36, 28, .16); }
/* высоту карточке задаёт aspect-ratio, а вложенные коробки слайдера её не
   наследуют — без этого img { height: 100% } считается от auto и схлопывается */
.fg-offer__gallery .fg-slider__viewport,
.fg-offer__gallery .fg-slider__track,
.fg-offer__gallery .fg-slider__slide,
.fg-offer__gallery .fg-slider__slide a { display: block; height: 100%; }
.fg-offer__gallery .fg-slider__track { display: flex; }
.fg-offer__gallery img { width: 100%; height: 100%; object-fit: cover;
	display: block; }

.fg-offer__body { display: flex; flex-direction: column; align-items: flex-start;
	max-width: 460px; }
.fg-offer__label { margin: 18px 0 10px; color: var(--fg-accent); font-size: 28px;
	font-weight: 500; line-height: 1.1; letter-spacing: .02em;
	text-transform: uppercase; }
.fg-offer__title { margin: 0 0 12px; color: var(--fg-ink); font-size: 19px;
	font-weight: 500; line-height: 1.3; }
.fg-offer__text { margin: 0 0 22px; color: var(--fg-muted); font-size: 15px;
	line-height: 1.6; }

.fg-offer__feats { margin: 0 0 24px; padding: 0; list-style: none; }
/* кружки с иконками и подчёркиванием — левая панель образца */
/* Сетка, а не флекс: колонки тянутся под ширину панели, и три кружка
   остаются в одном ряду даже в узкой колонке ВИП. */
.fg-offer__feats--icons { display: grid; gap: 14px;
	grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%;
	max-width: 340px; }
.fg-offer__feats--icons li { display: flex; flex-direction: column;
	align-items: center; gap: 10px; color: var(--fg-muted);
	font-size: 12px; line-height: 1.3; text-align: center; }
.fg-offer__ic { display: flex; align-items: center; justify-content: center;
	width: 54px; height: 54px; border-radius: 50%; color: var(--fg-gold);
	border: 1px solid rgba(169, 133, 82, .55); background: rgba(255, 255, 255, .55); }
.fg-offer__ic svg { display: block !important; width: 24px; height: 24px; }
.fg-offer__feat-name { display: block; }
/* список с золотыми точками — правая панель образца */
.fg-offer__feats--bullets li { position: relative; padding-left: 22px;
	margin-bottom: 10px; color: var(--fg-muted); font-size: 15px;
	line-height: 1.45; }
.fg-offer__feats--bullets li::before { content: ""; position: absolute; left: 0;
	top: .5em; width: 8px; height: 8px; border-radius: 50%;
	background: var(--fg-gold-light, #D8B478); }

.fg-offer__price { margin: 0 0 22px; color: var(--fg-ink); font-size: 16px; }
.fg-offer__price b { color: var(--fg-accent); font-size: 21px; }

/* кнопка карточки: в акцентном цвете сегмента, со стрелкой */
.fg-offer__btn { display: inline-flex; justify-content: center;
	align-items: center; gap: 10px; margin-top: auto; padding: 16px 38px;
	border-radius: 12px; background: var(--fg-accent);
	box-shadow: 0 8px 20px rgba(51, 36, 28, .22); font-size: 16px;
	letter-spacing: .02em; }
.fg-offer__btn::after { content: ""; width: 16px; height: 9px; flex: 0 0 auto;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3Cpath d='M0 4.5h13.5M10 1l3.8 3.5L10 8'  fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3Cpath d='M0 4.5h13.5M10 1l3.8 3.5L10 8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: transform .25s ease; }
.fg-offer__btn:hover { background: var(--fg-wine, #5E1A26);
	box-shadow: 0 10px 26px rgba(94, 26, 38, .32); }
.fg-offer__btn:hover::after { transform: translateX(4px); }

/* «Почему фигурка стоит от 59 000 ₽» ------------------------------------- */
.fg-price { display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); }
.fg-price__item { position: relative; padding: 28px 26px 26px;
	background: #fff; border: 1px solid rgba(169, 133, 82, .28);
	border-radius: 16px; }
.fg-price__num { display: flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; margin-bottom: 16px; border-radius: 50%;
	background: var(--fg-wine, #5E1A26); color: var(--fg-gold-light, #D8B478);
	font-size: 16px; font-weight: 700; }
.fg-price__item h3 { margin: 0 0 10px; color: var(--fg-ink); font-size: 18px;
	font-weight: 600; line-height: 1.3; }
.fg-price__item p { margin: 0; color: var(--fg-muted); font-size: 15px;
	line-height: 1.55; }
.fg-price__note { max-width: 820px; margin: 34px auto 0; text-align: center;
	color: var(--fg-ink); font-size: 17px; line-height: 1.6; }

/* шаги механики бесплатного макета */
.fg-maket__steps { margin: 0 0 26px; padding: 0 0 0 22px; color: var(--fg-muted);
	font-size: 16px; line-height: 1.6; }
.fg-maket__steps li { margin-bottom: 10px; }
.fg-maket__steps b { color: var(--fg-ink); }

/* слайдер (предложения, отзывы) ------------------------------------------ */
/* Своя реализация вместо Swiper: см. assets/fg-slider.js. Пока скрипт не
   отработал, трек виден как обычный ряд — картинки не прыгают. */
.fg-slider { position: relative; }
/* Обрезает выезжающие слайды вложенный «экран», а не сама .fg-slider:
   иначе overflow: hidden срезал бы стрелки у краёв. Обёртку создаёт скрипт. */
.fg-slider__viewport { overflow: hidden; border-radius: inherit; }
.fg-slider:not(.is-ready) { overflow: hidden; }
/* display: flex включаем только после сборки слайдера: у блоков «Мы не
   производим», «Преимущества» и «Идеальный подарок» трек — это их же сетка
   (.fg-nope__list, .fg-cards, .fg-tiles), и до инициализации она должна
   оставаться грид-раскладкой. */
.fg-slider__track { transition: transform .45s ease; touch-action: pan-y; }
.fg-slider.is-ready .fg-slider__track { display: flex; }
.fg-slider__slide { flex: 0 0 100%; max-width: 100%; }
.fg-slider:not(.is-ready) .fg-slider__slide ~ .fg-slider__slide { display: none; }
.fg-slider__arrow { position: absolute; top: 50%; z-index: 2; width: 44px;
	height: 44px; margin-top: -22px; border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, .92); box-shadow: 0 4px 14px rgba(43, 38, 32, .18);
	cursor: pointer; transition: background .2s ease, transform .2s ease; }
.fg-slider__arrow:hover { background: #fff; }
.fg-slider__arrow::before { content: ""; display: block; width: 10px; height: 10px;
	margin: 0 auto; border-left: 2px solid var(--fg-ink);
	border-bottom: 2px solid var(--fg-ink); }
.fg-slider__arrow--prev { left: 12px; }
.fg-slider__arrow--prev::before { transform: translateX(2px) rotate(45deg); }
.fg-slider__arrow--next { right: 12px; }
.fg-slider__arrow--next::before { transform: translateX(-2px) rotate(-135deg); }
.fg-slider__dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 2;
	display: flex; justify-content: center; gap: 8px; }
.fg-slider__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, .55); cursor: pointer; transition: all .2s ease; }
.fg-slider__dot.is-active { background: var(--fg-gold); width: 22px; border-radius: 4px; }
.fg-slider:focus-visible { outline: 2px solid var(--fg-gold); outline-offset: 3px; }


/* блоки-сетки, ставшие слайдерами: карточка = слайд.
   Промежуток задаём через gap — скрипт считает по нему ширину слайда и
   сдвиг (в пикселях, а не в процентах). Раньше вместо gap стоял
   padding-inline у самих карточек, и заливка карточки съедала отступ. */
.fg-slider.is-ready .fg-nope__list, .fg-slider.is-ready .fg-cards,
.fg-slider.is-ready .fg-tiles { display: flex; gap: 24px; }
.fg-slider.is-ready .fg-nope__item, .fg-slider.is-ready .fg-card,
.fg-slider.is-ready .fg-tile { flex: 0 0 auto; }

/* видео ------------------------------------------------------------------ */
/* ролики вертикальные: не даём плиткам растягиваться, когда их всего две-три */
/* четыре ролика должны вставать в одну строку: контентная колонка ~1140px,
   4 × 260 + 3 × 24 = 1112. Блок с тремя роликами при этом остаётся по центру. */
.fg-videos { display: grid; gap: 24px; justify-content: center;
	grid-template-columns: repeat(auto-fit, minmax(180px, 260px)); }
.fg-video { position: relative; margin: 0; border-radius: 20px; overflow: hidden;
	background: #000; aspect-ratio: 9 / 14; }
.fg-video a { display: block; width: 100%; height: 100%; }
.fg-video img { width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .5s ease, opacity .3s ease; }
.fg-video:hover img { transform: scale(1.04); opacity: .85; }
/* кнопка play поверх постера */
.fg-play { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px;
	margin: -34px 0 0 -34px; border-radius: 50%; background: rgba(255, 255, 255, .92);
	box-shadow: 0 6px 24px rgba(0, 0, 0, .3); transition: transform .25s ease; }
.fg-play::before { content: ""; position: absolute; left: 27px; top: 22px;
	border-style: solid; border-width: 12px 0 12px 19px;
	border-color: transparent transparent transparent var(--fg-ink); }
.fg-video:hover .fg-play { transform: scale(1.08); }
.fg-video figcaption { position: absolute; left: 0; right: 0; bottom: 0;
	padding: 16px 18px; color: #fff; font-size: 15px; line-height: 1.35;
	background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0));
	pointer-events: none; }

/* фото в блоке «О нас» ---------------------------------------------------- */
/* Обёртка позиционирована абсолютно, поэтому картинка в свой рост вылезает
   на следующую секцию. Ограничиваем высоту и подрезаем по центру. */
/* Обёртка стоит absolute с right:0 и прижималась к самому краю окна —
   отводим её на поле контентной колонки (у секций темы боксинг 1300px). */
.about1-shape-img1 { max-width: 46%; right: max(24px, calc((100vw - 1300px) / 2)); }
.about1-shape-img-1 { max-width: 100%; max-height: 560px; width: auto;
	height: auto; object-fit: cover; border-radius: 20px; }

/* галерея портретного сходства ------------------------------------------ */
.fg-grid { display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr); }
.fg-grid figure { margin: 0; position: relative; overflow: hidden;
	border-radius: 18px; background: var(--fg-sand); aspect-ratio: 1 / 1; }
.fg-grid img { width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .5s ease; }
.fg-grid figure:hover img { transform: scale(1.05); }
.fg-grid figcaption { position: absolute; inset: auto 0 0 0; padding: 14px 16px;
	color: #fff; font-size: 15px; line-height: 1.3; opacity: 0;
	background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
	transition: opacity .35s ease; }
.fg-grid figure:hover figcaption { opacity: 1; }

/* отзывы ----------------------------------------------------------------- */
/* Раньше была плитка в три колонки; заказчик попросил карусель. */
.fg-reviews .fg-slider__slide { padding: 0 10px; }
.fg-reviews figure { margin: 0; }
.fg-reviews img { width: 100%; height: auto; display: block; border-radius: 14px;
	box-shadow: 0 6px 22px rgba(43, 38, 32, .1); }
.fg-reviews .fg-slider__dots { position: static; margin-top: 22px; }
.fg-reviews .fg-slider__dot { background: rgba(43, 38, 32, .22); }
.fg-reviews .fg-slider__dot.is-active { background: var(--fg-gold); }
.fg-reviews .fg-slider__arrow--prev { left: -22px; }
.fg-reviews .fg-slider__arrow--next { right: -22px; }

/* карточки преимуществ --------------------------------------------------- */
.fg-cards { display: grid; gap: 26px; grid-template-columns: repeat(4, 1fr); }
.fg-card { background: #fff; border-radius: 20px; overflow: hidden;
	box-shadow: 0 6px 24px rgba(43, 38, 32, .07); display: flex; flex-direction: column; }
/* пропорции задаём самой картинке: .fg-card — колоночный флекс, и высота
   его элемента считается по содержимому, из-за чего aspect-ratio на обёртке
   не срабатывает и карточки получаются разной высоты */
.fg-card__img { background: var(--fg-sand); overflow: hidden; }
.fg-card__img img { width: 100%; aspect-ratio: 4 / 3; height: auto;
	object-fit: cover; display: block; }
.fg-card__body { padding: 24px 24px 28px; }
.fg-card h3 { margin: 0 0 10px; font-size: 20px; line-height: 1.25; color: var(--fg-ink); }
.fg-card p { margin: 0; color: var(--fg-muted); font-size: 16px; line-height: 1.55; }

/* «мы не производим» ----------------------------------------------------- */
.fg-nope { background: #fff; border-radius: 24px; padding: 44px 40px;
	box-shadow: 0 6px 24px rgba(43, 38, 32, .07); }
.fg-nope__note { max-width: 760px; margin: 0 auto 36px; text-align: center;
	color: var(--fg-muted); font-size: 17px; line-height: 1.6; }
.fg-nope__list { display: grid; gap: 20px; grid-template-columns: repeat(5, 1fr); }
.fg-nope__item { text-align: center; }
.fg-nope__ph { position: relative; aspect-ratio: 1 / 1; border-radius: 16px;
	background: repeating-linear-gradient(45deg, #F1ECE3 0 12px, #E9E2D6 12px 24px);
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 14px; overflow: hidden; }
.fg-nope__ph span { color: #9C927F; font-size: 13px; letter-spacing: .04em;
	text-transform: uppercase; }
.fg-nope__ph img { width: 100%; height: 100%; object-fit: cover; }
.fg-nope__item h3 { margin: 0; font-size: 17px; line-height: 1.35; color: var(--fg-ink); }
.fg-nope__cross { position: absolute; top: 10px; right: 10px; width: 26px;
	height: 26px; border-radius: 50%; background: rgba(43, 38, 32, .75);
	color: #fff; font-size: 15px; line-height: 26px; }

/* бесплатный макет ------------------------------------------------------- */
.fg-maket { display: grid; gap: 44px; grid-template-columns: 1fr 1fr;
	align-items: center; background: #fff; border-radius: 24px; padding: 44px;
	box-shadow: 0 6px 24px rgba(43, 38, 32, .07); }
.fg-maket__img { border-radius: 18px; overflow: hidden; background: var(--fg-sand); }
.fg-maket__img img { width: 100%; height: auto; display: block; }
.fg-maket h2 { margin: 0 0 8px; font-size: 34px; line-height: 1.15; color: var(--fg-ink); }
.fg-maket .fg-maket__sub { margin: 0 0 18px; color: var(--fg-gold);
	font-size: 18px; font-weight: 600; }
.fg-maket p { color: var(--fg-muted); font-size: 17px; line-height: 1.6; }
.fg-maket .fg-btn { margin-top: 26px; }

/* плитки поводов --------------------------------------------------------- */
.fg-tiles { display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr); }
.fg-tile { position: relative; display: block; border-radius: 18px;
	overflow: hidden; aspect-ratio: 3 / 4; text-decoration: none; }
.fg-tile img { width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .5s ease; }
.fg-tile:hover img { transform: scale(1.06); }
.fg-tile span { position: absolute; inset: auto 0 0 0; padding: 18px 18px 20px;
	color: #fff; font-size: 19px; font-weight: 600; line-height: 1.25;
	background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0)); }


/* логотипы компаний ------------------------------------------------------ */
/* Бегущая строка. Разметка (build_home.py) печатает список логотипов дважды,
   лента едет на -50% — на стыке копий шов не виден, петля бесшовная. */
.fg-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(to right,
		transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 90px,
		#000 calc(100% - 90px), transparent 100%); }
.fg-marquee__track { display: flex; width: max-content;
	animation: fg-marquee 32s linear infinite; }
.fg-marquee:hover .fg-marquee__track { animation-play-state: paused; }
.fg-logos { display: flex; align-items: center; gap: 56px; padding-right: 56px; }
/* Elementor и тема ставят img { height: auto } с той же специфичностью, но
   грузятся позже — без !important высота логотипа не берётся. */
.fg-block .fg-logos img { flex: 0 0 auto; height: 62px !important; width: auto;
	max-width: none; object-fit: contain; filter: grayscale(1); opacity: .55;
	transition: filter .25s ease, opacity .25s ease; }
.fg-block .fg-logos img:hover { filter: none; opacity: 1; }
@keyframes fg-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.fg-marquee__track { animation: none; }
}

/* форма заявки ----------------------------------------------------------- */
/* Две колонки: слева обещания на тёмном поле, справа светлая карточка с
   полями. Раньше форма была одной тёмной плитой по центру. */
.fg-form { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
	background: var(--fg-ink); border-radius: 28px; overflow: hidden;
	color: #fff; text-align: left;
	box-shadow: 0 20px 60px rgba(43, 38, 32, .22); }
.fg-form__aside { padding: 56px 48px; display: flex; flex-direction: column;
	justify-content: center;
	/* бордовый — основной цвет палитры, тёмная колонка формы держит его
	   на себе так же, как первый экран */
	background:
		radial-gradient(120% 120% at 0% 0%, rgba(216, 180, 120, .28) 0%, transparent 58%),
		linear-gradient(150deg, var(--fg-wine-deep, #45111B) 0%, var(--fg-wine, #5E1A26) 100%); }
.fg-form__badge { align-self: flex-start; margin-bottom: 22px; padding: 8px 16px;
	border-radius: 999px; background: rgba(169, 133, 82, .22);
	color: #E4C79A; font-size: 13px; font-weight: 600; letter-spacing: .04em;
	text-transform: uppercase; }
.fg-form h2 { margin: 0 0 14px; font-size: 34px; line-height: 1.15; color: #fff; }
.fg-form__aside > p { margin: 0 0 26px; color: rgba(255, 255, 255, .72);
	font-size: 16px; line-height: 1.6; }
.fg-form__list { margin: 0; padding: 0; list-style: none; }
.fg-form__list li { position: relative; padding-left: 30px; margin-bottom: 12px;
	color: rgba(255, 255, 255, .9); font-size: 15px; line-height: 1.45; }
.fg-form__list li::before { content: "✓"; position: absolute; left: 0; top: 0;
	color: var(--fg-gold); font-weight: 700; }

.fg-form__card { padding: 56px 48px; background: #fff; color: var(--fg-ink);
	display: flex; flex-direction: column; justify-content: center; }
/* Поля формы описаны для секции и попапа сразу: в попапе та же форма
   Contact Form 7, только в другой обёртке. */
:is(.fg-form, .fg-modal) .fg-form-row { display: grid; gap: 14px; margin-bottom: 18px; }
:is(.fg-form, .fg-modal) .fg-input, :is(.fg-form, .fg-modal) .fg-select { width: 100%; min-width: 0; height: 56px;
	padding: 0 20px; border: 1px solid rgba(43, 38, 32, .16); border-radius: 14px;
	background: #FBF9F5; color: var(--fg-ink); font-size: 16px;
	transition: border-color .2s ease, box-shadow .2s ease; }
:is(.fg-form, .fg-modal) .fg-input:focus, :is(.fg-form, .fg-modal) .fg-select:focus { outline: 0;
	border-color: var(--fg-gold); box-shadow: 0 0 0 3px rgba(169, 133, 82, .16); }
:is(.fg-form, .fg-modal) .fg-input::placeholder { color: rgba(43, 38, 32, .45); }
/* тема тянет input[type=submit] на всю ширину — здесь это как раз нужно */
:is(.fg-form, .fg-modal) .fg-submit { width: 100%; height: 58px; padding: 0 32px; border: 0;
	border-radius: 14px; background: var(--fg-gold); color: #fff; font-size: 17px;
	font-weight: 600; cursor: pointer;
	transition: background .25s ease, transform .2s ease; }
:is(.fg-form, .fg-modal) .fg-submit:hover { background: var(--fg-gold-dark); }
:is(.fg-form, .fg-modal) .fg-consent { margin: 0 0 20px; color: var(--fg-muted); font-size: 13px;
	line-height: 1.45; }
/* согласие приходит от Contact Form 7 обёрнутым в свои span и label,
   которым тема задаёт свой цвет */
:is(.fg-form, .fg-modal) .fg-consent, :is(.fg-form, .fg-modal) .fg-consent * { color: var(--fg-muted); }
:is(.fg-form, .fg-modal) .fg-consent .wpcf7-list-item { margin: 0; }
:is(.fg-form, .fg-modal) .fg-consent label { display: inline-flex; align-items: flex-start;
	gap: 8px; font-weight: 400; cursor: pointer; }
/* тема прячет настоящие чекбоксы (display:none + opacity:0), рисуя свои
   псевдоэлементами на разметке, которой у Contact Form 7 нет. Возвращаем
   галочку силой — иначе согласие нечем поставить. */
:is(.fg-form, .fg-modal) .fg-consent input[type="checkbox"] { display: inline-block !important;
	opacity: 1 !important; visibility: visible !important; position: static !important;
	margin: 3px 0 0 !important; width: 16px !important; height: 16px !important;
	flex: 0 0 auto; accent-color: var(--fg-gold); }
:is(.fg-form, .fg-modal) .fg-note { margin: 14px 0 0; color: var(--fg-muted); font-size: 13px;
	text-align: center; }
:is(.fg-form, .fg-modal) .wpcf7-not-valid-tip { color: #C0392B; font-size: 13px; }
:is(.fg-form, .fg-modal) .wpcf7-response-output { margin: 20px 0 0; padding: 14px 18px;
	border-radius: 12px; border: 1px solid rgba(43, 38, 32, .2); font-size: 15px; }

/* первый экран ----------------------------------------------------------- */
/* Виджет темы печатает только H1 и один абзац, поэтому H2 и список УТП
   вставлены разметкой в поле описания (см. build_home.py). Пустой абзац,
   которым шаблон закрывает вставку, прячем. */
.hero-style1 .fg-hero-h2 { margin: 14px 0 10px; color: #A98552; font-size: 22px;
	font-weight: 600; line-height: 1.3; letter-spacing: .01em; }
/* УТП — те же карточки, что «Подарок» и «Доставка», но в один столбец */
/* Тема раскладывает карточки в ряд и растягивает их (flex: 1 1 260px,
   justify-content: space-between) — в столбце это давало по 260px высоты
   на карточку и дыры между ними. */
.hero-style1 .fg-hero-cards.fg-hero-usp { order: 0; flex-direction: column;
	justify-content: flex-start; gap: 14px; margin: 18px 0 0; padding: 0;
	height: auto; border-top: 0; }
.hero-style1 .fg-hero-cards.fg-hero-usp .hero-card { flex: 0 0 auto;
	width: 100%; }
.hero-style1 .hero-text { font-size: 18px; font-weight: 400;
	margin-top: 16px; margin-bottom: 6px; color: var(--body-color); }
.hero-style1 .hero-text.fg-hidden, .hero-style1 .hero-text:empty { display: none; }
/* Карточки «Подарок» и «Доставка» переехали из .hero-item-content в левую
   колонку — тамошние отступы и абсолютное позиционирование темы не нужны. */
.hero-style1 .fg-hero-cards { position: static; display: flex; flex-wrap: wrap;
	gap: 18px 30px; margin: 34px 0 0; padding: 26px 0 0; width: auto;
	background: none; box-shadow: none; border-top: 1px solid rgba(43, 38, 32, .12); }
/* тема рисует подложку карточек псевдоэлементами, растянутыми на всю
   родительскую коробку — в левой колонке это серая плита во весь экран */
.hero-style1 .fg-hero-cards::before,
.hero-style1 .fg-hero-cards::after { content: none; }
.hero-style1 .fg-hero-cards .hero-card { display: flex; align-items: flex-start;
	gap: 14px; flex: 1 1 260px; margin: 0; padding: 0; background: none;
	box-shadow: none; }
.hero-style1 .fg-hero-cards .hero-card_icon { flex: 0 0 42px; width: 42px;
	height: 42px; display: flex; align-items: center; justify-content: center;
	border-radius: 50%; background: rgba(169, 133, 82, .12); }
/* Elementor прячет инлайновые e-font-icon-svg, когда иконка пришла не от его
   виджета, — возвращаем показ */
.hero-style1 .fg-hero-cards .hero-card_icon svg { display: block !important;
	width: 19px; height: 19px; fill: #A98552; }
.hero-style1 .fg-hero-cards .box-title { margin: 0 0 4px; font-size: 16px;
	font-weight: 500; line-height: 1.25; }
.hero-style1 .fg-hero-cards .hero-card_text { margin: 0; color: #5A5148;
	font-size: 14px; line-height: 1.45; }
.hero-style1 .fg-hero-usp .box-title { font-size: 17px; }
.hero-style1 .fg-hero-usp .hero-card_text { font-size: 15px; }
/* Картинка стояла по нижнему краю: у строки первого экрана класс
   align-items-end от Bootstrap, а он с !important. */
.hero-wrapper .row.align-items-end { align-items: center !important; }

/* блок под строкой, где карточки лежали раньше, теперь пустой */
.hero-wrapper .hero-item-content { display: none; }
/* карточки ставим после кнопок */
.hero-style1 { display: flex; flex-direction: column; align-items: flex-start;
	padding: 82px 20px 84px 20px; }
.hero-title { font-size: 58px; max-width: 500px; }
/* картинку опускаем на 20px, чтобы она не липла к верхней кромке экрана */
.hero-image-wrapp { margin-top: 20px; }
.hero-style1 .btn-group { order: 1; margin-top: 20px;
	margin-bottom: 80px; }
.hero-style1 .fg-hero-cards { order: 2; align-self: stretch; }

/* Бордовый первый экран (образец site_example.jpg) ------------------------ */
/* Заливку и золотую рамку рисуем здесь: у виджета темы фон приходит
   картинкой, а её мы очистили в build_home.py. */
.hero-wrapper.hero-1 { position: relative;
	background-color: var(--fg-wine-deep, #45111B);
	/* Фотография — фон всей секции, целиком, без затемнений: слева у кадра
	   ровная бордовая стена, на ней и лежит текст. Размер и позицию задаём
	   здесь, url печатает шаблон в атрибуте style. */
	/* Только cover: при `auto <высота>` кадр на широких экранах не
	   дотягивался до левого края и слева оставалась полоса заливки.
	   Сцена опущена в самой фотографии, а не масштабом. */
	background-size: cover; background-position: right center;
	background-repeat: no-repeat; }

/* Шапка стоит внутри рамки, как в образце: на главной делаем её прозрачной и
   кладём поверх первого экрана, а экрану добавляем отступ на её высоту.
   Только на главной (body.home): на остальных страницах фон светлый и
   абсолютная шапка легла бы на текст. */
body.home .site-header { position: absolute; top: 30px; left: 0; right: 0;
	z-index: 6; background: transparent; }
body.home .site-header .navbar-area,
body.home .site-header .navbar { background: transparent; }
/* Цвет пунктов тема задаёт селектором из восьми классов
   (`.navbar.navbar-area.navbar-expand-lg…`), поэтому и здесь он длинный:
   с коротким на бордовом оставался тёмный шоколад и меню не читалось. */
body.home .navbar.navbar-area.navbar-expand-lg.navigation-style-01.navbar-default
	.custom-container .navbar-collapse .navbar-nav li a,
body.home .site-header .navbar-nav > li > a { color: #F0E0CC; }
body.home .navbar.navbar-area.navbar-expand-lg.navigation-style-01.navbar-default
	.custom-container .navbar-collapse .navbar-nav li:hover a,
body.home .navbar.navbar-area.navbar-expand-lg.navigation-style-01.navbar-default
	.custom-container .navbar-collapse .navbar-nav li.current-menu-item a,
body.home .site-header .navbar-nav > li > a:hover {
	color: var(--fg-gold-light, #D8B478); }
body.home .header-button .simple-icon { color: var(--fg-gold-light, #D8B478); }
body.home .header-button .sideMenuToggler line,
body.home .header-button .sideMenuToggler path { stroke: var(--fg-gold-light, #D8B478); }
body.home .hero-wrapper.hero-1 { padding-top: 104px; }
/* бургер приходит из bootstrap белой плашкой с тёмными полосками —
   на бордовом это белый прямоугольник посреди шапки */
/* Селектор длинный не просто так: в main-style.css плашка задана как
   `.navbar-area .custom-container .responsive-mobile-menu .navbar-toggler`
   (белый фон и тёмная рамка) — с меньшей специфичностью не перебить. */
body.home .navbar-area .custom-container .responsive-mobile-menu .navbar-toggler,
body.home .navbar-toggler { background-color: transparent;
	border: 1px solid rgba(216, 180, 120, .55); }
body.home .navbar-toggler .navbar-toggler-icon {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23D8B478' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); }

/* Золотую рамку по периметру первого экрана убрали по просьбе заказчика.
   Резервная копия версии с рамкой — backups/blocks.css.gold-frame-20260826. */
/* Контейнер не позиционируем: он служил бы точкой отсчёта для фотографии
   справа, и она вставала бы по контентной колонке, а не по краям экрана.
   Текстовую колонку поднимаем над фотографией сами. */
.hero-1 .container { position: static; }
.hero-1 .hero-style1 { position: relative; z-index: 5; }

/* текст на бордовом — светлый */
.hero-style1 .hero-title { color: #F7EFE2; }
.hero-style1 .hero-text { color: #E3D2C2; }
.hero-style1 .fg-hero-cards { border-top-color: rgba(216, 180, 120, .28); }
.hero-style1 .fg-hero-cards .box-title { color: #F3E7D6; }
.hero-style1 .fg-hero-cards .hero-card_text { color: #CBB4A5; }
.hero-style1 .fg-hero-cards .hero-card_icon { background: rgba(216, 180, 120, .14);
	box-shadow: inset 0 0 0 1px rgba(216, 180, 120, .35); }
.hero-style1 .fg-hero-cards .hero-card_icon svg { fill: var(--fg-gold-light, #D8B478); }

/* кнопки: золотая заливка и золотой контур */
.hero-style1 .btn-group .global-btn-one { background: linear-gradient(135deg,
	#D8B478 0%, #B08B4F 100%); color: #33241C; box-shadow: 0 10px 26px rgba(0, 0, 0, .25); }
/* На наведении золотая заливка уходит, и бордовый из псевдоэлементов темы
   выезжает сверху и снизу — получается плавная смена цвета, а не подсветка.
   Чтобы эффект был виден, собственный фон кнопки на наведении убираем:
   псевдоэлементы лежат под ним (z-index: -1). Кнопка не сдвигается. */
.hero-style1 .btn-group .global-btn-one:hover {
	background-image: none; background-color: transparent; color: #F5E6CC;
	box-shadow: inset 0 0 0 1px rgba(216, 180, 120, .75),
		0 10px 26px rgba(0, 0, 0, .3); }
.hero-style1 .btn-group .global-btn-two { background: transparent;
	color: var(--fg-gold-light, #D8B478);
	box-shadow: inset 0 0 0 1px rgba(216, 180, 120, .6); }
.hero-style1 .btn-group .global-btn-two:hover { background: rgba(216, 180, 120, .12);
	color: #F7EFE2; }

/* Правая половина — фотография интерьера с фигуркой (в образце она уходит
   под край экрана). Декор шаблона — белый круг, лаймовый треугольник,
   кружки и фигурная обрезка — на этой фотографии не нужен. */
/* Декор шаблона в правой колонке (белый круг, лаймовый треугольник,
   кружки) и сама колонка не нужны: фотография теперь фон секции. */
.hero-1 .hero-image-wrapp { display: none; }
/* Телефон: свой вертикальный кадр — фигурка сверху, текст под ней.
   Заливка та же бордовая, что и на десктопе. `!important` нужен дважды:
   url шаблон печатает в атрибуте style, а цвет тема задаёт классом
   `bg-smoke` тоже с !important. */
@media (max-width: 991px) {
	.hero-wrapper.hero-1 {
		background-image: url("../../uploads/2026/08/hero-mobile.jpg") !important;
		/* Ровно цвет заливки кадра, иначе под фотографией видно, что
		   секция другого оттенка (#45111B у --fg-wine-deep). */
		background-color: #48101A !important;
		/* Не cover: он растягивает кадр на всю высоту секции, и фигурка
		   лезет на текст. Кадр во всю ширину и прижат к верху. */
		background-position: center top; background-size: 100% auto; }
	/* Место под фотографию: кадр 1000×1145, его высота = 114.5vw. Отступ
	   считаем в vw, иначе на планшете текст наезжает на фигурку. */
	.hero-style1 { padding: calc(114.5vw - 74px) 20px 44px 20px; }
	body.home .hero-wrapper.hero-1 { padding-top: 104px; }
}
/* Планшет: во всю ширину кадр вырастает почти на метр по высоте — держим
   ему фиксированный размер и место под текст считаем от него. */
@media (min-width: 576px) and (max-width: 991px) {
	.hero-wrapper.hero-1 { background-size: 520px auto !important; }
	.hero-style1 { padding-top: 620px; }
}

/* «Срочный заказ»: левую половину плашки красим бордовым. В теме там
   --title-color (шоколад), но бордовый — основной цвет палитры, и держать
   его только на первом экране мало. Правая половина остаётся золотой. */
.cta-wrap1:before { background-color: var(--fg-wine, #5E1A26); }

/* «Преимущества премиум-сегмента»: карточки без подложки и рамки —
   заказчик просил убрать фон, остаётся фото и подпись. */
.fg-cards .fg-card { background: none; border: 0; box-shadow: none; }
.fg-cards .fg-card__body { padding-left: 0; padding-right: 0; }

/* «О нас»: фото крупнее -------------------------------------------------- */
/* Заказчик просил увеличить кадр дважды: 560 → 720 → 864px по высоте. */
.about1-shape-img1 { max-width: 58%; }
.about1-shape-img-1 { max-height: 864px; }

/* плитки с цифрами (12 лет, 12 000+, 1 час, 98%) --------------------------- */
/* Виджет image-box печатает описание своим мелким кеглем — заказчик просил 16px. */
/* Elementor печатает кегль в свой per-element CSS (.elementor-<id> …),
   специфичность выше — перебиваем через !important */
.elementor-widget-image-box .elementor-image-box-description {
	font-size: 16px !important; line-height: 1.45; }

/* иконки в шапке --------------------------------------------------------- */
/* Поиск с сайта убран: страница одна, искать нечего. Прячем и кнопку, и
   всплывающую форму — так не мелькает при загрузке; из DOM их убирает
   js/child.js. */
.searchBoxToggler, .popup-search-box { display: none !important; }

/* Бургер темы приходит с зашитым в разметку stroke="#19352D" (зелёный от
   исходного шаблона) — красим его и лупу в цвет пунктов меню. */
/* #2B2620 (цвет пунктов меню) на сплошных штрихах читается как чёрный,
   поэтому значкам даём акцентное золото сайта — то же, что у логотипа. */
.header-button .simple-icon { color: #A98552; }
.header-button .simple-icon svg { fill: currentColor; }
.header-button .sideMenuToggler svg { fill: none; }
.header-button .sideMenuToggler line,
.header-button .sideMenuToggler path { stroke: #A98552; }

/* палитра по остальному сайту ------------------------------------------- */
/* Заказчик просил, чтобы фирменные цвета звучали на всей странице, а не
   только на первом экране: бордовый — акценты и подвал, золото — рамки
   карточек, шоколад — подвал и заголовки. */

/* карточки: вместо голого белого — тёплая подложка в золотой волосяной рамке */
.fg-card, .fg-nope, .fg-maket, .fg-tile, .fg-price__item {
	background: #FDFAF4; border: 1px solid rgba(169, 133, 82, .26); }

/* кнопка play на видео: бордовый треугольник вместо чёрного */
.fg-play::before { border-left-color: var(--fg-wine, #5E1A26); }

/* номера шагов «Как мы создаём фигурки» — бордовые */
.process-card .process-card_number,
.process-card_number { color: rgba(94, 26, 38, .18); }

/* подвал — тёмный шоколад из палитры, ссылки и иконки золотом */
/* Подложка подвала лежит на родителе .footer-style-2: там осталась бежевая
   картинка от прежнего оформления (footer-bg-beige.jpg) и она перекрывала
   шоколадную заливку светлой полосой сверху. */
.footer-style-2 { background-image: none !important;
	background-color: var(--fg-choco, #33241C); }
.footer-wrap { background-color: var(--fg-choco, #33241C); color: #D9CCBC; }
/* иконки соцсетей приходят белыми плашками — на шоколаде это белые квадраты */
.footer-wrap .social-btn .icon,
.footer-wrap .social-btn .icon a { background-color: transparent;
	border-radius: 50%; }
.footer-wrap .social-btn .icon a { display: flex; align-items: center;
	justify-content: center; width: 38px; height: 38px;
	border: 1px solid rgba(216, 180, 120, .45);
	color: var(--fg-gold-light, #D8B478); }
.footer-wrap .social-btn .icon a:hover {
	background-color: rgba(216, 180, 120, .16); }
/* Заголовки виджетов тема красит правилом с большей специфичностью
   (.footer-wrap .footer-widget .widget-headline), поэтому селектор длинный. */
.footer-wrap .footer-widget .widget-headline,
.footer-wrap .widget-headline, .footer-wrap .widget_title,
.footer-wrap h3, .footer-wrap h4 { color: #F3E7D6 !important; }
.footer-wrap a, .footer-wrap .footer-widget a,
.footer-wrap .menu a, .footer-wrap li a { color: #EFE3D2 !important; }
.footer-wrap a:hover, .footer-wrap .footer-widget a:hover,
.footer-wrap .menu a:hover, .footer-wrap li a:hover {
	color: var(--fg-gold-light, #D8B478) !important; }
/* Текст «о студии» лежит голым узлом внутри .about_us_widget и берёт
   --body-color (тёмный) — перечисляем контейнеры виджетов явно. */
/* Списки виджетов тема красит длинными цепочками
   (`.widget_contact .details li` — вообще с !important), поэтому ниже
   селекторы такой же длины. */
.footer-wrap .footer-widget.widget_nav_menu ul li a,
.footer-wrap .widget_contact .details li,
.footer-wrap .widget_contact .details li a,
.footer-wrap .widget.footer-widget ul li,
.footer-wrap .widget.footer-widget ul li a { color: #E6DACA !important; }
.footer-wrap .widget_contact .details li.color-base { color: #F3E7D6 !important; }
.footer-wrap .footer-widget.widget_nav_menu ul li a:hover,
.footer-wrap .widget.footer-widget ul li a:hover {
	color: var(--fg-gold-light, #D8B478) !important; }

/* !important: у темы цвет этих блоков задан длинными цепочками через
   --body-color, коротким селектором их не перебить. */
.footer-wrap p, .footer-wrap li, .footer-wrap span,
.footer-wrap .footer-widget, .footer-wrap .widget,
.footer-wrap .about_us_widget, .footer-wrap .widget_contact,
.footer-wrap .details li { color: #E6DACA !important; }
/* копирайт и меню в нижней полосе тема красит своим приглушённым серым */
.footer-wrap .copyright-wrap, .footer-wrap .copyright-wrap a,
.footer-wrap .copyright-text, .footer-wrap .color-gray,
.footer-wrap .text-white2 { color: #DCCFBE !important; }
/* На шоколадном подвале тёмный логотип не читается — подставляем светлую
   копию (та же, что в шапке главной). */
.footer-wrap .footer-logo img { content: url("../../uploads/2026/08/logo-figurki-light.png"); }
.footer-wrap i, .footer-wrap svg { color: var(--fg-gold-light, #D8B478); }
.footer-wrap .copyright-wrap, .footer-wrap .copyright-area {
	border-top: 1px solid rgba(216, 180, 120, .22); }

/* Сплошные кнопки темы: белый текст (заказчик просил для «Смотреть работы»).
   Кнопки-контуры (.style-border) стоят на светлом фоне — им белый не годится.
   Состояния :focus/:active прописываем явно: иначе после клика текст
   возвращался к тёмному базовому цвету. */
.global-btn:not(.style-border),
.global-btn:not(.style-border):hover,
.global-btn:not(.style-border):focus,
.global-btn:not(.style-border):active { color: #FFFFFF; }
/* у кнопки первого экрана заливка золотая — там нужен тёмный текст */
.hero-style1 .btn-group .global-btn-one,
.hero-style1 .btn-group .global-btn-one:focus { color: #33241C; }
.hero-style1 .btn-group .global-btn-one:hover { color: #F5E6CC; }

/* попап заявки ------------------------------------------------------------ */
/* Разметку печатает functions.php в подвале, открывает fg-modal.js.
   Оформление то же, что у секции с формой: бордовая колонка слева,
   белая карточка с формой справа. */
.fg-modal { position: fixed; inset: 0; z-index: 9999; display: flex;
	align-items: center; justify-content: center; padding: 24px; }
.fg-modal[hidden] { display: none; }
.fg-modal__overlay { position: absolute; inset: 0;
	background: rgba(30, 8, 12, .72); backdrop-filter: blur(3px);
	animation: fg-modal-fade .25s ease; }
.fg-modal__dialog { position: relative; z-index: 1; display: grid;
	grid-template-columns: 1fr 1fr; width: min(920px, 100%);
	max-height: calc(100vh - 48px); overflow: auto;
	border-radius: 24px; background: #fff; color: var(--fg-choco, #33241C);
	box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
	animation: fg-modal-in .28s cubic-bezier(.2, .8, .3, 1); }
@keyframes fg-modal-fade { from { opacity: 0; } }
@keyframes fg-modal-in {
	from { opacity: 0; transform: translateY(18px) scale(.98); } }
@media (prefers-reduced-motion: reduce) {
	.fg-modal__overlay, .fg-modal__dialog { animation: none; }
}

.fg-modal__aside { padding: 44px 40px; display: flex; flex-direction: column;
	justify-content: center; color: #fff;
	background:
		radial-gradient(120% 120% at 0% 0%, rgba(216, 180, 120, .28) 0%, transparent 58%),
		linear-gradient(150deg, var(--fg-wine-deep, #45111B) 0%, var(--fg-wine, #5E1A26) 100%); }
.fg-modal__badge { align-self: flex-start; margin-bottom: 20px;
	padding: 8px 16px; border-radius: 999px;
	background: rgba(216, 180, 120, .22); color: #E4C79A; font-size: 13px;
	font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.fg-modal__dialog h2 { margin: 0 0 14px; color: #fff; font-size: 28px;
	line-height: 1.2; }
.fg-modal__aside > p { margin: 0 0 22px; color: rgba(255, 255, 255, .74);
	font-size: 15px; line-height: 1.6; }
.fg-modal__list { margin: 0; padding: 0; list-style: none; }
.fg-modal__list li { position: relative; padding-left: 28px;
	margin-bottom: 10px; color: rgba(255, 255, 255, .9); font-size: 14px;
	line-height: 1.45; }
.fg-modal__list li::before { content: "✓"; position: absolute; left: 0;
	top: 0; color: var(--fg-gold-light, #D8B478); font-weight: 700; }

.fg-modal__card { padding: 44px 40px; display: flex; flex-direction: column;
	justify-content: center; background: #fff; }

/* крестик */
.fg-modal__close { position: absolute; top: 14px; right: 16px; z-index: 2;
	width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%;
	background: rgba(51, 36, 28, .08); cursor: pointer;
	transition: background .2s ease; }
.fg-modal__close:hover { background: rgba(169, 133, 82, .22); }
/* крестик лежит над белой карточкой, поэтому штрихи тёмные */
.fg-modal__close::before, .fg-modal__close::after { content: "";
	position: absolute; left: 11px; top: 18px; width: 16px; height: 1.5px;
	background: var(--fg-choco, #33241C); }
.fg-modal__close::before { transform: rotate(45deg); }
.fg-modal__close::after { transform: rotate(-45deg); }

/* страница под открытым попапом не должна прокручиваться */
body.fg-modal-open { position: fixed; left: 0; right: 0; overflow: hidden; }

@media (max-width: 767px) {
	.fg-modal { padding: 12px; }
	.fg-modal__dialog { grid-template-columns: 1fr; border-radius: 18px; }
	.fg-modal__aside { padding: 26px 22px 22px; }
	.fg-modal__card { padding: 22px 22px 28px; }
	.fg-modal__dialog h2 { font-size: 22px; margin-bottom: 10px; }
	.fg-modal__badge { margin-bottom: 14px; }
	/* на маленьком экране описание и длинный список съедают форму —
	   оставляем заголовок и два коротких обещания */
	.fg-modal__aside > p { display: none; }
	.fg-modal__list li:nth-child(n+3) { display: none; }
	.fg-modal__list li { margin-bottom: 6px; }
	/* на телефоне карточка уходит вниз, крестик оказывается на бордовом */
	.fg-modal__close { background: rgba(0, 0, 0, .28); }
	.fg-modal__close::before, .fg-modal__close::after { background: #F3E7D6; }
}

/* адаптив ---------------------------------------------------------------- */
@media (max-width: 991px) {
	.navbar-area.navigation-style-01 .custom-container { padding: 0 30px; }

	/* Выпадающее меню бургера: тема отдаёт его белой плашкой со светлым
	   текстом — на сайте оно должно читаться как часть первого экрана.
	   Делаем бордовую панель в золотой рамке. Цвета с !important: у темы
	   пункты меню покрашены селектором из восьми классов. */
	/* Панель висит поверх страницы, а не растягивает шапку: шапка на
	   телефоне закреплена сверху, и её высота при открытии бургера
	   меняться не должна. */
	.navbar.navbar-area { position: relative; }
	.navbar-area .custom-container .navbar-collapse {
		position: absolute; top: 100%; left: 30px; right: 30px; z-index: 1001;
		margin-top: 10px; padding: 4px 0;
		background: linear-gradient(180deg, #5E1A26 0%, #45111B 100%);
		border: 1px solid rgba(216, 180, 120, .35); border-radius: 14px;
		box-shadow: 0 18px 40px rgba(0, 0, 0, .35); overflow: hidden; }
	/* Список тема красит в #f7f7f7 селектором из пяти классов и с
	   `padding: 0 18px !important` — перебиваем тем же весом. */
	.navbar.navbar-area.navbar-expand-lg.navigation-style-01.navbar-default
		.custom-container .navbar-collapse .navbar-nav {
		background-color: transparent; margin: 0;
		padding: 0 !important; text-align: left; }
	.navbar.navbar-area.navbar-expand-lg.navigation-style-01.navbar-default
		.custom-container .navbar-collapse .navbar-nav li { border-color:
		rgba(216, 180, 120, .16); }
	.navbar-area .custom-container .navbar-collapse .navbar-nav li {
		display: block; line-height: 1.3; margin: 0; }
	.navbar-area .custom-container .navbar-collapse .navbar-nav li + li {
		margin-left: 0; border-top: 1px solid rgba(216, 180, 120, .16); }
	.navbar.navbar-area.navbar-expand-lg.navigation-style-01.navbar-default
		.custom-container .navbar-collapse .navbar-nav li a {
		display: block; padding: 0 22px; font-size: 16px;
		color: #F0E0CC !important; background: transparent;
		transition: background .2s ease, color .2s ease; }
	/* Подсветку вешаем только на :hover: сайт одностраничный, и класс
	   current-menu-item висит сразу на всех пунктах — иначе «активными»
	   выглядят все. */
	.navbar.navbar-area.navbar-expand-lg.navigation-style-01.navbar-default
		.custom-container .navbar-collapse .navbar-nav li a:hover {
		color: var(--fg-gold-light, #D8B478) !important;
		background: rgba(216, 180, 120, .1); }
	/* открытый бургер подсвечиваем, чтобы было видно состояние */
	.navbar-toggler[aria-expanded="true"] {
		background-color: rgba(216, 180, 120, .16) !important;
		border-color: rgba(216, 180, 120, .7) !important; }
}
@media (max-width: 1199px) {
	.fg-grid, .fg-cards, .fg-tiles { grid-template-columns: repeat(3, 1fr); }
	.fg-nope__list { grid-template-columns: repeat(3, 1fr); }
	/* Ниже 1200px тема ставит колонки первого экрана друг под друга, и
	   фотография, прижатая к правому краю, легла бы на текст. Возвращаем её
	   в поток обычным кадром. */
	.hero-1 .hero-image-wrapp { position: static; width: auto; }
	.hero-1 .hero-image-wrapp .hero-thumb { height: 360px; }
	.hero-1 .hero-image-wrapp .hero-thumb img { border-radius: 16px;
		-webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 1279px) {
	/* На этой ширине пункты меню наезжают на логотип: у темы бургер
	   включается только на 991px. Поджимаем шаг меню и кегль. */
	/* Селекторы длинные под стать теме: у неё правила вида
	   `.navbar.navbar-area.navbar-expand-lg… .navbar-nav li a`, короткими
	   их не перебить. Шаг между пунктами задан как `li + li`. */
	.navbar-area .custom-container .navbar-collapse .navbar-nav li + li {
		margin-left: 8px; }
	.navbar.navbar-area.navbar-expand-lg.navigation-style-01.navbar-default
		.custom-container .navbar-collapse .navbar-nav li a { font-size: 14px; }
	.header-layout1 .logo-wrapper img { max-width: 170px; }
}
@media (max-width: 1199px) {
	/* Тема центрует первый экран, когда колонки встают друг под друга.
	   Поверх фотографии выключка по центру читается хуже — оставляем влево. */
	.hero-style1, .hero-style1 .hero-text,
	.hero-style1 .hero-card, .hero-style1 .hero-card_content,
	.hero-style1 .box-title, .hero-style1 .hero-card_text { text-align: left; }
	.hero-style1 .btn-group { justify-content: flex-start; }
	/* колонка на всю ширину — текст заезжал под фигурку на фотографии */
	.hero-style1 .hero-text,
	.hero-style1 .fg-hero-usp { max-width: 620px; }
}
@media (max-width: 991px) {
	.fg-price { grid-template-columns: repeat(2, 1fr); }
	.fg-grid, .fg-cards, .fg-tiles { grid-template-columns: repeat(2, 1fr); }
	.fg-offers { grid-template-columns: 1fr; }
	/* панели встали друг под друга — золотой шов переезжает наверх */
	.fg-offer + .fg-offer { box-shadow: inset 0 1px 0 rgba(169, 133, 82, .45); }
	.about1-shape-img-1 { max-height: 420px; }
	.about1-shape-img1 { max-width: 46%; }
	.fg-maket { grid-template-columns: 1fr; padding: 28px; gap: 28px; }
	.fg-maket h2 { font-size: 28px; }
}
@media (max-width: 991px) {
	.fg-form { grid-template-columns: 1fr; }
}
/* мобильная версия -------------------------------------------------------- */
@media (max-width: 767px) {
	/* Elementor рисует секции контейнерами без боковых отступов, и на
	   телефоне текст с картинками упирается в края экрана. Селектор с body:
	   у самого Elementor правило `.e-con > .e-con-inner` (0,2,0), и его
	   frontend.min.css грузится позже нашего blocks.css.

	   Отступ вешаем только на внутреннюю коробку: фон секции лежит на самом
	   `.e-con` (или, у секций темы в `.e-con-full`, на элементе внутри), и
	   padding на контейнере поджимал бы заливку — по краям экрана появлялись
	   белые полосы. Секции темы обходятся своим `.container` с padding 20px. */
	body .e-con > .e-con-inner { padding-inline: 10px; }

	.hero-title { font-size: 41px; max-width: 400px; }
	/* тема на узких экранах центрует первый экран целиком — карточкам УТП
	   так читается хуже, возвращаем выключку влево */
	.hero-style1, .hero-style1 .hero-text,
	.hero-style1 .hero-card, .hero-style1 .hero-card_content,
	.hero-style1 .box-title, .hero-style1 .hero-card_text { text-align: left; }
	.hero-image-wrapp { margin-bottom: 30px; }

	/* стрелки отзывов вынесены за край карусели и на телефоне уезжали
	   за экран — убираем их внутрь */
	.fg-reviews .fg-slider__arrow--prev { left: 4px; }
	.fg-reviews .fg-slider__arrow--next { right: 4px; }
	.fg-slider__arrow { width: 38px; height: 38px; margin-top: -19px; }

	/* круглый «плюс» из виджета «Срочный заказ» на телефоне лишний */
	.client-thumb-group { display: none; }

	/* Правая колонка «Вопрос-ответа»: подводка и плитки с цифрами.
	   С `body` в селекторе: Elementor задаёт `.e-con { display: var(--display) }`
	   с той же специфичностью, а его CSS грузится позже нашего. */
	body .fg-faq-aside { display: none; }

	.about-area-1 .sec-title { font-size: 28px; line-height: 135%; }

	/* «Почему фигурка стоит от 59 000 ₽» — в один столбец */
	.fg-price { grid-template-columns: 1fr; gap: 16px; }
	.fg-price__item { padding: 22px 20px; }
	.fg-price__note { margin-top: 24px; font-size: 16px; text-align: left; }

	/* Карточка предложения на телефоне разворачивается в столбец: фото и
	   текст рядом в 390px не помещаются. */
	.fg-offer { grid-template-columns: 1fr; gap: 22px; padding: 20px 14px; }
	/* Фото во всю ширину карточки: узкая колонка 260px оставляла по бокам
	   слишком много пустого места. */
	.fg-offer__gallery { max-width: 380px; margin: 0 auto; }
	.fg-offer__feats--icons { gap: 12px; }
	/* Тема на телефоне превращает кадр первого экрана в круг с белой
	   подложкой (clip-path снимается, border-radius: 50%). Для фотографии
	   интерьера это не подходит — возвращаем обычный кадр. */
	.hero-1 .hero-image-wrapp .hero-thumb { width: 100%; height: 300px;
		background: none; border-radius: 16px; overflow: hidden; }
	.hero-1 .hero-image-wrapp .hero-thumb img { display: block; width: 100%;
		height: 100%; border-radius: 16px; object-fit: cover; }
}
@media (max-width: 575px) {
	.fg-grid, .fg-cards, .fg-tiles, .fg-nope__list { grid-template-columns: 1fr; }
	.fg-nope { padding: 28px 20px; }
	.fg-form__aside, .fg-form__card { padding: 32px 22px; }
	.fg-form h2 { font-size: 26px; }
}

/* Страница «Политика конфиденциальности» -----------------------------------
   Текст правовой, читать его должно быть удобно: убираем сайдбар с поиском
   и рубриками, колонку с текстом растягиваем на всю ширину. Шапку-хлебные
   крошки тема красит мятным (rgb(235,243,238)) — перекрашиваем в бежевый
   палитры, иначе на сайте появляется чужой цвет. */
.breadcrumb-wrap { background-color: var(--fg-beige, #F3E8D8) !important; }
.breadcrumb-wrap .breadcrumb-title,
.breadcrumb-wrap .breadcrumb li,
.breadcrumb-wrap .breadcrumb li a { color: var(--fg-choco, #33241C); }
.page-id-3 .widget-area { display: none; }
.page-id-3 .content-area .col-lg-8,
.page-id-3 .content-area .col-lg-4 { flex: 0 0 100%; max-width: 100%; }
.page-id-3 .entry-content { max-width: 900px; }
.page-id-3 .entry-content h2 { margin: 34px 0 12px; font-size: 24px;
	color: var(--fg-wine, #5E1A26); }
.page-id-3 .entry-content p { margin-bottom: 12px; line-height: 1.7; }

/* Ссылка на политику в согласии под формой и в попапе */
:is(.fg-form, .fg-modal) .fg-consent a { color: var(--fg-gold, #A98552);
	text-decoration: underline; text-underline-offset: 2px; }
:is(.fg-form, .fg-modal) .fg-consent a:hover { color: var(--fg-wine, #5E1A26); }

/* Контакты в шапке (десктоп) ----------------------------------------------
   Бургер на широком экране убран (child-theme/template-parts/header/header.php),
   на его месте — телефон с часами работы и два мессенджера. Кружки рисуем
   контуром в золоте: фирменные синие логотипы выбивались бы из палитры. */
.fg-head-contacts { display: flex; align-items: center; gap: 0; }
.fg-head-phone { text-align: right; line-height: 1.25; }
.fg-head-phone small { display: block; font-size: 12px; letter-spacing: .02em;
	font-weight: 400; color: rgba(240, 224, 204, .72); }
/* На десктопе номер — просто текст, не ссылка (заказчик просил). */
.fg-head-phone__num { display: block; font-size: 19px; font-weight: 500;
	white-space: nowrap; color: #F0E0CC; }
body:not(.home) .fg-head-phone__num { color: var(--fg-choco, #33241C); }
/* Мессенджеры — фирменные логотипы (Max картинкой, Telegram inline-SVG),
   поэтому без золотой обводки: своя форма и свои цвета. */
.fg-head-msg { display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; line-height: 0;
	transition: filter .2s ease; }
.fg-head-msg img, .fg-head-msg svg { display: block; width: 42px; height: 42px; }
.fg-head-msg--max img { border-radius: 50%; }
/* Telegram: логотип сам по себе синий круг — белая подложка на 2px меньше
   него, чтобы белого не было видно по краю. */
.fg-head-msg--tg { position: relative; padding: 0; background: none; }
.fg-head-msg--tg::before { content: ""; position: absolute; inset: 1px;
	border-radius: 50%; background: #FFFFFF; }
.fg-head-msg--tg svg { position: relative; }
.fg-head-msg:hover { filter: brightness(1.08); }
/* На внутренних страницах шапка светлая — там свои цвета */
body:not(.home) .fg-head-phone small { color: #7A6C5D; }
/* Телефон в шапке телефона не помещается — там остаются бургер и меню */
@media (max-width: 991px) { .fg-head-contacts { display: none; } }
/* Логотип не должен схлопываться: с контактами справа шапка стала теснее,
   и flex-строка первой сжимала именно колонку с логотипом. */
.navbar-area .custom-container .responsive-mobile-menu { flex: 0 0 auto; }
.fg-head-phone small { white-space: nowrap; }
/* Логотип + шесть пунктов + контакты в одну строку не помещаются даже на
   1600px: поджимаем пункты меню, иначе «Контакты» уезжают на вторую строку. */
@media (min-width: 992px) and (max-width: 1699px) {
	.navbar-area .custom-container .navbar-collapse .navbar-nav { flex-wrap: nowrap; }
	.navbar.navbar-area.navbar-expand-lg.navigation-style-01.navbar-default
		.custom-container .navbar-collapse .navbar-nav li a { font-size: 15px; }
	.navbar.navbar-area.navbar-expand-lg.navigation-style-01.navbar-default
		.custom-container .navbar-collapse .navbar-nav > li + li { margin-left: 14px; }
	.fg-head-contacts { gap: 0; }
	.fg-head-phone a { font-size: 17px; }
	.fg-head-msg, .fg-head-msg img, .fg-head-msg svg { width: 38px; height: 38px; }
}

/* Выпадающий раздел «Услуги» -----------------------------------------------
   Тема рисует подменю белой плашкой, а пункты на главной у нас золотые —
   на белом они не читались. Делаем тёмную панель в стиле бургер-меню.
   Селекторы длинные: у темы правила из восьми классов и с !important. */
.navbar.navbar-area.navbar-expand-lg.navigation-style-01.navbar-default
	.custom-container .navbar-collapse .navbar-nav li.menu-item-has-children .sub-menu {
	min-width: 262px; width: auto; padding: 8px 0; border: 1px solid rgba(216, 180, 120, .35);
	border-radius: 12px; background-color: var(--fg-wine-deep, #45111B);
	box-shadow: 0 18px 38px rgba(31, 12, 16, .35); }
.navbar.navbar-area.navbar-expand-lg.navigation-style-01.navbar-default
	.custom-container .navbar-collapse .navbar-nav li.menu-item-has-children .sub-menu li a {
	padding: 10px 20px !important; font-size: 15px; line-height: 1.35;
	white-space: nowrap; overflow: visible; text-overflow: clip; text-indent: 0;
	color: #F0E0CC !important; background-color: transparent !important; }
.navbar.navbar-area.navbar-expand-lg.navigation-style-01.navbar-default
	.custom-container .navbar-collapse .navbar-nav li.menu-item-has-children .sub-menu li a:hover {
	color: var(--fg-gold-light, #D8B478) !important;
	background-color: rgba(216, 180, 120, .12) !important; }
.navbar.navbar-area.navbar-expand-lg.navigation-style-01.navbar-default
	.custom-container .navbar-collapse .navbar-nav li.menu-item-has-children .sub-menu li + li {
	margin-left: 0; border-top: 1px solid rgba(216, 180, 120, .16); }
/* На внутренних страницах шапка светлая — панель оставляем тёмной, но
   стрелку у пункта красим в золото палитры. */
.navbar-nav li.menu-item-has-children > a { padding-right: 16px; }
/* Пункт с подменю: собственный контекст наложения и место под стрелку */
.navbar.navbar-area.navbar-expand-lg.navigation-style-01.navbar-default
	.custom-container .navbar-collapse .navbar-nav li.menu-item-has-children {
	position: relative; z-index: 0; padding-right: 4px; }
/* Первый экран на десктопе: отступ под фотографией и текстовая колонка,
   опущенная до уровня верхней кромки рамки с фигуркой. */
@media (min-width: 992px) {
	body.home .hero-wrapper.hero-1 { padding-bottom: 40px; }
	.hero-style1 { padding-top: 178px; }
}
/* Шире 1860px кадр не растягиваем: фигурка с рамкой остаётся такой же, как
   при 1860px, а слева добирает ровная заливка — левый край кадра ровно
   этого же цвета (#48101A), поэтому стыка не видно. */
@media (min-width: 1860px) {
	.hero-wrapper.hero-1 { background-size: 1860px auto;
		background-color: #48101A !important; }
}

/* Телефон и мессенджеры в бургер-меню (только телефон/планшет) */
.fg-mob-contacts { display: none; }
@media (max-width: 991px) {
	.fg-mob-contacts { display: block; padding: 18px 22px 20px;
		border-top: 1px solid rgba(216, 180, 120, .22); text-align: center; }
	.fg-mob-phone { display: block; font-size: 20px; font-weight: 500;
		color: #F0E0CC; }
	.fg-mob-phone:hover { color: var(--fg-gold-light, #D8B478); }
	.fg-mob-hours { display: block; margin-top: 2px; font-size: 13px;
		font-weight: 400; color: rgba(240, 224, 204, .7); }
	.fg-mob-msgs { display: flex; justify-content: center; gap: 14px;
		margin-top: 14px; }
}

/* Узкие телефоны: чуть больше воздуха между фотографией и заголовком */
@media (max-width: 479px) {
	.hero-style1 { padding-top: calc(114.5vw - 52px); }
}

/* Разбор цены — оформление ------------------------------------------------
   Было пять одинаковых белых карточек в сетке 3+2 с «висящим» хвостом.
   Делаем их заметнее: тёплая подложка с градиентом, золотая волосяная
   рамка и крупная цифра-подложка в углу; последние две карточки
   центруем, чтобы ряд не обрывался слева. */
.fg-price { grid-template-columns: repeat(6, 1fr); gap: 22px; }
.fg-price__item { grid-column: span 2; position: relative; overflow: hidden;
	padding: 30px 28px 28px;
	background: linear-gradient(180deg, #FFFDF9 0%, #F6EEE1 100%);
	border: 1px solid rgba(169, 133, 82, .3); border-radius: 18px;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.fg-price__item:nth-child(4) { grid-column: 2 / span 2; }
.fg-price__item:nth-child(5) { grid-column: 4 / span 2; }
.fg-price__item::before { content: ""; position: absolute; top: 0; left: 0;
	right: 0; height: 3px; opacity: .75;
	background: linear-gradient(90deg, transparent,
		var(--fg-gold, #A98552), transparent); }
.fg-price__item:hover { transform: translateY(-4px);
	border-color: rgba(169, 133, 82, .6);
	box-shadow: 0 18px 34px rgba(51, 36, 28, .12); }
/* цифра — крупной подложкой в углу, а не кружком */
.fg-price__item .fg-price__num { position: absolute; top: 6px; right: 20px;
	display: block; width: auto; height: auto; margin: 0; background: none;
	border-radius: 0; font-size: 74px; font-weight: 700; line-height: 1;
	color: rgba(169, 133, 82, .16); }
.fg-price__item h3 { position: relative; margin: 0 0 14px;
	padding-bottom: 12px; padding-right: 46px; }
.fg-price__item h3::after { content: ""; position: absolute; left: 0; bottom: 0;
	width: 34px; height: 1px; background: var(--fg-gold, #A98552); }
/* вывод под карточками — с золотым ромбом-разделителем */
.fg-price__note { position: relative; padding-top: 30px; }
.fg-price__note::before { content: ""; position: absolute; top: 8px; left: 50%;
	width: 9px; height: 9px; margin-left: -4px; transform: rotate(45deg);
	background: var(--fg-gold, #A98552); }
@media (max-width: 991px) {
	.fg-price { grid-template-columns: repeat(4, 1fr); }
	.fg-price__item:nth-child(4) { grid-column: span 2; }
	.fg-price__item:nth-child(5) { grid-column: 2 / span 2; }
}
@media (max-width: 575px) {
	.fg-price { grid-template-columns: 1fr; }
	.fg-price__item,
	.fg-price__item:nth-child(4),
	.fg-price__item:nth-child(5) { grid-column: 1 / -1; }
	.fg-price__item .fg-price__num { font-size: 58px; right: 16px; }
	.fg-price__note { padding-top: 26px; text-align: center; }
}

/* Иконка MAX в списках соцсетей: в Font Awesome её нет, поэтому свой класс
   с картинкой из uploads. Размер берём от кегля, как у остальных иконок. */
.fg-icon-max { display: inline-block; width: 1em; height: 1em;
	vertical-align: -.125em;
	background: url("../../uploads/2026/08/max-icon.webp") center / contain no-repeat; }

/* Стрелка у пункта с подменю: тема красит её тёмным, на бордовой шапке
   она читается как чёрная точка — делаем бежевой (и золотой в наведении). */
.navbar.navbar-area.navbar-expand-lg.navigation-style-01.navbar-default
	.custom-container .navbar-collapse .navbar-nav li.menu-item-has-children:before,
.navbar.navbar-area.navbar-expand-lg.navigation-style-01.navbar-default
	.custom-container .navbar-collapse .navbar-nav li.menu-item-has-children:after {
	color: #F0E0CC !important; }
.navbar.navbar-area.navbar-expand-lg.navigation-style-01.navbar-default
	.custom-container .navbar-collapse .navbar-nav li.menu-item-has-children:hover:before,
.navbar.navbar-area.navbar-expand-lg.navigation-style-01.navbar-default
	.custom-container .navbar-collapse .navbar-nav li.menu-item-has-children:hover:after {
	color: var(--fg-gold-light, #D8B478) !important; }
body:not(.home) .navbar.navbar-area.navbar-expand-lg.navigation-style-01.navbar-default
	.custom-container .navbar-collapse .navbar-nav li.menu-item-has-children:before,
body:not(.home) .navbar.navbar-area.navbar-expand-lg.navigation-style-01.navbar-default
	.custom-container .navbar-collapse .navbar-nav li.menu-item-has-children:after {
	color: var(--fg-gold, #A98552) !important; }

/* ======================================================================
   Визуальная доводка секций (правка заказчика: «сделать красивее»).
   Общий приём один: тёплая подложка, золотая волосяная линия и мягкий
   подъём карточки при наведении — так блоки читаются как один набор.
   ====================================================================== */

/* «Мы не производим» */
.fg-nope__note { max-width: 760px; margin: 0 auto 32px; text-align: center; }
.fg-nope__item { text-align: center; }
.fg-nope__ph { box-shadow: 0 8px 22px rgba(51, 36, 28, .1);
	transition: box-shadow .25s ease; }
.fg-nope__item:hover .fg-nope__ph { box-shadow: 0 12px 26px rgba(51, 36, 28, .16); }
.fg-nope__ph img { filter: grayscale(.35); transition: filter .25s ease; }
.fg-nope__item:hover .fg-nope__ph img { filter: grayscale(0); }
.fg-nope__cross { background: var(--fg-wine, #5E1A26) !important;
	color: #F0E0CC !important; box-shadow: 0 4px 10px rgba(51, 36, 28, .25); }
.fg-nope__item h3 { margin-top: 14px; font-size: 15px; line-height: 1.35;
	color: var(--fg-choco, #33241C); }

/* Видео: «Процесс создания» и «Эмоции» */
.fg-video { box-shadow: 0 10px 26px rgba(51, 36, 28, .12);
	transition: box-shadow .25s ease; }
.fg-video:hover { box-shadow: 0 14px 30px rgba(51, 36, 28, .2); }
.fg-video::after { content: ""; position: absolute; inset: 0; pointer-events: none;
	border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(216, 180, 120, .45); }
.fg-video figcaption { background: linear-gradient(180deg, transparent,
	rgba(35, 12, 16, .82) 55%); padding-top: 42px; color: #F3E7D6; }
.fg-play { box-shadow: 0 0 0 6px rgba(216, 180, 120, .25); }

/* Отзывы */
/* Белую подложку у отзывов убрали: сами кадры — скриншоты с тёмной
   рамкой телефона, белое поле вокруг них было лишним. */
.fg-reviews .fg-slider__slide figure { margin: 0; border-radius: 16px;
	overflow: hidden; background: none;
	transition: box-shadow .25s ease; }


/* Логотипы клиентов */
.fg-marquee { padding: 8px 0; }
.fg-marquee img { filter: grayscale(1); opacity: .62;
	transition: filter .25s ease, opacity .25s ease; }
.fg-marquee img:hover { filter: grayscale(0); opacity: 1; }

/* «Как мы создаём фигурки»: шаги */
.process-card { transition: box-shadow .25s ease; }
.process-card:hover { box-shadow: 0 14px 30px rgba(51, 36, 28, .14); }
.process-card .process-card-icon img { border-radius: 14px; }
.process-card .process-card-text { color: var(--fg-gold, #A98552);
	letter-spacing: .06em; text-transform: uppercase; font-size: 12px; }

/* «Идеальный подарок»: плитки */
.fg-tile::after { content: ""; position: absolute; inset: 0;
	border-radius: inherit; pointer-events: none;
	box-shadow: inset 0 0 0 1px rgba(216, 180, 120, .4);
	transition: box-shadow .25s ease; }
.fg-tile:hover::after { box-shadow: inset 0 0 0 2px var(--fg-gold-light, #D8B478); }
.fg-tile span { background: linear-gradient(180deg, transparent,
	rgba(35, 12, 16, .85) 60%); color: #F3E7D6; }

/* ======================================================================
   Доводка секций, часть вторая: заголовки, «Преимущества», «О нас»,
   вопрос-ответ, плитки со счётчиками, форма и подвал.
   ====================================================================== */

/* Заголовки секций: золотой ромб-подчёркивание вместо голого текста */
.sec-title.style2 { position: relative; padding-bottom: 18px; }
.sec-title.style2::after { content: ""; position: absolute; left: 50%; bottom: 0;
	width: 64px; height: 1px; margin-left: -32px;
	background: linear-gradient(90deg, transparent,
		var(--fg-gold, #A98552), transparent); }
.sec-title.style2::before { content: ""; position: absolute; left: 50%; bottom: -4px;
	width: 8px; height: 8px; margin-left: -4px; transform: rotate(45deg);
	background: var(--fg-gold, #A98552); }
/* в блоке «О нас» заголовок прижат влево — ромб не по центру, а по краю */
.about-content-wrap .sec-title { position: relative; padding-bottom: 16px; }
.about-content-wrap .sec-title::after { content: ""; position: absolute; left: 0;
	bottom: 0; width: 64px; height: 2px; background: var(--fg-gold, #A98552); }

/* «Преимущества премиум-сегмента»: фон убран, поэтому держим кадр */
.fg-cards .fg-card__img { border-radius: 16px; overflow: hidden;
	box-shadow: 0 8px 22px rgba(51, 36, 28, .12);
	transition: transform .25s ease, box-shadow .25s ease; }
.fg-cards .fg-card:hover .fg-card__img {
	box-shadow: 0 12px 28px rgba(51, 36, 28, .18); }
.fg-cards .fg-card h3 { position: relative; padding-top: 14px; font-size: 19px; }
.fg-cards .fg-card h3::before { content: ""; position: absolute; top: 0; left: 0;
	width: 28px; height: 2px; background: var(--fg-gold, #A98552); }

/* «О нас»: фото в золотой рамке, галочки — золотыми кружками */
.about1-shape-img1 a { display: block; border-radius: 20px; overflow: hidden;
	box-shadow: 0 22px 44px rgba(51, 36, 28, .2); }
.about1-shape-img-1 { border-radius: 20px; }
.achive-about_icon { display: flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 50%;
	background: rgba(169, 133, 82, .14); color: var(--fg-gold, #A98552); }
.achive-about_icon svg { width: 15px; height: 15px; }
.achive-about { padding: 14px 0; }

/* Форма заявки */
.fg-form { box-shadow: 0 26px 54px rgba(51, 36, 28, .18); }
.fg-form__badge { box-shadow: 0 0 0 1px rgba(216, 180, 120, .45); }
.fg-form__list li { position: relative; padding-left: 26px; }
.fg-form__list li::before { content: ""; position: absolute; left: 0; top: .55em;
	width: 12px; height: 6px; border-left: 2px solid var(--fg-gold-light, #D8B478);
	border-bottom: 2px solid var(--fg-gold-light, #D8B478);
	transform: rotate(-45deg); }
:is(.fg-form, .fg-modal) .fg-input:focus,
:is(.fg-form, .fg-modal) .fg-select:focus { outline: none;
	border-color: var(--fg-gold, #A98552);
	box-shadow: 0 0 0 3px rgba(169, 133, 82, .18); }

/* Подвал: заголовки с золотой чертой, миниатюры работ в рамке */
.footer-wrap .widget-headline { position: relative; padding-bottom: 12px; }
.footer-wrap .widget-headline::after { content: ""; position: absolute; left: 0;
	bottom: 0; width: 38px; height: 2px; background: var(--fg-gold, #A98552); }
.footer-wrap .gallery-item img { border-radius: 10px;
	box-shadow: 0 0 0 1px rgba(216, 180, 120, .3);
	transition: transform .25s ease, box-shadow .25s ease; }
.footer-wrap .gallery-item img:hover {
	box-shadow: 0 0 0 1px var(--fg-gold-light, #D8B478),
		0 8px 18px rgba(0, 0, 0, .25); }
.footer-wrap .social-btn.style3 .icon a { display: inline-flex;
	align-items: center; justify-content: center; width: 38px; height: 38px;
	border-radius: 50%; background: rgba(216, 180, 120, .14);
	color: var(--fg-gold-light, #D8B478); font-size: 17px;
	transition: background .2s ease, color .2s ease; }
.footer-wrap .social-btn.style3 .icon a:hover {
	background: var(--fg-gold-light, #D8B478); color: #33241C; }
.footer-wrap .social-btn.style3 { display: flex; gap: 10px; }
.footer-wrap .social-btn.style3 li { margin-top: 0 !important; }
/* Ромб-подчёркивание ставим по центру только у центрованных заголовков:
   в «Вопрос-ответе» заголовок прижат влево, а у соседнего блока он пустой
   (виджет печатает пустой h2) — там украшение вообще не нужно. */
.sec-title.style2:empty { padding-bottom: 0; }
.sec-title.style2:empty::before,
.sec-title.style2:empty::after { content: none; }
/* У правой колонки вопрос-ответа заголовок пустой (виджет печатает пробелы,
   поэтому :empty не срабатывает) — украшение выключаем по контейнеру. */
/* Блок «Вопрос-ответ» оставляем в исходном виде: украшение заголовка
   тоже выключаем (заказчик просил откатить правки этого блока). */
#vopros-otvet .sec-title.style2 { padding-bottom: 0; }
#vopros-otvet .sec-title.style2::before,
#vopros-otvet .sec-title.style2::after { content: none; }

/* Промежуток между телефоном и мессенджерами в шапке */
.nav-right-part a { margin-left: 10px; }

/* Точки слайдера у карточек с подписью: абсолютные точки ложились на текст
   под фотографией (заметно на телефоне, где карточка одна на экран).
   В блоках «Мы не производим» и «Преимущества» выносим их под слайдер. */
.fg-slider:has(.fg-nope__list) .fg-slider__dots,
.fg-slider:has(.fg-cards) .fg-slider__dots { position: static; margin-top: 18px; }
.fg-slider:has(.fg-nope__list) .fg-slider__dot,
.fg-slider:has(.fg-cards) .fg-slider__dot { background: rgba(43, 38, 32, .22); }
.fg-slider:has(.fg-nope__list) .fg-slider__dot.is-active,
.fg-slider:has(.fg-cards) .fg-slider__dot.is-active {
	background: var(--fg-gold, #A98552); }

/* Блок «О нас» — отступ сверху (правка заказчика) */
.about-area-1 { margin-top: 30px; }

/* Кнопка звонка на телефоне: слева от бургера, в стиле его рамки.
   Тема ставит бургер абсолютом (right: 15px) — возвращаем его в поток,
   иначе кнопка звонка ложится под него. */
.fg-mob-call { display: none; }
@media (max-width: 991px) {
	.navbar-area .custom-container .responsive-mobile-menu { display: flex;
		align-items: center; }
	/* Бургер и кнопка звонка — одного размера (44×44) и одной формы. */
	.navbar-area .custom-container .responsive-mobile-menu .navbar-toggler,
	.navbar-area.navigation-style-01 .custom-container .responsive-mobile-menu .navbar-toggler {
		position: static; transform: none; margin-left: 0;
		display: inline-flex; align-items: center; justify-content: center;
		width: 44px; height: 44px; padding: 0; border-radius: 10px; }
	.fg-mob-call { display: inline-flex; align-items: center;
		justify-content: center; width: 44px; height: 44px; margin-left: auto;
		margin-right: 10px; border-radius: 10px;
		border: 1px solid rgba(216, 180, 120, .55);
		color: var(--fg-gold-light, #D8B478); }
	.fg-mob-call:hover { background: rgba(216, 180, 120, .14);
		color: var(--fg-gold-light, #D8B478); }
	body:not(.home) .fg-mob-call { color: var(--fg-gold, #A98552);
		border-color: rgba(169, 133, 82, .5); }

	/* Шапка на телефоне закреплена сверху: бургер и звонок всегда под рукой */
	body.home .site-header,
	body:not(.home) .site-header { position: fixed; top: 0; left: 0; right: 0;
		z-index: 999; background: rgba(69, 17, 27, .96);
		box-shadow: 0 6px 18px rgba(31, 12, 16, .28); }
	body:not(.home) .site-header { background: #FFFFFF;
		box-shadow: 0 6px 18px rgba(51, 36, 28, .12); }
	body.home .hero-wrapper.hero-1 { padding-top: 92px; }
	/* на внутренних страницах шапка выпала из потока — компенсируем высоту */
	body:not(.home) .site-content, body:not(.home) #content,
	body:not(.home) .breadcrumb-wrap { margin-top: 0; }
	body:not(.home) { padding-top: 88px; }
	/* меню бургера открывается под закреплённой шапкой */
	.navbar-area .custom-container .navbar-collapse { max-height: calc(100vh - 110px);
		overflow-y: auto; }
}
/* Лид-абзац на телефоне прижимался к краям экрана */
@media (max-width: 991px) {
	.fg-lead { padding-left: 10px; padding-right: 10px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Блок «Из чего складывается стоимость Премиум+» — пять этапов.
   Свёрстан по макету заказчика (ПРЕМИУМ САЙТ.docx): кремовые карточки в
   золотой рамке, крупный номер, круглое фото у первых трёх, сверху вводная
   плашка, снизу бордовая. Раньше здесь был блок .fg-price — он удалён.
   ───────────────────────────────────────────────────────────────────────── */
.fg-steps { --st-gold: #C79A4E; --st-gold-l: #E3C489; --st-cream: #FBF4E7;
	--st-wine: #6E1420; --st-ink: #4A3B2A; }
.fg-steps__intro, .fg-steps__outro { border-radius: 999px; padding: 22px 40px;
	text-align: center; font-size: 18px; line-height: 1.45; margin: 0 auto; max-width: 1000px; }
.fg-steps__intro { background: var(--st-cream); border: 2px solid var(--st-gold);
	color: var(--st-wine); font-weight: 600;
	box-shadow: 0 2px 0 rgba(199,154,78,.35); }
.fg-steps__outro { background: linear-gradient(180deg, #7E1723, #5A0F19);
	border: 2px solid var(--st-gold); color: var(--st-cream); margin-top: 34px;
	position: relative; }
.fg-steps__outro::after { content: ""; position: absolute; left: 12%; right: 12%;
	bottom: 14px; height: 1px; background: rgba(227,196,137,.5); }

/* решётка: 3 карточки в ряд, две последние — по центру */
.fg-steps__grid { display: grid; grid-template-columns: repeat(6, 1fr);
	gap: 26px; margin-top: 30px; }
.fg-step { grid-column: span 2; position: relative; display: flex; flex-direction: column;
	background: var(--st-cream); border: 2px solid var(--st-gold); border-radius: 22px;
	padding: 26px 28px 28px; min-height: 260px;
	box-shadow: 0 4px 0 rgba(199,154,78,.28); }
.fg-step:nth-child(4) { grid-column: 2 / span 2; }
.fg-step:nth-child(5) { grid-column: 4 / span 2; }
/* «провода» между рядами, как в макете */
.fg-step::before { content: ""; position: absolute; top: -28px; left: 50%;
	width: 2px; height: 26px; background: var(--st-gold); }
.fg-step::after { content: ""; position: absolute; top: -34px; left: calc(50% - 6px);
	width: 12px; height: 12px; border-radius: 50%;
	background: var(--st-cream); border: 2px solid var(--st-gold); }
.fg-step__num { font-size: 34px; font-weight: 800; color: var(--st-gold);
	line-height: 1; margin-bottom: 10px; }
.fg-step__title { font-size: 21px; font-weight: 800; color: var(--st-wine);
	line-height: 1.2; margin: 0 0 14px; max-width: calc(100% - 148px); }
.fg-step__rule { width: 120px; height: 1px; background: var(--st-gold);
	position: relative; margin-bottom: 14px; }
.fg-step__rule::after { content: ""; position: absolute; left: 50%; top: -3px;
	width: 7px; height: 7px; margin-left: -3px; border-radius: 50%; background: var(--st-gold); }
.fg-step__text { font-size: 16px; line-height: 1.5; color: var(--st-ink); margin: 0; max-width: calc(100% - 148px); }
.fg-step--wide .fg-step__title, .fg-step--wide .fg-step__text { max-width: 100%; }
.fg-step__photo { position: absolute; right: 24px; top: 30px; width: 132px; height: 132px;
	border-radius: 50%; overflow: hidden; border: 3px solid var(--st-gold);
	box-shadow: 0 0 0 3px var(--st-cream), 0 6px 16px rgba(0,0,0,.18); }
.fg-step__photo a { display: block; width: 100%; height: 100%; }
.fg-step__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 1199px) {
	.fg-step__photo { width: 106px; height: 106px; right: 18px; }
	.fg-step__title, .fg-step__text { max-width: calc(100% - 122px); }
}
@media (max-width: 991px) {
	.fg-steps__grid { grid-template-columns: repeat(2, 1fr); }
	.fg-step, .fg-step:nth-child(4), .fg-step:nth-child(5) { grid-column: span 1; }
	.fg-step::before, .fg-step::after { display: none; }
}
@media (max-width: 575px) {
	.fg-steps__grid { grid-template-columns: 1fr; gap: 18px; }
	.fg-steps__intro, .fg-steps__outro { padding: 18px 24px; font-size: 16px; border-radius: 26px; }
	.fg-step { min-height: 0; padding: 22px 22px 24px; }
	.fg-step__photo { position: static; width: 92px; height: 92px; margin: 0 0 14px; }
	.fg-step__title, .fg-step__text { max-width: 100%; }
}

/* Блок «Из чего складывается стоимость Премиум+» отдаётся картинкой из макета
   заказчика: на десктопе горизонтальная схема, на телефоне — своя вертикальная
   (переключение в <picture>). Вёрстка .fg-steps выше оставлена на случай
   возврата к html-варианту. */
.fg-steps-img { text-align: center; }
.fg-steps-img img { display: block; width: 100%; height: auto;
	max-width: 1180px; margin: 0 auto; }
@media (max-width: 767px) { .fg-steps-img img { max-width: 520px; } }

/* Стрелки листалки в блоке «Детали, которые создают ценность» по умолчанию
   стоят по центру всей карточки, то есть на узком экране попадают на текст.
   Ставим их по центру фотографии: картинка имеет соотношение 4:3 от ширины
   карточки, а процентный margin-top считается как раз от ширины родителя
   (.fg-slider), поэтому центр снимка = 37.5% ширины.
   До 575px скрипт показывает одну карточку, от 576 до 991 — две. */
@media (max-width: 575px) {
	.fg-cards-slider .fg-slider__arrow { top: 0; margin-top: calc(37.5% - 19px); }
}
@media (min-width: 576px) and (max-width: 991px) {
	.fg-cards-slider .fg-slider__arrow { top: 0; margin-top: calc(18.75% - 23.5px); }
}