/* Герой головної. Заказчик: перший екран головної сторінки.
   Одна причина зміни: змінився вигляд першого екрана.

   ⚠ ІСТОРІЯ ФАЙЛУ, важлива для розуміння (фронт-аудит C1/C2, 2026-08-05).
   Раніше тут лежав повний набір правил для власного компонента героя з класами
   .tapki-hero / __title / __eyebrow / __subtitle — перенос із Figma Make. Але живий герой на сайті
   складено в UX-Builder Flatsome, і жодного елемента з цими класами НЕ ІСНУЄ: перевірено і в
   контенті сторінок (0 входжень у БД), і на живих сторінках (0 у розмітці /, /shop/, /blog/).
   Тобто 56 рядків CSS вантажились на КОЖНІЙ сторінці сайту й не стосувались нічого.
   Саме тому правка «зробити H1 жирнішим» тут нічого не змінювала — аудит зафіксував це як
   «hero.css задає font-weight:700, але живий герой ігнорує»: він не ігнорував, він просто ніколи
   не був адресатом цих правил.
   Файл наведено на РЕАЛЬНИЙ герой. Старі правила лишаються в git.

   Селектор — по фактичному ланцюгу Flatsome (перевірено в браузері):
   .banner-layers > .fill > .text-box > .text-box-content > .text-inner > h1 */

/* ── C1: накреслення H1 ──
   Заміряно було: 56px, weight 400, tracking +2.8px, uppercase — розріджений світлий капс читається
   як спа-салон, а не як виробник для готелів. Вагу й трекінг змінено тоді ж.
   21.09.2026 власник замінив текст заголовка на речення клієнта (~110 знаків замість шести слів).
   Капс прибрано в самому контенті (клас uppercase): речення капсом не читається. Кегль 40px
   підібрано ЗАМІРОМ — 36/40/44 примірялись на 1024 і 1440: при 40 три рядки на 1440 і герой
   вміщається в 600px із запасом ≥86px. balance — щоб рядки були рівні, без «хвоста» в одне слово. */
body.home .banner-layers .text-inner h1 {
  font-weight: 700;
  letter-spacing: 0;
  font-size: 40px;
  line-height: 1.2;
  text-wrap: balance;
}

/* ── C2: мобільний ──
   Заміряно було: 38.5px, ТРИ рядки, блок шириною рівно 390px при відступі зліва 0 — текст упирався
   в обидва краї екрана. Норма: ≤2 рядки й бічний відступ ≥16px.
   Кегль підібрано ЗАМІРОМ, не на око: при 34 і 30px заголовок лишається у три рядки, у два
   вкладається з 26px. Текст заголовка не чіпаємо: переписати його коротше — рішення власника,
   а не спосіб полагодити верстку.
   21.09.2026 власник таке рішення прийняв — заголовок тепер речення клієнта, під ним ще три рядки
   тексту, а висота героя на телефоні закріплена (420px, під неї мобільний кадр 1280×1280).
   Кегль знову ЗАМІРОМ, на 320/360/390/430: 22px на 320 виводить блок за картинку (12..417 з 420),
   19px вміщається всюди — 320: 33..394, 390: 53..374. Чотири рядки на 390 — ціна довгого речення. */
@media (max-width: 549px) {
  body.home .banner-layers .text-inner {
    padding-left: 16px;
    padding-right: 16px;
  }
  body.home .banner-layers .text-inner h1 {
    font-size: 19px;
    letter-spacing: 0;
    line-height: 1.2;
  }
}