/* ═══════════════════════════════════════════════════════════════════════════
   Рівень документа. Тільки те, чим не володіє жоден елемент Elementor.

   Усе, що належить конкретному елементу (псевдоелементи, keyframes, стилі
   вкладених тегів), лежить у `custom_css` того елемента, а не тут: правило
   їде разом із елементом в експорті шаблона й не тече на сусідні сторінки.
   Див. native-vs-custom-css-decision-matrix.md.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Донор рахує rem від кореневих 16px; Astra зменшує кореневий кегль, і кожне
   rem-значення виходило рівно в 0.912 раза меншим. Контрола для html немає. */
html:has(body.fm-showcase){font-size:100%}

/* Базові властивості body донора (styles.css:16-17). Контрола рівня сторінки
   для body в Elementor немає; глобальний кіт міняв би весь сайт разом із
   головною, яка вітриною не є. */
body.fm-showcase{
  background:#faf8f3;color:#1a1914;line-height:1.6;
  font-family:"Golos Text",-apple-system,sans-serif;font-size:16px;
}

/* Зернистість паперу донора (styles.css:20-24): псевдоелемент на body, який
   лежить поверх усієї сторінки. Ні контрола, ні елемента-власника немає. */
body.fm-showcase::after{
  content:"";position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.28;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* ── Вага шрифта: тимчасовий місток, поки прод не має ваг у наборах ───────
   Причина не в Elementor. Заміряно 01.09.2026 на обох інсталях:
   на стейджингу, де ваги записані в кіт скриптом, змінні
   `--e-global-typography-<id>-font-weight` є для всіх ролей (600/600/700/400);
   на проді вони порожні для всіх ролей на Golos, бо в самих наборах поле
   Weight лишилось незаповненим. Ролі на Prata там мають 400 і виводяться.

   Далі спрацьовує друга обставина. Віджет отримує `font-weight: var(--…)`,
   змінна не визначена, оголошення стає невалідним, і властивість береться
   успадкована. Theme Style прода ставить на `body` вагу 700, тому жирним
   стає геть усе, включно з головною (заміряно: body = 700).

   Правильне лікування в панелі прода: Theme Style → Body → Weight 400 плюс
   Weight у десяти наборах на Golos. Щойно це буде зроблено, блок нижче,
   крім самого `font-weight:400`, стає зайвим і його треба прибрати. */
body.fm-showcase{
  /* база донора: styles.css:17, звичайна вага */
  font-weight:400;
  --e-global-typography-fc59d83-font-weight:600;  /* Caption */
  --e-global-typography-77a70f0-font-weight:600;  /* Action */
  --e-global-typography-ad2672d-font-weight:700;  /* Label */
  --e-global-typography-8c22471-font-weight:400;  /* Lede */
  --e-global-typography-ffc199c-font-weight:400;  /* Body L */
  --e-global-typography-7d81564-font-weight:400;  /* Body S */
  --e-global-typography-0f43fc6-font-weight:400;  /* Body XS */
  --e-global-typography-09e836b-font-weight:400;  /* Small */
  --e-global-typography-0cd99fa-font-weight:400;  /* Micro */
}

/* ── Перший екран під шапкою ───────────────────────────────────────────────
   У макеті фото йде від самого верху, а шапка лежить поверх нього. На проді
   шапка Theme Builder стоїть у потоці й займає свої 162px, тому екран
   починався під нею. Тут вона виймається з потоку й накладається зверху.

   Перефарбовувати нічого не треба: шапка прода вже намальована під темний
   фон — сама прозора, смуги напівпрозорі (rgba(26,25,20,.55) і
   rgba(46,43,36,.88)), меню кольору bone. Липка смуга всередині лишається
   fixed і поводиться як раніше.

   `:has(.hero)` обмежує правило сторінками, які починаються першим екраном.
   На сторінці програми чи в архіві, де вгорі світлий вміст, шапка лишається
   у потоці й нічого не перекриває.

   Перевірено накладанням на живій сторінці 1788: шапка й екран стають на
   top 0, кікер лягає одразу під шапку (162 + падінг 10rem). */
body.fm-showcase:has(.hero) .elementor-location-header{
  position:absolute;top:0;left:0;right:0;z-index:10;
}

/* ── Поява: те, чого нативні пресети не виражають ──────────────────────────
   Сама поява задана контролами Elementor (Advanced → Motion Effects →
   Entrance Animation). Elementor вішає елементу `animated` у момент входу в
   кадр — нижче цей клас використовується як гачок для трьох ефектів макета,
   яких серед двадцяти пресетів немає. */

/* Сходинка карток каталогу: у макеті кожна наступна запізнюється на 0.07s
   (core.js:244-248). Нативна затримка одна на весь шаблон Loop Item, тому
   різниця робиться порядковим номером. */
/* Лічимо сусідами, а не порядковим номером: перед картками в гріді може
   стояти службовий вузол, і тоді nth-child зсувається на крок. */
body.fm-showcase .cat .e-loop-item ~ .e-loop-item .row.animated{animation-delay:.07s}
body.fm-showcase .cat .e-loop-item ~ .e-loop-item ~ .e-loop-item .row.animated{animation-delay:.14s}
body.fm-showcase .cat .e-loop-item ~ .e-loop-item ~ .e-loop-item ~ .e-loop-item .row.animated{animation-delay:.21s}
body.fm-showcase .cat .e-loop-item ~ .e-loop-item ~ .e-loop-item ~ .e-loop-item ~ .e-loop-item .row.animated{animation-delay:.28s}

/* Фото ведучої від'їжджає до свого масштабу за 1.6s (styles.css:329-330).
   `zoomIn` це інша крива й інша тривалість, до того ж діє на віджет, а не на
   саме зображення. */
@keyframes fm-photo{from{transform:scale(1.14)}to{transform:scale(1)}}
body.fm-showcase .who.animated .who__ph img{animation:fm-photo 1.6s
  cubic-bezier(.16,.84,.3,1) both}

/* Без JS Elementor лишає `elementor-invisible` у розмітці, і вміст не
   з'явиться ніколи. Тут сторінка просто показується без анімації. */
@media(scripting:none){
  body.fm-showcase .elementor-invisible{opacity:1!important;animation:none!important}
}

@media(prefers-reduced-motion:reduce){
  body.fm-showcase .who.animated .who__ph img{animation:none}
}

/* Замовна програма не має оголошених дат, тому секція «Termine» разом із
   підказкою про лист очікування там зайва. У макеті її ховав скрипт
   (single.php:91), тут вистачає класу режиму продажу на body. */
body.fm-sale-commissioned .sec--dates{display:none}

/* Секція «що залишиться» зʼявляється лише заповненою: порожній заголовок над
   порожнечею гірший за відсутність секції (рішення клієнтки 02.09.2026). */
body.fm-no-outcomes .sec--out{display:none}