/* ============================================================
   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;
  /* ⚠ Cartzilla не перекрашивает disabled-состояние вместе с остальными: неактивная
     кнопка оставалась фирменно-розовой #f55266 и без рамки (поймано на «Онлайн-продукты»
     главной, которую Наталья попросила сделать неактивной 28.08). */
  --cz-btn-disabled-color: var(--aroma-sage-dark);
  --cz-btn-disabled-border-color: var(--aroma-sage);
  --cz-btn-disabled-bg: transparent;
}
/* Вторичный акцент — пыльная лаванда */
.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;
  /* нижняя строка лого чуть крупнее (правка Натальи 2026-08-14), выравнивание по краям сохранено.
     ⚠ Cartzilla пишет .fs-xs через !important — перебиваем тоже с !important */
  font-size: .85rem !important;
}
/* Текст шапки — размером с основной текст сайта (правка Натальи 2026-08-14):
   пункты меню и кнопка «Присоединиться к Аромаклубу». */
.navbar-nav .nav-link { font-size: 1.09rem !important; }   /* было .fs-base = 16px */
.navbar .btn { --cz-btn-font-size: 1.09rem; font-size: 1.09rem; }
/* Крупный текст меню + кнопки перестал помещаться в строку — лого резалось многоточием,
   а кнопка вылезала за правый край контента. Поджимаем отступы пунктов и лого.
   ⚠ Селектор с .navbar-expand-xl — у Cartzilla правило именно такой специфичности. */
/* 2026-08-17: с 7-м пунктом меню («Купить doTERRA») строка снова перестала помещаться
   на 1280 — кнопка выходила за правую границу контента и появлялся скролл на 1px.
   Поджали отступы пунктов ещё: .625 → .4rem до 1400px, .875 → .625rem от 1400px. */
@media (min-width: 1200px) {
  .navbar-expand-xl .navbar-nav .nav-link { padding-left: .4rem; padding-right: .4rem; }
  .navbar-brand.me-xl-4 { margin-right: .5rem !important; }
}
/* 1200–1279 — самый узкий десктоп, где меню уже развёрнуто (navbar-expand-xl):
   7 пунктов + кнопка не помещаются даже с поджатыми отступами, поэтому здесь
   текст шапки опускаем до базовых 16px. На 1280 (ширина экрана Натальи) и шире
   размер остаётся прежним — 1.09rem. */
@media (min-width: 1200px) and (max-width: 1279.98px) {
  .navbar-nav .nav-link { font-size: 1rem !important; }
  .navbar .btn { --cz-btn-font-size: 1rem; font-size: 1rem; }
  .navbar-expand-xl .navbar-nav .nav-link { padding-left: .3rem; padding-right: .3rem; }
}
@media (min-width: 1400px) {   /* места хватает — возвращаем воздух */
  .navbar-expand-xl .navbar-nav .nav-link { padding-left: .625rem; padding-right: .625rem; }
  .navbar-brand.me-xl-4 { margin-right: 1rem !important; }
}
@media (min-width: 1200px) {
  /* на десктопе лого не сжимаем — показываем целиком (иначе меню, у которого flex-grow,
     забирает свободное место и имя режется многоточием) */
  .navbar-brand { min-width: auto; flex-shrink: 0; }
  .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): текст слева на молочном, фото во всю высоту справа */
/* Боковой отступ на мобиле — 1rem, как у container Bootstrap в секциях ниже:
   иначе hero стоит на своей вертикали (24px против 16px) и кнопки hero выходят
   уже кнопок остальных секций (ТЗ Натальи 29.08 «кнопки одной длины»). */
.hero-copy { max-width: 560px; margin: 0 auto; padding: 1.25rem 1rem 2rem; }
/* На десктопе текстовый блок прижат к левому краю страницы (правка Натальи 2026-08-14):
   margin-left:0 + padding-left:0 → заголовок начинается на той же вертикали, что лого
   в шапке и текст секций ниже. Справа отступ остаётся — воздух до фото. */
@media (min-width: 992px) { .hero-copy { margin-left: 0; padding: 4rem 3rem 4rem 0; } }
.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; position: relative; }
.hero-photo-right picture { display: block; height: 100%; }
/* Мягкий переход от текстового блока к фото (правка Натальи 2026-08-14):
   левый край фото растворяется в молочном фоне колонки с текстом (--aroma-milk #f6f3ef).
   Многоступенчатый градиент — чтобы не было видно «полосы» стыка. Только десктоп:
   на мобиле фото идёт сверху над текстом, растушёвка сбоку там не нужна. */
@media (min-width: 992px) {
  .hero-photo-right::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
    background: linear-gradient(to right,
      rgba(246,243,239,1) 0%,
      rgba(246,243,239,.98) 8%,
      rgba(246,243,239,.9) 20%,
      rgba(246,243,239,.72) 34%,
      rgba(246,243,239,.46) 55%,
      rgba(246,243,239,.18) 78%,
      rgba(246,243,239,0) 100%);
    pointer-events: none; z-index: 1;
  }
}
.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).
   ⚠️ ТОЛЬКО ДЕСКТОП (≥992px): правка Натальи 2026-08-14 — на мобильной версии
   вернуть согласованные размеры темы. Крупный шрифт делал текст «разреженным»
   и уводил кнопку hero за нижний край экрана. */
@media (min-width: 992px) {
  .community-lp,
  .home-lp,
  .about-lp { font-size: 1.3rem; }                  /* основной текст — как на 1-м экране (крупно) */
  /* ⚠ Cartzilla красит .fs-* через !important — переопределяем тоже с !important */
  /* Единый размер тела: лид-абзацы приравнены к основному (было 1.4 — почти дубль 1.3, слабая иерархия). Рефайн 2026-07-24 */
  .community-lp .fs-lg,
  .home-lp .fs-lg,
  .about-lp .fs-lg { font-size: 1.3rem !important; }  /* абзацы hero/определение/«Почему»/бизнес — как основной текст */
  .community-lp .fs-base,
  .home-lp .fs-base { font-size: 1.25rem !important; } /* текст карточек «Вам стоит присоединиться» */
  /* Размеры кнопок переехали в глобальный блок «Кнопки одного типа на всём сайте» ниже. */
  .community-lp .badge { font-size: 1.1rem; }            /* ценники */
  /* Заголовки секций: 42px → ~35px, чтобы hero (48) доминировал и страница не «кричала» (рефайн 2026-07-24) */
  .community-lp .display-6,
  .home-lp .display-6,
  .about-lp .display-6 { font-size: 2.2rem !important; }
  /* Подзаголовки пунктов — крупнее, чтобы не сливались с основным текстом */
  .community-lp h3.h5,
  .home-lp h3.h5 { font-size: 1.6rem; }
}
/* --- Кнопки одного типа на всём сайте (правка Натальи 2026-08-28) ---
   На вопрос «кнопки как на Аромаклубе — на всей главной или на всём сайте?» она
   ответила: «Да, на всем сайте кнопки должны быть одного типа». Поэтому размер,
   интерлиньяж и скругление, которые раньше были scoped на .community-lp/.home-lp
   (правки от 15.08), вынесены в глобальные правила: блог, текстовые страницы,
   лендинг покупки и ЛК получают ту же кнопку.
   ⚠ Cartzilla берёт радиус кнопки из своего токена --cz-btn-border-radius (0.5rem),
   поэтому 4px задаём токеном, а не border-radius — иначе тема перебивает.
   ⚠ .btn-icon исключены: это круглые иконки соцсетей в футере, у них свой размер. */
.btn { --cz-btn-border-radius: 4px; }
.btn:not(.btn-icon) { line-height: 1.3; }         /* было 0.9 — Cormorant подрезался */
.btn:not(.btn-icon),
.btn-sm:not(.btn-icon) { font-size: 1rem; }       /* мобилка — размер .btn-lg темы */
@media (min-width: 992px) {
  .btn:not(.btn-icon),
  .btn-lg:not(.btn-icon),
  .btn-sm:not(.btn-icon) { font-size: 1.25rem; }  /* десктоп — как первая кнопка hero */
}

/* Плашки «Ценность …» в шагах и бонусе — тем же размером, что кнопки
   (правка Натальи 2026-08-15: «тоже мелкие»). */
.community-lp .badge.value-pill { font-size: 1rem; }
@media (min-width: 992px) {
  .community-lp .badge.value-pill { font-size: 1.25rem; }
}

/* Ключевые кнопки лендинга — во всю ширину блока на мобиле, чтобы все три были
   одного размера (правка Натальи 2026-08-15, смотрела на телефоне). На десктопе —
   как раньше, по ширине текста. */
@media (max-width: 991.98px) {
  .community-lp .btn-wide-mobile,
  .home-lp .btn-wide-mobile { display: block; width: 100%; }
}
.community-lp h3.h5 { font-weight: 700; }

/* Контакт-кнопки финального блока — одной ширины (правка Натальи 2026-08-28,
   скрин с подписью «Конпки сделать одной ширины»). На мобиле — колонка во всю
   ширину, с 768px — три равные колонки; ширина ряда ограничена, чтобы кнопки
   не растягивались на весь экран. */
.contact-btns { display: grid; gap: .5rem; max-width: 22rem; }
@media (min-width: 768px) {
  .contact-btns { grid-template-columns: repeat(3, 1fr); max-width: 60rem; gap: .75rem; }
}
              /* жирные подзаголовки пунктов */

/* Единый цвет текста на лендинге — как в заголовке «Аромаклуб Дотерра» (правка Натальи 2026-08-14).
   Cartzilla подмешивает свои холодные --cz-secondary-color (#6c727f) и --cz-emphasis-color (#222934),
   из-за чего абзацы шли тремя разными оттенками. Гасим на лендинге. */
.community-lp,
.home-lp,
.about-lp { color: var(--aroma-ink); }
.community-lp .text-body-secondary,
.community-lp .text-body-emphasis { color: var(--aroma-ink) !important; }

/* Плашки-страны в 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; }

/* --- Стартовые наборы и подарки осени (блок по ТЗ Натальи 2026-08-14) --- */
/* Фото наборов приходят разной пропорции и частью на белом фоне (каталожные),
   частью фотографические → contain на белом: ничего не обрезается, ряд выглядит
   однородно. Высота фиксированная, чтобы карточки в ряду были одной высоты. */
.kit-card .kit-photo {
  width: 100%; height: 220px; object-fit: contain;
  background: #fff; padding: .75rem;
  border-top-left-radius: var(--bs-border-radius-xl, 1rem);
  border-top-right-radius: var(--bs-border-radius-xl, 1rem);
}
.kit-card .btn-link { font-weight: 600; }
/* Приписка под описанием набора (правка Натальи 2026-09-01: «добавь текст курсивом
   мелко» — про лимон в наборе «Атлет»). Десктопное правило специфичнее мобильного,
   поэтому порядок блоков роли не играет. */
.kit-note { font-size: .9rem; color: var(--aroma-ink); }
@media (min-width: 992px) { .community-lp .kit-note { font-size: 1rem; } }
/* Фото подарков — квадратом */
.gift-photo { aspect-ratio: 1 / 1; object-fit: cover; }
/* Лавандовый баннер внизу лендинга: во всю ширину экрана, декоративная полоса */
.lavender-banner { line-height: 0; }
.lavender-banner img { display: block; width: 100%; height: clamp(120px, 16vw, 240px); object-fit: cover; }

/* Круглое фото автора (блок «Об авторе», по разметке Натальи) */
.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 --- */
/* Один цвет, как на остальных страницах, без градиентов — ТЗ Натальи 29.08 п.1
   (было: два радиальных пятна + вертикальный градиент беж → молочный). */
.aroma-hero {
  background: var(--aroma-milk);
}
.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%; }
/* Подложка карточки без обложки — один цвет, без градиента (ТЗ Натальи 29.08 п.1) */
.aroma-cover-placeholder {
  aspect-ratio: 16 / 10;
  background: var(--aroma-beige);
  display: flex; align-items: center; justify-content: center;
  color: var(--aroma-sage);
}

/* Строка поиска по блогу (ТЗ Натальи 29.08 п.3) — по центру, не во всю ширину */
.blog-search { max-width: 34rem; }

/* --- Контентное тело (WYSIWYG) --- */
/* Размер основного текста — общий со главной (ТЗ Натальи 31.08: «основной текст
   должен быть на всём сайте одинаковым, сделай его как на главной странице»).
   На мобилке — размер темы, как и на главной; десктопные 1.3rem — ниже. */
.content-body { line-height: 1.75; }
.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; }
/* Ссылки в тексте статьи — шалфейные, но КРОМЕ кнопок: у .btn-primary селектор
   .content-body a (0,2,0) перебивал .btn (0,1,0) и красил текст в цвет фона —
   надпись на зелёной кнопке становилась невидимой (поймано на проде 30.08). */
.content-body a:not(.btn) { 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;
}

/* --- Страница статьи блога (ТЗ Натальи 31.08) --- */
/* Баннер в начале статьи — по ширине колонки текста («сделай фото шириной текста»,
   ТЗ Натальи 31.08). Ширину задаёт .article-col, внутри которой лежит <picture>. */
.article-hero { height: auto; }
/* Колонка текста уже контейнера: «если удобнее для чтения более узкая колонка текста,
   то сделай». 46rem ≈ 68 знаков в строке при основном кегле десктопа. */
.article-col { max-width: 46rem; margin-left: auto; margin-right: auto; }
/* Название статьи: крупнее и жирнее остального текста, зелёное (цвет кнопок),
   заглавными — одинаково у всех статей блога. */
.article-title {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--aroma-sage-dark);
}
.article-lead { color: var(--aroma-muted); }
/* Фото внутри статьи — одной ширины и по центру («надо сделать фото масел одной
   ширины»). Класс проставлен в самом тексте статьи, чтобы правило не ужимало
   произвольные картинки, которые Наталья вставит через админку. */
.content-body img.article-photo,
.content-body img.article-photo-sm { display: block; margin: 1.5rem auto; max-width: 100%; }
.content-body img.article-photo { width: 26rem; }
/* Кадр с аптечными маслами — меньше остальных: исходник плохого качества (её просьба) */
.content-body img.article-photo-sm { width: 18rem; }
@media (min-width: 992px) {
  /* Основной текст статьи и лид — тот же кегль, что на главной (.home-lp) */
  .content-body,
  .article-lead { font-size: 1.3rem; }
  .article-title { font-size: 2.2rem; }
}

/* --- Лента блога: кегль карточек (ТЗ Натальи 31.08 «тест мелкий. Проверь ВСЕ страницы») --- */
/* Было 16/14/12px от темы — мельче всего остального сайта. Заголовок приведён к
   карточкам статей на главной, анонс и дата подняты следом. */
.blog-card-title { font-size: 1.25rem; line-height: 1.3; }
.blog-card-lead { font-size: 1rem; line-height: 1.6; }
.blog-card-date { font-size: .9375rem; }
@media (min-width: 992px) {
  .blog-card-title { font-size: 1.5rem; }
  .blog-card-lead { font-size: 1.15rem; }
  .blog-card-date { font-size: 1rem; }
}

/* --- Футер --- */
.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; }

/* ==========================================================================
   ГЛАВНАЯ СТРАНИЦА — по ТЗ Натальи из Telegram 2026-08-21 16:40
   (экран 1 «фото с градиентом», экран 2 «моя миссия», экран 3 doTERRA, статьи)
   + её правка 28.08: «Ширина сайта должна быть одинаковой на всем сайте.
   Посмотри, как мы делали для аромаклуба. И кнопки на все».

   Поэтому hero главной собран на тех же классах, что и hero Аромаклуба
   (.aroma-hero-split / .hero-copy / .hero-photo-right — см. выше), а страница
   обёрнута в .home-lp, который подключён к типографическим правилам .community-lp.
   Здесь остаётся только то, чего на лендинге нет: длинный заголовок в несколько
   строк и маркированный список «Здесь вы узнаете».
   ========================================================================== */

/* Заголовок hero: в отличие от .hero-title Аромаклуба — в несколько строк
   (там white-space: nowrap под короткое «АРОМАКЛУБ ДОТЕРРА»). Потолок 3rem —
   тот же, что у лендинга, чтобы страницы читались одинаково. */
.home-hero__title {
  font-weight: 500;
  color: var(--aroma-ink);
  line-height: 1.12;
  font-size: clamp(1.6rem, 1.05rem + 2.4vw, 3rem);
}
.home-hero__lead { font-weight: 600; color: var(--aroma-ink); }
.home-hero__list { list-style: none; padding-left: 0; margin-bottom: 0; }
.home-hero__list li {
  position: relative; padding-left: 1.5rem; margin-bottom: .5rem;
  line-height: 1.35; color: var(--aroma-ink);
}
.home-hero__list li::before {
  content: ''; position: absolute; left: 0; top: .6em;
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--aroma-sage);
}
@media (min-width: 992px) {
  .home-hero__list li { margin-bottom: .65rem; }
}

/* ==========================================================================
   СТРАНИЦА «ОБО МНЕ» (/about/) — ТЗ Натальи 2026-08-31
   Hero берёт готовую раскладку .aroma-hero-split / .hero-photo-right («фото
   справа и небольшой градиент, как и раньше»), здесь только своё: колонка
   текста, плитки дипломов и стена отзывов.
   ========================================================================== */

/* Колонка текста — во всю ширину контейнера: прямая правка Натальи 31.08 (20:22)
   «сделай здесь основной текст на ширину сайта. Сейчас узко текст идет».
   Было max-width: 50rem (как у статьи блога) — вернуть можно этой строкой. */
.about-col { max-width: none; }

/* Плитка диплома: скан целиком (contain) на белой подложке, по клику — модалка. */
.diploma-tile {
  display: block; width: 100%; height: 100%;
  padding: .75rem; border: 1px solid rgba(0, 0, 0, .06); border-radius: .75rem;
  background: #fff; cursor: zoom-in; transition: box-shadow .2s ease;
}
.diploma-tile:hover { box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .08); }
.diploma-tile img { display: block; width: 100%; height: 140px; object-fit: contain; }
@media (min-width: 768px) { .diploma-tile img { height: 190px; } }
@media (min-width: 1200px) { .diploma-tile img { height: 230px; } }

/* Стена отзывов: карточки разной высоты, поэтому колонки CSS (не grid) —
   иначе в ряду остаются дыры под короткими отзывами. */
.testimonials-wall { column-gap: 1.5rem; }
@media (min-width: 992px) { .testimonials-wall { columns: 2; } }
.testimonial-card { break-inside: avoid; margin: 0 0 1.5rem; }
.testimonial-card p:last-child { margin-bottom: 0 !important; }

/* Карусель увеличенных дипломов в модалке — правка Натальи 31.08 (22:55)
   «Сделай, чтобы можно было листать фото увеличенные».
   ⚠️ Сборка Cartzilla несёт JS Bootstrap-карусели, но НЕ несёт её CSS (тема
   листает галереи через Swiper). Без этих правил все шесть слайдов видны
   списком: .carousel-item остаётся display:block. Поэтому раскладку слайдов
   держим здесь сами — по разметке Bootstrap 5.3, scoped на .diploma-carousel,
   чтобы не задеть остальной сайт. */
.diploma-carousel { position: relative; }
.diploma-carousel .carousel-inner { position: relative; width: 100%; overflow: hidden; }
.diploma-carousel .carousel-item {
  position: relative; display: none; float: left; width: 100%; margin-right: -100%;
  backface-visibility: hidden; transition: transform .5s ease-in-out;
}
.diploma-carousel .carousel-item.active,
.diploma-carousel .carousel-item-next,
.diploma-carousel .carousel-item-prev { display: block; }
.diploma-carousel .carousel-item-next:not(.carousel-item-start),
.diploma-carousel .active.carousel-item-end { transform: translateX(100%); }
.diploma-carousel .carousel-item-prev:not(.carousel-item-end),
.diploma-carousel .active.carousel-item-start { transform: translateX(-100%); }
@media (prefers-reduced-motion: reduce) {
  .diploma-carousel .carousel-item { transition: none; }
}

/* Скан целиком в экран: сканы разной высоты, без ограничения нижний край
   и стрелки уезжают под сгиб. */
.diploma-carousel .carousel-item img { height: min(72vh, 44rem); object-fit: contain; }

/* Стрелки лежат поверх светлого скана, поэтому свои: круг на белом с тёмной
   иконкой (у темы иконки белые и на скане не видны), без растяжки на 15% ширины. */
.diploma-carousel .carousel-control-prev,
.diploma-carousel .carousel-control-next {
  position: absolute; top: 0; bottom: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: auto; padding: 0 .5rem; border: 0; background: none; opacity: 1;
}
.diploma-carousel .carousel-control-prev { left: 0; }
.diploma-carousel .carousel-control-next { right: 0; }
.diploma-nav {
  display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--aroma-ink);
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .12);
  font-size: 1.25rem; transition: background-color .2s ease;
}
.diploma-carousel .carousel-control-prev:hover .diploma-nav,
.diploma-carousel .carousel-control-next:hover .diploma-nav { background: #fff; }
@media (min-width: 992px) {
  .diploma-nav { width: 3rem; height: 3rem; font-size: 1.5rem; }
}