/*
Theme Name: Hello Elementor Child
Theme URI: https://focusmassage.sdlab.ee
Description: Дочерняя тема для разработки FocusMassage (база: Hello Elementor). Весь кастомный CSS разработки — сюда, чтобы не терять при обновлении родительской темы.
Author: SDLab
Author URI: https://sdlab.ee
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

/* ============================================================
   Дизайн-токены прототипа (Focus Estonia / FocusMassage)
   Палитра сконвертирована из OKLCH прототипа lovable.
   ============================================================ */
:root {
	--fm-cream: #FBF9F5;      /* фон */
	--fm-sand: #F2EDE5;       /* вторичный фон / карточки */
	--fm-taupe: #958273;      /* акцент */
	--fm-taupe-dark: #635146; /* акцент тёмный (hover) */
	--fm-ink: #251F1B;        /* основной текст */
	--fm-primary: #1E1815;    /* тёмный (кнопки/заголовки блоков) */
	--fm-muted: #71675F;      /* приглушённый текст */
	--fm-border: #DFD9D0;     /* разделители */
	--fm-font-body: 'Golos Text', -apple-system, 'Segoe UI', sans-serif;
	--fm-font-display: 'Cormorant Garamond', Georgia, serif;
}

body {
	font-family: var(--fm-font-body);
	color: var(--fm-ink);
	background-color: var(--fm-cream);
	font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--fm-font-display);
	font-weight: 400;
	line-height: 1.15;
}

/* ============================================================
   Главная Focus Estonia — helper-классы (вёрстка по прототипу)
   ============================================================ */
.fm-wrap { max-width: 1400px; margin-left: auto; margin-right: auto; }

/* label-стиль (11px, uppercase, разрядка) как .label-xs в прототипе */
.fm-label .elementor-heading-title,
.fm-label { font-family: 'Golos Text', sans-serif !important; font-size: 11px !important;
  font-weight: 400 !important; letter-spacing: .22em !important; text-transform: uppercase !important;
  color: var(--fm-muted) !important; }

.elementor-widget-heading .elementor-heading-title { color: var(--fm-ink); }

/* Hero */
.fm-hero { background: var(--fm-cream); }
.fm-hero .elementor-heading-title { font-family: var(--fm-font-display); font-weight: 300;
  font-size: clamp(2.9rem, 6.2vw, 5.1rem); line-height: 1.02; color: var(--fm-ink); }
.fm-hero-sub p { color: var(--fm-muted); font-size: 14px; line-height: 1.625; max-width: 320px; }
.fm-hero-img img { width: 100%; height: clamp(320px, 42vw, 560px); object-fit: cover; }
.fm-btn-dark .elementor-button { background: var(--fm-primary) !important; color: var(--fm-cream) !important;
  border-radius: 0; padding: 17px 34px; font-size: 14px; letter-spacing: .04em; }
.fm-btn-dark .elementor-button:hover { background: var(--fm-taupe-dark) !important; }

/* Категории Face/Body/Wellness — карточки на всю ширину */
.fm-cats { gap: 0 !important; }
.fm-tile { height: 300px; min-height: 260px; }
/* Плитка в прототипе: иконка 28px (mb-4) -> h2 30px/.12em -> чёрточка 80px (mt-3)
   -> текст 14px (mt-4) -> Discover 11px/.22em (mt-5). */
.fm-tile .elementor-heading-title { font-family: var(--fm-font-display); font-size: 30px !important;
  font-weight: 400; letter-spacing: .12em !important; text-transform: uppercase !important;
  color: var(--fm-cream) !important; line-height: 36px !important; margin: 0; }
.fm-tile .elementor-heading-title::after { content: ""; display: block; width: 80px; height: 1px;
  margin-top: 12px; background: rgba(255,255,255,.5); }
.fm-tile .elementor-widget-heading { margin: 0 !important; }
.fm-tile { gap: 0 !important; justify-content: flex-end !important; }
.fm-tile-icon { margin: 0 0 16px !important; }
.fm-tile-icon svg { width: 28px !important; height: 28px !important; opacity: .9; display: block; }
.fm-tile-icon p { margin: 0 !important; line-height: 0 !important; }
.fm-tile-sub { margin: 16px 0 0 !important; }
.fm-tile-sub p { color: rgba(251,249,245,.85); font-size: 14px; line-height: 22.75px; margin: 0 !important; }
.fm-tile-link p { margin: 0 !important; }
.fm-tile-link { margin: 20px 0 0 !important; }
.fm-tile-link a { color: var(--fm-cream); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: center; gap: 12px; }
.fm-tile-link a:hover { color: #e8e2d8; }
/* Ховер плитки как в прототипе: фон зумится (group-hover:scale-105, 700ms),
   стрелка у Discover уезжает вправо. Зум — на ::after, потому что ::before
   занят оверлеем Elementor (#2A2320, --overlay-opacity .5).
   Порядок слоёв: фон плитки -> ::after (зум, z0) -> ::before (оверлей, z1)
   -> контент (z2). Нужен overflow:hidden, иначе увеличенный фон вылезает. */
.fm-tile { position: relative; z-index: 0; overflow: hidden !important; }
.fm-tile::after { content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: inherit; background-size: cover; background-position: center center;
  background-repeat: no-repeat; transform: scale(1); transition: transform .7s ease; }
.fm-tile:hover::after { transform: scale(1.05); }
.fm-tile::before { z-index: 1; }
.fm-tile > * { z-index: 2; }
.fm-tile-link a svg { width: 14px; height: 14px; transition: transform .3s ease; }
/* штатный Button: обёртка виджета не должна добавлять line-box (иначе +7px) */
.fm-tile-link, .fm-viewall { line-height: 0; }
/* зазор текст<->иконка задан нативно (Icon Spacing = 12/16px) */
.fm-viewall .elementor-button svg { width: 14px; height: 14px; transition: transform .3s ease; }
.fm-viewall:hover .elementor-button svg { transform: translateX(4px); }
.fm-tile:hover .fm-tile-link a svg { transform: translateX(4px); }

/* Signature Treatments */
.fm-tcard h3 .elementor-heading-title, .fm-tcard .elementor-heading-title {
  font-family: var(--fm-font-display); font-size: 18px; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 500; color: var(--fm-ink); }
.fm-timg img { width: 100%; height: 176px; object-fit: cover; }
.fm-tdesc p { color: var(--fm-muted); font-size: 14px; line-height: 1.5; }
.fm-viewall { text-align: center !important; }
/* Прототип: class="label-xs inline-flex items-center gap-4 text-foreground
   transition-colors hover:text-accent" — без подчёркивания, зазор 16px,
   при ховере текст становится taupe. Стрелка уезжает вправо. */
.fm-viewall a { display: inline-flex; align-items: center; gap: 16px;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--fm-ink); text-decoration: none; border-bottom: 0; padding-bottom: 0;
  transition: color .15s ease; }
.fm-viewall a:hover { color: var(--fm-taupe); }
.fm-viewall a svg { transition: transform .3s ease; }
.fm-viewall:hover a svg { transform: translateX(4px); }

/* About */
.fm-about { background: var(--fm-sand); }
.fm-about .elementor-heading-title { font-family: var(--fm-font-display); font-weight: 300;
  font-size: clamp(2rem, 3.2vw, 2.6rem); line-height: 1.12; color: var(--fm-ink); }
.fm-about-sub p { color: var(--fm-muted); font-size: 14px; line-height: 1.625; max-width: 448px; }
.fm-about-img img { width: 100%; height: clamp(280px, 40vw, 420px); object-fit: cover; }
.fm-btn-ghost .elementor-button { background: transparent !important; color: var(--fm-ink) !important;
  border: 1px solid rgba(37,31,27,.3); border-radius: 0; padding: 16px 32px;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; }
.fm-btn-ghost .elementor-button:hover { border-color: var(--fm-taupe); color: var(--fm-taupe) !important; }

/* ============================================================
   Страница About Us (/about) — 3 секции по прототипу about.html:
   1) label + h1 + 2 абзаца + кнопка | фото   (1fr/1fr, pt 160 / pb 64)
   2) полоса 4 фич на sand-фоне               (py 64, px 40)
   3) фото | label + h2 + абзац               (1.2fr/0.8fr, py 80)
   Фичи во 2-й секции — те же, что на главной, но БЕЗ разделителей
   (в прототипе About у них нет divide-x).
   ============================================================ */
.fm-abhero .fm-c2, .fm-abphil .fm-c2 { padding: 0 !important; }
/* у колонок Elementor свой gap 20px — он складывался с margin'ами виджетов
   (прототип: отступы только 24/24/16/32 = margin'ы) + дефолтный padding 10px,
   из-за которого колонки начинались на 10px ниже. Плюс явное вертикальное
   центрирование: настройка align_items у Elementor в CSS не попала. */
.fm-abhero .fm-c2 > .e-con-inner, .fm-abphil .fm-c2 > .e-con-inner { gap: 0 !important; padding: 0 !important; }
.fm-abhero > .e-con-inner, .fm-abphil > .e-con-inner { align-items: center !important; }
.fm-abh1 .elementor-heading-title { font-family: var(--fm-font-display); font-weight: 300;
  font-size: 44.8px !important; line-height: 56px !important; letter-spacing: .16px !important;
  color: var(--fm-ink) !important; margin: 24px 0 0 !important; }
.fm-abhero .fm-label, .fm-abphil .fm-label { margin: 0 !important; }
/* label-xs прототипа: lh 16.5px (у .fm-label он 1.2em = 13.2 → подтягиваем на этой странице) */
.fm-abhero .fm-label .elementor-heading-title,
.fm-abphil .fm-label .elementor-heading-title { line-height: 16.5px !important; }
.fm-abtxt p { font-size: 14px !important; line-height: 22.75px !important; color: var(--fm-muted);
  margin: 24px 0 0 !important; letter-spacing: .16px; }
.fm-abhero .fm-abtxt p { max-width: 448px; }   /* max-w-md только в 1-й секции */
.fm-abtxt + .fm-abtxt p { margin-top: 16px !important; }
.fm-abhero .fm-btn-ghost { margin-top: 32px !important; }
.fm-abhero-img img { width: 100%; height: 480px; object-fit: cover; display: block; }
.fm-abfeat { background: var(--fm-sand) !important; }
/* В прототипе About у фич НЕТ разделителей и px-8 (это дизайн главной) */
.fm-abfeat .fm-feature + .fm-feature { border-left: 0 !important; }
.fm-abfeat .fm-feature > .e-con-inner { padding-left: 0 !important; padding-right: 0 !important; }
.fm-abfeat .fm-ftext p { letter-spacing: .16px; }
.fm-abh2 .elementor-heading-title { font-family: var(--fm-font-display); font-weight: 300;
  font-size: 30px !important; line-height: 37.5px !important; letter-spacing: .16px !important;
  color: var(--fm-ink) !important; margin: 24px 0 0 !important; }

/* ============================================================
   Общий заголовок внутренних страниц (прототип: h1 Cormorant 300,
   uppercase, tracking .05em; text-4xl -> lg:text-5xl = 48/60)
   и тёмная кнопка (bg-primary, текст cream).
   ============================================================ */
.fm-h1u .elementor-heading-title { font-family: var(--fm-font-display); font-weight: 300;
  font-size: 48px !important; line-height: 60px !important; letter-spacing: .05em !important;
  text-transform: uppercase; color: var(--fm-ink) !important; margin: 24px 0 0 !important; }
/* у h1 на Prices/Contact в прототипе нет leading-tight -> строка = 1.0 (48/36) */
.fm-h1tight .elementor-heading-title { line-height: 1 !important; }
.fm-btn-solid .elementor-button { background: var(--fm-primary) !important; color: var(--fm-cream) !important;
  border: 0 !important; border-radius: 0; padding: 16px 32px; font-size: 11px;
  line-height: 16.5px !important; letter-spacing: .22em; text-transform: uppercase; }
.fm-btn-solid .elementor-button:hover { background: var(--fm-taupe-dark) !important; }

/* ============================================================
   Страница Specialists (/specialists): 0.7fr/1.3fr, 3 карточки.
   Карточка: фото 288px (h-72) -> имя label-xs (mt-5) -> роль (mt-2).
   ============================================================ */
.fm-sp .fm-c2, .fm-spcard { padding: 0 !important; }
.fm-sp .fm-label .elementor-heading-title, .fm-prhead .fm-label .elementor-heading-title,
.fm-ct .fm-label .elementor-heading-title { line-height: 16.5px !important; }
.fm-sp .fm-abtxt p, .fm-ct .fm-abtxt p { max-width: 384px; }   /* max-w-sm */
.fm-prhead .fm-abtxt p { max-width: 448px; }                   /* max-w-md */
.fm-sp .fm-c2 > .e-con-inner, .fm-spcard > .e-con-inner { gap: 0 !important; padding: 0 !important; }
.fm-sp .fm-btn-solid { margin-top: 32px !important; }
.fm-spgrid, .fm-ctgrid, .fm-spacc { padding: 0 !important; }   /* дефолтные 10px у вложенного контейнера */
.fm-spgrid > .e-con-inner { display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 32px !important; padding: 0 !important; }
.fm-spcard { min-width: 0 !important; }
.fm-spimg img { width: 100%; height: 288px; object-fit: cover; display: block; }
.fm-sph2 .elementor-heading-title { font-family: var(--fm-font-display) !important; font-size: 11px !important;
  font-weight: 300 !important; line-height: 16.5px !important; letter-spacing: .22em !important;
  text-transform: uppercase !important; color: var(--fm-ink) !important; margin: 20px 0 0 !important; }
.fm-spp p { font-size: 14px !important; line-height: 22.75px !important; color: var(--fm-muted);
  margin: 8px 0 0 !important; letter-spacing: .16px; }
@media (min-width: 1025px) {
  .fm-sp > .e-con-inner > .fm-c2 { flex: 7 1 0 !important; min-width: 0 !important; }
  /* правая колонка: сетка карточек (.fm-spgrid) или аккордеон (.fm-spacc) — 13 из 20.
     Без этого правила аккордеон (flex: 0 1 auto) забирает почти всю ширину,
     а колонка с «The team» сжимается в 0px (проверено 24.09). */
  .fm-sp > .e-con-inner > .fm-spgrid,
  .fm-sp > .e-con-inner > .fm-spacc { flex: 13 1 0 !important; min-width: 0 !important; }
}
@media (max-width: 1024px) {
  .fm-sp > .e-con-inner { flex-direction: column !important; }
  .fm-h1u .elementor-heading-title { font-size: 36px !important; line-height: 45px !important; }
}
@media (max-width: 639px) {
  .fm-spgrid > .e-con-inner { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ============================================================
   Страница Prices (/prices): контейнер 1000px (boxed 920).
   Аккордеон — ШТАТНЫЙ виджет Elementor "Nested Accordion"
   (nested-accordion: поведение, анимация 400ms, иконки, паддинги,
   типографика заданы в настройках виджета), внутри каждой категории —
   ШТАТНЫЙ виджет "Price List" (price-list).
   CSS ниже — только то, чего нет в контролах виджетов:
   цвета из палитры сайта и раскладка строки прайса в одну линию.
   ============================================================ */
.fm-prhead .e-con-inner, .fm-prlist .e-con-inner { gap: 0 !important; }
/* заголовок категории: цвет иконки и «кружок» вокруг неё */
.fm-pracc { --n-accordion-icon-normal-color: var(--fm-muted);
  --n-accordion-icon-hover-color: var(--fm-taupe);
  --n-accordion-icon-active-color: var(--fm-taupe); }
.fm-pracc .e-n-accordion { display: flex; flex-direction: column; }
.fm-pracc .e-n-accordion-item { background: var(--fm-cream); }
.fm-pracc .e-n-accordion-item-title { border-radius: 2px; }        /* штатная рамка виджета */
.fm-pracc .e-n-accordion-item > .e-con { border-top: 0 !important; /* одна рамка на весь блок */
  border-radius: 0 0 2px 2px !important; }
.fm-pracc .e-n-accordion-item-title:hover { background: rgba(149,130,115,.12); }
.fm-pracc .e-n-accordion-item-title-text { color: var(--fm-ink); margin: 0; }
.fm-pracc .e-n-accordion-item-title-icon { display: inline-flex !important; align-items: center !important;
  justify-content: center !important; width: 32px !important; height: 32px !important;
  box-sizing: border-box; border: 1px solid var(--fm-border) !important; border-radius: 9999px; }
/* тело категории: контейнер внутри виджета без дефолтного padding */
.fm-pracc .e-n-accordion-item-content > .e-con { padding: 0 !important; }
/* строки прайса: название слева, цена справа, описание — ПОД названием.
   Grid 2×2 (title | price / description на всю ширину) вместо одной линии
   «title | description | price»: описание получает всю ширину строки и перестаёт
   рваться на 2–3 строки в узкой средней колонке (запрос оператора 24.09). */
.fm-prl .elementor-price-list { list-style: none; margin: 0; padding: 0; }
.fm-prl .elementor-price-list li { border-top: 1px solid var(--fm-border); }
.fm-prl .elementor-price-list li > a.elementor-price-list-item { display: block;
  padding: 18px 24px; text-decoration: none; }
.fm-prl .elementor-price-list-text { display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; row-gap: 5px;
  align-items: baseline; }
.fm-prl .elementor-price-list-header { display: contents !important; }
/* max-width:80% у плагина (.elementor-price-list .elementor-price-list-item .elementor-price-list-title)
   специфичнее наших двух классов и грузится позже — перебиваем !important. */
.fm-prl .elementor-price-list-title { grid-column: 1; grid-row: 1; color: var(--fm-ink);
  max-width: 100% !important; transition: color .15s ease; }
.fm-prl .elementor-price-list li > a:hover .elementor-price-list-title { color: var(--fm-taupe); }
/* цена — по центру строки по вертикали: растянута на обе строки грида
   (название + описание) и выровнена по центру своей области */
.fm-prl .elementor-price-list-price { grid-column: 2; grid-row: 1 / span 2;
  align-self: center; justify-self: end; text-align: right; color: var(--fm-ink); }
/* описание — только под названием (колонка 1), чтобы текст не заходил
   под колонку цены; раньше было 1 / -1 на всю ширину */
.fm-prl .elementor-price-list-description { grid-column: 1; grid-row: 2;
  margin: 0 !important; color: var(--fm-muted); }
.fm-prl .elementor-price-list-separator { display: none; }
@media (max-width: 1024px) {
  .fm-pracc .e-n-accordion-item-title { padding: 18px 20px; }
  .fm-pracc .e-n-accordion-item-title-text { font-size: 20px !important; line-height: 26px !important; }
  .fm-prl .elementor-price-list li > a.elementor-price-list-item { padding: 16px 20px; }
  .fm-prl .elementor-price-list-title { font-size: 16px !important; line-height: 24px !important; }
}

/* ============================================================
   Страница Contact (/contact): 0.8fr/1.2fr.
   Слева: контакты (иконка 16px accent + текст, зазор 16/24)
   и соцсети; справа: блок-«карта» на sand + фото, 2 колонки.
   ============================================================ */
.fm-ct .fm-c2 { padding: 0 !important; }
.fm-ct .fm-c2 > .e-con-inner, .fm-ctgrid .fm-c2 > .e-con-inner { gap: 0 !important; padding: 0 !important; }
.fm-ctlist { margin-top: 40px !important; }            /* mt-10 */
/* Контактные строки — ШТАТНЫЙ виджет Elementor "Icon List" (icon-list):
   размер/отступы/цвет иконки заданы в его настройках (иконки — SVG Lucide,
   они stroke-based, поэтому цвет задаём в stroke, а не в fill). */
.fm-ctlist .elementor-icon-list-text { font-size: 14px; line-height: 20px; color: var(--fm-ink); }
.fm-ctlist .elementor-icon-list-icon { line-height: 1; align-self: flex-start; }
.fm-ctlist .elementor-icon-list-icon svg { stroke: var(--fm-taupe); margin-top: 2px; }
.fm-ctlist .elementor-icon-list-item a:hover .elementor-icon-list-text,
.fm-ctlist .elementor-icon-list-item a:hover .elementor-icon-list-icon svg { color: var(--fm-taupe); stroke: var(--fm-taupe); }
.fm-ctsocialw { margin-top: 40px !important; }
.fm-ctsocial { display: flex; gap: 20px; color: var(--fm-muted); }
.fm-ctsocial a { display: inline-flex; color: inherit; transition: color .15s ease; }
.fm-ctsocial a:hover { color: var(--fm-taupe); }
.fm-ctgrid > .e-con-inner { display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 24px !important; padding: 0 !important; }
.fm-ctmapcol, .fm-ctimgcol { padding: 0 !important; min-width: 0 !important; }
.fm-ctmapcol > .e-con-inner, .fm-ctimgcol > .e-con-inner { padding: 0 !important; gap: 0 !important; }
.fm-ctmap { position: relative; display: flex; align-items: center; justify-content: center;
  background: var(--fm-sand); height: 403px; }
.fm-ctmap .fm-ctpin { color: rgba(37,31,27,.7); }
.fm-ctmaplabel { position: absolute; left: 0; right: 0; bottom: 24px; text-align: center;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--fm-muted); }
.fm-ctimg img { width: 100%; height: 403px; object-fit: cover; display: block; }
@media (min-width: 1025px) {
  .fm-ct > .e-con-inner > .fm-c2 { flex: 8 1 0 !important; min-width: 0 !important; }
  .fm-ct > .e-con-inner > .fm-ctgrid { flex: 12 1 0 !important; min-width: 0 !important; }
}
@media (max-width: 1024px) {
  .fm-ct > .e-con-inner { flex-direction: column !important; }
  .fm-ctmap, .fm-ctimg img { height: 288px; }
}
.fm-abphil-img img { width: 100%; height: 400px; object-fit: cover; display: block; }
@media (min-width: 1025px) {
  /* прототип: lg:grid-cols-[minmax(0,1.2fr)_minmax(0,0.8fr)] -> 763 / 509 */
  .fm-abphil > .e-con-inner > .fm-c2:first-child { flex: 6 1 0 !important; }
  .fm-abphil > .e-con-inner > .fm-c2:last-child  { flex: 4 1 0 !important; }
}
@media (max-width: 1024px) {
  /* колонки в столбик (в прототипе на мобильном одна колонка) */
  .fm-abhero, .fm-abhero > .e-con-inner,
  .fm-abphil, .fm-abphil > .e-con-inner { flex-direction: column !important; }
  /* h1 прототипа на мобильном: text-4xl = 36px/45px */
  .fm-abh1 .elementor-heading-title { font-size: 36px !important; line-height: 45px !important; }
  .fm-abhero-img img { height: 320px; }
  .fm-abphil-img img { height: 280px; }
}

/* Features 4 колонки — в прототипе: grid-cols-4 gap-10 divide-x,
   внутри flex gap-5 (иконка 64px слева от текста), px-8 у средней части. */
.fm-features { gap: 40px !important; }
.fm-feature { gap: 0 !important; padding: 0 !important; }
.fm-feature > .e-con-inner { gap: 20px !important; align-items: flex-start !important;
  padding: 0 32px !important; }
.fm-feature:first-child > .e-con-inner { padding-left: 0 !important; }
.fm-feature:last-child > .e-con-inner { padding-right: 0 !important; }
.fm-feature + .fm-feature { border-left: 1px solid var(--fm-border); }
.fm-icon { flex: 0 0 auto !important; margin: 0 !important; width: auto !important; opacity: .7; }
.fm-icon svg { width: 64px !important; height: 64px !important; stroke-width: .375 !important; display: block; }
.fm-icon p { margin: 0 !important; line-height: 0 !important; }
/* штатный Icon-виджет: у .elementor-icon-wrapper line-height даёт лишние ~6px под иконкой */
.fm-icon .elementor-icon-wrapper, .fm-tile-icon .elementor-icon-wrapper { line-height: 0; }
.fm-feature .elementor-heading-title { font-family: var(--fm-font-display) !important; font-size: 11px !important;
  font-weight: 300 !important; line-height: 16.5px !important; letter-spacing: .22em !important;
  text-transform: uppercase !important; color: var(--fm-ink) !important;
  margin: 0 !important; }
.fm-feature .fm-ftext p { color: var(--fm-muted); font-size: 14px; line-height: 1.625; margin: 8px 0 0 !important; }

/* Колонки.
   В прототипе это grid с gap (5 кол. gap 24, 4 кол. gap 40, 3 кол. gap 0).
   Прежние width: N% + gap у родителя давали сумму >100% и горизонтальный
   overflow (scrollWidth 1495 при viewport 1425). Тянем колонки поровну
   от базиса 0 — при flex-контейнере это ровно то же, что 1fr в grid. */
.fm-c2, .fm-c3, .fm-c4, .fm-c5 {
  width: auto !important; min-width: 0 !important; flex: 1 1 0 !important;
}
@media (min-width: 1025px) {
  /* About в прототипе: grid-cols-[0.8fr_1.2fr] gap-16 -> 502px / 754px */
  .fm-about .fm-c2:first-child { flex: 4 1 0 !important; }
  .fm-about .fm-c2:last-child  { flex: 6 1 0 !important; }
}
@media (max-width: 1024px) {
  .fm-c2, .fm-c3, .fm-c4, .fm-c5 { width: 100% !important; flex: 0 0 100% !important; }
  .fm-cats .fm-tile { height: 220px; }
}
@media (min-width: 1025px) and (max-width: 1300px) { .fm-tile { height: 280px; } }

/* Header поверх hero (как в макете): прозрачный, абсолютный */
.fm-header { position: absolute !important; top: 0; left: 0; right: 0; width: 100%; z-index: 1000; background: transparent !important; }
.fm-header, .fm-hact, .fm-hnav { align-items: center !important; }
.fm-header{position:static !important;}
/* Sticky footer: если контента меньше высоты окна, футер прижат к низу окна.
   Правило общее для ВСЕГО сайта, включая новые страницы. В теме две структуры:
   1) Elementor-страницы: body > div[data-elementor-type="wp-page"];
   2) страницы шаблонов WP (кабинет /customer-cabinet/, /booking/, 404, поиск,
      архивы): body > main#content.site-main (и .site-content у архивных шаблонов).
   Растягиваем flex-grow именно обёртку контента; header/footer не сжимаем и не трогаем.
   Раньше правило знало только структуру (1) — из-за этого на /customer-cabinet/ при
   высоком окне (и на 404 всегда) под футером оставалась полоса фона. */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body > div[data-elementor-type="wp-page"],
body > main#content,
body > #content,
body > .site-content,
body > #primary,
body > .content-area { flex: 1 0 auto; }
body > header, body > footer { flex-shrink: 0; }
.fm-hact p, .fm-hact .elementor-widget-text-editor p { margin: 0 !important; line-height: 1 !important; }
.fm-hact { align-items: center !important; }

/* ===== Desktop-меню: линия слева-направо при ховере =====
   Линия рисуется ::after'ом и растёт из левого края (transform-origin: left),
   не влияя на поток. У активного пункта (current-menu-item / ancestor / active)
   линия остаётся видимой. Только десктоп: на мобильном это выпадающая панель.
   left/right = 14px — горизонтальный padding пункта, т.е. линия ровно под текстом. */
@media (min-width: 1025px) {
  .fm-hnav .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item::after {
    content: ""; position: absolute; left: 14px; right: 14px; bottom: 13px; height: 1px;
    background: currentColor; transform: scaleX(0); transform-origin: left center;
    transition: transform .3s ease; }
  .fm-hnav .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item:hover::after,
  .fm-hnav .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item:focus::after,
  .fm-hnav .elementor-nav-menu--main .elementor-nav-menu > li.current-menu-item > a.elementor-item::after,
  .fm-hnav .elementor-nav-menu--main .elementor-nav-menu > li.current-menu-parent > a.elementor-item::after,
  .fm-hnav .elementor-nav-menu--main .elementor-nav-menu > li.current-menu-ancestor > a.elementor-item::after,
  .fm-hnav .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item-active::after {
    transform: scaleX(1); }
}


/* ===== Adaptive header (mobile) ===== */
@media (max-width: 1024px){
  .fm-header { padding: 12px 20px !important; }
  .fm-hlogo { width: auto !important; flex: 1 1 auto !important; }
  .fm-hnav  { width: auto !important; flex: 0 0 auto !important; margin-left: auto !important; }
  .fm-hact  { display: none !important; }              /* EN + BOOK NOW уходят в мобильное меню */
  .fm-hnav .elementor-menu-toggle { background: transparent !important; color: #251F1B !important; font-size: 22px !important; }
  /* hero-заголовок помещается */
  .fm-hero .elementor-heading-title { font-size: clamp(2.3rem, 9vw, 3.3rem) !important; }
  .fm-hero { padding-top: 48px !important; }
  .fm-hero-img img { height: 300px !important; }
}

/* --- mobile stacking of content columns --- */
@media (max-width: 1024px){
  .fm-hero, .fm-cats, .fm-features { flex-direction: column !important; }
  .fm-treat > .e-con { flex-direction: column !important; }
  .fm-about .fm-wrap > .e-con { flex-direction: column !important; }
  .fm-c2, .fm-c3, .fm-c4, .fm-c5 { width: 100% !important; flex: 0 0 100% !important; }
  .fm-cats .fm-tile { height: 240px !important; }
}

/* 1px гамбургер (вместо толстого eicon-menu-bar) */
.fm-hnav .elementor-menu-toggle { position: relative !important; width: 26px !important; height: 18px !important; padding: 0 !important; border: 0 !important; }
.fm-hnav .elementor-menu-toggle svg { display: none !important; }
.fm-hnav .elementor-menu-toggle::before {
	content: ""; position: absolute; left: 0; top: 2px; width: 26px; height: 1px;
	background: #251F1B; box-shadow: 0 6px 0 #251F1B, 0 12px 0 #251F1B; transition: transform .2s;
}
.fm-hnav .elementor-menu-toggle::after {
	content: ""; position: absolute; left: 0; top: 8px; width: 0; height: 1px; background: #251F1B;
	opacity: 0; transition: all .2s;
}
.fm-hnav .elementor-menu-toggle.elementor-active::before { top: 8px; transform: rotate(45deg); box-shadow: none; }
.fm-hnav .elementor-menu-toggle.elementor-active::after { width: 26px; opacity: 1; top: 8px; transform: rotate(-45deg); }

/* mobile: скрыть десктоп-меню, центрировать гамбургер */
@media (max-width: 1024px){
  .fm-hnav .elementor-nav-menu--main .elementor-nav-menu { display: none !important; }
  .fm-hnav .elementor-menu-toggle { display: inline-flex !important; align-items: center !important; justify-content: center !important; align-self: center !important; }
  .fm-hlogo, .fm-hnav { display: flex !important; align-items: center !important; }
}

/* ===== Mobile burger menu (панель как в макете) ===== */
@media (max-width: 1024px){
  .fm-hnav .elementor-nav-menu__container,
  .fm-hnav .elementor-nav-menu__container .elementor-nav-menu--dropdown{ background:#FBF9F5 !important; border:none !important; padding:0 !important; }
  .fm-hnav .elementor-nav-menu__container ul.elementor-nav-menu{ list-style:none; margin:0; padding:20px 26px 14px !important; }
  .fm-hnav .elementor-nav-menu__container li,.fm-hnav .elementor-nav-menu__container .elementor-item{
    color:#4F4B47 !important; font-family:'Golos Text',sans-serif !important; font-size:13px !important;
    letter-spacing:.18em !important; text-transform:uppercase !important; font-weight:400 !important; text-align:left !important;
  }
  .fm-hnav .elementor-nav-menu__container .elementor-item{ padding:16px 0 !important; border-bottom:1px solid rgba(37,31,27,.06) !important; line-height:1.2 !important; display:block !important; }
  .fm-hnav .elementor-nav-menu__container .sub-menu{ padding:4px 0 8px 22px !important; margin:0 0 6px !important; border-left:1px solid rgba(37,31,27,.14) !important; }
  .fm-hnav .elementor-nav-menu__container .sub-menu .elementor-item{ padding:11px 0 !important; border-bottom:none !important; font-size:12px !important; letter-spacing:.2em !important; color:#71675F !important; }
  .fm-hnav .elementor-nav-menu__container .menu-item.booknow-btn a{ display:block !important; margin:22px 0 10px !important; padding:16px !important; background:#958273 !important; color:#F6F4F0 !important; text-align:center !important; text-transform:uppercase !important; letter-spacing:.18em !important; font-size:12px !important; font-weight:400 !important; border:none !important; }
}
.elementor-nav-menu--main .menu-item.booknow-btn{ display:none !important; }
/* переключатель языка: скрыть в десктоп-меню, показать вверху мобильной панели */
.elementor-nav-menu--main .menu-item.lang-switch{ display:none !important; }
@media (max-width: 1024px){
  .fm-hnav .elementor-nav-menu__container .menu-item.lang-switch .elementor-item{
    padding:14px 0 12px !important; border-bottom:1px solid rgba(37,31,27,.1) !important;
    color:#4F4B47 !important; font-size:12px !important; letter-spacing:.22em !important;
  }
  .fm-hnav .elementor-nav-menu__container .menu-item.lang-switch .elementor-item::after{ content:"▾"; margin-left:6px; font-size:10px; color:#958273; }
}

/* ===== Мобильное меню: финальная доводка (панель на всю ширину, пункты влево) ===== */
@media (max-width: 1024px){
  .fm-hnav .elementor-nav-menu__container{
    position:fixed!important; top:84px!important; left:0!important; right:0!important; width:100%!important;
    max-height:calc(100vh - 84px)!important; overflow-y:auto!important;
    background:#FBF9F5!important; border:none!important; box-shadow:0 20px 40px rgba(0,0,0,.06)!important;
  }
  .fm-hnav .elementor-nav-menu__container ul.elementor-nav-menu{ list-style:none!important; margin:0!important; padding:20px 26px 16px!important; width:100%!important; }
  .fm-hnav .elementor-nav-menu__container li{ text-align:left!important; width:100%!important; }
  .fm-hnav .elementor-nav-menu__container .elementor-item{
    display:block!important; width:100%!important; text-align:left!important;
    color:#4F4B47!important; font-family:'Golos Text',sans-serif!important; font-size:13px!important;
    letter-spacing:.18em!important; text-transform:uppercase!important; font-weight:400!important;
    padding:16px 0!important; border-bottom:1px solid rgba(37,31,27,.06)!important; line-height:1.2!important;
  }
  .fm-hnav .elementor-nav-menu__container .sub-menu{ padding:4px 0 8px 22px!important; margin:0 0 6px!important; border-left:1px solid rgba(37,31,27,.14)!important; display:block!important; }
  .fm-hnav .elementor-nav-menu__container .sub-menu .elementor-item{ padding:11px 0!important; border-bottom:none!important; font-size:12px!important; letter-spacing:.2em!important; color:#71675F!important; }
  .fm-hnav .elementor-nav-menu__container .menu-item.lang-switch .elementor-item{ padding:14px 0 12px!important; border-bottom:1px solid rgba(37,31,27,.1)!important; font-size:12px!important; }
  .fm-hnav .elementor-nav-menu__container .menu-item.lang-switch .elementor-item::after{ content:"▾"; margin-left:6px; font-size:10px; color:#958273; }
  .fm-hnav .elementor-nav-menu__container .menu-item.booknow-btn a{ display:block!important; width:100%!important; box-sizing:border-box!important; margin:22px 0 10px!important; padding:16px!important; background:#958273!important; color:#F6F4F0!important; text-align:center!important; text-transform:uppercase!important; letter-spacing:.18em!important; font-size:12px!important; font-weight:400!important; border:none!important; }
}
@media (max-width: 1024px){
  .fm-header{ position:relative !important; z-index:99999 !important; }
  .fm-hnav .elementor-nav-menu__container{ z-index:99999 !important; }
}
@media(max-width:1024px){ .fm-header{ justify-content:space-between !important; } .fm-hact{display:none!important;} }
@media (max-width: 1024px){
  .fm-hlogo{ width:auto !important; flex:0 0 auto !important; }
  .fm-hnav{ width:auto !important; flex:0 0 auto !important; margin-left:auto !important; }
}
@media (max-width: 1024px){
  .fm-hnav .elementor-nav-menu__container .menu-item-has-children > .elementor-item{ display:flex !important; align-items:center !important; }
  .fm-hnav .elementor-nav-menu__container .menu-item-has-children > .elementor-item .sub-arrow{ display:inline-flex !important; margin-left:auto !important; }
}
.fm-hero-img img{ width:100% !important; height:100% !important; object-fit:cover !important; }
.fm-hero{ min-height:680px; }
.fm-cat-img img{ width:100% !important; height:260px !important; object-fit:cover !important; }
.fm-cat{ background:#FAF8F4; }
/* Прозрачный absolute-хедер поверх hero */
.fm-header{ position:absolute!important; top:0!important; left:0!important; right:0!important; width:100%!important; background:transparent!important; z-index:900!important; }
.fm-hero{ padding-top:96px!important; }
/* Прозрачный overlay-хедер — ТОЛЬКО на главной (body.home); остальные — в потоке */
/* Внутренние страницы (прототип about.html): хедер fixed — контент начинается от y=0,
   отступ даёт padding первой секции (pt 160/128). Кремовый 95% + blur 8px + бордер снизу. */
body:not(.home) .fm-header{ position:fixed !important; top:0 !important; left:0 !important; right:0 !important;
  z-index:1000 !important; background:rgba(251,249,245,.95) !important;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--fm-border); }
body.home .fm-header{ position:absolute !important; top:0 !important; left:0 !important; right:0 !important; width:100% !important; background:transparent !important; z-index:900 !important; }

/* ============================================================
   Секция «What our clients say» + «@focusestonia» (из прототипа)
   Прототип: <section class="border-t border-border bg-sand/60">,
   grid max-w-1400 gap-12 py-16 px-10, колонки 0.7fr / 1.3fr (445 / 827),
   Instagram — 6 квадратов gap-16.
   ============================================================ */
.fm-testi { border-top: 1px solid var(--fm-border); }
.fm-testi > .e-con-inner { gap: 48px !important; }
.fm-tcol { flex: 7 1 0 !important; min-width: 0 !important; width: auto !important; }
.fm-icol { flex: 13 1 0 !important; min-width: 0 !important; width: auto !important; }
.fm-quote { margin-top: 24px !important; }             /* mt-6 */
/* Виджет Testimonial Carousel (Pro) — оформление под прототип:
   кавычка «“» + цитата + подпись автора + точки пагинации (mt-8). */
.fm-quote .elementor-testimonial { display: grid;
  grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; /* flex gap-4 */
  align-items: start; text-align: left; }
.fm-quote .elementor-testimonial::before { content: "\201C"; grid-column: 1; grid-row: 1 / span 2;
  font-family: var(--fm-font-display); font-size: 48px; line-height: 1;
  color: var(--fm-taupe); }                            /* text-5xl text-accent */
.fm-quote .elementor-testimonial__content,
.fm-quote .elementor-testimonial__footer { grid-column: 2; }
.fm-quote .elementor-testimonial__content { display: block; }
/* 3 класса, чтобы перебить плагинный .elementor-widget-testimonial-carousel .elementor-testimonial__text
   (font-size 1.3em / italic / lh 1.5) */
.fm-quote .elementor-testimonial .elementor-testimonial__text { max-width: 384px; font-size: 14px;
  line-height: 1.625; font-style: normal; color: var(--fm-ink); }  /* max-w-sm text-sm */
.fm-quote .elementor-testimonial .elementor-testimonial__name { display: block; margin-top: 20px;
  font-size: 11px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase;
  color: var(--fm-muted); }                            /* label-xs mt-5 */
.fm-quote .elementor-testimonial .elementor-testimonial__name::before { content: "\2013\00a0"; }
.fm-quote .elementor-testimonial__title,
.fm-quote .elementor-testimonial__image { display: none; }
/* плагин даёт footer margin-top 25px и padding 20px у слайда — в прототипе их нет */
.fm-quote .elementor-testimonial__footer { margin-top: 0 !important; }
.fm-quote .swiper-slide { padding: 0 !important; }
/* плагин: .elementor-main-swiper{width:95%} + padding-bottom 40px под абсолютную
   пагинацию. У нас пагинация статичная → на всю ширину колонки и без лишних 40px. */
.fm-quote .elementor-main-swiper { width: 100% !important; margin-left: 0 !important;
  margin-right: 0 !important; padding-bottom: 0 !important; }
.fm-quote .swiper-pagination { position: static; display: flex; gap: 8px;
  margin-top: 32px; width: auto; }                     /* mt-8 flex gap-2 */
.fm-quote .swiper-pagination-bullet { width: 6px; height: 6px; margin: 0 !important;
  background: rgba(37,31,27,.25); opacity: 1; }
.fm-quote .swiper-pagination-bullet-active { background: var(--fm-ink); }
.fm-ig-grid { margin-top: 24px !important; }           /* mt-6 */
.fm-ig-grid > .e-con-inner { gap: 16px !important; }   /* gap-4 */
.fm-ig-grid .fm-ig-img { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; }
.fm-ig-img img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }

/* ============================================================
   Footer: сетка прототипа — 5 колонок, brand col-span-2,
   Quick Links + Information делят один track (gap 32).
   ============================================================ */
.fm-footer .fm-fwrap > .e-con-inner { display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.fm-footer .fm-fwrap > .e-con-inner > .fm-fcol { flex: none !important; min-width: 0 !important; width: auto !important; }
.fm-footer .fm-fwrap > .e-con-inner > .fm-fcol:first-child { grid-column: span 2 !important; }
.fm-footer .fm-fwrap > .e-con-inner > .fm-fcol-split { min-width: 0 !important; }
.fm-footer .fm-fcol.fm-fcol-split > .e-con-inner { display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 32px !important; }
.fm-fcol-split > .e-con-inner > .fm-fcol {
  flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; }
.fm-footer-bottom .fm-fwrap > .e-con-inner {
  border-top: 1px solid rgba(255,255,255,.1);
  flex-direction: row; align-items: baseline; justify-content: space-between; }
.fm-footer-bottom p { font-size: 12px; opacity: .5; margin: 0; }
.fm-footer-bottom p a { color: inherit; text-decoration: none; }
.fm-footer-bottom p a:hover { text-decoration: underline; }
@media (max-width: 767px) {
  .fm-footer-bottom .fm-fwrap > .e-con-inner { flex-direction: column; gap: 6px; align-items: flex-start; }
}

/* label-стиль должен работать и внутри text-editor (у него есть свой <p>) */
.fm-label p { font-family: 'Golos Text', sans-serif !important; font-size: 11px !important;
  font-weight: 400 !important; letter-spacing: .22em !important; text-transform: uppercase !important;
  color: var(--fm-muted) !important; margin: 0 !important; }

/* ============================================================
   Нормализация дефолтного padding контейнеров Elementor.
   Вложенный контейнер по умолчанию получает padding 10px
   (горизонталь уходит на внешний .e-con, вертикаль — на .e-con-inner),
   из-за чего контент «съезжал» на 10px от макета прототипа.
   ============================================================ */
.fm-tcard, .fm-ftext, .fm-ig-grid, .fm-tcol, .fm-icol,
.fm-c2, .fm-fcol, .fm-fcol-split { padding: 0 !important; }
.fm-tcard > .e-con-inner, .fm-ftext > .e-con-inner, .fm-ig-grid > .e-con-inner,
.fm-tcol > .e-con-inner, .fm-icol > .e-con-inner, .fm-fcol > .e-con-inner,
.fm-fcol-split > .e-con-inner { padding: 0 !important; }
.fm-feature > .e-con-inner { padding-top: 0 !important; padding-bottom: 0 !important; }

/* features: 4 равных трека по 300px; border-box обязателен, иначе
   flex-basis:0 считается от content-box и колонки выходят разной ширины */
.fm-feature { box-sizing: border-box !important; }
.fm-ftext { flex: 1 1 auto !important; min-width: 0 !important; }
.fm-ftext > .e-con-inner { gap: 0 !important; }

/* ============================================================
   Hero: колонка текста как в прототипе — max-w-sm (384px), lg:w-[35%],
   без дефолтного padding 10px; h1 тянется на всю колонку.
   ============================================================ */
.fm-hero-col { width: 35% !important; max-width: 384px !important; padding: 0 !important; }
.fm-hero-col .elementor-widget__width-initial { width: 100% !important; flex: 0 1 auto !important; }

/* ============================================================
   ВЕРТИКАЛЬНЫЙ РИТМ ПО ПРОТОТИПУ.
   Значения сняты замером обеих страниц (CDP, ширина 1440).
   Прототип на Tailwind, отступы кратны 4px: mt-5=20, mt-2=8, mt-6=24,
   mt-8=32, mt-12=48, py-20=80, py-16=64.
   ВАЖНО: у контейнеров Elementor свой flex-gap (по умолчанию 20px),
   поэтому везде, где отступ задаётся margin'ом, gap обнуляется —
   иначе 20px складываются с margin и секция «пухнет».
   ============================================================ */

/* --- Hero --------------------------------------------------- */
.fm-hero-col { gap: 0 !important; margin-top: 100px !important; margin-bottom: 0 !important; }
.fm-hero-col > .elementor-element { margin: 0 !important; }
.fm-hero-col > .elementor-element:nth-child(2) { margin-top: 20px !important; }   /* h1, mt-5  */
.fm-hero-col > .fm-hero-sub { margin-top: 24px !important; }                       /* mt-6     */
.fm-hero-col > .fm-hero-btn { margin-top: 32px !important; }                       /* mt-8     */
.fm-hero-col > .fm-hero-scroll { margin-top: 48px !important; margin-bottom: 100px !important; }
.fm-hero-label .elementor-heading-title, .fm-hero-label { font-size: 11px !important;
  line-height: 16.5px !important; letter-spacing: .22em !important; text-transform: uppercase !important;
  color: var(--fm-muted) !important; font-family: 'Golos Text', sans-serif !important; }
.fm-hero-col h1.elementor-heading-title { font-size: 60px !important; line-height: 57.6px !important;
  letter-spacing: 2.4px !important; }
.fm-hero-sub p { font-size: 14px !important; line-height: 22.75px !important;
  max-width: 320px; margin: 0 !important; }
.fm-hero-btn .elementor-button { padding: 16px 32px !important; font-size: 11px !important;
  line-height: 16.5px !important; }
.fm-hero-scroll p { margin: 0 !important; font-size: 11px !important; line-height: 16.5px !important; }

/* --- Signature Treatments ----------------------------------- */
.fm-treat > .e-con-inner { gap: 0 !important; }
.fm-treat > .e-con-inner > .elementor-widget-heading > .elementor-heading-title {
  font-size: 11px !important; line-height: 16.5px !important;
  letter-spacing: .22em !important; text-transform: uppercase !important; }
.fm-trow { margin-top: 48px !important; }                                         /* mt-12 */
.fm-tcard > .e-con-inner { gap: 0 !important; }
.fm-tcard .elementor-widget-image { margin: 0 !important; }
.fm-tcard .elementor-widget-heading { margin: 20px 0 0 !important; }               /* mt-5 */
.fm-tcard .elementor-heading-title { font-size: 18px !important; line-height: 28px !important; }
.fm-tcard .fm-tdesc { margin: 8px 0 0 !important; }                                /* mt-2 */
.fm-tcard .fm-tdesc p { font-size: 14px !important; line-height: 22.75px !important; margin: 0 !important; }
/* Ховер карточки: лёгкое засветление картинки.
   Прототип: class="group" на <a>, у img "transition-opacity duration-500
   group-hover:opacity-85" — при opacity .85 сквозь фото просвечивает кремовый фон. */
.fm-tcard img { transition: opacity .5s ease; }
.fm-tcard:hover img { opacity: .85; }
.fm-viewall { margin-top: 48px !important; }
.fm-viewall p { margin: 0 !important; }

/* --- About -------------------------------------------------- */
.fm-arow { align-items: center !important; }
.fm-arow > .fm-c2 > .e-con-inner { gap: 0 !important; padding: 0 !important; }
.fm-arow > .fm-c2 > .e-con-inner > * { margin: 0 !important; }
.fm-arow > .fm-c2 > .e-con-inner > .fm-label { margin-bottom: 24px !important; }
.fm-about .fm-label .elementor-heading-title { font-size: 11px !important; line-height: 16.5px !important; }
.fm-about .elementor-heading-title { font-size: 41.6px !important; line-height: 52px !important; }
.fm-arow > .fm-c2 > .e-con-inner > .fm-about-sub { margin-top: 24px !important; }
.fm-about-sub p { margin: 0 !important; }
.fm-arow > .fm-c2 > .e-con-inner > .fm-btn-ghost { margin-top: 32px !important; }
.fm-btn-ghost .elementor-button { padding: 16px 32px !important; font-size: 11px !important;
  line-height: 16.5px !important; }

/* --- Testimonials + Instagram ------------------------------- */
.fm-tcol > .e-con-inner, .fm-icol > .e-con-inner { gap: 0 !important; }
.fm-tcol > .e-con-inner > .elementor-element, .fm-icol > .e-con-inner > .elementor-element { margin: 0 !important; }
.fm-tcol > .e-con-inner > .fm-quote, .fm-icol > .e-con-inner > .fm-ig-grid { margin-top: 24px !important; }

/* --- Footer -------------------------------------------------
   Прототип: логотип -> подпись mt-6 (24); контакты — строки по 16px;
   списки ссылок — заголовок + mt-4 (16), пункты по 10px (space-y-2.5);
   Follow Us — иконки + кнопка. */
.fm-footer .elementor-widget, .fm-footer-bottom .elementor-widget { margin: 0 !important; }
.fm-footer p, .fm-footer ul, .fm-footer li { margin: 0 !important; }
.fm-footer p { font-size: 14px !important; line-height: 20px !important; }
.fm-footer .fm-fcol > .e-con-inner, .fm-fcol-split > .e-con-inner { gap: 0 !important; }
.fm-footer .fm-fwrap > .e-con-inner > .fm-fcol:first-child > .e-con-inner > * + * { margin-top: 24px !important; }
.fm-footer .fm-fwrap > .e-con-inner > .fm-fcol:nth-child(2) > .e-con-inner > * + * { margin-top: 16px !important; }
.fm-fcol-split .fm-fcol > .e-con-inner > * + * { margin-top: 10px !important; }
.fm-fcol-split .fm-fcol > .e-con-inner > .elementor-widget-heading + * { margin-top: 16px !important; }
.fm-footer .fm-fwrap > .e-con-inner > .fm-fcol:last-child > .e-con-inner > * + * { margin-top: 16px !important; }
.fm-footer .fm-fwrap > .e-con-inner > .fm-fcol:last-child > .e-con-inner > .elementor-widget-button { margin-top: 24px !important; }

/* --- Footer: точная сверка с прототипом (правка 2026-09-16) -------------
   Прототип lovable: заголовки колонок — Cormorant 11/300, opacity .6;
   описание — .7, контакты и ссылки — .8; line-height описания 22.75px.
   Elementor не умеет opacity — держим здесь, привязка по element id. */
.fm-footer .elementor-element-d3d6960,
.fm-footer .elementor-element-70e21bd,
.fm-footer .elementor-element-4fc1ad3 { opacity: .6; }
.fm-footer .elementor-element-42deff2 { opacity: .7; }
.fm-footer .elementor-element-42deff2 p { line-height: 22.75px !important; }
.fm-footer .elementor-element-dab01b6,
.fm-footer .elementor-element-faf9c8f,
.fm-footer .elementor-element-6756bef,
.fm-footer .elementor-element-7ff6d0b,
.fm-footer .elementor-element-e82dbdc,
.fm-footer .elementor-element-a214d40,
.fm-footer .elementor-element-0d78449,
.fm-footer .elementor-element-82cf0a3,
.fm-footer .elementor-element-3192752 { opacity: .8; }
.fm-footer-bottom p { line-height: 16px !important; letter-spacing: .16px; }
/* иконки контактов не сжимать: в прототипе у них shrink-0 */
.fm-footer .elementor-widget-text-editor svg { flex: none; }

/* Соцсети: Lucide 16px в кругах 36px с рамкой white/20 (как в прототипе).
   Заменили Elementor social-icons (FA solid 25px в кругах 50px с brand-фоном). */
.fm-social { display: flex; gap: 12px; }
.fm-social a { display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.2); border-radius: 9999px;
  color: #F6F4F0; text-decoration: none; transition: border-color .2s ease; }
.fm-social a:hover { border-color: rgba(255,255,255,.6); }
.fm-social svg { width: 16px; height: 16px; display: block; }

/* ============================================================
   АДАПТИВ ≤1024px — в одну колонку, без горизонтального скролла.
   Важно: у контейнеров Elementor flex-direction применяется к .e-con-inner
   (e-con-boxed) либо к самому элементу (e-con-full) — прежние правила
   вида `.fm-treat > .e-con` / `.fm-features { flex-direction: column }`
   не срабатывали, из-за чего на мобильном был scrollWidth 1611 при 375.
   И ещё: в column-контейнере flex-basis: 100% — это ВЫСОТА, поэтому
   колонки переводим на `flex: 0 0 auto` + `width: 100%`.
   ============================================================ */
@media (max-width: 1024px) {
  .fm-c2, .fm-c3, .fm-c4, .fm-c5 { flex: 0 0 auto !important; width: 100% !important; min-width: 0 !important; }

  .fm-cats > .e-con-inner, .fm-trow, .fm-arow,
  .fm-features > .e-con-inner, .fm-testi > .e-con-inner { flex-direction: column !important; }

  /* hero: колонка на всю ширину, иначе width:35% даёт 131px на 375 */
  .fm-hero-col { width: 100% !important; max-width: 100% !important; margin-top: 48px !important; }

  /* карточки процедур: в прототипе grid-cols-2 (gap-6), с 640px — 3, с 1025 — 5 */
  .fm-trow { flex-direction: row !important; flex-wrap: wrap !important; gap: 24px !important; }
  .fm-tcard { flex: 0 0 calc(50% - 12px) !important; width: calc(50% - 12px) !important; }

  /* фичи: разделитель сверху, без боковых гуттеров */
  .fm-feature { border-left: 0 !important; }
  .fm-feature + .fm-feature { border-top: 1px solid var(--fm-border); }
  .fm-features > .e-con-inner { gap: 24px !important; }
  .fm-feature > .e-con-inner { flex-direction: row !important; align-items: flex-start !important;
    flex-wrap: nowrap !important; padding: 24px 0 0 !important; }
  .fm-ftext { flex: 1 1 0 !important; min-width: 0 !important; }
  .fm-feature:first-child > .e-con-inner { padding-top: 0 !important; }

  /* Instagram: 3 в ряд (в прототипе grid-cols-3, с 640px — 6) */
  .fm-ig-grid > .e-con-inner { flex-wrap: wrap !important; gap: 16px !important; }
  .fm-ig-grid .fm-ig-img { flex: 0 0 calc((100% - 32px) / 3) !important; }

  /* футер: одна колонка */
  .fm-footer .fm-fwrap > .e-con-inner { grid-template-columns: 1fr !important; }
  .fm-footer .fm-fwrap > .e-con-inner > .fm-fcol:first-child { grid-column: auto !important; }

  /* about: текст, затем картинка */
  .fm-arow { gap: 32px !important; }
}

/* планшет/большой телефон: 3 карточки процедур в ряд (sm:grid-cols-3) */
@media (min-width: 640px) and (max-width: 1024px) {
  .fm-tcard {
    flex: 0 0 calc((100% - 48px) / 3) !important;
    width: calc((100% - 48px) / 3) !important;
  }
}

/* мобильные боковые отступы секций: в прототипе px-6 (24px), lg:px-10 (40px) */
@media (max-width: 1024px) {
  .fm-hero-txt, .fm-treat, .fm-features, .fm-testi,
  .fm-about .fm-abox,
  .fm-footer .fm-fwrap, .fm-footer-bottom .fm-fwrap {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* ============================================================
   Hero на мобильном — как в прототипе:
   фон-картинка СКРЫТА, вместо неё отдельное фото 330px под текстом
   (в прототипе `mt-10 lg:hidden h-[330px]`), блок «Scroll to discover»
   на мобильном скрыт (`hidden lg:block`), h1 = text-5xl (48px/0.96).
   ============================================================ */
.fm-hero-mimg { display: none !important; }
@media (max-width: 1024px) {
  .fm-hero { background-image: none !important; background-color: var(--fm-cream) !important;
    padding-top: 128px !important; }
  .fm-hero-txt > .e-con-inner { flex-direction: column !important; padding-bottom: 40px !important; }
  .fm-hero-col { margin-top: 0 !important; }
  .fm-hero-col h1.elementor-heading-title { font-size: 48px !important; line-height: 46.08px !important;
    letter-spacing: 1.92px !important; }
  .fm-hero-scroll { display: none !important; }
  .fm-hero-mimg { display: block !important; margin-top: 40px !important; }
  .fm-hero-mimg img { width: 100% !important; height: 330px !important; object-fit: cover !important; }
}

/* телефон: высота фото карточки процедуры h-40 (160px); sm:h-44 (176px) — с 640px */
@media (max-width: 639px) {
  .fm-timg img { height: 160px !important; }
}


/* ============================================================
   FM TREATMENTS/PACKAGES (2026-09-17)
   Секция Treatments (индекс, категории, карточки процедур) и Packages.
   Исходник блока: .sdlab/docs/focusmassage/style-treatments.css
   ============================================================ */
/* ============================================================
   Treatments (индекс /treatments/, категории /treatments/<cat>/,
   карточки /treatment/<slug>/) и Packages (/packages/).
   Метрики переведены из Tailwind-классов прототипа Lovable
   (сборка скриптом scripts/fm-treatments-build.py).
   ============================================================ */

/* ---------- /treatments/ : hero + 3 карточки ---------- */
.fm-tidx-hero > .e-con-inner { gap: 40px !important; align-items: center !important; }
.fm-tidx-hero .fm-c2 { flex: 1 1 0 !important; min-width: 0 !important; padding: 0 !important; }
.fm-tidx-imgc { flex: 1 1 0 !important; min-width: 0 !important; padding: 0 !important; }
.fm-tidx-hero .fm-c2 > .e-con-inner, .fm-tidx-imgc > .e-con-inner { gap: 0 !important; padding: 0 !important; }
.fm-tidx-hero .fm-label .elementor-heading-title { line-height: 16.5px !important; }
.fm-tidx-sub { margin-top: 24px !important; }
.fm-tidx-sub p { font-size: 14px !important; line-height: 22.75px !important;
  color: var(--fm-muted); max-width: 448px; margin: 0 !important; }       /* max-w-md */
.fm-tidx-img img { width: 100%; height: 360px; object-fit: cover; display: block; }

.fm-tidx-cards > .e-con-inner { gap: 32px !important; }
.fm-tidx-card { padding: 0 !important; }
.fm-tidx-card > .e-con-inner { gap: 0 !important; padding: 0 !important; }
.fm-tidx-cimg img { width: 100%; height: 224px; object-fit: cover; display: block;
  transition: opacity .5s ease; }                                          /* h-56 */
.fm-tidx-card:hover .fm-tidx-cimg img { opacity: .85; }
.fm-tidx-h2 { margin-top: 24px !important; }
.fm-tidx-h2 .elementor-heading-title { font-family: var(--fm-font-display) !important;
  font-size: 24px !important; font-weight: 400 !important; line-height: 32px !important;
  letter-spacing: 3.36px !important; text-transform: uppercase; }
.fm-tidx-h2 .elementor-heading-title::after { content: ""; display: block; width: 64px;
  height: 1px; background: var(--fm-border); margin-top: 12px; }           /* mt-3 w-16 */
.fm-tidx-p { margin-top: 16px !important; }
.fm-tidx-p p { font-size: 14px !important; line-height: 22.75px !important;
  color: var(--fm-muted); margin: 0 !important; }
.fm-tidx-more { margin-top: 20px !important; line-height: 0; }
.fm-tidx-more .elementor-button { display: inline-flex; align-items: center;
  background: transparent !important; color: var(--fm-ink) !important;
  padding: 0 !important; transition: color .2s ease; }
.fm-tidx-more .elementor-button:hover { color: var(--fm-taupe) !important; }
.fm-tidx-more .elementor-button svg { width: 14px; height: 14px; transition: transform .3s ease; }
.fm-tidx-more:hover .elementor-button svg { transform: translateX(4px); }

@media (max-width: 1024px) {
  .fm-tidx-hero > .e-con-inner { flex-direction: column !important; }
  .fm-tidx-img img { height: 260px; }
  .fm-tidx-cards > .e-con-inner { flex-direction: column !important; }
  .fm-tidx-card { width: 100% !important; }
}

/* ---------- /treatments/<cat>/ : список + фото + блок ---------- */
.fm-crumb p { margin: 0 !important; font-size: 11px !important; line-height: 16.5px !important;
  letter-spacing: 2.42px !important; text-transform: uppercase; color: var(--fm-muted); }
.fm-crumb a { color: inherit; text-decoration: none; transition: color .15s ease; }
.fm-crumb a:hover { color: var(--fm-taupe); }
.fm-tcat-head .fm-crumb, .fm-tdet-c1 .fm-crumb { margin: 0 !important; }
.fm-tcat-sub { margin-top: 20px !important; }                              /* mt-5 */
.fm-tcat-sub p { font-size: 14px !important; line-height: 22.75px !important;
  color: var(--fm-muted); max-width: 448px; margin: 0 !important; }
.fm-tcat-head > .e-con-inner { gap: 0 !important; }
.fm-tcat-grid > .e-con-inner { gap: 0 !important; }

/* нативный nested-tabs: список процедур слева, контент справа */
.fm-ttabs .e-n-tabs-heading { border-top: 1px solid var(--fm-border); }
.fm-ttabs .e-n-tab-title { justify-content: space-between !important; border-radius: 0 !important;
  box-shadow: none !important; padding: 20px 0 !important; }
.fm-ttabs .e-n-tab-title-text { order: 1; flex: 1 1 auto; justify-content: flex-start;
  white-space: nowrap; }
.fm-ttabs .e-n-tab-title { flex-grow: 0 !important; height: auto !important; }
.fm-ttabs .e-n-tab-title .e-n-tab-title-text { order: 1 !important; flex: 1 1 auto !important;
  justify-content: flex-start !important; }
.fm-ttabs .e-n-tab-title .e-n-tab-icon { order: 2 !important; }
/* height:auto обязателен: нативный контрол Stretch ставит --n-tabs-title-height:100%,
   из-за чего 5 пунктов по 420px сжимаются в равные 84px вместо своих 56.5px */
.fm-ttabs .e-n-tab-icon { order: 2; }
.fm-ttabs .e-n-tab-icon svg { width: 14px; height: 14px; fill: none !important;
  stroke: currentColor; }
.fm-tcat-tab > .e-con-inner { gap: 40px !important; padding: 0 !important;
  align-items: stretch !important; }
/* Прототип: grid-cols-[0.7fr_1fr_0.7fr] -> фото 1fr : блок 0.7fr.
   Держим это grid'ом: с flex-grow доли «плыли» от padding'а блока. */
.fm-tcat-tab { display: grid !important; align-items: stretch !important;
  grid-template-columns: minmax(0, 10fr) minmax(0, 7fr) !important; gap: 40px !important;
  padding: 0 !important; flex: 0 0 100% !important; width: 100% !important;
  min-width: 100% !important; max-width: 100% !important; }
/* ВАЖНО: плагин прячет неактивные вкладки правилом
   `.elementor-widget-n-tabs .e-n-tabs-content>.e-con:not(.e-active){display:none}`
   (без !important). Наш display:grid !important его перебивал, и все панели
   выстраивались в ряд (scrollWidth 5046). Возвращаем скрытие. */
.fm-ttabs .e-n-tabs-content > .fm-tcat-tab:not(.e-active) { display: none !important; }
.fm-tcat-imgc { padding: 0 !important; min-width: 0 !important; }
.fm-tcat-boxc { min-width: 0 !important; }   /* padding 32 задан в настройках контейнера */
.fm-tcat-imgc > .e-con-inner { padding: 0 !important; }
.fm-tcat-img img { width: 100%; height: 420px; object-fit: cover; display: block; }
.fm-tcat-boxc > .e-con-inner { gap: 0 !important; }
.fm-tcat-h2 .elementor-heading-title { font-family: var(--fm-font-display) !important;
  font-size: 24px !important; line-height: 32px !important; letter-spacing: 3.36px !important;
  text-transform: uppercase; }
.fm-tcat-p { margin-top: 16px !important; }
.fm-tcat-p p { font-size: 14px !important; line-height: 22.75px !important;
  color: var(--fm-muted); margin: 0 !important; }
.fm-tcat-meta { margin-top: 24px !important; }
.fm-tcat-meta .elementor-icon-list-text, .fm-tmeta .elementor-icon-list-text { font-size: 14px;
  line-height: 20px; color: var(--fm-ink); }
.fm-tcat-meta .elementor-icon-list-icon svg, .fm-tmeta .elementor-icon-list-icon svg {
  stroke: var(--fm-ink) !important; fill: none !important; }
.fm-tcat-btn { margin-top: 32px !important; }

@media (max-width: 1024px) {
  /* Нативный nested-tabs на планшете/мобильном переходит в режим
     --n-tabs-heading-display/content-display: contents (заголовок и контент
     «растворяются» и чередуются: пункт -> его контент -> пункт). В прототипе
     на мобильном сначала весь список, потом фото и блок — возвращаем это. */
  .fm-ttabs .e-n-tabs { flex-direction: column !important; }
  .fm-ttabs .e-n-tabs-heading { display: flex !important; flex-direction: column !important;
    flex-basis: auto !important; width: 100% !important; }
  .fm-ttabs .e-n-tabs-content { display: flex !important; width: 100% !important; }
  .fm-ttabs .e-n-tabs-content > .e-con { width: 100% !important; }
  .fm-tcat-tab { grid-template-columns: 1fr !important; }
  .fm-tcat-imgc, .fm-tcat-boxc { width: 100% !important; }
  .fm-tcat-img img { height: 288px; }
  .fm-ttabs .e-n-tab-title { padding: 16px 0 !important; }
}

/* ---------- /treatment/<slug>/ : карточка процедуры ---------- */
.fm-tdet-hero > .e-con-inner { gap: 48px !important; }
.fm-tdet-c1, .fm-tdet-imgc { padding: 0 !important; }
.fm-tdet-c1 > .e-con-inner, .fm-tdet-imgc > .e-con-inner { gap: 0 !important; padding: 0 !important; }
.fm-tdet-sub { margin-top: 16px !important; }                              /* mt-4 */
.fm-tdet-sub p { font-size: 14px !important; line-height: 20px !important;
  color: var(--fm-muted); margin: 0 !important; }
.fm-tdet-desc { margin-top: 32px !important; }                             /* mt-8 */
.fm-tdet-desc p { font-size: 14px !important; line-height: 22.75px !important;
  color: rgba(37,31,27,.8); max-width: 512px; margin: 0 !important; }      /* max-w-lg */
.fm-tbenefits { margin-top: 40px !important; }                             /* mt-10 */
.fm-tbenefits .elementor-icon-list-text { font-size: 14px; line-height: 20px; color: var(--fm-ink); }
.fm-tbenefits .elementor-icon-list-icon svg { stroke: var(--fm-taupe) !important; fill: none !important; }
.fm-tmeta { margin-top: 40px !important; padding-top: 32px !important;
  border-top: 1px solid var(--fm-border); }                                /* mt-10 pt-8 */
.fm-tmeta .elementor-icon-list-item:nth-child(3) .elementor-icon-list-text { color: var(--fm-muted); }
.fm-tmeta .elementor-icon-list-item:nth-child(3) .elementor-icon-list-icon svg { stroke: var(--fm-muted) !important; }
.fm-tdet-btn { margin-top: 40px !important; line-height: 0; }
.fm-tdet-img img { width: 100%; height: 620px; object-fit: cover; display: block; }

.fm-tother > .e-con-inner { gap: 0 !important; }
.fm-tother-label .elementor-heading-title { line-height: 16.5px !important; }
.fm-tothergrid { margin-top: 40px !important; }                            /* mt-10 */
.fm-tothergrid > .e-con-inner { display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 24px !important;
  padding: 0 !important; }
.fm-tother-card { padding: 0 !important; text-align: center; }
.fm-tother-card > .e-con-inner { gap: 0 !important; padding: 0 !important; }
.fm-tother-img img { width: 100%; height: 160px; object-fit: cover; display: block;
  transition: opacity .5s ease; }                                          /* h-40 */
.fm-tother-card:hover .fm-tother-img img { opacity: .85; }
.fm-tother-h3 { margin-top: 20px !important; }                             /* mt-5 */
.fm-tother-h3 .elementor-heading-title { font-family: var(--fm-font-display) !important;
  font-size: 18px !important; line-height: 28px !important; letter-spacing: 2.52px !important;
  text-transform: uppercase; }
.fm-tother-p { margin-top: 8px !important; }                               /* mt-2 */
.fm-tother-p p { font-size: 14px !important; line-height: 20px !important;
  color: var(--fm-muted); margin: 0 !important; text-align: center; }

@media (max-width: 1024px) {
  .fm-tdet-hero > .e-con-inner { flex-direction: column !important; }
  .fm-tdet-img img { height: 340px; }
  .fm-tothergrid > .e-con-inner { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (min-width: 640px) and (max-width: 1024px) {
  .fm-tothergrid > .e-con-inner { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* ---------- /packages/ ---------- */
.fm-pkg-head > .e-con-inner { gap: 0 !important; }
.fm-pkg-head .fm-label .elementor-heading-title { line-height: 16.5px !important; }
.fm-pkg-sub { margin-top: 24px !important; }
.fm-pkg-sub p { font-size: 14px !important; line-height: 22.75px !important;
  color: var(--fm-muted); max-width: 448px; margin: 0 !important; }
.fm-pkggrid > .e-con-inner { gap: 32px !important; }
/* 2026-09-24: ширина контента у страницы теперь общая с About (boxed_width 1320),
   поэтому прежнее «fit-content + авто-центрирование» для 3 карточек прототипа убрано. */
.fm-pkggrid > .e-con-inner { display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important; padding: 0 !important; }
.fm-pkgcard { min-width: 0 !important; }
.fm-pkgcard { position: relative; }
.fm-pkgcard > .e-con-inner { gap: 0 !important; }

/* Появление карточек пакетов (2026-09-24). Класс `fm-reveal-js` на <html> ставит скрипт в <head>
   до первой отрисовки: если вешать скрытие в футере, браузер успевает показать карточки и вместо
   появления видно мигание (на это жаловался оператор). Раскрытие — IntersectionObserver из футера.
   Без JS (или при prefers-reduced-motion) класс не появляется и карточки видны сразу.
   Стаггер внутри ряда — переменная --fm-i (0..2), её выставляет тот же скрипт. */
html.fm-reveal-js .fm-pkggrid .fm-pkgcard {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s cubic-bezier(.22, .61, .36, 1), transform .8s cubic-bezier(.22, .61, .36, 1);
  transition-delay: calc(var(--fm-i, 0) * 110ms);
  will-change: opacity, transform;
}
html.fm-reveal-js .fm-pkggrid .fm-pkgcard.fm-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.fm-reveal-js .fm-pkggrid .fm-pkgcard {
    opacity: 1 !important; transform: none !important; transition: none !important; }
}
.fm-pkg-h2 .elementor-heading-title { font-family: var(--fm-font-display) !important;
  font-size: 24px !important; line-height: 32px !important; letter-spacing: 2.88px !important;
  text-transform: uppercase; }
.fm-pkg-label { margin-top: 12px !important; }                             /* mt-3 */
.fm-pkg-label p { font-size: 11px !important; line-height: 16.5px !important;
  letter-spacing: 2.42px !important; text-transform: uppercase; margin: 0 !important; }
.fm-pkg-price { margin-top: 24px !important; }                             /* mt-6 */
.fm-pkg-price .elementor-heading-title { font-family: var(--fm-font-display) !important;
  font-size: 36px !important; line-height: 40px !important; }
.fm-pkg-list { margin-top: 32px !important; flex: 1 1 auto; }              /* mt-8, растягивает кнопку вниз */
.fm-pkg-list .elementor-icon-list-text { font-size: 14px; line-height: 20px; }
.fm-pkg-list .elementor-icon-list-icon svg { stroke: var(--fm-taupe) !important; fill: none !important; }
.fm-pkgbtn { margin-top: 40px !important; }                                /* mt-10 */
.fm-pkgbtn .elementor-button { display: block; width: 100%; text-align: center; }

/* Ховеры кнопок Book на карточках пакетов (2026-09-24). Запрос оператора.
   Тёмная кнопка светлой карточки темнеет до taupe-dark — как кнопки в шапке и hero;
   кнопка на тёмной карточке инвертируется в кремовую с тёмным текстом (на тёмном фоне
   затемнение почти незаметно). */
.fm-pkgbtn .elementor-button { transition: background-color .25s ease, color .25s ease; }
.fm-pkgcard:not(.fm-pkgfeat) .fm-pkgbtn .elementor-button:hover,
.fm-pkgcard:not(.fm-pkgfeat) .fm-pkgbtn .elementor-button:focus-visible {
  background-color: #635146 !important; }
.fm-pkgfeat .fm-pkgbtn .elementor-button:hover,
.fm-pkgfeat .fm-pkgbtn .elementor-button:focus-visible {
  background-color: #FBF9F5 !important; color: #1E1815 !important; }
.fm-pkgbadge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  z-index: 2; margin: 0 !important; }
/* Бейдж «Most popular»: фон taupe-dark + кремовый текст (контраст ~7:1).
   24.09: было #958273 + #71675F — контраст 1.5:1, не читалось; цвет виджета перебивал
   правило темы, поэтому здесь !important, а в данных карточки title_color = #FBF9F5. */
.fm-pkgbadge .elementor-heading-title { background: #635146; color: #FBF9F5 !important;
  padding: 7px 16px; font-size: 11px !important; line-height: 16.5px !important; font-weight: 500 !important;
  letter-spacing: 1.98px !important; text-transform: uppercase; white-space: nowrap; }
@media (min-width: 1025px) {
  /* 2026-09-24: убрали translateY(-24px) scale(1.03) — трансформации не влияют на раскладку,
     из-за чего вертикальные зазоры между рядами были 64 / 50 / 64 px, а горизонтальные 25/26.
     Теперь зазоры ровные (64 по вертикали, 32 по горизонтали); акцент «Most popular» —
     тёмная карточка, бейдж и тень. */
  .fm-pkgfeat { box-shadow: 0 24px 48px -28px rgba(30,24,21,.45); z-index: 1; }
}
/* 6 пакетов (2026-09-24): сетка 3×2. Бейдж «Most popular» свисает над карточкой на 12px —
   отсюда небольшой запас сверху; row-gap 64px = расстояние от текста hero до первого ряда
   (48px padding снизу у .fm-pkg-head + 16px здесь).
   Нижний паддинг 160px = padding-top секции, то есть отступы секции сверху и снизу равны.
   (Шапка fixed и лежит поверх верхних 160px, поэтому от её нижнего края видно 73px — если
   выравнивать именно видимый зазор от шапки, значение было бы 73; оператор просил равенство
   с верхним отступом секции.) Правило выше обнуляет паддинг внутреннего контейнера,
   поэтому задаём здесь. */
.fm-pkggrid > .e-con-inner { padding: 16px 0 160px !important; row-gap: 64px !important; }
@media (max-width: 1024px) {
  /* на мобильном фиксированные ширины прототипа (448 / max-content) не влезают */
  .fm-pkg-head > .e-con-inner { max-width: 100% !important; }
  .fm-pkggrid { width: 100% !important; }
  .fm-pkggrid > .e-con-inner { grid-template-columns: 1fr !important; }
  .fm-pkgfeat { transform: none !important; box-shadow: none !important; }
  .fm-pkgcard { width: 100% !important; }
}

/* Варианты h1 новых страниц. Базовый .fm-h1u в теме даёт 48/60 ls .05em —
   у страниц Treatments/Packages в прототипе line-height 1 (48/48),
   у индекса — text-5xl/lg:text-6xl (60/60), у карточки процедуры tracking .08em. */
.fm-h1xl .elementor-heading-title { font-size: 60px !important; line-height: 60px !important; }
.fm-h1det .elementor-heading-title { letter-spacing: .08em !important; }
@media (max-width: 1024px) {
  .fm-h1xl .elementor-heading-title { font-size: 48px !important; line-height: 48px !important;
    letter-spacing: .05em !important; }
}

/* Прайс на узком мобильном: цена в своей auto-колонке grid, фиксированная ширина
   (нужная прежней flex-раскладке) больше не требуется — только меньше зазор. */
@media (max-width: 480px) {
  .fm-prl .elementor-price-list-text { column-gap: 12px; }
}
/* Курсор на карточках-ссылках (прототип: <a class="group"> вокруг всей карточки) */
.fm-tidx-cimg img, .fm-tother-img img { cursor: pointer; }

/* Заголовки-ссылки в карточках: цвет как у текста, без подчёркивания */
.fm-tidx-h2 .elementor-heading-title a, .fm-tother-h3 .elementor-heading-title a {
  color: inherit !important; text-decoration: none !important; }
.fm-tidx-h2 .elementor-heading-title a:hover, .fm-tother-h3 .elementor-heading-title a:hover {
  color: var(--fm-taupe) !important; }


/* ============================================================
   FM ICONS (2026-09-17): только обводка + линия ~1px.
   Исходник: .sdlab/docs/focusmassage/style-icons.css
   ============================================================ */
/* ============================================================
   Иконки контента: только обводка, линия ~1px.
   Все иконки проекта — Lucide-SVG, выгруженные в медиатеку
   (fill="none" stroke="currentColor"). Elementor рендерит
   svg-иконку и красит её через fill, из-за чего линия
   превращается в монолитную заливку. Возвращаем обводку.

   Толщина: stroke-width задан в единицах viewBox (24), поэтому
   видимая толщина = stroke-width * ширина_на_экране / 24.
   Чтобы линия была 1px: 64px -> .375, 32px -> .75, 28px -> .86,
   20px -> 1.2, 16px -> 1.5, 14px -> 1.71.
   ============================================================ */

svg[fill="none"], svg[stroke="currentColor"] { fill: none !important; }

/* 64px — фичи Home/About */
.fm-icon svg { stroke-width: .375 !important; }

/* 28px — иконки плиток Face / Body / Wellness */
.fm-tile-icon svg { stroke-width: .86 !important; }

/* 16px — строки списков: контакты, бенефиты, мета, контакты Contact */
.fm-ctlist .elementor-icon-list-icon svg,
.fm-tbenefits .elementor-icon-list-icon svg,
.fm-tmeta .elementor-icon-list-icon svg,
.fm-tcat-meta .elementor-icon-list-icon svg,
.fm-pkg-list .elementor-icon-list-icon svg,
.fm-ctsocial svg { stroke-width: 1.5 !important; }

/* 14px — стрелки: Discover, View All, пункты списка категорий */
.fm-tidx-more .elementor-button svg,
.fm-tile-link .elementor-button svg,
.fm-viewall .elementor-button svg,
.fm-ttabs .e-n-tab-icon svg { stroke-width: 1.71 !important; }

/* 20px — «Scroll to discover» (текстовый виджет главной) */
.fm-hero-scroll svg { stroke-width: 1.2 !important; }


/* ============================================================
   FM HOME HERO (2026-09-17): два CTA и два абзаца в первом блоке главной.
   Исходник: .sdlab/docs/focusmassage/style-home-hero.css
   ============================================================ */
/* ============================================================
   Главная: первый блок (hero) — тексты оператора от 2026-09-17.
   В блоке два CTA (основная + ghost) и два абзаца подзаголовка;
   в исходном макете была одна кнопка и один абзац.
   ============================================================ */

/* обёртка кнопок: .fm-hero-col > .elementor-element { margin: 0 !important }
   в теме обнуляет margin у всех прямых детей — возвращаем отступ обёртке */
.fm-hero-col > .fm-hero-btns { margin-top: 32px !important; }
.fm-hero-btns > .e-con-inner { padding: 0 !important; gap: 12px !important; }
.fm-hero-btns .elementor-widget { margin: 0 !important; }

/* второй абзац подзаголовка (у .fm-hero-sub p margin: 0) */
.fm-hero-sub p + p { margin-top: 14px !important; }


/* ============================================================
   FM HOME HERO WIDE (2026-09-22): ширина блока hero под длинный заголовок.
   Исходник: .sdlab/docs/focusmassage/style-home-hero.css (хвост файла)
   ============================================================ */
@media (min-width: 1025px) {
  .fm-hero-col { width: 55% !important; max-width: 680px !important; }
  .fm-hero-sub p { max-width: 460px !important; }
}

/* FM HOME HERO WIDE-2 (2026-09-22): кегль hero-h1 на узком десктопе */
@media (min-width: 1025px) {
  .fm-hero-col h1.elementor-heading-title { font-size: clamp(44px, 4.6vw, 60px) !important;
    line-height: .96 !important; }
}

/* FM HOME HERO BOTTOM GAP (2026-09-22): низ блока = верху (196px) */
@media (min-width: 1025px) {
  .fm-hero-txt > .e-con-inner { padding-bottom: 196px !important; }
}

/* FM HOME HERO BTN HOVER (2026-09-22): фон -> taupe-dark */
.fm-hero-btn:not(.fm-btn-ghost) .elementor-button:hover {
  background-color: var(--fm-taupe-dark) !important;
}

/* ============================================================
   FM HOME TILES (2026-09-22): высота плиток по контенту на мобильном.
   Исходник: .sdlab/docs/focusmassage/style-home-tiles.css
   ============================================================ */
/* ============================================================
   Главная: плитки Face / Body / Wellness.
   Высота плиток была фиксированной (300px десктоп, 260px мобильный),
   а у контейнера overflow: hidden. После замены текста в плитке Face
   (2026-09-22) подзаголовок стал 5 строк на мобильном, контент вырос до
   260px, и иконка ушла выше верхнего края — то есть обрезалась.
   Делаем высоту по контенту: min-height сохраняет прежний вид, длинный
   текст больше не режется. На десктопе плитки в строке тянутся друг за
   другом, поэтому все три остаются одной высоты.
   ============================================================ */

@media (max-width: 1024px) {
  .fm-cats .fm-tile { height: auto !important; min-height: 260px !important; }
}

/* FM HOME TILES CLICKABLE (2026-09-22): вся плитка — ссылка (stretched link) */
.fm-tile { cursor: pointer; }
.fm-tile .fm-tile-link { position: static !important; }
.fm-tile .fm-tile-link .elementor-button::after {
  content: ""; position: absolute; inset: 0; z-index: 2; }

/* FM ABOUT INTRO (2026-09-22): ритм абзацев внутри .fm-abtxt = 16px */
.fm-abtxt p + p { margin-top: 16px !important; }

/* FM HOME PACKAGES BLOCK (2026-09-22) — исходник: style-home-packages.css */
/* ============================================================
   Главная: блок «Treatment packages» (перед «What our clients say»).
   Стилистика сайта: sand-фон, boxed 1320, две колонки 9/11
   (заголовок | текст + кнопка), Cormorant 30/37.5, Golos 14/22.75.
   Собран скриптом scripts/build-home-packages-block.py,
   вставлен scripts/patch-insert-block.php перед .fm-testi.
   ============================================================ */

.fm-pkgs > .e-con-inner { gap: 48px !important; }

/* колонки — вложенные контейнеры (e-con-full): внутреннего .e-con-inner у них нет,
   поэтому гасим padding у самих колонок */
.fm-pkgs-c1, .fm-pkgs-c2 { padding: 0 !important; min-width: 0 !important; }

.fm-pkgs-h2 .elementor-heading-title { font-family: var(--fm-font-display) !important;
  font-weight: 300 !important; font-size: 30px !important; line-height: 37.5px !important;
  letter-spacing: .16px !important; color: var(--fm-ink) !important; margin: 0 !important; }

.fm-pkgs-p p { font-size: 14px !important; line-height: 22.75px !important;
  color: var(--fm-muted) !important; letter-spacing: .16px !important;
  max-width: 560px; margin: 0 !important; }
.fm-pkgs-p p + p { margin-top: 16px !important; }

.fm-pkgs-btn { margin-top: 32px !important; }

@media (min-width: 1025px) {
  .fm-pkgs > .e-con-inner > .fm-pkgs-c1 { flex: 9 1 0 !important; }
  .fm-pkgs > .e-con-inner > .fm-pkgs-c2 { flex: 11 1 0 !important; }
}
@media (max-width: 1024px) {
  .fm-pkgs > .e-con-inner { flex-direction: column !important; }
  .fm-pkgs-c1, .fm-pkgs-c2 { width: 100% !important; }
  .fm-pkgs-p { margin-top: 16px !important; }
}

/* FM HOME PACKAGES BLOCK v2 (2026-09-22): заголовок над текстом + картинка справа */
/* ============================================================
   Главная: блок «Treatment packages» (перед «What our clients say»).
   v2 (2026-09-22): заголовок перенесён НАД текстом, справа — картинка
   (как в соседнем блоке «About Focus Estonia / A space where beauty meets
   therapy.»). Размер заголовка — как у соседних блоков.
   Сборка: scripts/build-home-packages-block.py,
   вставка: scripts/patch-insert-block.php перед .fm-testi.
   ============================================================ */

.fm-pkgs > .e-con-inner { gap: 48px !important; align-items: center !important; }

/* колонки — вложенные контейнеры (e-con-full): своего .e-con-inner у них нет,
   поэтому гасим padding у самих колонок */
.fm-pkgs-c1, .fm-pkgs-c2 { padding: 0 !important; min-width: 0 !important; }

/* заголовок: те же метрики, что у .fm-about .elementor-heading-title */
.fm-pkgs-h2 .elementor-heading-title { font-family: var(--fm-font-display) !important;
  font-weight: 300 !important; font-size: clamp(2rem, 3.2vw, 2.6rem) !important;
  line-height: 1.12 !important; letter-spacing: .16px !important;
  color: var(--fm-ink) !important; margin: 0 !important; }

/* текст под заголовком */
.fm-pkgs-h2 + .fm-pkgs-p { margin-top: 24px !important; }
.fm-pkgs-p p { font-size: 14px !important; line-height: 22.75px !important;
  color: var(--fm-muted) !important; letter-spacing: .16px !important;
  max-width: 560px; margin: 0 !important; }
.fm-pkgs-p p + p { margin-top: 16px !important; }

.fm-pkgs-btn { margin-top: 32px !important; }

/* картинка справа: как фото в блоке About (высота 480, object-fit cover) */
.fm-pkgs-img img { width: 100%; height: 480px; object-fit: cover; display: block; }

@media (min-width: 1025px) {
  .fm-pkgs > .e-con-inner > .fm-pkgs-c1 { flex: 5 1 0 !important; }
  .fm-pkgs > .e-con-inner > .fm-pkgs-c2 { flex: 5 1 0 !important; }
}
@media (max-width: 1024px) {
  .fm-pkgs > .e-con-inner { flex-direction: column !important; align-items: stretch !important; }
  .fm-pkgs-c1, .fm-pkgs-c2 { width: 100% !important; }
  .fm-pkgs-c2 { margin-top: 32px !important; }
  .fm-pkgs-img img { height: 280px; }
}

/* FM HOME PACKAGES v3 (2026-09-22): на десктопе фото слева, текст справа (row-reverse) */
@media (min-width: 1025px) {
  .fm-pkgs > .e-con-inner { flex-direction: row-reverse !important; }
}

/* --- Карточка процедуры: только данные LatePoint (2026-09-23) -------------
   Подзаголовок дублировал название, а benefits-список брался из документа клиента.
   В LatePoint таких полей нет, поэтому не показываем их на витрине. */
.fm-tdet-sub,
.fm-tbenefits { display: none !important; }


/* ============================================================
   Список услуг слева на страницах категорий: внятные ховер и актив
   (2026-09-23). Раньше отличался только цвет текста — не читалось.
   Ховер и активная: один фон taupe-dark (#635146) + кремовый текст.
   ============================================================ */
.fm-ttabs .e-n-tab-title {
  position: relative;
  padding-left: 14px !important;
  padding-right: 14px !important;
  margin: 0 -14px !important;
  transition: background-color .2s ease, color .2s ease;
}
.fm-ttabs .e-n-tab-title:hover {
  background-color: #635146 !important;
}
.fm-ttabs .e-n-tab-title:hover,
.fm-ttabs .e-n-tab-title:hover .e-n-tab-title-text,
.fm-ttabs .e-n-tab-title:hover .e-n-tab-icon svg {
  color: #FBF9F5 !important;
  stroke: #FBF9F5 !important;
}
.fm-ttabs .e-n-tab-title[aria-selected="true"],
.fm-ttabs .e-n-tab-title.e-active,
.fm-ttabs .e-n-tab-title.e-n-tab-title-active {
  background-color: #635146 !important;
}
.fm-ttabs .e-n-tab-title[aria-selected="true"],
.fm-ttabs .e-n-tab-title[aria-selected="true"] .e-n-tab-title-text,
.fm-ttabs .e-n-tab-title[aria-selected="true"] .e-n-tab-icon svg,
.fm-ttabs .e-n-tab-title.e-active,
.fm-ttabs .e-n-tab-title.e-active .e-n-tab-title-text,
.fm-ttabs .e-n-tab-title.e-active .e-n-tab-icon svg {
  color: #FBF9F5 !important;
  stroke: #FBF9F5 !important;
}


/* ============================================================
   FM TREATMENTS INDEX CARDS CLICKABLE (2026-09-24)
   Исходник: .sdlab/docs/focusmassage/style-treatments-index.css
   Индекс /treatments/: вся карточка Face / Body / Wellness — ссылка
   (stretched link от кнопки Discover). Грабля: у виджета кнопки
   Elementor position: relative — снимаем, иначе overlay покроет
   только кнопку, а не карточку.
   ============================================================ */
.fm-tidx-card { cursor: pointer; }

.fm-tidx-card .fm-tidx-more { position: static !important; }

.fm-tidx-card .fm-tidx-more .elementor-button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}


/* ============================================================
   FM SPECIALISTS ACCORDION (2026-09-24)
   Исходник: .sdlab/docs/focusmassage/style-specialists.css
   Страница /specialists/: аккордеон, заголовок = имя, в теле фото слева,
   текст справа (Treatments / Approach / Education and qualifications).
   ============================================================ */
.fm-spacc {
  --n-accordion-icon-normal-color: var(--fm-muted);
  --n-accordion-icon-hover-color: var(--fm-taupe);
  --n-accordion-icon-active-color: var(--fm-taupe);
}

.fm-spacc .e-n-accordion { display: flex; flex-direction: column; }
.fm-spacc .e-n-accordion-item { background: var(--fm-cream); }
.fm-spacc .e-n-accordion-item > .e-con { border-top: 0 !important; border-radius: 0 0 2px 2px !important; }
.fm-spacc .e-n-accordion-item-title { border-radius: 2px; }
.fm-spacc .e-n-accordion-item-title:hover { background: rgba(149, 130, 115, .12); }
.fm-spacc .e-n-accordion-item-title-text { color: var(--fm-ink); margin: 0; }

.fm-spacc .e-n-accordion-item-title-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  box-sizing: border-box;
  border: 1px solid var(--fm-border) !important;
  border-radius: 9999px;
}

.fm-spacc .fm-spitem {
  display: grid !important;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 6px 40px;
  align-items: start;
  padding: 28px 24px 36px !important;
}

.fm-spacc .fm-spphoto { grid-column: 1; grid-row: 1 / span 6; margin: 0 !important; }
.fm-spacc .fm-spphoto img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; display: block; }
.fm-spacc .fm-spitem > *:not(.fm-spphoto) { grid-column: 2; }

.fm-spacc .fm-splabel { margin: 20px 0 0 !important; }
.fm-spacc .fm-spphoto + .fm-splabel { margin-top: 0 !important; }
.fm-spacc .fm-splabel .elementor-heading-title {
  font-family: var(--fm-font-body);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 2.42px;
  text-transform: uppercase;
  color: var(--fm-muted);
}

.fm-spacc .fm-sptext { margin: 0 !important; }
.fm-spacc .fm-sptext p { font-size: 14px; line-height: 22.75px; color: var(--fm-ink); margin: 0; }

@media (max-width: 1024px) {
  .fm-spacc .fm-spitem {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 20px 20px 28px !important;
  }
  .fm-spacc .fm-spphoto { grid-row: auto; margin: 0 0 6px !important; }
  .fm-spacc .fm-spphoto img { max-width: 320px; min-height: 0; height: auto; }
  .fm-spacc .fm-spitem > *:not(.fm-spphoto) { grid-column: 1; }
  .fm-spacc .fm-splabel { margin-top: 14px !important; }
}

/* Hero на главной: появление каждого элемента (подпись -> h1 -> текст -> кнопки -> фото).
   Скрытое состояние задано через :not(.fm-in) — действует с первого кадра, а после добавления
   .fm-in элемент возвращается к обычным стилям (сам переход описан в базовом правиле).
   Стаггер — --fm-i, его выставляет скрипт из functions.php. */
html.fm-reveal-js .fm-hero .fm-hero-col > .elementor-element:not(.fm-hero-btns),
html.fm-reveal-js .fm-hero .fm-hero-btns > .elementor-widget,
html.fm-reveal-js .fm-hero .fm-hero-txt > .e-con-inner > .fm-hero-mimg {
  transition: opacity .9s cubic-bezier(.22, .61, .36, 1), transform .9s cubic-bezier(.22, .61, .36, 1);
  transition-delay: calc(var(--fm-i, 0) * 110ms);
  will-change: opacity, transform;
}
html.fm-reveal-js .fm-hero .fm-hero-col > .elementor-element:not(.fm-hero-btns):not(.fm-in),
html.fm-reveal-js .fm-hero .fm-hero-btns > .elementor-widget:not(.fm-in),
html.fm-reveal-js .fm-hero .fm-hero-txt > .e-con-inner > .fm-hero-mimg:not(.fm-in) {
  opacity: 0;
  transform: translateY(26px);
}
@media (prefers-reduced-motion: reduce) {
  html.fm-reveal-js .fm-hero .fm-hero-col > .elementor-element,
  html.fm-reveal-js .fm-hero .fm-hero-btns > .elementor-widget,
  html.fm-reveal-js .fm-hero .fm-hero-txt > .e-con-inner > .fm-hero-mimg {
    opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================================
   Форма на /contact/ (2026-09-24): слева текст «не стесняйтесь спрашивать»,
   справа форма (Имя, Email, Сообщение). Виджет — штатный Elementor Pro Form,
   после отправки: заявка в БД (Elementor → Submissions) + письмо на info@focus.ee.
   ============================================================ */
.fm-ctformsec > .e-con-inner { gap: 48px !important; align-items: flex-start !important; }
/* колонки как в контактном блоке выше (.fm-c2 8 / .fm-ctgrid 12) — тогда левый край формы
   совпадает с левым краем карты (x=609 при 1440); на ≤1024 — столбик */
.fm-ctformtxt { flex: 8 1 0 !important; min-width: 0 !important; padding: 0 !important; }
.fm-ctformc { flex: 12 1 0 !important; min-width: 0 !important; padding: 0 !important; }

.fm-ctformtxt .fm-label { margin-bottom: 16px !important; }
.fm-ctformh2 .elementor-heading-title { font-family: var(--fm-font-display) !important;
  font-weight: 300 !important; font-size: 30px !important; line-height: 37.5px !important;
  letter-spacing: .16px !important; margin: 0 !important; }
.fm-ctformp { margin-top: 16px !important; }
.fm-ctformp p { font-size: 14px !important; line-height: 22.75px !important;
  color: var(--fm-muted) !important; margin: 0 !important; max-width: 420px; }
.fm-ctformp a { color: var(--fm-ink); text-decoration: underline; text-underline-offset: 3px; }
.fm-ctformp a:hover { color: var(--fm-taupe); }

.fm-ctform .elementor-field-group { margin-bottom: 16px !important; }
.fm-ctform .elementor-field-label { display: block; font-size: 11px !important;
  letter-spacing: 1.6px !important; text-transform: uppercase !important;
  color: var(--fm-muted) !important; margin-bottom: 6px !important; }
.fm-ctform .elementor-field-textual { width: 100%; border: 1px solid var(--fm-border) !important;
  background: #fff !important; border-radius: 0 !important; padding: 14px !important;
  /* см. комментарий у полей кабинета: белая подложка против фона автозаполнения Chrome */
  box-shadow: 0 0 0 1000px #fff inset !important;
  font-family: var(--fm-font-body) !important; font-size: 14px !important; color: var(--fm-ink) !important; }
.fm-ctform .elementor-field-textual:focus { outline: none !important; border-color: var(--fm-taupe) !important; }
.fm-ctform textarea.elementor-field-textual { min-height: 150px; resize: vertical; }
.fm-ctform .elementor-button { background-color: var(--fm-primary) !important; color: var(--fm-cream) !important;
  border: 0 !important; border-radius: 0 !important; padding: 16px 40px !important;
  font-family: var(--fm-font-body) !important; font-size: 11px !important;
  letter-spacing: 2.42px !important; text-transform: uppercase !important;
  transition: background-color .25s ease !important; }
.fm-ctform .elementor-button:hover, .fm-ctform .elementor-button:focus { background-color: #635146 !important; }
.fm-ctform .elementor-message { font-size: 13px !important; line-height: 20px !important; margin: 12px 0 0 !important; }
.fm-ctform .elementor-message-success { color: #3f6b4a !important; }
.fm-ctform .elementor-message-danger { color: #A33 !important; }

@media (max-width: 1024px) {
  .fm-ctformsec > .e-con-inner { flex-direction: column !important; gap: 32px !important; }
  .fm-ctformtxt, .fm-ctformc { flex: 1 1 auto !important; width: 100% !important; }
}
/* ============================================================
   Иконка входа/регистрации в шапке (2026-09-24). Запрос оператора.
   Исходник для хвоста темы hello-elementor-child/style.css.

   Ведёт на страницу кабинета клиента LatePoint `/customer-cabinet/` — там при
   отсутствии сессии LatePoint показывает форму входа/регистрации.
   Иконка — Lucide «user» (как остальные иконки сайта), линия 1px:
   видимая толщина = stroke-width × размер / 24, поэтому при 20px stroke-width 1.2.

   На ≤1024 тема целиком скрывает `.fm-hact` (EN и BOOK NOW уходят в мобильное меню),
   но иконку входа оставляем видимой — показываем только её.
   ============================================================ */

.fm-hact .fm-accountw { margin: 0 !important; }

.fm-account {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;              /* компактно: колонка .fm-hact — 18% ширины шапки, иначе кнопка
                               BOOK NOW сжимается и её текст переносится на две строки */
  height: 28px;
  color: var(--fm-ink);
  text-decoration: none;
  transition: color .15s ease;
}
.fm-account svg { width: 20px; height: 20px; display: block; fill: none; }

/* кнопка BOOK NOW не должна сжиматься и переносить текст из-за иконки */
.fm-hact .elementor-button { flex-shrink: 0 !important; white-space: nowrap !important; }
.fm-account:hover,
.fm-account:focus-visible { color: var(--fm-taupe); }

@media (max-width: 1024px) {
  .fm-hact { display: flex !important; margin-left: 4px !important; padding: 0 !important; }
  .fm-hact > .elementor-widget-text-editor,
  .fm-hact > .elementor-widget-button { display: none !important; }
  .fm-hact > .fm-accountw { display: block !important; }
  .fm-account { width: 32px; height: 32px; }
  .fm-account svg { width: 19px; height: 19px; }

  /* Порядок в мобильной шапке: логотип — иконка входа — гамбургер.
     Гамбургер уходит в правый край (order 3 + margin-left: auto у иконки), иконка входа
     встаёт слева от него с зазором 12px (было 47px).
     Мелочи, без которых не вставало: у .fm-hnav свои 10px padding (гамбургер не доходил
     до края), у .fm-hact ширина по колонке Elementor (~14% = 47px, иконка «висела» слева),
     плюс gap 20px у .e-con-inner добавлялся к зазору. */
  .fm-header .e-con-inner { gap: 0 !important; }
  .fm-header .e-con-inner > .fm-hact { order: 2 !important; margin-left: auto !important;
    margin-right: 0 !important; width: 32px !important; flex: 0 0 32px !important; }
  .fm-header .e-con-inner > .fm-hnav { order: 3 !important; padding: 0 !important;
    margin-left: 12px !important; margin-right: 0 !important; }
}

/* ============================================================
   Кабинет клиента /customer-cabinet/ (2026-09-24). Запрос оператора:
   «Sign in to your account есть, а register не вижу, и они должны быть в стиле сайта».
   Исходник для хвоста темы hello-elementor-child/style.css.

   Что здесь:
   - скрыт штатный .page-header темы (заголовок «Customer Cabinet» уезжал под фиксированную
     шапку) — вместо него в контенте выводится .fm-cab-head из functions.php;
   - переключатель .fm-cab-tabs (Sign in / Register) и карточка регистрации .fm-cab-reg
     (отдельная валидная форма вне формы входа LatePoint);
   - форма входа LatePoint перекрашена в стиль сайта: синяя кнопка #1d7bff → тёмная,
     поля с тонкой рамкой, шрифты Golos/Cormorant.
   Всё заскоплено на .fm-cabinet, чтобы не задеть другие формы (классы .os-* грузятся
   и на других страницах).
   ============================================================ */

/* LatePoint рисует акценты своей переменной --latepoint-brand-primary (#1d7bff — их дефолт):
   синими были ссылка «Forgot?», кнопка Continue и фокусы полей. Переводим на палитру сайта. */
.fm-cabinet {
  --latepoint-brand-primary: #635146;
  --latepoint-timeslot-selected-color: #1E1815;
  --latepoint-body-color: #251F1B;
  --latepoint-headings-color: #251F1B;
  --latepoint-color-text-faded: #71675F;
  --latepoint-border-radius: 0px;
  --latepoint-border-radius-md: 0px;
}

.fm-cabinet .page-header { display: none !important; }

/* Ширина контента кабинета = как у остальных страниц (например /about/): бокс 1400px
   с padding 40px даёт контент 1320px и левый край x=53 при окне 1440.
   Селектор с main.site-main нужен из-за родительской темы: у hello-elementor есть
   body:not([class*=elementor-page-]) .site-main { max-width: 1140px } — специфичность
   (0,2,1), она перебивала прежнее `.fm-cabinet .site-main` (0,2,0). */
@media (min-width: 1200px) {
  body.fm-cabinet main.site-main { max-width: 1400px; }
}
.fm-cabinet .site-main { margin: 0 auto; padding: 160px 40px 96px; }
/* форма входа/регистрации — узкая колонка по центру */
.fm-cabinet .site-main .page-content { max-width: 560px; margin: 0 auto; }
/* кабинет после входа (есть табы LatePoint) — во всю ширину, как /about/ */
.fm-cabinet .site-main .page-content:has(.latepoint-tabs-w) { max-width: none; }

/* заголовок страницы */
.fm-cab-head { margin: 0 0 32px; }
.fm-cab-head .fm-label { font-size: 11px; line-height: 16.5px; letter-spacing: 2.42px;
  text-transform: uppercase; color: var(--fm-muted); margin-bottom: 16px; }
.fm-cab-h1 { font-family: var(--fm-font-display); font-weight: 300; font-size: 44px;
  line-height: 1.06; letter-spacing: .05em; text-transform: uppercase; color: var(--fm-ink);
  margin: 0 0 16px; }
.fm-cab-sub { font-size: 14px; line-height: 22.75px; color: var(--fm-muted); margin: 0;
  max-width: 440px; }

/* переключатель Sign in / Register — табы в языке сайта (как табы услуг на /treatments/:
   без коробок и скруглений, во всю ширину встают на общую линию, активный/ховер — заливка
   #635146 со светлым текстом, внутренние отступы, чтобы текст не прилипал к краям). */
.fm-cab-tabs { display: flex; margin-top: 28px; border-bottom: 1px solid var(--fm-border); }
.fm-cab-tab { background: none; border: 0; border-radius: 0; padding: 16px 28px;
  font-family: var(--fm-font-body); font-size: 11px; line-height: 1; letter-spacing: 2.42px;
  text-transform: uppercase; color: var(--fm-muted); cursor: pointer;
  transition: background-color .2s ease, color .2s ease; }
.fm-cab-tab:hover,
.fm-cab-tab:focus-visible { background: #635146; color: #fff; outline: none; }
.fm-cab-tab.is-active { background: #635146; color: #fff; }

/* карточка входа LatePoint */
.fm-cabinet .latepoint-login-form-w { background: #fff; border: 1px solid var(--fm-border);
  padding: 32px; }
.fm-cabinet .latepoint-customer-box-title { font-family: var(--fm-font-display); font-weight: 300;
  font-size: 24px; line-height: 1.2; letter-spacing: 2px; text-transform: uppercase;
  color: var(--fm-ink); margin: 0 0 20px; }

/* поля входа */
.fm-cabinet .latepoint-w .os-form-group { margin-bottom: 16px; position: relative; }
.fm-cabinet .latepoint-w .os-form-group label { display: block; font-size: 11px; line-height: 1.5;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--fm-muted); margin-bottom: 6px; }

/* Поля входа: у LatePoint свои селекторы с !important (рамка #CAD2E0, padding 12px 10px,
   на мобильном 18px), поэтому повторяем ИХ форму селектора со своим префиксом — иначе стили
   сайта не применяются. Должно совпадать с .fm-cab-field input (регистрация). */
.fm-cabinet .latepoint-w .os-form-group.os-form-textfield-group input[type="text"].os-form-control,
.fm-cabinet .latepoint-w .os-form-group.os-form-textfield-group input[type="email"].os-form-control,
.fm-cabinet .latepoint-w .os-form-group.os-form-textfield-group input[type="password"].os-form-control,
.fm-cabinet .latepoint-w .os-form-group.os-form-textfield-group input[type="tel"].os-form-control,
.fm-cabinet .latepoint-w .os-form-group.os-form-textfield-group textarea.os-form-control {
  width: 100%; border: 1px solid var(--fm-border) !important; background: #fff !important;
  /* inset-тень = белая подложка поверх фона: Chrome красит автозаполненные поля
     своим #E8F0FE на уровне UA-стиля с !important, и обычный background его не
     перебивает — а box-shadow UA не трогает, поэтому заливка всегда остаётся белой. */
  border-radius: 0 !important; box-shadow: 0 0 0 1000px #fff inset !important; padding: 14px !important;
  font-family: var(--fm-font-body) !important; font-size: 14px !important;
  line-height: 1.4 !important; color: var(--fm-ink) !important; }
.fm-cabinet .latepoint-w .os-form-control::placeholder { color: var(--fm-muted) !important; opacity: 1; }
.fm-cabinet .latepoint-w .os-form-group.os-form-textfield-group input.os-form-control:focus,
.fm-cabinet .latepoint-w .os-form-group.os-form-textfield-group textarea.os-form-control:focus {
  outline: none !important; border-color: var(--fm-taupe) !important; }

/* кнопки LatePoint */
.fm-cabinet .latepoint-w .latepoint-btn { font-family: var(--fm-font-body) !important;
  border-radius: 0 !important; box-shadow: none !important; text-shadow: none !important; }
.fm-cabinet .latepoint-w .latepoint-btn-primary { background: var(--fm-primary) !important;
  color: var(--fm-cream) !important; border: 0 !important; font-size: 11px !important;
  letter-spacing: 2.42px !important; text-transform: uppercase !important;
  padding: 16px !important; transition: background-color .25s ease !important; }
.fm-cabinet .latepoint-w .latepoint-btn-primary:hover,
.fm-cabinet .latepoint-w .latepoint-btn-primary:focus { background: #635146 !important;
  color: var(--fm-cream) !important; }
.fm-cabinet .latepoint-w .latepoint-btn-block { display: block; width: 100%; text-align: center; }

/* «Forgot?» и лейблы полей входа.
   Разметка LatePoint: у полей класс .os-form-group-transparent — лейбл абсолютный ВНУТРИ поля,
   дублирует placeholder; ссылка «Forgot?» лежит тем же слоем и налезала на поле. Плюс у ссылки
   сразу три класса (latepoint-btn + -primary + -link), поэтому правила для кнопок задавали ей
   кремовый цвет и padding 16px, а её <span> оставался синим (--latepoint-brand-primary #1d7bff —
   дефолт LatePoint, он же красил кнопку Continue).
   Теперь: лейбл визуально скрыт (для скринридеров остаётся), placeholder виден, «Forgot?» —
   маленькая ссылка в цвете сайта под полем справа. */
.fm-cabinet .latepoint-w .os-form-group-transparent label {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; margin: 0 !important; }
.fm-cabinet .os-customer-login-password-fields-w { position: relative; text-align: right; }
.fm-cabinet .latepoint-w .latepoint-btn.step-forgot-password-btn { position: static !important;
  display: block !important; margin: 14px 0 0 !important; padding: 0 !important; text-align: center !important;
  height: auto !important; min-height: 0 !important; background: none !important; border: 0 !important; }
.fm-cabinet .latepoint-w .latepoint-btn.latepoint-btn-link,
.fm-cabinet .latepoint-w .latepoint-btn.latepoint-btn-link span { color: var(--fm-muted) !important;
  background: none !important; border: 0 !important; font-size: 12px !important;
  line-height: 1.5 !important; letter-spacing: .2px !important; text-transform: none !important;
  padding: 0 !important; text-decoration: none !important; }
.fm-cabinet .latepoint-w .latepoint-btn.latepoint-btn-link:hover span { text-decoration: underline !important;
  text-underline-offset: 3px; }
.fm-cabinet .latepoint-w .latepoint-btn.latepoint-btn-link:hover,
.fm-cabinet .latepoint-w .latepoint-btn.latepoint-btn-link:hover span { color: var(--fm-taupe) !important; }

/* карточка регистрации (отдельная форма) */
.fm-cab-reg { background: #fff; border: 1px solid var(--fm-border); padding: 32px;
  margin-top: 24px; }
.fm-cab-reg-title { font-family: var(--fm-font-display); font-weight: 300; font-size: 24px;
  line-height: 1.2; letter-spacing: 2px; text-transform: uppercase; color: var(--fm-ink);
  margin: 0 0 20px; }
.fm-cab-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fm-cab-field { margin-bottom: 16px; }
.fm-cab-field label { display: block; font-size: 11px; line-height: 1.5; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--fm-muted); margin-bottom: 6px; }
.fm-cabinet .fm-cab-field input { width: 100%; border: 1px solid var(--fm-border); background: #fff;
  border-radius: 0; box-shadow: 0 0 0 1000px #fff inset; padding: 14px; font-family: var(--fm-font-body);
  font-size: 14px; line-height: 1.4; color: var(--fm-ink); }
.fm-cabinet .fm-cab-field input:focus { outline: none; border-color: var(--fm-taupe); }
.fm-cabinet .fm-cab-btn { width: 100%; margin-top: 8px; background: var(--fm-primary);
  color: var(--fm-cream); border: 0; border-radius: 0; padding: 16px;
  font-family: var(--fm-font-body) !important; font-size: 11px !important;
  letter-spacing: 2.42px !important; text-transform: uppercase !important; cursor: pointer;
  transition: background-color .25s ease; }
.fm-cabinet .fm-cab-btn:hover { background: #635146; }
.fm-cab-err { color: #A33; font-size: 13px; line-height: 20px; margin: 0 0 16px; }

/* кабинет после входа (LatePoint) — базовые шрифты сайта */
.fm-cabinet .latepoint-customer-dashboard,
.fm-cabinet .os-customer-dashboard-w { font-family: var(--fm-font-body); }

@media (max-width: 1024px) {
  .fm-cabinet .site-main { padding: 128px 24px 64px; }
  .fm-cab-h1 { font-size: 34px; }
  .fm-cabinet .latepoint-login-form-w,
  .fm-cab-reg { padding: 24px; }
  .fm-cab-row { grid-template-columns: 1fr; gap: 0; }
}

/* ===== Автозаполнение браузера: убираем синий фон полей (#E8F0FE) =====
   Chrome/Edge красят поля с сохранённым логином-паролем служебным цветом
   (-internal-autofill-selected = rgb(232,240,254) = #E8F0FE). Перебить его
   обычным background невозможно — только inset-тенью поверх + задержкой
   transition, иначе браузер возвращает свой фон. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: var(--fm-ink) !important;
  caret-color: var(--fm-ink);
  transition: background-color 9999999s ease-in-out 0s !important;
}

/* кабинет: у автозаполненного поля сохраняем нашу рамку */
.fm-cabinet .latepoint-w .os-form-group.os-form-textfield-group input.os-form-control:-webkit-autofill,
.fm-cabinet .fm-cab-field input:-webkit-autofill {
  border-color: var(--fm-border) !important;
}

/* ===== Шрифты экранов сброса пароля (LatePoint) =====
   Шаги «Reset Password Request» и «Change Your Password» LatePoint рисует своими
   стилями: заголовок h4 (24px/600) и абзац p (15px) — служебным шрифтом 'latepoint',
   лейблы — 12px цветом #959AAE, ссылка «cancel» — красным (--latepoint-danger #BD3D3D).
   Приводим к сайту: заголовок — как название карточки (.latepoint-customer-box-title),
   текст — как .fm-cab-sub, лейблы — как у полей входа. Правим оба шага сразу: они
   рендерятся в один и тот же .os-password-reset-form-holder. */
.fm-cabinet .latepoint-w .os-password-reset-form-w h4 {
  font-family: var(--fm-font-display) !important; font-weight: 300 !important;
  font-size: 20px !important; line-height: 1.2 !important; letter-spacing: 1.6px !important;
  text-transform: uppercase !important; color: var(--fm-ink) !important;
  /* «cancel» у LatePoint — absolute top/right в этой же строке: резервируем под неё место,
     иначе заголовок в шрифте сайта налезает на ссылку */
  padding-right: 76px !important; margin: 0 0 16px !important; }
.fm-cabinet .latepoint-w .os-password-reset-form-w p {
  font-family: var(--fm-font-body) !important; font-size: 14px !important;
  line-height: 22.75px !important; color: var(--fm-muted) !important; margin: 0 0 20px !important; }
.fm-cabinet .latepoint-w .os-password-reset-form-w .os-form-group-transparent label {
  font-family: var(--fm-font-body) !important; font-size: 11px !important;
  letter-spacing: 1.6px !important; text-transform: uppercase !important;
  color: var(--fm-muted) !important; }
/* «cancel» + иконка: у LatePoint красный цвет «опасности» — у сайта приглушённый */
.fm-cabinet .latepoint-w a.password-reset-back-to-login,
.fm-cabinet .latepoint-w a.password-reset-back-to-login span {
  font-family: var(--fm-font-body) !important; font-size: 12px !important;
  letter-spacing: .2px !important; color: var(--fm-muted) !important;
  text-transform: capitalize !important; text-decoration: none !important; }
.fm-cabinet .latepoint-w a.password-reset-back-to-login:hover { color: var(--fm-taupe) !important; }
.fm-cabinet .latepoint-w a.password-reset-back-to-login:hover span { text-decoration: underline !important;
  text-underline-offset: 3px; }
/* сообщения об ошибке/успехе в кабинете (шрифт сайта, без синевы LatePoint) */
.fm-cabinet .latepoint-w .latepoint-message,
.fm-cabinet .latepoint-w .os-message {
  font-family: var(--fm-font-body) !important; font-size: 13px !important;
  line-height: 20px !important; border-radius: 0 !important; }
.fm-cabinet .latepoint-w .latepoint-message-error,
.fm-cabinet .latepoint-w .latepoint-message-danger { color: #A33 !important; }
.fm-cabinet .latepoint-w .latepoint-message-success { color: #3f6b4a !important; }

/* ===== Кабинет после входа (дашборд LatePoint) =====
   Разметка: <a>Logout</a> <h4>Welcome …</h4> .latepoint-tabs-w > .latepoint-tab-triggers
   > a.latepoint-tab-trigger + .latepoint-message-info «No appointments found».
   LatePoint рисует всё служебным шрифтом 'latepoint' и своими цветами (табы #7C85A3,
   Logout #CC3366). Заголовок — как название карточки, табы — как Sign in / Register. */
.fm-cabinet .latepoint-w h1,
.fm-cabinet .latepoint-w h2,
.fm-cabinet .latepoint-w h3,
.fm-cabinet .latepoint-w h4,
.fm-cabinet .latepoint-w h5,
.fm-cabinet .latepoint-w h6 {
  font-family: var(--fm-font-display) !important; font-weight: 300 !important;
  font-size: 24px !important; line-height: 1.2 !important; letter-spacing: 2px !important;
  text-transform: uppercase !important; color: var(--fm-ink) !important; }
/* табы кабинета */
.fm-cabinet .latepoint-w .customer-dashboard-tabs { width: 100% !important; margin-top: 44px !important; border-bottom: 1px solid var(--fm-border) !important; }
.fm-cabinet .latepoint-w .customer-dashboard-tabs a.latepoint-tab-trigger {
  font-family: var(--fm-font-body) !important; font-size: 11px !important; font-weight: 400 !important;
  letter-spacing: 2.42px !important; text-transform: uppercase !important;
  color: var(--fm-muted) !important; background: none !important;
  padding: 0 0 12px !important; border-bottom: 1px solid transparent !important;
  transition: color .15s ease, border-color .15s ease !important; }
.fm-cabinet .latepoint-w .customer-dashboard-tabs a.latepoint-tab-trigger:hover { color: var(--fm-taupe) !important; }
.fm-cabinet .latepoint-w .customer-dashboard-tabs a.latepoint-tab-trigger.active {
  color: var(--fm-ink) !important; border-bottom-color: var(--fm-ink) !important; }
/* Logout — заметная кнопка справа от заголовка «Welcome …» (float, т.к. в разметке
   LatePoint ссылка идёт перед h4 и должна встать с ним в одну строку) */
.fm-cabinet .latepoint-w > a[href*="logout"] {
  float: right; margin: 0 0 12px 16px; padding: 12px 22px;
  border: 1px solid var(--fm-border) !important; background: #fff !important;
  font-family: var(--fm-font-body) !important; font-size: 11px !important;
  letter-spacing: 2px !important; text-transform: uppercase !important;
  color: var(--fm-ink) !important; text-decoration: none !important; line-height: 1;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.fm-cabinet .latepoint-w > a[href*="logout"]:hover {
  background: #635146 !important; border-color: #635146 !important; color: #fff !important;
  text-decoration: none !important; }
/* «New Appointment» — CTA в стиле кнопки Book Now (тауп #958273, ховер #635146):
   order: 9 + margin-left: auto уводят её в правый край строки табов, остальные остаются слева */
.fm-cabinet .latepoint-w .customer-dashboard-tabs a.latepoint-tab-trigger[data-tab-target*="new-appointment"],
.fm-cabinet .latepoint-w .customer-dashboard-tabs a.latepoint-tab-trigger[data-tab-target*="new-appointment"].active {
  order: 9 !important; margin-left: auto !important; margin-right: 0 !important; padding: 14px 28px !important;
  background: var(--fm-taupe) !important; border: 0 !important; border-radius: 3px !important;
  color: #F6F4F0 !important; letter-spacing: 2.2px !important; line-height: 1 !important; }
.fm-cabinet .latepoint-w .customer-dashboard-tabs a.latepoint-tab-trigger[data-tab-target*="new-appointment"]:hover,
.fm-cabinet .latepoint-w .customer-dashboard-tabs a.latepoint-tab-trigger[data-tab-target*="new-appointment"].active:hover {
  background: #635146 !important; color: #F6F4F0 !important; }
/* Кабинет: во вкладке «New Appointment» лежит наша форма записи (шорткод [focus_booking],
   тот же интерфейс, что на /booking/) — у неё свои шрифты и отступы из booking.css,
   поэтому отменяем общие правила кабинета и выравниваем её по краю контента. */
.fm-cabinet .latepoint-w .fm-cab-newappt .fmb { padding: 32px 0 48px; background: transparent; }
.fm-cabinet .latepoint-w .fm-cab-newappt .fmb-inner { padding: 0; }
.fm-cabinet .latepoint-w .fm-cab-newappt h1,
.fm-cabinet .latepoint-w .fm-cab-newappt h2,
.fm-cabinet .latepoint-w .fm-cab-newappt h3,
.fm-cabinet .latepoint-w .fm-cab-newappt h4 {
  font-family: var(--fm-font-display) !important; font-weight: 300 !important;
  letter-spacing: 3px !important; text-transform: uppercase !important; color: var(--fm-ink) !important; }
.fm-cabinet .latepoint-w .fm-cab-newappt .fmb-title { font-size: 30px !important; }
.fm-cabinet .latepoint-w .fm-cab-newappt .fmb-done-title { font-size: 34px !important; letter-spacing: normal !important; }

/* «No appointments found» и другие info-сообщения — песочная плашка сайта */
.fm-cabinet .latepoint-w .latepoint-message-info {
  background: var(--fm-sand) !important; color: var(--fm-muted) !important;
  border: 0 !important; padding: 12px 16px !important; }

/* Кабинет на узких экранах: строка табов переносится (иначе CTA уезжает за край окна),
   CTA остаётся справа на своей строке за счёт margin-left: auto. */
@media (max-width: 1024px) {
  .fm-cabinet .latepoint-w .customer-dashboard-tabs { flex-wrap: wrap !important; row-gap: 12px !important; margin-top: 32px !important; }
  .fm-cabinet .latepoint-w .customer-dashboard-tabs a.latepoint-tab-trigger { padding-bottom: 10px !important; }
}

/* ===== Оформление заказа WooCommerce: удаление позиции =====
   В блоке checkout у позиции Order summary нет своей кнопки удаления (в блоке корзины есть),
   поэтому кнопку «Remove» дописывает скрипт из functions.php (focusmassage_checkout_remove_script). */
.wc-block-components-order-summary-item .fm-cart-remove {
  background: none; border: 0; padding: 0; margin: 8px 0 0; cursor: pointer;
  font-family: var(--fm-font-body); font-size: 12px; line-height: 1.5;
  letter-spacing: .2px; color: var(--fm-muted); text-decoration: underline;
  text-underline-offset: 3px; text-align: left; }
.wc-block-components-order-summary-item .fm-cart-remove:hover { color: var(--fm-taupe); }
.wc-block-components-order-summary-item .fm-cart-remove[disabled] { opacity: .6; cursor: default; }
.fm-cart-edit {
  display: inline-block; margin-top: 12px;
  font-family: var(--fm-font-body); font-size: 12px; letter-spacing: .2px;
  color: var(--fm-muted); text-decoration: underline; text-underline-offset: 3px; }
.fm-cart-edit:hover { color: var(--fm-taupe); }

/* ===== Языковой переключатель WPML: виден и на десктопе, выпадающий список ===== */
@media (min-width:1025px){
  .fm-hnav .elementor-nav-menu--main .menu-item.lang-switch{ display:inline-block !important; position:relative; margin-left:12px; }
  .fm-hnav .elementor-nav-menu--main .menu-item.lang-switch > .elementor-item{
    color:#4F4B47 !important; font-size:12px !important; letter-spacing:.18em !important;
    text-transform:uppercase !important; padding:2px 0 2px 14px !important;
    border-left:1px solid rgba(37,31,27,.18) !important; line-height:1 !important;
  }
  .fm-hnav .elementor-nav-menu--main .menu-item.lang-switch .sub-menu{
    position:absolute; right:0; top:100%; min-width:132px; margin:10px 0 0; padding:6px 0;
    background:#FBF9F5; border:1px solid #DFD9D0; box-shadow:0 12px 28px rgba(37,31,27,.10);
    list-style:none; opacity:0; visibility:hidden; transform:translateY(4px);
    transition:opacity .18s ease, transform .18s ease, visibility .18s; z-index:1000;
  }
  .fm-hnav .elementor-nav-menu--main .menu-item.lang-switch:hover .sub-menu,
  .fm-hnav .elementor-nav-menu--main .menu-item.lang-switch:focus-within .sub-menu{
    opacity:1; visibility:visible; transform:none;
  }
  .fm-hnav .elementor-nav-menu--main .menu-item.lang-switch .sub-menu .elementor-sub-item{
    display:block; padding:9px 16px !important; color:#4F4B47 !important; font-size:12px !important;
    letter-spacing:.06em !important; text-transform:none !important; line-height:1.3 !important;
  }
  .fm-hnav .elementor-nav-menu--main .menu-item.lang-switch .sub-menu .elementor-sub-item:hover{
    background:#F2EDE5 !important; color:#251F1B !important;
  }
  .fm-hnav .elementor-nav-menu--main .menu-item.lang-switch .sub-menu .current-menu-item .elementor-sub-item{
    color:#958273 !important;
  }
}

/* ===== Языковой переключатель: дропдаун на всех разрешениях (2026-10-01) =====
   Список языков скрыт по умолчанию и раскрывается по клику (.is-open, JS) или
   наведению/фокусу (десктоп). Раньше на мобильном список был развёрнут плоско. */
.fm-hnav .elementor-nav-menu .menu-item.lang-switch{ position:relative; }
.fm-hnav .elementor-nav-menu .menu-item.lang-switch > .sub-menu{ display:none !important; }
.fm-hnav .elementor-nav-menu .menu-item.lang-switch.is-open > .sub-menu,
.fm-hnav .elementor-nav-menu .menu-item.lang-switch:focus-within > .sub-menu{ display:block !important; }
.fm-hnav .elementor-nav-menu .menu-item.lang-switch > .elementor-item::after{
  content:"▾"; margin-left:6px; font-size:10px; line-height:1; color:#958273; display:inline-block;
}
.fm-hnav .elementor-nav-menu .menu-item.lang-switch > .sub-menu .elementor-sub-item{ cursor:pointer; }
@media (min-width:1025px){
  .fm-hnav .elementor-nav-menu--main .menu-item.lang-switch:hover > .sub-menu{ display:block !important; }
  .fm-hnav .elementor-nav-menu--main .menu-item.lang-switch > .sub-menu{
    position:absolute; right:0; top:100%; left:auto; min-width:132px; margin:10px 0 0; padding:6px 0;
    background:#FBF9F5; border:1px solid #DFD9D0; box-shadow:0 12px 28px rgba(37,31,27,.10);
    opacity:1; visibility:visible; transform:none; z-index:1000;
  }
  .fm-hnav .elementor-nav-menu--main .menu-item.lang-switch > .sub-menu .elementor-sub-item{
    display:block; padding:9px 16px !important; color:#4F4B47 !important; font-size:12px !important;
    letter-spacing:.06em !important; text-transform:none !important; line-height:1.3 !important;
  }
  .fm-hnav .elementor-nav-menu--main .menu-item.lang-switch > .sub-menu .elementor-sub-item:hover{
    background:#F2EDE5 !important; color:#251F1B !important;
  }
  .fm-hnav .elementor-nav-menu--main .menu-item.lang-switch > .sub-menu .current-menu-item .elementor-sub-item{
    color:#958273 !important;
  }
}
@media (max-width:1024px){
  .fm-hnav .elementor-nav-menu__container .menu-item.lang-switch > .sub-menu{
    position:static; display:none !important; margin:0 0 8px; padding:2px 0 2px 14px !important;
    border-left:1px solid rgba(37,31,27,.14) !important;
  }
  .fm-hnav .elementor-nav-menu__container .menu-item.lang-switch.is-open > .sub-menu,
  .fm-hnav .elementor-nav-menu__container .menu-item.lang-switch:focus-within > .sub-menu{
    display:block !important;
  }
}

/* ===== Переключатель языков в правом блоке шапки (.fm-hact), слева от иконки входа =====
   Функциональный чип живёт в виджете Text Editor (шорткод [fm_lang_switcher]); на ≤1024 этот
   виджет скрыт и работает переключатель в мобильном меню (.menu-item.lang-switch). */
.fm-hact .fm-langchip{
  position:relative; display:inline-flex; align-items:center; gap:4px; cursor:pointer;
  color:#4F4B47; font-size:12px; letter-spacing:.14em; text-transform:uppercase; line-height:1;
  padding:4px 2px; transition:color .15s ease; user-select:none;
}
.fm-hact .fm-langchip:hover, .fm-hact .fm-langchip:focus-visible, .fm-hact .fm-langchip.is-open{ color:#958273; }
.fm-hact .fm-langchip-arr{ font-size:9px; line-height:1; }
.fm-hact .fm-langmenu{
  position:absolute; right:0; top:100%; min-width:132px; margin-top:10px; padding:6px 0;
  background:#FBF9F5; border:1px solid #DFD9D0; box-shadow:0 12px 28px rgba(37,31,27,.10);
  text-align:left; z-index:1000; display:none;
}
.fm-hact .fm-langchip.is-open .fm-langmenu,
.fm-hact .fm-langchip:hover .fm-langmenu,
.fm-hact .fm-langchip:focus-within .fm-langmenu{ display:block; }
.fm-hact .fm-langmenu .fm-langitem{
  display:block; padding:9px 16px; color:#4F4B47; font-size:12px; letter-spacing:.06em;
  text-transform:none; text-decoration:none; white-space:nowrap;
}
.fm-hact .fm-langmenu .fm-langitem:hover{ background:#F2EDE5; color:#251F1B; }
.fm-hact .fm-langmenu .fm-langitem.is-current{ color:#958273; }
/* на десктопе дублирующий чип из меню скрыт (переключатель — в правом блоке) */
@media (min-width:1025px){
  .fm-hnav .elementor-nav-menu--main .menu-item.lang-switch{ display:none !important; }
}

/* ===== Переключатель языков: шеврон и дропдаун — как в обычном меню (десктоп) =====
   Обычное меню: SVG-шеврон .sub-arrow (8×8, padding-left 10px), панель #FBF9F5 с рамкой
   #DFD9D0 без тени, пункты 11px / letter-spacing 2.4px / uppercase, цвет #4F4B47,
   hover: текст #958273 на фоне #F2EDE5. Повторяем те же значения. */
@media (min-width:1025px){
  .fm-hact .fm-langchip{
    color:#4F4B47; font-size:11px; letter-spacing:2.4px; text-transform:uppercase;
    gap:0; padding:0; line-height:11px;
  }
  .fm-hact .fm-langchip:hover, .fm-hact .fm-langchip:focus-visible, .fm-hact .fm-langchip.is-open{ color:#958273; }
  .fm-hact .fm-langchip-arr{ display:inline-flex; align-items:center; padding:10px 0 10px 10px; font-size:11px; }
  .fm-hact .fm-langchip-arr .fm-langchev{ width:8px; height:8px; display:block; fill:currentColor; }
  .fm-hact .fm-langmenu{
    background:#FBF9F5; border:1px solid #DFD9D0; box-shadow:none; padding:0; min-width:0;
  }
  .fm-hact .fm-langmenu .fm-langitem{
    display:flex; align-items:center; padding:10px 20px; font-size:11px; letter-spacing:2.4px;
    text-transform:uppercase; color:#4F4B47; line-height:20px; text-decoration:none; white-space:nowrap;
  }
  .fm-hact .fm-langmenu .fm-langitem:hover,
  .fm-hact .fm-langmenu .fm-langitem:focus{ background:#F2EDE5; color:#958273; }
  .fm-hact .fm-langmenu .fm-langitem.is-current{ color:#958273; }
}

/* ===== Языковой дропдаун: мягкое выпадание как у дропдауна основного меню =====
   Elementor (widget-nav-menu.min.css) открывает дропдаун так:
     hidden: max-height:0; overflow:hidden; transform:scaleY(0)
     shown:  max-height:var(--menu-height); transform:scaleY(1)
     transition: max-height .3s, transform .3s; transform-origin: top
   Повторяем ту же механику и тайминг для панели языков (плюс лёгкий fade). */
@media (min-width:1025px){
  .fm-hact .fm-langmenu{
    display:block !important;
    max-height:0; overflow:hidden; transform:scaleY(0); transform-origin:top center;
    opacity:0; pointer-events:none;
    transition:max-height .3s ease, transform .3s ease, opacity .3s ease;
  }
  .fm-hact .fm-langchip.is-open .fm-langmenu,
  .fm-hact .fm-langchip:hover .fm-langmenu,
  .fm-hact .fm-langchip:focus-within .fm-langmenu{
    max-height:400px; transform:scaleY(1); opacity:1; pointer-events:auto;
  }
}

/* ===== Появление лого в шапке при загрузке страницы (2026-10-01) =====
   Лого = SVG-лотос (67×40) + вордмарк «FOCUS» / «Estonia». Каскад: лотос мягко
   «расцветает» (fade + scale 0.9→1, снизу вверх), затем построчно всплывает вордмарк,
   и один раз проходит лёгкий световой блик. Тайминг/кривая — как у reveal-системы сайта
   (cubic-bezier(.22,.61,.36,1)). Уважает prefers-reduced-motion. */
@keyframes fm-logo-mark {
  from { opacity: 0; transform: translateY(10px) scale(.88); }
  to   { opacity: 1; transform: none; }
}
@keyframes fm-logo-word {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fm-logo-sheen {
  0%   { transform: translateX(-130%) skewX(-12deg); opacity: 0; }
  25%  { opacity: .55; }
  100% { transform: translateX(150%) skewX(-12deg); opacity: 0; }
}

.fm-hlogo a { position: relative; }
.fm-hlogo a > svg {
  transform-origin: 50% 62%;
  animation: fm-logo-mark 1.05s cubic-bezier(.22,.61,.36,1) both;
}
.fm-hlogo a > span > span:first-child {   /* FOCUS */
  animation: fm-logo-word .95s cubic-bezier(.22,.61,.36,1) .22s both;
}
.fm-hlogo a > span > span:last-child {    /* Estonia */
  animation: fm-logo-word .95s cubic-bezier(.22,.61,.36,1) .36s both;
}
/* один мягкий блик по лого после появления */
.fm-hlogo a::after {
  content: ""; position: absolute; top: -10%; bottom: -10%; width: 40%;
  left: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.75) 50%, rgba(255,255,255,0) 100%);
  filter: blur(2px);
  animation: fm-logo-sheen 1.2s cubic-bezier(.4,.1,.2,1) .7s 1 both;
}
@media (prefers-reduced-motion: reduce) {
  .fm-hlogo a > svg,
  .fm-hlogo a > span > span:first-child,
  .fm-hlogo a > span > span:last-child,
  .fm-hlogo a::after { animation: none !important; opacity: 1 !important; transform: none !important; }
}