/* ============================================================
   aroma-custom.css — фирменный слой поверх Cartzilla/Bootstrap.
   Бренд «Наталья Ульянова»: велнес для женщин 35+, «дорогой
   европейский» спокойный стиль, где наука встречается с природой.

   Дизайн-система по брифу Натальи (docs/frontend/дизайн-бриф-2026-07-09.md):
   - Шрифты: заголовки — Cormorant Garamond, текст/кнопки — Manrope.
   - Палитра: молочный фон + беж карточек + шалфейный акцент,
     пыльная лаванда и приглушённое золото — как вторичные акценты.
   Подключается ПОСЛЕ theme.min.css, поэтому переопределяет переменные.
   ⚠️ Cartzilla красит компоненты через свои --cz-*, а не только --bs-*.
   ============================================================ */

:root {
  /* --- Палитра (бриф Натальи) --- */
  --aroma-milk:        #f6f3ef;   /* основной фон страницы */
  --aroma-beige:       #ece6df;   /* фон карточек/секций */
  --aroma-beige-line:  #e2dbd1;   /* тонкие бордюры на тёплом фоне */

  --aroma-sage:        #8d927a;   /* шалфейный акцент (фон, бейджи) */
  --aroma-sage-dark:   #66705a;   /* интерактив/текст/кнопки — контраст AA */
  --aroma-sage-darker: #545c46;   /* hover/active */

  --aroma-lavender:      #b8a7c3; /* пыльная лаванда — мягкий акцент, иллюстрации */
  --aroma-lavender-dark: #6f6285; /* лаванда для текста/кнопок — контраст AA */
  --aroma-lavender-soft: #efeaf3; /* светлый тинт лаванды (подложки) */

  --aroma-gold:        #b89e7a;   /* приглушённое золото — тонкие детали */
  --aroma-gold-dark:   #9c8560;

  --aroma-ink:         #494744;   /* основной текст/заголовки */
  --aroma-muted:       #8a857d;   /* вторичный текст */
  --aroma-cream:       #f6f3ef;   /* алиас на молочный (совместимость с шаблонами) */

  /* --- Primary → шалфей. Переопределяем и --bs-*, и --cz-*. --- */
  --bs-primary:        var(--aroma-sage-dark);
  --bs-primary-rgb:    102, 112, 90;
  --bs-link-color:     var(--aroma-sage-dark);
  --bs-link-color-rgb: 102, 112, 90;
  --bs-link-hover-color: var(--aroma-sage-darker);

  --cz-primary:        var(--aroma-sage-dark);
  --cz-primary-rgb:    102, 112, 90;
  --cz-primary-text-emphasis: var(--aroma-sage-darker);
  --cz-primary-bg-subtle:     var(--aroma-beige);
  --cz-primary-border-subtle: var(--aroma-beige-line);
  --cz-link-color:     var(--aroma-sage-dark);
  --cz-link-color-rgb: 102, 112, 90;
  --cz-link-hover-color: var(--aroma-sage-darker);
  --cz-link-hover-color-rgb: 84, 92, 70;

  /* --- Тёплый фон и текст на уровне токенов --- */
  --bs-body-bg:        var(--aroma-milk);
  --cz-body-bg:        var(--aroma-milk);
  --bs-body-color:     var(--aroma-ink);
  --cz-body-color:     var(--aroma-ink);
  --bs-secondary-color: var(--aroma-muted);

  /* --- Типографика: весь сайт — Cormorant Garamond (просьба Натальи 2026-07-11) --- */
  --aroma-font:             'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --bs-font-sans-serif:     'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; /* легаси, не используется */
  --bs-body-font-family:    var(--aroma-font);
  --cz-body-font-family:    var(--aroma-font);
  --bs-headings-font-family: var(--aroma-font);

  /* --- Мягкие скругления --- */
  --bs-border-radius:    .625rem;
  --bs-border-radius-lg: 1rem;
  --bs-border-radius-xl: 1.25rem;
}

body {
  font-family: var(--bs-body-font-family);
  /* Cormorant тоньше и мельче гротеска — поднимаем вес и размер для читаемости абзацев */
  font-weight: 500;
  font-size: 1.09rem;
  line-height: 1.6;
  background-color: var(--aroma-milk);
  color: var(--aroma-ink);
}
/* Cormorant рисует «тонко» на вебе — сглаживаем и держим вес интерфейсных элементов */
.btn, .nav-link, .navbar, .badge, input, textarea, button, .form-control { font-weight: 500; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { color: var(--aroma-ink); }

/* Карточки Cartzilla остаются светлыми — на молочном фоне дают глубину */
.card { --cz-card-bg: #fff; }

/* --- Кнопки (Cartzilla читает --cz-btn-*) --- */
.btn-primary {
  --cz-btn-bg: var(--aroma-sage-dark);
  --cz-btn-border-color: var(--aroma-sage-dark);
  --cz-btn-hover-bg: var(--aroma-sage-darker);
  --cz-btn-hover-border-color: var(--aroma-sage-darker);
  --cz-btn-active-bg: var(--aroma-sage-darker);
  --cz-btn-active-border-color: var(--aroma-sage-darker);
  --cz-btn-disabled-bg: var(--aroma-sage);
  --cz-btn-disabled-border-color: var(--aroma-sage);
  --cz-btn-focus-shadow-rgb: 102, 112, 90;
}
.btn-outline-primary {
  --cz-btn-color: var(--aroma-sage-dark);
  --cz-btn-border-color: var(--aroma-sage);
  --cz-btn-hover-color: #fff;
  --cz-btn-hover-bg: var(--aroma-sage-dark);
  --cz-btn-hover-border-color: var(--aroma-sage-dark);
  --cz-btn-active-color: #fff;
  --cz-btn-active-bg: var(--aroma-sage-darker);
  --cz-btn-active-border-color: var(--aroma-sage-darker);
  --cz-btn-focus-shadow-rgb: 102, 112, 90;
}
/* Вторичный акцент — пыльная лаванда */
.btn-accent {
  --cz-btn-color: #fff;
  --cz-btn-bg: var(--aroma-lavender-dark);
  --cz-btn-border-color: var(--aroma-lavender-dark);
  --cz-btn-hover-color: #fff;
  --cz-btn-hover-bg: #5d5170;
  --cz-btn-hover-border-color: #5d5170;
  --cz-btn-active-color: #fff;
  --cz-btn-active-bg: #5d5170;
  --cz-btn-active-border-color: #5d5170;
  color: #fff;
}

/* --- Утилиты палитры (имена сохранены для совместимости шаблонов) --- */
.text-primary  { color: var(--aroma-sage-dark) !important; }
.bg-primary    { background-color: var(--aroma-sage-dark) !important; }
.border-primary{ border-color: var(--aroma-sage) !important; }
.text-accent   { color: var(--aroma-sage-dark) !important; }
.bg-accent     { background-color: var(--aroma-sage) !important; }
.bg-lavender-soft { background-color: var(--aroma-beige) !important; }   /* тёплая альт-подложка секций */
.bg-cream      { background-color: var(--aroma-milk) !important; }
.link-accent   { color: var(--aroma-sage-dark); }
.text-gold     { color: var(--aroma-gold-dark) !important; }

/* --- Навигация --- */
/* Логотип заглавными в серифе Cormorant + лавандовая иконка-сприг (бриф Натальи 2026-07-10) */
.navbar-brand { min-width: 0; }   /* даём лого сжиматься, чтобы шапка не переносилась */
.navbar-brand .brand-name {
  color: var(--aroma-ink);
  text-transform: uppercase;
  font-weight: 500;            /* лёгкое начертание — как в референсе Google Fonts */
  font-size: 1.25rem;          /* мобила: кнопка входа ушла в меню, имени хватает места */
  letter-spacing: .04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.navbar-brand .brand-tagline {
  margin-top: .18rem;
  /* один шрифт с логотипом (Cormorant) + тот же цвет; растянут по ширине имени */
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: var(--aroma-ink);
  text-align: justify;
  text-align-last: justify;
}
@media (min-width: 1200px) {
  .navbar-brand { min-width: auto; }   /* на десктопе лого не сжимаем — показываем целиком */
  .navbar-brand .brand-name { font-size: 1.45rem; letter-spacing: .06em; }
}
.navbar-brand-icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.navbar-brand-icon .brand-lav { height: 40px; width: auto; display: block; }
.navbar .nav-link.active,
.navbar .nav-link:hover { color: var(--aroma-sage-dark) !important; }

/* Минимальный радиус кнопок (бриф Натальи: «скругление минимальным») */
.rounded-min { border-radius: 4px !important; }

/* Декоративная лаванда линиями справа в hero (десктоп) */
.hero-lavender {
  position: absolute;
  right: 0; top: 50%; transform: translateY(-50%);
  height: 72%; width: auto; max-width: 18%;
  opacity: .3; pointer-events: none; z-index: 0;
}

/* Hero split-раскладка (макет Натальи v2): текст слева на молочном, фото во всю высоту справа */
.hero-copy { max-width: 560px; margin: 0 auto; padding: 1.25rem 1.5rem 2rem; }
@media (min-width: 992px) { .hero-copy { padding: 4rem 3rem; } }
.text-lavender { color: var(--aroma-lavender-dark); }
/* Красивая лаванда-акцент (иллюстрация по примеру Натальи) */
.hero-lav-accent { height: 66px; width: auto; display: block; }
/* Заголовок hero: одна строка + вес/цвет как у лого (просьба Натальи 2026-07-11) */
.hero-title {
  white-space: nowrap;
  font-size: clamp(1.65rem, 6.2vw, 3rem);
  font-weight: 500;
  color: var(--aroma-ink);
  line-height: 1.1;
}
.hero-manifest { border-left: 3px solid var(--aroma-lavender); }
.hero-photo-right { height: 100%; min-height: 320px; }
.hero-photo-right picture { display: block; height: 100%; }
.hero-photo-right img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
@media (max-width: 991.98px) { .hero-photo-right { height: 50vh; } }
/* На десктопе hero по высоте ≈ высоте экрана, фото компактнее (правка Натальи 2026-07-24) */
@media (min-width: 992px) { .aroma-hero-split .row { min-height: 82vh; } }

/* --- Лендинг Аромаклуба: крупнее основной текст (правка Натальи 2026-07-24) ---
   Scoped на .community-lp, чтобы не задеть главную/блог/ЛК (общий CSS). */
.community-lp { font-size: 1.3rem; }                  /* основной текст — как на 1-м экране (крупно) */
/* ⚠ Cartzilla красит .fs-* через !important — переопределяем тоже с !important */
/* Единый размер тела: лид-абзацы приравнены к основному (было 1.4 — почти дубль 1.3, слабая иерархия). Рефайн 2026-07-24 */
.community-lp .fs-lg { font-size: 1.3rem !important; }  /* абзацы hero/определение/«Почему»/бизнес — как основной текст */
.community-lp .fs-base { font-size: 1.25rem !important; } /* текст карточек «Вам стоит присоединиться» */
.community-lp .btn { font-size: 1.15rem; line-height: 1.3; }  /* line-height 1.3 — было 0.9 (риск подрезки Cormorant) */
.community-lp .btn-lg { font-size: 1.25rem; }
.community-lp .btn-sm { font-size: 1.08rem; }
.community-lp .badge { font-size: 1.1rem; }            /* ценники */
/* Заголовки секций: 42px → ~35px, чтобы hero (48) доминировал и страница не «кричала» (рефайн 2026-07-24) */
.community-lp .display-6 { font-size: 2.2rem !important; }
/* Подзаголовки пунктов — крупнее и жирнее, чтобы не сливались с основным текстом */
.community-lp h3.h5 { font-size: 1.6rem; font-weight: 700; }

/* Плашки-страны в 1 ряд: CSS-grid (класса row-cols-8 в Bootstrap нет — макс 6) */
.community-lp .country-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
@media (min-width: 768px) { .community-lp .country-grid { grid-template-columns: repeat(8, 1fr); } }
.community-lp .badge.country-pill { font-size: .9rem; }

/* Круглое фото автора (блок «Об авторе», по разметке Натальи) */
.author-photo { width: 190px; height: 190px; object-fit: cover; object-position: top center; }

/* --- Заголовки прописными (бриф Натальи: лендинг Аромаклуба) --- */
.heading-caps { text-transform: uppercase; letter-spacing: .04em; }

/* --- Hero-фото лендинга: прямые края + мягкий градиент снизу --- */
.hero-photo { position: relative; overflow: hidden; line-height: 0; }
.hero-photo > img { width: 100%; height: auto; display: block; object-fit: cover; }
.hero-photo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
  background: linear-gradient(to top, var(--aroma-milk), transparent);
  pointer-events: none;
}
/* На мобиле фото hero — во всю ширину экрана (край в край) */
@media (max-width: 991.98px) {
  .full-bleed-sm { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
}

/* --- Перк-карточка (замена насыщенных лаванда/шалфей градиентов) --- */
.perk-card {
  background: var(--aroma-beige);
  border: 1px solid var(--aroma-beige-line);
  border-radius: .5rem;   /* меньший радиус подложек (просьба Натальи) */
}
.perk-card .perk-figure { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; line-height: 1; color: var(--aroma-sage-dark); }
.perk-card.perk-gold .perk-figure { color: var(--aroma-gold-dark); }

/* --- Hero --- */
.aroma-hero {
  background:
    radial-gradient(55% 75% at 78% 12%, rgba(184,167,195,.24), transparent 60%),
    radial-gradient(50% 65% at 12% 92%, rgba(141,146,122,.16), transparent 60%),
    linear-gradient(180deg, var(--aroma-beige) 0%, var(--aroma-milk) 100%);
}
.aroma-hero .eyebrow {
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .8rem;
  color: var(--aroma-sage-dark);
}

/* Декоративные «таблетки»-иконки секций */
.aroma-icon {
  width: 3.25rem; height: 3.25rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--aroma-beige);
  color: var(--aroma-sage-dark);
}
/* Уменьшенный кружок с цифрой шага (в линию с заголовком) */
.aroma-icon.aroma-icon-sm { width: 2.25rem; height: 2.25rem; font-size: 1rem; }

/* --- Карточки --- */
.aroma-card { transition: transform .2s ease, box-shadow .2s ease; }
.aroma-card:hover { transform: translateY(-4px); box-shadow: 0 .75rem 2rem rgba(73,71,68,.12) !important; }
.aroma-cover { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.aroma-cover-placeholder {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--aroma-beige), var(--aroma-lavender-soft));
  display: flex; align-items: center; justify-content: center;
  color: var(--aroma-sage);
}

/* --- Контентное тело (WYSIWYG) --- */
.content-body { line-height: 1.75; font-size: 1.0625rem; }
.content-body img { max-width: 100%; height: auto; border-radius: .75rem; margin: 1rem 0; }
.content-body h2 { margin-top: 2rem; margin-bottom: .75rem; }
.content-body h3 { margin-top: 1.5rem; margin-bottom: .5rem; }
.content-body a { color: var(--aroma-sage-dark); }
.content-body blockquote {
  border-left: 3px solid var(--aroma-sage);
  padding-left: 1rem; color: var(--aroma-muted); font-style: italic; margin: 1.25rem 0;
}

/* --- Футер --- */
.footer h6 { color: var(--aroma-ink); }
.footer a.nav-link:hover { color: var(--aroma-sage-dark); }

/* ============================================================
   Типографика: self-hosted шрифты с кириллицей (assets/fonts).
   - Manrope (вариативный) — основной текст и кнопки.
   - Cormorant Garamond (500/600/700) — серифные заголовки (.font-display).
   Подхватываются по unicode-range: cyrillic / latin / latin-ext.
   ============================================================ */

/* Manrope — основной текст */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/manrope-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Cormorant Garamond — серифные заголовки (.font-display) */
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/cormorant-garamond-cyrillic-500.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-ext-500.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/cormorant-garamond-cyrillic-600.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-ext-600.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/cormorant-garamond-cyrillic-700.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-ext-700.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Серифные заголовки (велнес-акцент). Применяется точечно классом .font-display.
   Cormorant Garamond крупный и «воздушный» — на дисплейных размерах смотрится лучше
   с чуть увеличенным line-height и без отрицательного трекинга. */
.font-display {
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.12;
  /* Не синтезировать жирность/наклон: все нужные начертания Cormorant загружены,
     иначе кириллица и латиница в одном заголовке рендерятся по-разному. */
  font-synthesis: none;
}

/* Надзаголовок-«eyebrow» (базовый стиль для всех страниц) */
.eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; font-weight: 600; }