/* css/style.css */

:root {
  --bg-dark: #121212;
  --bg-light: #f5f5f5;
  --text-primary: #e0e0e0;
  --text-secondary: #b0b0b0;
  --card-bg: rgba(255, 255, 255, 0.05);
  --card-border: 1px solid rgba(255, 255, 255, 0.1);
  --button-bg: rgba(255, 255, 255, 0.1);
  --button-radius: 16px;
  --font-family: 'Inter', 'Montserrat', sans-serif;
}

[data-theme="light"] {
  --bg-dark: var(--bg-light);
  --text-primary: #222222;
  --text-secondary: #555555;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  width: 100%;
  /* ВАЖНО: Заставляем body занять всю ширину экрана */
  font-family: var(--font-family);
  background: var(--bg-dark);
  color: var(--text-primary);
  /* Старый вариант оставлен фолбэком для браузеров без clip.
     overflow-x: hidden на html/body превращает body в собственный контейнер
     прокрутки, и position: sticky внутри перестаёт прилипать. overflow-x: clip
     так же срезает горизонтальный скролл от 100vw, но контейнер прокрутки
     не создаёт — поэтому шапка header-pro прилипает. */
  overflow-x: hidden;
  overflow-x: clip;
  /* Убрали display: flex, который стягивал сайт в узкую полосу */
}

/* ---------- Landing page – Dynamic Blocks ---------- */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 95%;
  max-width: 1200px;
  margin: 0 auto;
  /* ВАЖНО: Добавлен динамический отступ сверху. Боковые обнулены (0), так как ширину держит width: 95% */
  padding: var(--container-pt-mobi, 5rem) 0 2rem 0;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
  box-sizing: border-box;
}

/* Мобильный сброс: сужаем только на маленьких экранах */
@media (max-width: 767px) {
  .container {
    max-width: 400px;
  }

  /* Фикс мобильной версии Banner PRO */
  .banner-pro-block {
    margin: 0 0 1.5rem 0 !important;
    /* Убрали отрицательные отступы по бокам */
    width: 100% !important;
    /* Баннер теперь вписан в ширину контейнера */
    min-height: auto !important;
    background-color: #000 !important;
    border-radius: 24px !important;
    /* Вернули красивые скругления */
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
  }

  .banner-pro-block .bg-image-wrapper {
    height: auto !important;
  }

  .banner-pro-block .bg-image-wrapper img {
    height: auto !important;
    object-fit: contain !important;
  }

  .banner-pro-content {
    padding-top: var(--mobi-pt, 110vw) !important;
  }
}

/* ---------- Hero Text PRO Block ---------- */
.hero-text-pro-wrapper {
  position: relative;
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 1.5rem;
  box-sizing: border-box;
  margin-bottom: 2rem;
  background-color: #0f0f0f;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.ht-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 1;
  /* Затемнение фона для читаемости текста */
}

.ht-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
  max-width: 800px;
}

.ht-title {
  margin: 0;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.1;
  font-size: var(--ht-title-fs, 28px) !important;
}

.ht-desc {
  margin: 0;
  font-weight: 500;
  line-height: 1.5;
  font-size: var(--ht-desc-fs, 15px) !important;
}

@media (min-width: 768px) {
  .hero-text-pro-wrapper {
    /* Задаем минимальную высоту относительно ширины экрана (почти как пропорция картинки) */
    min-height: 45vw !important;
    padding: 4rem 3rem !important;
    border-radius: 0 !important;

    /* Растягиваем на 100% ширины */
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }

  .ht-title {
    font-size: calc(var(--ht-title-fs, 28px) * 1.4) !important;
  }

  .ht-desc {
    font-size: calc(var(--ht-desc-fs, 15px) * 1.2) !important;
  }
}

.banner-pro-content h2 {
  font-size: var(--title-fs, 24px) !important;
}

#landing-content>div:first-child:not(.banner-block):not(.carousel-full-width) {
  margin-top: 2rem;
}

/* ─── Avatar block ────────────────────────────────────────────────────────────
   Четыре макета: center, banner_center, banner_left, card_large.
   Размер аватара задаётся из JS переменной --avatar-size (65/95/125/150px).
   ────────────────────────────────────────────────────────────────────────── */
.avatar {
  --avatar-size: 95px;
  --avatar-border-width: 3px;
  --avatar-ring: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

/* Круглая обёртка аватара */
.avatar-img-wrap {
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--button-bg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avatar-initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--button-bg);
  color: var(--text-primary);
  font-size: calc(var(--avatar-size) * 0.38);
  font-weight: 700;
  line-height: 1;
  user-select: none;
}

.avatar-text-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
}

.avatar-name {
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
  color: var(--text-color, var(--text-primary));
}

.avatar-subtitle {
  line-height: 1.35;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.avatar-layout-center .avatar-text-col {
  align-items: center;
  text-align: center;
}

/* ─── Баннерная шапка ─────────────────────────────────────────────────────── */
/* z-index: 1 обязателен — баннер создаёт stacking context и не должен
   перекрывать круг аватара, который лежит на нём отрицательным margin-top. */
.avatar-banner {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 130px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
}

.avatar-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avatar-banner-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: rgba(255, 255, 255, 0.55);
  background:
    radial-gradient(120% 100% at 20% 0%, rgba(255, 255, 255, 0.18), transparent 60%),
    linear-gradient(135deg, rgba(127, 127, 127, 0.45), rgba(63, 63, 63, 0.35));
}

/* z-index: 2 — тело с аватаром всегда ВЫШЕ баннера */
.avatar-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.avatar-body .avatar-img-wrap {
  position: relative;
  z-index: 2;
  margin-top: calc(var(--avatar-size) / -2);
  border: var(--avatar-border-width, 3px) solid var(--avatar-ring, #ffffff);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

.avatar-layout-banner-center .avatar-text-col {
  align-items: center;
  text-align: center;
}

/* «Баннер + слева»: аватар с наплывом на баннер слева, текст справа.
   На мобильных раскладка НЕ центрируется — иначе пресет неотличим
   от «Баннер + центр» (см. @media ниже). */
.avatar-body-left {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 0 16px;
  box-sizing: border-box;
}

.avatar-body-left .avatar-text-col {
  text-align: left;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
}

.avatar-body-left .avatar-img-wrap {
  position: relative;
  z-index: 2;
  margin-top: calc(var(--avatar-size) / -2);
  border: var(--avatar-border-width, 3px) solid var(--avatar-ring, #ffffff);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  flex-shrink: 0;
}

/* ─── card_large ──────────────────────────────────────────────────────────── */
.avatar-layout-card-large {
  gap: 14px;
}

.avatar-img-wrap-lg {
  width: 100%;
  max-width: min(100%, calc(var(--avatar-size) * 2.4));
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
}

.avatar-img-wrap-lg .avatar-initials {
  border-radius: 18px;
  font-size: calc(var(--avatar-size) * 0.8);
}

.avatar-text-col-card {
  align-items: center;
  text-align: center;
}

@media (max-width: 767px) {
  .avatar-banner {
    height: 110px;
    border-radius: 12px;
  }

  /* Аватар остаётся СЛЕВА, текст СПРАВА: строка сохраняется на смартфоне,
     иначе в мобильном Live View пресеты «слева» и «центр» выглядят одинаково. */
  .avatar-body-left {
    padding: 0 12px;
    gap: 12px;
  }
}

.banner-block {
  /* Строго 0 сверху, чтобы ничего не тянуло блок за пределы экрана */
  margin: 0 -2rem 1.5rem -2rem !important;
  padding: 0 !important;
  display: block;
  line-height: 0;
  /* Убирает невидимые отступы от текста под картинкой */
}

.banner-block img {
  width: 100% !important;
  height: auto !important;
  /* Разрешаем картинке занять свою естественную высоту */
  max-height: none !important;
  display: block;
  object-fit: unset !important;
  /* Полностью отключаем встроенную обрезку браузера */
  border-radius: 0 !important;
}

/* ---------- Image Slot: нативный слот с тёплой градиентной заглушкой ----------
   Используется banner и split-pro. Слот намеренно «-layout-neutral»: он не
   навязывает размеры картинке — их по-прежнему диктует CSS блока-родителя.
   Пропорция применяется ТОЛЬКО к пустому слоту, чтобы не сломать существующие
   шаблоны с натуральной высотой изображения.                                */
.img-slot {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
}

.img-slot-img {
  display: block;
  max-width: 100%;
}

/* Пустой слот: тёплая подложка + многослойная тень (никаких серых заглушек) */
.img-slot-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: var(--img-slot-ar, 4 / 5);
  background: linear-gradient(135deg, rgba(255, 251, 235, 0.95) 0%, rgba(255, 247, 237, 0.8) 45%, rgba(255, 237, 213, 0.35) 100%);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.img-slot-1x1 {
  --img-slot-ar: 1 / 1;
}

.img-slot-4x5 {
  --img-slot-ar: 4 / 5;
}

.img-slot-16x9 {
  --img-slot-ar: 16 / 9;
}

/* Shimmer: анимируется только transform (GPU), без layout/paint. */
.img-slot-empty::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 18%, rgba(255, 255, 255, 0.6) 50%, transparent 82%);
  transform: translateX(-100%);
  animation: img-slot-shimmer 2.6s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

@keyframes img-slot-shimmer {
  to {
    transform: translateX(100%);
  }
}

.img-slot-ph {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--img-slot-icon, 40px);
  line-height: 1;
  color: rgba(245, 158, 11, 0.45);
}

/* Круглая маска split-pro задаёт свою пропорцию пустому слоту */
.sp-image-col.sp-img-circle .img-slot-empty {
  --img-slot-ar: 1 / 1;
}

.cta-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--button-bg);
  border: var(--card-border);
  border-radius: var(--button-radius);
  color: var(--text-primary);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
  box-sizing: border-box;
}

.cta-button i {
  color: var(--cta-icon-color, currentColor);
  font-size: 1.2em;
  flex-shrink: 0;
}

.cta-button:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

/* Text block */
.text-block {
  text-align: center;
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
  width: 100%;
}

.text-block h1,
.text-block h2,
.text-block h3 {
  color: var(--text-primary);
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

[data-theme="dark"] .text-block {
  color: rgba(255, 255, 255, 0.85);
}

[data-theme="dark"] .text-block h1,
[data-theme="dark"] .text-block h2,
[data-theme="dark"] .text-block h3 {
  color: #ffffff;
}

/* Divider block */
.divider-block {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  width: 100%;
  margin: 0;
}



/* ---------- Admin panel (glassmorphism) ---------- */
.admin-container {
  display: flex;
  height: 100vh;
  background: var(--bg-dark);
  color: var(--text-primary);
  font-family: var(--font-family);
}

/* Sidebar layout */
.sidebar {
  width: 250px;
  /* fixed width as requested */
  min-width: 250px;
  background: rgba(255, 255, 255, 0.02);
  /* slightly lighter than main bg */
  border-right: var(--card-border);
  padding: 24px;
  /* generous padding */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sidebar a {
  display: block;
  padding: 12px 16px;
  border-radius: 8px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.sidebar a:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

.sidebar a.active {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

/* Main content area */
.content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  box-sizing: border-box;
}

/* Form layout */
.form-group {
  margin-bottom: 24px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: #aaa;
  /* light gray */
  font-weight: 500;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: var(--text-primary);
  padding: 14px 16px;
  font-family: var(--font-family);
  font-size: 0.95rem;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.3);
}

/* Textarea specific tweaks */
.form-group textarea {
  min-height: 100px;
  resize: vertical;
  /* hide default scrollbar styling for consistency */
  scrollbar-width: thin;
}

.form-group textarea::-webkit-scrollbar {
  width: 8px;
}

.form-group textarea::-webkit-scrollbar-track {
  background: transparent;
}

.form-group textarea::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

/* Save button – mirrors landing button */
.save-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0.75rem 1.5rem;
  background: var(--button-bg);
  border: var(--card-border);
  border-radius: var(--button-radius);
  color: var(--text-primary);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.save-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

/* Toast notifications – already styled, kept for consistency */
.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--button-bg);
  color: var(--text-primary);
  padding: 0.75rem 1rem;
  border-radius: var(--button-radius);
  opacity: 0;
  transition: opacity 0.3s;
}

.toast.show {
  opacity: 1;
}

/* Banner PRO (Мобильная версия) */
.banner-pro-block {
  position: relative;
  overflow: hidden;
  margin: 0 0 1.5rem 0 !important;
  /* Убрали отрицательные отступы по бокам */
  width: 100% !important;
  /* Занимает ровно ширину контейнера */
  min-height: auto !important;
  background-color: var(--bp-mobi-bg, #000) !important;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  border-radius: 24px !important;
  /* Возвращаем красивые скругления на телефоне */
}

.banner-pro-block.bp-no-image,
.banner-pro-block:not(:has(.bg-image-wrapper)) {
  background-color: transparent !important;
  min-height: auto !important;
}

.banner-pro-block.bp-no-image .banner-pro-content,
.banner-pro-block:not(:has(.bg-image-wrapper)) .banner-pro-content {
  padding: var(--mobi-pt, 32px) 16px var(--mobi-pb, 16px) 16px !important;
}

.banner-pro-block .bg-image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.banner-pro-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Центрируем элементы колонки */
  text-align: center;
  /* Текст по центру */
  gap: 16px;
  padding: 20px 20px 40px 20px;
  /* Даем безопасный отступ снизу */
  width: 100%;
  max-width: 600px;
  box-sizing: border-box;
}

/* Фикс слипающегося текста */
.banner-pro-content h2,
.banner-pro-content p,
.banner-pro-content div {
  margin: 0;
  line-height: 1.3;
}

.banner-pro-content h2 {
  line-height: 1.1;
  /* Заголовкам нужен более плотный интервал */
}

/* Выравнивание по левому краю для заголовков секций */
.banner-pro-block.bp-align-left .banner-pro-content,
.banner-pro-block.bp-align-left.bp-no-image .banner-pro-content {
  align-items: flex-start !important;
  text-align: left !important;
  max-width: 100% !important;
}

.banner-pro-block.bp-align-left .banner-pro-content h2,
.banner-pro-block.bp-align-left .banner-pro-content .bp-subtitle,
.banner-pro-block.bp-align-left .banner-pro-content div,
.banner-pro-block.bp-align-left.bp-no-image .banner-pro-content h2,
.banner-pro-block.bp-align-left.bp-no-image .banner-pro-content div {
  text-align: left !important;
  width: 100% !important;
}

/* Надзаголовок (eyebrow) над основным H2 */
.banner-pro-content .bp-subtitle-top {
  order: -1;
  margin-bottom: 8px;
  letter-spacing: 0.02em;
  font-size: 14px;
  font-weight: 500;
}

/* Базовые стили кнопки (Мобайл) */
.banner-pro-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 34px !important;
  border-radius: 12px !important;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s, opacity 0.2s;
  /* Значение шрифта приходит из админки */
  font-size: var(--btn-fs, 16px) !important;
  cursor: pointer !important;
}

.banner-pro-btn:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

.banner-pro-btn .bp-btn-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

/* ---------- Lists PRO Block ---------- */
.lists-pro-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

.lp-card {
  background: var(--lp-card-bg, #0f0f0f);
  /* Делаем фон карточки темнее для контраста */
  border: 1px solid var(--lp-card-border, rgba(255, 255, 255, 0.15));
  /* Делаем внешнюю рамку более заметной */
  border-radius: 24px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* Чуть увеличили отступ между шапкой и списком */
}

.lp-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.lp-header-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: var(--lp-h-border, 2px solid var(--lp-accent, #E60000));
  box-shadow: var(--lp-h-shadow, 0 0 15px rgba(var(--lp-accent-rgb, 230, 0, 0), 0.4), inset 0 0 8px rgba(var(--lp-accent-rgb, 230, 0, 0), 0.2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--lp-h-icon-color, #ffffff);
  flex-shrink: 0;
  background: var(--lp-h-bg, rgba(var(--lp-accent-rgb, 230, 0, 0), 0.1));
  overflow: hidden;
}

.lp-header-icon-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50%;
}

.lp-header-text {
  display: block; /* Убрали flex-column, чтобы текст естественно переносился вместе с номером */
}

.lp-number {
  color: var(--lp-accent, #E60000);
  /* Полностью синхронизируем размер и шрифт с настройками заголовка */
  font-weight: var(--lp-title-fw, 800);
  font-size: var(--lp-title-fs, 16px);
  font-family: var(--lp-title-font, inherit);
  letter-spacing: 1px;
  margin-right: 6px; /* Аккуратный отступ перед текстом заголовка */
}

.lp-title {
  color: var(--lp-title-color, #ffffff);
  font-weight: var(--lp-title-fw, 800);
  font-size: var(--lp-title-fs, 16px);
  font-family: var(--lp-title-font, inherit);
  text-transform: uppercase;
  line-height: 1.3;
}

.lp-items-box {
  background: var(--lp-items-bg, #191919);
  /* Тот самый цвет фона списка из оригинала */
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.08);
  /* Легкая рамка вокруг самого списка */
}

.lp-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  position: relative; /* Добавлено для привязки разделителя */
}

/* Создаем независимую линию-разделитель на 80% ширины по центру */
.lp-item:not(:last-child)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 5%; /* Отступы 10% по бокам дают ровно 80% ширины */
  width: 90%;
  border-bottom: 1px solid var(--lp-sep-color, rgba(255, 255, 255, 0.06));
}

.lp-item-icon {
  background: transparent;
  /* Убрали сплошную заливку */
  border: 1px solid var(--lp-icon-border, rgba(255, 255, 255, 0.2));
  /* Добавили элегантную рамку, как в оригинале */
  border-radius: 10px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lp-icon-color, #ffffff);
  font-size: 20px;
  flex-shrink: 0;
}

.lp-item-text {
  color: var(--lp-text-color, #e0e0e0);
  font-weight: var(--lp-item-fw, 500);
  font-size: var(--lp-item-fs, 15px);
  font-family: var(--lp-item-font, inherit);
  line-height: 1.4;
}

/* ---------- Split PRO Block (Mobile First) ---------- */
.split-pro-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
  box-sizing: border-box;
  padding: 1rem 0;
}

.sp-content-col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  text-align: center;
}

.sp-title {
  margin: 0;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.1;
  /* Smart scaling for mobile */
  font-size: var(--sp-title-fs, 24px) !important;
}

.sp-desc {
  margin: 0;
  font-weight: 500;
  line-height: 1.5;
  font-size: var(--sp-desc-fs, 16px) !important;
}

.sp-image-col {
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp-image-col img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* ---------- Desktop Responsive Layout ---------- */
@media (min-width: 768px) {
  .container {
    max-width: 1200px !important;
    width: 95% !important;
    padding: var(--container-pt-pc, 6rem) 0 4rem 0 !important;
    /* На ПК делаем отступ от потолка еще больше для журнального вида */
    overflow: visible !important;
  }

  .banner-block {
    margin: 0 0 2rem 0 !important;
    /* Чистим старые баннеры от вылетов */
  }

  .banner-pro-block {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 3rem 0 !important;
    border-radius: 32px !important;
    overflow: hidden !important;
    /* МЕНЯЕМ ЛОГИКУ: Блок подстраивается под картинку */
    position: relative !important;
    display: block !important;
    min-height: auto !important;
    /* Убираем жесткую высоту */
  }

  .banner-pro-block .bg-image-wrapper {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }

  .banner-pro-block .bg-image-wrapper img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    /* Картинка диктует высоту */
    object-fit: contain !important;
    /* Отображаем 100% пикселей */
    object-position: center !important;
  }

  .banner-pro-content {
    /* Текст парит поверх картинки */
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 480px !important;
    margin-left: 4rem !important;
    /* Двигает блок вверх-вниз */
    margin-top: var(--pc-pt, 0px) !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    /* Идеальное центрирование текста по вертикали */
    text-align: left !important;
    z-index: 2 !important;
  }

  .banner-pro-content h2 {
    font-size: calc(var(--title-fs, 24px) * 1.4) !important;
    /* Увеличиваем на 40% для ПК */
  }

  /* Banner PRO без фоновой картинки (например, заголовок секции «Комплексные услуги») */
  .banner-pro-block:not(:has(.bg-image-wrapper)),
  .banner-pro-block.bp-no-image {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
    background: transparent !important;
    margin-bottom: 2rem !important;
  }

  .banner-pro-block:not(:has(.bg-image-wrapper)) .banner-pro-content,
  .banner-pro-block.bp-no-image .banner-pro-content {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: var(--pc-pt, 40px) 24px var(--pc-pb, 20px) 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    transform: none !important;
    z-index: 2 !important;
  }

  .banner-pro-block:not(.bp-align-left):not(:has(.bg-image-wrapper)) .banner-pro-content h2,
  .banner-pro-block.bp-no-image:not(.bp-align-left) .banner-pro-content h2 {
    text-align: center !important;
    margin: 0 0 10px 0 !important;
  }

  .banner-pro-block:not(.bp-align-left):not(:has(.bg-image-wrapper)) .banner-pro-content div,
  .banner-pro-block.bp-no-image:not(.bp-align-left) .banner-pro-content div {
    text-align: center !important;
  }

  /* Увеличенная версия кнопки для ПК */
  .banner-pro-btn {
    padding: 24px 48px !important;
    /* Делаем кнопку массивнее */
    font-size: calc(var(--btn-fs, 16px) * 1.35) !important;
    /* Автоматически увеличиваем шрифт на 35% */
    border-radius: 16px !important;
    /* Чуть больше скругление для крупной кнопки */
    gap: 14px !important;
    /* Чуть больше отступ до иконки */
  }

  .banner-pro-btn .bp-btn-icon {
    width: 32px !important;
    /* Увеличиваем иконку пропорционально */
    height: 32px !important;
  }

  #landing-content>div:first-child:not(.banner-block):not(.banner-pro-block):not(.carousel-full-width) {
    margin-top: 4rem !important;
  }

  .lists-pro-wrapper {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
  }

  /* ---------- Split PRO Block (Desktop) ---------- */
  .split-pro-wrapper {
    flex-direction: row;
    /* Default layout: text left, image right */
    align-items: center;
    gap: 4rem;
    /* Wide gap for premium look */
  }

  .split-pro-wrapper.sp-layout-left {
    flex-direction: row-reverse;
    /* Image left, text right */
  }

  .sp-content-col {
    /* Take 50% width */
    flex: 1;
    /* Возвращаем выравнивание по левому краю для ПК */
    text-align: left;
  }

  .sp-image-col {
    flex: 1;
    /* Take 50% width */
  }

  /* Smart scaling for desktop typography */
  .sp-title {
    font-size: calc(var(--sp-title-fs, 24px) * 1.4) !important;
  }

  .sp-desc {
    font-size: calc(var(--sp-desc-fs, 16px) * 1.15) !important;
  }

  /* ---------- Tablet Layout (iPad) ---------- */
  @media (min-width: 768px) and (max-width: 1024px) {

    /* 1. Искусственно увеличиваем высоту фрейма, чтобы тексту было чем "дышать" */
    .banner-pro-block {
      min-height: 480px !important;
    }

    .banner-pro-block.bp-no-image,
    .banner-pro-block:not(:has(.bg-image-wrapper)) {
      min-height: auto !important;
    }

    /* 2. Заставляем картинку заполнить новую высоту, но смещаем фокус вправо, чтобы не обрезать лицо */
    .banner-pro-block .bg-image-wrapper img {
      height: 100% !important;
      object-fit: cover !important;
      object-position: 90% center !important;
    }

    /* 3. Магия: пропорционально сжимаем ВЕСЬ текстовый блок на 15% (шрифты, отступы, кнопку) */
    .banner-pro-content {
      max-width: 55% !important;
      margin-left: 2.5rem !important;
      margin-top: 0 !important;
      /* Сбрасываем ручной ПК-отступ, чтобы он не мешал центрированию */
      transform: scale(0.85) !important;
      transform-origin: left center !important;
    }

    .banner-pro-block.bp-no-image:not(.bp-align-left) .banner-pro-content,
    .banner-pro-block:not(.bp-align-left):not(:has(.bg-image-wrapper)) .banner-pro-content {
      transform: none !important;
      max-width: 100% !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }

    .banner-pro-block.bp-align-left .banner-pro-content {
      transform: none !important;
      max-width: 100% !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      align-items: flex-start !important;
      text-align: left !important;
    }
  }

  .offer-pro-wrapper {
    gap: 3rem;
    padding: 4rem 3rem !important;
  }

}

/* ---------- Split PRO: опциональные элементы (чеклист / цена / кнопка) ---------- */
/* Изолированные классы: не влияют на существующие блоки без новых полей */
.sp-items-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 0.5rem;
  text-align: left;
}

.sp-item-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sp-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  color: var(--accent, #E60000);
}

.sp-item-icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.sp-item-text {
  font-size: 15px;
  line-height: 1.4;
  color: inherit;
}

.sp-price-box {
  margin-top: 0.5rem;
  line-height: 1.2;
}

.sp-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 28px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  transition: transform 0.2s, opacity 0.2s;
  box-sizing: border-box;
  margin-top: 0.5rem;
  width: 100%;
}

.sp-cta-btn:hover {
  transform: translateY(-2px);
  opacity: 0.95;
}

/* Круглая маска фотографии 1:1 */
.sp-image-col.sp-img-circle {
  border-radius: 50% !important;
  aspect-ratio: 1 / 1;
  max-width: 320px;
  margin: 0 auto;
  overflow: hidden;
}

.sp-image-col.sp-img-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50% !important;
}

@media (min-width: 768px) {
  .sp-cta-btn {
    width: auto;
    align-self: flex-start;
  }
}

/* ---------- Split PRO: надзаголовок и подпись CTA (Этап 7.3, opt-in) ---------- */
.sp-eyebrow {
  margin: 0;
  line-height: 1.45;
  letter-spacing: 0.005em;
}

.sp-cta-note {
  margin: -0.75rem 0 0;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- Split PRO: пропорция колонок на десктопе (opt-in) ----------
   Ничего не задано по умолчанию: без sp-ratio-* колонки остаются 1:1,
   как у всех 21 существующего шаблона каталога. */
@media (min-width: 768px) {
  .split-pro-wrapper.sp-ratio-75 > .sp-content-col {
    flex: 7 1 0%;
  }

  .split-pro-wrapper.sp-ratio-75 > .sp-image-col {
    flex: 5 1 0%;
  }

  .split-pro-wrapper.sp-ratio-67 > .sp-content-col {
    flex: 2 1 0%;
  }

  .split-pro-wrapper.sp-ratio-67 > .sp-image-col {
    flex: 1 1 0%;
  }

  .split-pro-wrapper.sp-ratio-33 > .sp-content-col {
    flex: 4 1 0%;
  }

  .split-pro-wrapper.sp-ratio-33 > .sp-image-col {
    flex: 8 1 0%;
  }
}

/* ---------- Split PRO: пресет HERO (7/5) ----------
   На mobile — аккуратный центрированный стек. На десктопе — две колонки:
   слева надзаголовок/H1/CTA по ширине текста, справа фото 4:5 с мягкой тенью. */
.split-pro-wrapper.sp-preset-hero {
  gap: 2rem;
  padding: 2rem 0;
}

.split-pro-wrapper.sp-preset-hero .sp-content-col {
  gap: 1rem;
}

@media (min-width: 1024px) {
  .split-pro-wrapper.sp-preset-hero {
    gap: 3.5rem;
    padding: 4rem 0;
  }
}

/* ---------- Split PRO: пресет HERO, нативный порядок на МОБИЛЬНОМ (< 768px) ----------
   Десктопный сплит 7/5 (текст слева, фото справа) на телефоне превращался
   в «стену текста»: фото уезжало под описание и CTA. Раскрываем контентную
   колонку через display: contents и раздаём детям явный order — получаем
   продающий ритм: надзаголовок → H1 → фото → описание → [чеклист] → [цена]
   → CTA → подпись. Порядок в разметке не меняется, поэтому десктоп и
   round-trip не затрагиваются. */
@media (max-width: 767px) {
  .split-pro-wrapper.sp-preset-hero {
    gap: 1.25rem;
    padding: 0.5rem 0 1.5rem 0;
  }

  /* Первый блок страницы: гасим компенсирующий margin-top контейнера
     (2rem на мобильном / 4rem на десктопе), иначе над надзаголовком
     остаётся двойной пустой отступ. !important обязателен — базовое
     правило #landing-content>div:first-child:not(...) специфичнее. */
  #landing-content > .split-pro-wrapper.sp-preset-hero:first-child {
    margin-top: 0 !important;
  }

  /* Разворачиваем контентную колонку, чтобы управлять порядком её детей. */
  .split-pro-wrapper.sp-preset-hero .sp-content-col {
    display: contents;
  }

  .split-pro-wrapper.sp-preset-hero .sp-eyebrow {
    order: 1;
  }

  .split-pro-wrapper.sp-preset-hero .sp-title {
    order: 2;
  }

  /* Фото — сразу после заголовка, компактное и по центру. */
  .split-pro-wrapper.sp-preset-hero .sp-image-col {
    order: 3;
    max-width: 280px;
    margin: 0.5rem auto;
  }

  .split-pro-wrapper.sp-preset-hero .sp-desc {
    order: 4;
    margin-top: 0.25rem;
  }

  /* Чеклист и цена (если заданы) встают между описанием и CTA. */
  .split-pro-wrapper.sp-preset-hero .sp-items-list {
    order: 5;
    margin-top: 0;
  }

  .split-pro-wrapper.sp-preset-hero .sp-price-box {
    order: 6;
    margin-top: 0;
  }

  .split-pro-wrapper.sp-preset-hero .sp-cta-btn {
    order: 7;
    width: 100%;
    margin-top: 0;
  }

  .split-pro-wrapper.sp-preset-hero .sp-cta-note {
    order: 8;
    margin-top: -0.25rem;
  }
}

@media (min-width: 768px) {
  .split-pro-wrapper.sp-preset-hero .sp-image-col {
    max-width: 520px;
    border-radius: 24px;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    box-shadow: 0 24px 48px -24px rgba(45, 55, 72, 0.38);
  }

  .split-pro-wrapper.sp-preset-hero .sp-image-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .split-pro-wrapper.sp-preset-hero .sp-cta-btn {
    padding: 16px 32px;
    border-radius: 16px;
  }
}

/* Микроотклик CTA: подъём на hover (только мышь) и сжатие при нажатии.
   Правило :active объявлено после :hover, поэтому на десктопе при
   одновременном срабатывании побеждает нажатие. */
.split-pro-wrapper.sp-preset-hero .sp-cta-btn {
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), opacity 160ms ease-out;
}

@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .split-pro-wrapper.sp-preset-hero .sp-cta-btn:hover {
    transform: translateY(-2px);
  }
}

.split-pro-wrapper.sp-preset-hero .sp-cta-btn:active {
  transform: scale(0.98);
}

/* ---------- Split PRO: пресет AUTHOR (4/8) ----------
   Пять разрозненных блоков педагога схлопываются в одну мастер-карточку:
   слева круглый аватар 160px с именем и цитатой, справа био и регалии 2x2. */
.split-pro-wrapper.sp-preset-author {
  gap: 1.75rem;
  padding: 24px;
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 28px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

/* В пресете «Автор» правая колонка текстовая: снимаем маску и центрирование. */
.split-pro-wrapper.sp-preset-author .sp-image-col {
  display: block;
  border-radius: 0;
  overflow: visible;
  text-align: left;
}

.sp-author-avatar {
  flex: 0 0 auto;
  width: 144px;
  height: 144px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  border: 4px solid #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.sp-author-avatar .img-slot {
  width: 100%;
  height: 100%;
  border: 0;
  box-shadow: none;
  border-radius: 50%;
}

.sp-author-avatar .img-slot-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.sp-author-avatar .img-slot-empty {
  --img-slot-ar: 1 / 1;
  border-radius: 50%;
}

.sp-author-name {
  margin: 1rem 0 0;
  font-size: var(--sp-author-name-fs, 20px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.sp-author-role {
  margin: 0.35rem 0 0;
  line-height: 1.4;
}

.sp-author-quote {
  position: relative;
  margin: 0.85rem 0 0;
  padding-top: 14px;
  font-size: var(--sp-author-quote-fs, 15px);
  line-height: 1.65;
  font-style: italic;
}

.sp-author-quote::before {
  content: '\201C';
  position: absolute;
  top: -10px;
  left: 0;
  font-size: 40px;
  line-height: 1;
  font-style: normal;
  opacity: 0.22;
}

/* Регалии: сетка 2x2 с круглыми чипами вместо плоских строк. */
.split-pro-wrapper.sp-preset-author .sp-items-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 1.5rem;
}

.split-pro-wrapper.sp-preset-author .sp-item-row {
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.split-pro-wrapper.sp-preset-author .sp-item-icon {
  width: 28px;
  height: 28px;
  font-size: 15px;
  line-height: 1;
  border-radius: 50%;
  background: rgba(91, 94, 166, 0.12);
}

.split-pro-wrapper.sp-preset-author .sp-item-text {
  font-size: 14px;
  line-height: 1.45;
}

@media (min-width: 640px) {
  .split-pro-wrapper.sp-preset-author .sp-items-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .split-pro-wrapper.sp-preset-author {
    gap: 32px;
    padding: 40px;
  }

  .split-pro-wrapper.sp-preset-author .sp-content-col {
    align-items: center;
    text-align: center;
    gap: 0.35rem;
  }

  .sp-author-avatar {
    width: 160px;
    height: 160px;
  }

  .sp-author-name {
    font-size: calc(var(--sp-author-name-fs, 20px) * 1.2);
  }

  .split-pro-wrapper.sp-preset-author .sp-item-text {
    font-size: 15px;
  }
}

/* ---------- Offer PRO Block ---------- */
.offer-pro-wrapper {
  position: relative !important;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 32px !important;
  background-color: var(--op-block-bg, transparent) !important;
  background-image: var(--op-bg-gradient, radial-gradient(circle at top left, rgba(255, 255, 255, 0.08) 0%, rgba(0, 0, 0, 0) 70%)) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  padding: 3rem 0.5rem !important;
  margin-bottom: 2rem !important;
}

.offer-pro-wrapper .op-bg-image-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

.offer-pro-wrapper .op-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.offer-pro-wrapper .op-main-title,
.offer-pro-wrapper .op-split-container,
.offer-pro-wrapper .op-footer,
.offer-pro-wrapper .op-cta-section,
.offer-pro-wrapper .op-cta-btn {
  position: relative;
  z-index: 1;
}

.op-main-title {
  text-align: center !important;
  width: 100%;
  font-weight: 900;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.15;
  font-size: var(--op-title-fs, 28px) !important;
}

.op-split-container {
  display: flex;
  flex-direction: column;
  gap: 0 !important;
  width: 100%;
  align-items: center;
}

.op-image-col {
  width: 100%;
  display: flex;
  justify-content: flex-start !important;
  padding-left: 20px !important;
  padding-right: 0 !important;
  margin-bottom: 15px !important;
  position: relative;
  z-index: 1;
}

.op-image-col img {
  width: 100%;
  max-width: 220px !important;
  height: auto;
  object-fit: contain;
  background-color: transparent !important;
  mix-blend-mode: multiply;
}

.op-card-col {
  border: var(--op-card-border, 1px solid rgba(255, 255, 255, 0.15));
  background-color: var(--op-card-bg, #0f0f0f);
  border-radius: 24px;
  padding: 24px 16px;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  z-index: 2;
  margin-top: -60px !important;
}

.op-card-header {
  font-size: var(--op-card-h-size, 16px);
  font-weight: var(--op-card-h-weight, 900);
  font-family: var(--op-card-h-font, inherit);
  text-transform: uppercase;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 16px;
  padding-right: 60px;
}

.op-card-badge {
  position: absolute;
  top: -130px !important;
  right: 45px !important;
  width: 85px !important;
  height: 85px !important;
  border-radius: 12px;
  z-index: 3;
  transform: rotate(12deg);
  border: var(--op-badge-border, none);
  box-shadow: var(--op-badge-shadow, none);
  background: var(--op-badge-bg, transparent);
  object-fit: contain;
}

.op-card-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.op-item-icon-col {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
  background: var(--op-bullet-bg, transparent);
  border: var(--op-bullet-border, none);
  box-shadow: var(--op-bullet-shadow, none);
}

.op-card-item {
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: var(--op-item-sep, 1px solid rgba(255, 255, 255, 0.1));
  padding-bottom: 16px;
}

.op-card-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.op-card-item-text {
  font-size: var(--op-item-fs, 14px);
  font-family: var(--op-item-font, inherit);
  font-weight: var(--op-item-fw, 500);
  line-height: 1.4;
  opacity: 0.9;
}

.op-cta-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin-top: 1rem;
}

.op-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 22px 32px !important;
  border-radius: 16px !important;
  box-sizing: border-box !important;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s;
  font-size: var(--op-btn-fs, 16px);
}

.op-cta-btn:hover {
  transform: translateY(-2px);
}

.op-footer {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  text-align: center;
  font-weight: 500;
  opacity: 0.7;
  margin-top: 1rem !important;
}

.op-sep {
  margin: 0 8px;
  /* Небольшой отступ на телефонах */
  color: rgba(255, 255, 255, 0.4);
  /* Бонус: можно сделать палочку чуть тусклее, как в премиум-дизайне */
}

 /* ---------- Offer PRO: двойная цена (старая зачёркнутая / новая акцентная) ---------- */
.op-dual-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
  width: 100%;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.op-price-old {
  font-size: 18px;
  font-weight: 500;
  color: #9ca3af;
  text-decoration: line-through;
  opacity: 0.8;
}

.op-price-new {
  font-size: 32px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.5px;
  line-height: 1;
}

@media (min-width: 768px) {
  .offer-pro-wrapper {
    gap: 3rem;
    padding: 4rem 3rem !important;
  }

  .op-main-title {
    text-align: left !important;
    font-size: calc(var(--op-title-fs, 28px) * 1.3) !important;
    max-width: 900px;
    transform: translateX(-60px) !important;
    /* Наш фикс для премиального сдвига */
  }

  .op-split-container {
    flex-direction: row;
    align-items: center;
    gap: 3rem !important;
    margin-top: 1rem;
  }

  .op-split-container.op-layout-right {
    flex-direction: row-reverse;
  }

  .op-image-col {
    flex: 0.8 !important;
    /* УМЕНЬШАЕМ долю картинки (было 1) */
    justify-content: flex-end !important;
    margin-top: 0;
    margin-bottom: 0 !important;
    padding: 0 !important;
  }

  .op-image-col img {
    max-width: 450px !important;
    mix-blend-mode: multiply;
    background-color: transparent !important;
  }

  .op-card-col {
    flex: 1.6;
    padding: 32px;
    margin-top: 0 !important;
  }

  .op-card-badge {
    top: -60px !important;
    right: 60px !important;
    width: var(--op-badge-size-pc, 100px) !important;
    height: var(--op-badge-size-pc, 100px) !important;
  }

  .op-cta-btn {
    padding: 24px 48px !important;
    font-size: calc(var(--op-btn-fs, 16px) * 1.35) !important;
    max-width: none !important;
    width: fit-content !important;

    /* Твой параметр для контроля ширины кнопки на ПК */
    min-width: 450px !important;
    justify-content: center !important;
    /* Удерживает текст и иконку строго по центру */

    gap: 14px !important;
  }

  .op-cta-btn img,
  .op-cta-btn i {
    width: 32px !important;
    height: 32px !important;
    font-size: 32px !important;
  }

  .op-cta-section {
    margin-top: 1rem !important;
  }

  .op-footer {
    margin-top: 1rem !important;
    /* Оставляем только отступ сверху */
  }

  .op-sep {
    margin: 0 5px !important;
    /* Широкий, журнальный отступ только для ПК */
  }
}

.op-item-icon-col img {
  width: 20px;
  height: 20px;
}

/* Окрашивание SVG буллитов */
.op-item-icon-col.recolor-svg {
  background-color: var(--op-bullet-bg, transparent) !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.op-item-icon-col.recolor-svg img {
  display: none !important;
}

.op-item-icon-col.recolor-svg::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background-color: var(--op-bullet-color, #E60000);
  -webkit-mask-image: var(--op-icon-url);
  mask-image: var(--op-icon-url);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Divider PRO */
.divider-pro-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  padding: var(--div-pady) 0;
}
.divider-pro-wrapper.div-stretch {
  margin-left: -20px;
  margin-right: -20px;
  width: calc(100% + 40px);
}
.divider-pro-wrapper.div-blur {
  -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
  mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}
.div-line-solid, .div-line-side {
  background-color: var(--div-color-line);
  height: var(--div-thick);
  flex: 1;
}
.div-center-content {
  color: var(--div-color-accent);
  font-size: var(--div-size);
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.div-pattern.wave, .div-pattern.zigzag {
  height: calc(var(--div-thick) * 10);
  width: 100%;
  background-color: var(--div-color-line);
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: auto 100%;
  mask-size: auto 100%;
}
.div-pattern.wave {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath d='M0 5 Q 5 0, 10 5 T 20 5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath d='M0 5 Q 5 0, 10 5 T 20 5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
}
.div-pattern.zigzag {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpolyline points='0,5 5,0 15,10 20,5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpolyline points='0,5 5,0 15,10 20,5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
}

/* ---------- Socials Block ---------- */
.socials-block-wrapper {
  width: 100%;
  box-sizing: border-box;
  margin: 0.5rem 0;
}

/* Layouts */
.socials-block-wrapper.socials-layout-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.socials-block-wrapper.socials-layout-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.socials-block-wrapper.socials-layout-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.socials-block-wrapper.socials-layout-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

/* Common Item Link */
.social-link-item {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: var(--button-radius, 14px);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, filter 0.2s ease;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  user-select: none;
  cursor: pointer;
}

/* Grid item sizing */
.socials-layout-grid-4 .social-link-item,
.socials-layout-grid-3 .social-link-item,
.socials-layout-grid-2 .social-link-item {
  padding: 14px 10px;
  min-height: 52px;
}

/* List item sizing */
.socials-layout-list .social-link-item {
  padding: 14px 20px;
  min-height: 52px;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

/* Icon container */
.social-link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.social-link-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.social-link-title {
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-family);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Style: Filled */
.socials-style-filled .social-link-item {
  background: var(--social-brand-color, #4f46e5);
  color: #ffffff;
  border: 1px solid transparent;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.socials-style-filled .social-link-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 0 16px var(--social-brand-color, #4f46e5);
  filter: brightness(1.1);
}

.socials-style-filled .social-link-item:hover .social-link-icon {
  transform: scale(1.1);
}

/* Special contrast handling for bright yellow / white in filled mode */
.socials-style-filled .social-link-item[data-network="snapchat"],
.socials-style-filled .social-link-item[data-network="youdo"],
.socials-style-filled .social-link-item[data-network="yandexmusic"],
.socials-style-filled .social-link-item[data-network="yandexmarket"],
.socials-style-filled .social-link-item[data-network="imdb"] {
  color: #000000;
}

/* Style: Outline */
.socials-style-outline .social-link-item {
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--social-brand-color, #4f46e5);
  border: 1.5px solid var(--social-brand-color, #4f46e5);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .socials-style-outline .social-link-item {
  background-color: rgba(0, 0, 0, 0.02);
}

.socials-style-outline .social-link-item[data-network="youdo"] {
  color: #111827;
  border-color: rgba(255, 255, 255, 0.4);
}

[data-theme="light"] .socials-style-outline .social-link-item[data-network="youdo"] {
  color: #111827;
  border-color: #d1d5db;
}

.socials-style-outline .social-link-item:hover {
  background: var(--social-brand-color, #4f46e5);
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), 0 0 16px var(--social-brand-color, #4f46e5);
}

.socials-style-outline .social-link-item:hover .social-link-icon {
  transform: scale(1.1);
}

/* Style: White / Monochrome cards (personal-pro) */
.socials-style-white .social-link-item {
  background: #ffffff !important;
  color: #111111 !important;
  border: 1px solid transparent !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
}
.socials-style-white .social-link-item:hover {
  background: #f8fafc !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18) !important;
}
.socials-style-white .social-link-icon svg,
.socials-style-white .social-link-icon i {
  fill: #111111 !important;
  color: #111111 !important;
}

/* Style: Wine / Burgundy cards (fashion-pro) */
.socials-style-wine .social-link-item {
  background: #5C0612 !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
  box-shadow: 0 4px 14px rgba(92, 6, 18, 0.25) !important;
}
.socials-style-wine .social-link-item:hover {
  background: #46040D !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(92, 6, 18, 0.35) !important;
}
.socials-style-wine .social-link-icon svg,
.socials-style-wine .social-link-icon i {
  fill: #ffffff !important;
  color: #ffffff !important;
}

/* Style: Plum / Dusty Rose cards (music-pro) */
.socials-style-plum .social-link-item {
  background: #8E4A63 !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
  box-shadow: 0 4px 14px rgba(142, 74, 99, 0.25) !important;
}
.socials-style-plum .social-link-item:hover {
  background: #763A50 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(142, 74, 99, 0.35) !important;
}
.socials-style-plum .social-link-icon svg,
.socials-style-plum .social-link-icon i {
  fill: #ffffff !important;
  color: #ffffff !important;
}

/* Style: Blue cards (realestate-pro) */
.socials-style-blue .social-link-item {
  background: #1E88E5 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(30, 136, 229, 0.25);
  border: none !important;
}
.socials-style-blue .social-link-item:hover {
  background: #1976D2 !important;
  transform: translateY(-2px);
}
.socials-style-blue .social-link-item svg,
.socials-style-blue .social-link-item i {
  fill: #FFFFFF !important;
  color: #FFFFFF !important;
}

/* Style: Amber outline cards (education-pro) */
.socials-style-amber .social-link-item {
  background: transparent !important;
  color: #181818 !important;
  border: 1.5px solid #181818 !important;
  box-shadow: none !important;
}
.socials-style-amber .social-link-item:hover {
  background: rgba(0, 0, 0, 0.06) !important;
  transform: translateY(-2px);
}
.socials-style-amber .social-link-item svg,
.socials-style-amber .social-link-item i {
  fill: #181818 !important;
  color: #181818 !important;
}

/* Style: Forest green cards (entertainment-pro) */
.socials-style-forest .social-link-item {
  background: #1B6A2D !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(27, 106, 45, 0.3);
  border: none !important;
}
.socials-style-forest .social-link-item:hover {
  background: #238639 !important;
  transform: translateY(-2px);
}
.socials-style-forest .social-link-item svg,
.socials-style-forest .social-link-item i {
  fill: #FFFFFF !important;
  color: #FFFFFF !important;
}

.socials-style-mocha .social-link-item {
  background: #52413F;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(82, 65, 63, 0.25);
}
.socials-style-mocha .social-link-item:hover {
  background: #403230;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(82, 65, 63, 0.35);
}
.socials-style-mocha .social-link-item svg,
.socials-style-mocha .social-link-item i {
  color: #ffffff;
}

.socials-style-outline .social-link-item[data-network="snapchat"]:hover,
.socials-style-outline .social-link-item[data-network="youdo"]:hover,
.socials-style-outline .social-link-item[data-network="yandexmusic"]:hover,
.socials-style-outline .social-link-item[data-network="yandexmarket"]:hover,
.socials-style-outline .social-link-item[data-network="imdb"]:hover {
  color: #000000;
}

/* Responsive */
@media (max-width: 480px) {
  .socials-block-wrapper.socials-layout-grid-4 {
    gap: 8px;
  }

  .socials-layout-grid-4 .social-link-item {
    padding: 12px 6px;
    min-height: 48px;
  }

  .socials-layout-grid-4 .social-link-icon {
    width: 22px;
    height: 22px;
  }
}

/* ---------- Messengers Block ---------- */
.messengers-block-wrapper {
  width: 100%;
  box-sizing: border-box;
  margin: 0.5rem auto;
  max-width: 580px;
}

/* Layouts */
.messengers-block-wrapper.messengers-layout-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.messengers-block-wrapper.messengers-layout-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.messengers-block-wrapper.messengers-layout-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.messengers-block-wrapper.messengers-layout-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.messengers-block-wrapper.messengers-layout-list:not(.msg-has-subtitles) .messenger-link-item {
  position: relative;
  justify-content: center;
  border-radius: var(--button-radius, 999px);
}

.messengers-block-wrapper.messengers-layout-list:not(.msg-has-subtitles) .messenger-link-icon {
  position: absolute;
  left: 20px;
}

.messengers-block-wrapper.messengers-layout-list:not(.msg-has-subtitles) .messenger-link-content {
  align-items: center;
  text-align: center;
}

/* Common Item Link */
.messenger-link-item {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  border-radius: var(--button-radius, 14px);
  min-height: 52px;
  box-sizing: border-box;
  padding: 14px 20px;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.messenger-link-item:active {
  transform: scale(0.98);
}

.messenger-link-item:hover {
  transform: translateY(-1px);
}

/* Grid item sizing */
.messengers-layout-grid-4 .messenger-link-item,
.messengers-layout-grid-3 .messenger-link-item,
.messengers-layout-grid-2 .messenger-link-item {
  flex-direction: column;
  gap: 6px;
  padding: 14px 10px;
  min-height: 52px;
  justify-content: center;
  text-align: center;
}

.messengers-layout-grid-2 .messenger-link-content,
.messengers-layout-grid-3 .messenger-link-content,
.messengers-layout-grid-4 .messenger-link-content {
  align-items: center;
  text-align: center;
}

/* Icon container */
.messenger-link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.messenger-link-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Text content */
.messenger-link-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.messenger-link-title {
  font-family: var(--msg-title-font, inherit);
  font-weight: var(--msg-title-weight, 600);
  font-size: var(--msg-title-size-pc, 16px);
  color: var(--msg-title-color, #ffffff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.messenger-link-subtitle {
  font-family: var(--msg-sub-font, inherit);
  font-weight: var(--msg-sub-weight, 400);
  font-size: var(--msg-sub-size-pc, 13px);
  color: var(--msg-sub-color, inherit);
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

/* Style: Filled */
.messengers-style-filled .messenger-link-item {
  background: var(--msg-brand-color, #4f46e5);
  color: #ffffff;
  border: 1px solid transparent;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.messengers-style-filled .messenger-link-item:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 0 16px var(--msg-brand-color, #4f46e5);
  filter: brightness(1.1);
}

.messengers-style-filled .messenger-link-subtitle {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* Style: Outline */
.messengers-style-outline .messenger-link-item {
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--msg-brand-color, #4f46e5);
  border: 1.5px solid var(--msg-brand-color, #4f46e5);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.messengers-style-outline .messenger-link-subtitle {
  color: inherit;
  opacity: 0.85;
}

[data-theme="light"] .messengers-style-outline .messenger-link-item {
  background-color: rgba(0, 0, 0, 0.02);
}

.messengers-style-outline .messenger-link-item:hover {
  background: var(--msg-brand-color, #4f46e5);
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), 0 0 16px var(--msg-brand-color, #4f46e5);
}

/* Responsive typography */
@media (max-width: 768px) {
  .messenger-link-title {
    font-size: var(--msg-title-size-mobi, 16px);
  }

  .messenger-link-subtitle {
    font-size: var(--msg-sub-size-mobi, 13px);
  }
}

/* Responsive grids */
@media (max-width: 480px) {
  .messengers-block-wrapper.messengers-layout-grid-4,
  .messengers-block-wrapper.messengers-layout-grid-3 {
    gap: 8px;
  }

  .messengers-layout-grid-4 .messenger-link-item,
  .messengers-layout-grid-3 .messenger-link-item {
    padding: 12px 6px;
    min-height: 48px;
  }

  .messengers-layout-grid-4 .messenger-link-icon,
  .messengers-layout-grid-3 .messenger-link-icon {
    width: 24px;
    height: 24px;
  }
}

/* ── Shape: Circle для мессенджеров ──────────────────────────────────────── */
.messengers-block-wrapper.messengers-shape-circle {
  max-width: 240px;
  margin-left: auto;
  margin-right: auto;
}
.messengers-shape-circle .messenger-link-item {
  border-radius: 50% !important;
  aspect-ratio: 1 / 1;
  min-height: 0;
  padding: 0;
  justify-content: center;
  align-items: center;
}
.messengers-shape-circle .messenger-link-content {
  display: none;
}
.messengers-shape-circle .messenger-link-icon {
  width: 52%;
  height: 52%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.messengers-shape-circle .messenger-link-icon svg {
  width: 100%;
  height: 100%;
}

/* ============================================================
   Icon & Text Block (icon_text)
   ============================================================ */
.icon-text-wrapper {
  display: grid;
  width: 100%;
  box-sizing: border-box;
  gap: var(--it-gap, 16px);
  margin: 0.5rem 0;
}

/* Mobile grid columns (default) */
.icon-text-wrapper.it-cols-mobi-1 {
  grid-template-columns: 1fr;
}

.icon-text-wrapper.it-cols-mobi-2 {
  grid-template-columns: repeat(2, 1fr);
}

/* Desktop grid columns */
@media (min-width: 768px) {
  .icon-text-wrapper.it-cols-pc-1 {
    grid-template-columns: 1fr;
  }
  .icon-text-wrapper.it-cols-pc-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .icon-text-wrapper.it-cols-pc-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Card base */
.icon-text-card {
  background: var(--it-card-bg, rgba(255, 255, 255, 0.05));
  border: var(--it-card-border, 1px solid rgba(255, 255, 255, 0.1));
  border-radius: var(--it-card-radius, var(--card-radius, 16px));
  padding: 20px;
  display: flex;
  box-sizing: border-box;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  gap: 16px;
}

[data-theme="light"] .icon-text-card {
  border-color: rgba(0, 0, 0, 0.08);
}

.icon-text-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Карточка без иконки (чистые плашки-принципы/бейджи) */
.icon-text-card.it-no-icon {
  gap: 0;
  justify-content: flex-start;
  align-items: center;
  min-height: 72px;
  padding: 16px 18px;
}

.icon-text-card.it-no-icon .icon-text-body {
  width: 100%;
  justify-content: center;
}

.icon-text-card.it-no-icon .icon-text-title {
  line-height: 1.35;
}

/* Inside-card layout (Flexbox) */
.icon-text-wrapper.it-layout-left .icon-text-card {
  flex-direction: row;
  align-items: flex-start;
  text-align: left;
}

.icon-text-wrapper.it-layout-right .icon-text-card {
  flex-direction: row-reverse;
  align-items: flex-start;
  text-align: right;
}

.icon-text-wrapper.it-layout-top .icon-text-card {
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

/* Center text modifier */
.icon-text-wrapper.it-center-text .icon-text-card {
  text-align: center;
}

.icon-text-wrapper.it-center-text.it-layout-top .icon-text-card {
  align-items: center;
}

.icon-text-wrapper.it-center-text .icon-text-body {
  align-items: center;
  text-align: center;
}

/* Icon wrapper */
.icon-text-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--it-icon-size, 28px) + 20px);
  height: calc(var(--it-icon-size, 28px) + 20px);
  min-width: calc(var(--it-icon-size, 28px) + 20px);
  min-height: calc(var(--it-icon-size, 28px) + 20px);
  font-size: var(--it-icon-size, 28px);
  flex-shrink: 0;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.icon-text-icon-wrap i {
  font-size: var(--it-icon-size, 28px);
  line-height: 1;
}

.icon-text-icon-wrap img,
.icon-text-icon-wrap svg {
  width: var(--it-icon-size, 28px);
  height: var(--it-icon-size, 28px);
  object-fit: contain;
}

/* Icon Shapes */
.icon-text-wrapper.it-shape-square .icon-text-icon-wrap {
  border-radius: 4px;
}

.icon-text-wrapper.it-shape-rounded .icon-text-icon-wrap {
  border-radius: 12px;
}

.icon-text-wrapper.it-shape-circle .icon-text-icon-wrap {
  border-radius: 50%;
}

/* Icon Styles */
/* 1) Filled: Solid color background with white/contrasting icon */
.icon-text-wrapper.it-style-filled .icon-text-icon-wrap {
  background-color: var(--it-icon-color, #4f46e5);
  color: #ffffff;
  border: 1px solid transparent;
  box-shadow: 0 4px 14px rgba(var(--it-icon-color-rgb, 79, 70, 229), 0.3);
}

/* 2) Outline: Border with transparent background */
.icon-text-wrapper.it-style-outline .icon-text-icon-wrap {
  background-color: transparent;
  color: var(--it-icon-color, #4f46e5);
  border: 2px solid var(--it-icon-color, #4f46e5);
}

/* 3) Circle (В круге): Translucent bg + border */
.icon-text-wrapper.it-style-circle .icon-text-icon-wrap {
  background-color: rgba(var(--it-icon-color-rgb, 79, 70, 229), 0.15);
  color: var(--it-icon-color, #4f46e5);
  border: 1.5px solid rgba(var(--it-icon-color-rgb, 79, 70, 229), 0.35);
}

/* 4) Plain / None: Icon only without background box, border, or shadow */
.icon-text-wrapper.it-style-plain .icon-text-icon-wrap,
.icon-text-wrapper.it-style-none .icon-text-icon-wrap {
  background-color: transparent !important;
  color: var(--it-icon-color, #ffffff) !important;
  border: none !important;
  box-shadow: none !important;
  width: var(--it-icon-size, 28px) !important;
  height: var(--it-icon-size, 28px) !important;
  min-width: var(--it-icon-size, 28px) !important;
  min-height: var(--it-icon-size, 28px) !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* Seamless cards (no individual card backgrounds or borders) */
.icon-text-wrapper.it-cards-seamless .icon-text-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 8px 0 !important;
  border-radius: 0 !important;
  transform: none !important;
}

.icon-text-wrapper.it-cards-seamless .icon-text-card:hover {
  transform: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Bento Promo Card pairing for pets-pro */
#block-pets_b6_promo_title,
.banner-pro-block#block-pets_b6_promo_title,
.banner-pro-block.pets-promo-top,
.banner-pro-block:has(+ .pets-promo-bottom),
.banner-pro-block:has(+ #block-pets_b7_promo_list) {
  background-color: #C56839 !important;
  border-radius: 16px 16px 0 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden;
  width: 100% !important;
}

#block-pets_b6_promo_title .banner-pro-content,
.banner-pro-block.pets-promo-top .banner-pro-content,
.banner-pro-block:has(+ .pets-promo-bottom) .banner-pro-content,
.banner-pro-block:has(+ #block-pets_b7_promo_list) .banner-pro-content {
  padding: 24px 20px 0px 20px !important;
  text-align: center !important;
}

#block-pets_b6_promo_title h2,
#block-pets_b6_promo_title .banner-pro-title,
.banner-pro-block.pets-promo-top h2,
.banner-pro-block:has(+ .pets-promo-bottom) h2,
.banner-pro-block:has(+ #block-pets_b7_promo_list) h2 {
  text-align: center !important;
  margin: 0 !important;
}

#block-pets_b7_promo_list,
.icon-text-wrapper#block-pets_b7_promo_list,
.icon-text-wrapper.pets-promo-bottom,
#block-pets_b6_promo_title + .icon-text-wrapper,
.banner-pro-block.pets-promo-top + .icon-text-wrapper,
.banner-pro-block#block-pets_b6_promo_title + div {
  background-color: #C56839 !important;
  border-radius: 0 0 16px 16px !important;
  margin-top: calc(-1.5rem - 1px) !important;
  padding: 8px 20px 24px 20px !important;
  position: relative;
  z-index: 1;
  width: 100% !important;
}

#block-pets_b7_promo_list .icon-text-card,
.icon-text-wrapper.pets-promo-bottom .icon-text-card,
#block-pets_b6_promo_title + .icon-text-wrapper .icon-text-card,
.banner-pro-block.pets-promo-top + .icon-text-wrapper .icon-text-card,
.banner-pro-block#block-pets_b6_promo_title + div .icon-text-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 8px 0 !important;
  border-radius: 0 !important;
}

@media (min-width: 768px) {
  #block-pets_b6_promo_title,
  .banner-pro-block#block-pets_b6_promo_title,
  .banner-pro-block.pets-promo-top,
  .banner-pro-block:not(:has(.bg-image-wrapper)).pets-promo-top,
  .banner-pro-block:not(:has(.bg-image-wrapper))#block-pets_b6_promo_title {
    margin-bottom: 0 !important;
    border-radius: 16px 16px 0 0 !important;
  }
}

/* ==========================================================================
   HEALTH-PRO: VITA — Рецепты на каждый день PRO
   ==========================================================================
   Изоляция от остальных 20 шаблонов каталога: все селекторы заякорены на
   idhealth_b2/health_b3 (живут в разметке и не теряются при round-trip
   админки) либо на именованный класс health-*, который есть только здесь.
   Радиусы: карточки 16px / 14px, кнопки --button-radius (14px). Капсул
   999px на карточках нет намеренно. */

/* Бесшовный бирюзовый контейнер рецептов (#1B8A7D) */
#block-health_b2_recipes_title,
.banner-pro-block#block-health_b2_recipes_title,
.banner-pro-block.health-recipes-top,
.banner-pro-block:has(+ .health-recipes-bottom),
.banner-pro-block:has(+ #block-health_b3_recipes_cards) {
  background-color: #1B8A7D !important;
  border-radius: 16px 16px 0 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden;
  width: 100% !important;
}

#block-health_b2_recipes_title .banner-pro-content,
.banner-pro-block#block-health_b2_recipes_title .banner-pro-content,
.banner-pro-block.health-recipes-top .banner-pro-content,
.banner-pro-block:has(+ .health-recipes-bottom) .banner-pro-content,
.banner-pro-block:has(+ #block-health_b3_recipes_cards) .banner-pro-content {
  padding: 24px 20px 0px 20px !important;
  text-align: center !important;
}

#block-health_b2_recipes_title h2,
.banner-pro-block.health-recipes-top h2,
.banner-pro-block:has(+ .health-recipes-bottom) h2,
.banner-pro-block:has(+ #block-health_b3_recipes_cards) h2 {
  text-align: center !important;
  margin: 0 !important;
}

/* Нижняя половина контейнера: приподнимаем карточки навстречу заголовку,
   отменяя стандартный межблочный отступ 1.5rem. */
#block-health_b3_recipes_cards,
.icon-text-wrapper#block-health_b3_recipes_cards,
.icon-text-wrapper.health-recipes-bottom,
.banner-pro-block.health-recipes-top + .icon-text-wrapper,
#block-health_b2_recipes_title + .icon-text-wrapper {
  background-color: #1B8A7D !important;
  border-radius: 0 0 16px 16px !important;
  margin-top: calc(-1.5rem - 1px) !important;
  margin-bottom: 1.5rem !important;
  padding: 12px 20px 24px 20px !important;
  position: relative;
  z-index: 1;
  width: 100% !important;
}

#block-health_b3_recipes_cards .icon-text-card,
.icon-text-wrapper.health-recipes-bottom .icon-text-card,
.banner-pro-block.health-recipes-top + .icon-text-wrapper .icon-text-card,
#block-health_b2_recipes_title + .icon-text-wrapper .icon-text-card {
  background: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;
}

/* Розовые контурные иконки на белых карточках рецептов */
#block-health_b3_recipes_cards .icon-text-icon-wrap,
.icon-text-wrapper.health-recipes-bottom .icon-text-icon-wrap {
  background: #FDF2F4 !important;
  border: 1px solid rgba(230, 73, 128, 0.25) !important;
  color: #E64980 !important;
}

/* Hero-сплит 7/5: иконки чеклиста УТП в фирменный бирюзовый */
#block-health_b1_hero .sp-item-icon {
  color: #1B8A7D;
}

/* Факты об авторе: карточки без иконок не получают пустых белых кружков */
#block-health_b6_author_facts .icon-text-card.it-no-icon .icon-text-title {
  margin-bottom: 4px;
}

/* Соцсети health-pro: единый розовый брендовый цвет #E64980 (Telegram, YouTube) */
#block-health_b11_socials .social-link-item,
.socials-block-wrapper.health-socials .social-link-item {
  background: #E64980 !important;
  color: #FFFFFF !important;
  border-radius: 14px !important;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

#block-health_b11_socials .social-link-item .social-link-icon,
.socials-block-wrapper.health-socials .social-link-item .social-link-icon {
  color: #FFFFFF !important;
}

#block-health_b11_socials .social-link-item:hover,
.socials-block-wrapper.health-socials .social-link-item:hover {
  opacity: 0.92;
  transform: translateY(-2px);
}

/* Text Body */
.icon-text-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.icon-text-title {
  margin: 0;
  font-family: var(--it-title-font, inherit);
  font-size: var(--it-title-fs, 18px);
  font-weight: var(--it-title-fw, 700);
  color: var(--it-title-color, #ffffff);
  line-height: 1.3;
}

.icon-text-desc {
  margin: 0;
  font-family: var(--it-text-font, inherit);
  font-size: var(--it-text-fs, 15px);
  color: var(--it-text-color, #cccccc);
  line-height: 1.5;
  word-break: break-word;
}

@media (max-width: 480px) {
  .icon-text-wrapper.it-cols-mobi-2 .icon-text-card {
    padding: 14px 10px;
    gap: 10px;
  }
  .icon-text-wrapper.it-cols-mobi-2 .icon-text-icon-wrap {
    width: calc(var(--it-icon-size, 24px) + 12px);
    height: calc(var(--it-icon-size, 24px) + 12px);
    min-width: calc(var(--it-icon-size, 24px) + 12px);
    min-height: calc(var(--it-icon-size, 24px) + 12px);
  }
}

/* ==========================================================================
   HEALTH-PRO: Плавающая Bento-карточка спецпредложения (health_offer)
   Эффект тарелки, выглядывающей сверху и снизу карточки (#1B8A7D).
   Селекторы заякорены на #health_offer — id сохраняется при round-trip
   админки и не конфликтует с pets-pro/beauty-pro (там id другой).
   ========================================================================== */

/* Карточка оффера: плавающая, центрована, глубокий бирюзовый + мягкая тень.
   Селекторы .op-price-old / .op-price-new взяты из существующего контракта
   рендерера (createOfferProBlock, js/script.js ~line 3327-3337) — чтобы не
   ломать остальные offer-pro шаблоны каталога. */
#health_offer,
.offer-pro-wrapper#health_offer {
  max-width: 440px !important;
  width: calc(100% - 32px) !important;
  margin: 110px auto 110px auto !important;
  background-color: #1B8A7D !important;
  background-image: none !important;
  border-radius: 20px !important;
  border: none !important;
  padding: 32px 24px 28px 24px !important;
  box-shadow: 0 16px 40px rgba(27, 138, 125, 0.25) !important;
  position: relative !important;
  overflow: visible !important;
  z-index: 2 !important;
  box-sizing: border-box !important;
  gap: 1.25rem !important;
}

/* Верхний полукруг тарелки — выступает над верхним краем карточки */
#health_offer::before,
.offer-pro-wrapper#health_offer::before {
  content: '' !important;
  position: absolute !important;
  top: -95px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 250px !important;
  height: 110px !important;
  background-image: url('../data/img/templates/health/dish-bowl-circle.png') !important;
  background-size: 250px 250px !important;
  background-position: top center !important;
  background-repeat: no-repeat !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

/* Нижний полукруг тарелки — выступает под нижним краем карточки */
#health_offer::after,
.offer-pro-wrapper#health_offer::after {
  content: '' !important;
  position: absolute !important;
  bottom: -95px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 250px !important;
  height: 110px !important;
  background-image: url('../data/img/templates/health/dish-bowl-circle.png') !important;
  background-size: 250px 250px !important;
  background-position: bottom center !important;
  background-repeat: no-repeat !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

/* Внутреннее фото скрыто (тарелка позиционируется снаружи через ::before/::after) */
#health_offer .op-image-col {
  display: none !important;
}

/* Контейнер карточки — вертикальная центрированная колонка */
#health_offer .op-split-container {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  gap: 0 !important;
}

/* Заголовок оффера */
#health_offer .op-main-title {
  font-family: 'Oswald', sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-align: center !important;
  color: #FFFFFF !important;
  margin: 0 0 20px 0 !important;
  transform: none !important;
  max-width: 100% !important;
}

/* Очистка серой полупрозрачной коробки состава */
#health_offer .op-card-col {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 20px 0 !important;
  width: 100% !important;
}

#health_offer .op-card-header {
  display: none !important;
}

#health_offer .op-card-items {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

#health_offer .op-card-item {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  gap: 10px !important;
  align-items: center !important;
}

/* Розовые круглые точки-буллиты (#FF6584) вместо Phosphor-чекбоксов */
#health_offer .op-item-icon-col {
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  max-width: 8px !important;
  background-color: #FF6584 !important;
  border-radius: 50% !important;
  border: none !important;
  box-shadow: none !important;
  margin-top: 1px !important;
}

#health_offer .op-item-icon-col i,
#health_offer .op-item-icon-col svg {
  display: none !important;
}

#health_offer .op-card-item-text {
  font-family: 'Roboto', sans-serif !important;
  font-size: 15px !important;
  color: #FFFFFF !important;
  line-height: 1.4 !important;
}

/* Блок цены и кнопки CTA */
#health_offer .op-cta-section {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

#health_offer .op-price-box {
  margin: 0 !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
}

/* Селекторы op-price-old / op-price-new — контракт рендерера (line 3327-3337).
   Также закрываем по op-old-price / op-new-price на случай будущего
   переименования в рендерере. */
#health_offer .op-price-old,
#health_offer .op-old-price {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 15px !important;
  text-decoration: line-through !important;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 400 !important;
}

#health_offer .op-price-new,
#health_offer .op-new-price {
  font-family: 'Oswald', sans-serif !important;
  font-size: 34px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  letter-spacing: -0.5px !important;
  line-height: 1 !important;
}

#health_offer .op-cta-btn {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  background: #FF6584 !important;
  border-radius: 14px !important;
  padding: 16px 20px !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 18px rgba(255, 101, 132, 0.35) !important;
  text-align: center !important;
  display: flex !important;
  justify-content: center !important;
  transition: transform 0.2s ease, opacity 0.2s ease !important;
}

#health_offer .op-cta-btn:hover {
  opacity: 0.94 !important;
  transform: translateY(-2px) !important;
}

#health_offer .op-footer {
  font-family: 'Roboto', sans-serif !important;
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.8) !important;
  text-align: center !important;
  margin: 0 !important;
}

/* Десктопные переопределения — сброс растягивания на 1200px */
@media (min-width: 768px) {
  #health_offer.offer-pro-wrapper {
    max-width: 440px !important;
    margin: 110px auto 110px auto !important;
    padding: 36px 28px !important;
    gap: 1.25rem !important;
  }

  #health_offer .op-split-container {
    flex-direction: column !important;
    gap: 0 !important;
    margin: 0 !important;
  }

  #health_offer .op-main-title {
    text-align: center !important;
    transform: none !important;
    font-size: 26px !important;
  }

  #health_offer .op-cta-btn {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* ==========================================================================
   Q&A (Questions & Answers / Accordion) Block
   ========================================================================== */

.qa-block-wrapper {
  width: 100%;
  box-sizing: border-box;
  background-color: var(--qa-bg, transparent);
  padding-top: var(--qa-pad-top, 20px);
  padding-bottom: var(--qa-pad-bottom, 20px);
}

.qa-item {
  width: 100%;
  box-sizing: border-box;
  background-color: transparent;
  border-bottom: 1px solid var(--qa-divider-color, #e5e7eb);
  transition: background-color 0.2s ease;
}

.qa-item.active {
  background-color: var(--qa-active-bg, #f9fafb);
}

/* Dividers configuration */
.qa-block-wrapper.qa-no-dividers .qa-item {
  border-bottom: none;
}

.qa-block-wrapper.qa-hide-outer .qa-item:first-child {
  border-top: none;
}

.qa-block-wrapper.qa-hide-outer .qa-item:last-child {
  border-bottom: none;
}

/* Header Trigger */
.qa-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  padding: 16px 12px;
  cursor: pointer;
  box-sizing: border-box;
  text-align: inherit;
  outline: none;
  gap: 16px;
  transition: color 0.2s ease;
}

/* Question text */
.qa-question {
  flex: 1;
  font-family: var(--qa-q-font, 'Inter', sans-serif);
  font-weight: var(--qa-q-weight, 600);
  font-size: var(--qa-q-size, 16px);
  color: var(--qa-q-color, #111827);
  line-height: 1.4;
  word-break: break-word;
}

/* Alignment modifiers */
.qa-block-wrapper.qa-align-left .qa-question,
.qa-block-wrapper.qa-align-left .qa-content-inner {
  text-align: left;
}

.qa-block-wrapper.qa-align-center .qa-question,
.qa-block-wrapper.qa-align-center .qa-content-inner {
  text-align: center;
}

.qa-block-wrapper.qa-align-right .qa-question,
.qa-block-wrapper.qa-align-right .qa-content-inner {
  text-align: right;
}

/* Indicator Base */
.qa-indicator {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--qa-q-color, #111827);
}

/* 1) Indicator: Plus / Minus */
.qa-block-wrapper.qa-indicator-plus .qa-indicator::before,
.qa-block-wrapper.qa-indicator-plus .qa-indicator::after {
  content: '';
  position: absolute;
  background-color: var(--qa-q-color, currentColor);
  border-radius: 1px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.qa-block-wrapper.qa-indicator-plus .qa-indicator::before {
  width: 14px;
  height: 2px;
}

.qa-block-wrapper.qa-indicator-plus .qa-indicator::after {
  width: 2px;
  height: 14px;
}

.qa-block-wrapper.qa-indicator-plus .qa-item.active .qa-indicator::after {
  transform: rotate(90deg);
  opacity: 0;
}

/* 2) Indicator: Arrow / Chevron */
.qa-block-wrapper.qa-indicator-arrow .qa-indicator::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--qa-q-color, currentColor);
  border-bottom: 2px solid var(--qa-q-color, currentColor);
  transform: rotate(45deg);
  transition: transform 0.25s ease;
  margin-top: -3px;
  box-sizing: border-box;
}

.qa-block-wrapper.qa-indicator-arrow .qa-item.active .qa-indicator::after {
  transform: rotate(-135deg);
  margin-top: 3px;
}

/* Accordion Content Container */
.qa-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}

/* Inner answer content */
.qa-content-inner {
  padding: 0 12px 16px 12px;
  font-family: var(--qa-a-font, 'Inter', sans-serif);
  font-weight: var(--qa-a-weight, 400);
  font-size: var(--qa-a-size, 14px);
  color: var(--qa-a-color, #4b5563);
  line-height: 1.6;
  word-break: break-word;
}

/* ---------- Video Block ---------- */
.video-block-wrapper {
  width: 100%;
  box-sizing: border-box;
  padding-top: var(--video-pad-top, 20px);
  padding-bottom: var(--video-pad-bottom, 20px);
}

/* Режим flush: видео становится «бесшовной» вставкой внутрь общей карточки секции —
   съедает вертикальный gap секции, обнуляет собственные отступы и выравнивает боковые
   поля по сетке (22px). Фон берётся из --video-card-bg (его ставит createVideoBlock). */
.video-block-wrapper.video-flush {
  margin-top: -1.5rem !important;
  margin-bottom: -1.5rem !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 22px !important;
  padding-right: 22px !important;
  background-color: var(--video-card-bg, #EBE4DF) !important;
  box-sizing: border-box !important;
  width: 100% !important;
}
.video-block-wrapper.video-flush .video-container {
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(61, 46, 44, 0.12) !important;
}

.video-container {
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #000;
  aspect-ratio: 16 / 9;
}

.video-container.video-vertical {
  aspect-ratio: 9 / 16;
}

.video-container iframe,
.video-container video {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  object-fit: cover;
}

.video-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888888;
  font-size: 14px;
  box-sizing: border-box;
}

.video-placeholder.video-vertical {
  aspect-ratio: 9 / 16;
}
.pro-block-placeholder {
  margin: 15px 0;
  padding: 20px;
  background: rgba(255,255,255,0.05);
  border: 1px dashed rgba(255,255,255,0.2);
  border-radius: var(--button-radius, 12px);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.pro-placeholder-content {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #888;
  font-family: var(--font-main, sans-serif);
  font-size: 14px;
}


/* ---------- Map Block ---------- */
.map-block-wrapper {
  position: relative;
  width: 100%;
  border-radius: var(--card-radius, 16px);
  overflow: hidden;
  margin-bottom: 1.5rem;
  background: var(--card-bg, #1a1a1a);
  border: var(--card-border, 1px solid rgba(255, 255, 255, 0.1));
}

.map-container {
  width: 100%;
  min-height: 250px;
  height: 300px;
  background: #111;
  z-index: 1;
}

.map-overlay-btn-container {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 400;
}

.map-block-wrapper.map-no-btn .map-overlay-btn-container,
.map-block-wrapper.map-no-badge .map-overlay-btn-container,
#block-pets_b9_map .map-overlay-btn-container,
#map-pets_b9_map + .map-overlay-btn-container {
  display: none !important;
}

.map-overlay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: var(--button-radius, 16px);
  text-decoration: none;
  font-size: var(--btn-fs-mobi, 14px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s, opacity 0.2s;
  white-space: nowrap;
}

.map-overlay-btn:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

@media (min-width: 768px) {
  .map-container {
    min-height: 300px;
    height: 350px;
  }
  .map-overlay-btn {
    font-size: var(--btn-fs-pc, 16px);
    padding: 14px 32px;
  }
}

/* ==========================================================================
   Carousel PRO Block (Swiper.js)
   ========================================================================== */
.carousel-block-wrapper {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.carousel-swiper {
  position: relative;
  width: 100%;
  border-radius: var(--button-radius, 16px);
  overflow: hidden;
  background: var(--carousel-bg, transparent);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.carousel-block-wrapper.no-border .carousel-swiper,
.carousel-block-wrapper.no-border .carousel-slide-inner,
.carousel-block-wrapper.no-border .carousel-slide-link {
  border-radius: 0 !important;
  box-shadow: none !important;
}

.carousel-slide {
  position: relative;
  display: flex;
  box-sizing: border-box;
  height: auto;
}

.carousel-slide-inner,
.carousel-slide-link {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--carousel-aspect-ratio, 1 / 1);
  overflow: hidden;
  border-radius: inherit;
  text-decoration: none;
  color: inherit;
  background: #18181b;
}

.carousel-slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 0.4s ease;
}

.carousel-slide-link:hover .carousel-slide-img {
  transform: scale(1.02);
}

.carousel-slide-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #1f2937;
  color: #9ca3af;
  font-size: 36px;
  gap: 8px;
}

.carousel-slide-placeholder span {
  font-size: 13px;
  font-weight: 500;
  color: #9ca3af;
}

/* Slide Overlay (Title & Description) */
.carousel-slide-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 20px;
  background: var(--carousel-overlay-bg, linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 70%, transparent 100%));
  z-index: 2;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;
}

.carousel-slide-overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.carousel-slide-title {
  color: var(--carousel-title-color, #ffffff);
  font-family: var(--carousel-title-font, inherit);
  font-weight: var(--carousel-title-weight, 700);
  font-size: var(--carousel-title-size, var(--carousel-title-size-mobi, 18px));
  line-height: 1.3;
  margin: 0;
  word-break: break-word;
}

.carousel-slide-desc {
  color: var(--carousel-desc-color, #cccccc);
  font-family: var(--carousel-desc-font, inherit);
  font-weight: var(--carousel-desc-weight, 400);
  font-size: var(--carousel-desc-size, var(--carousel-desc-size-mobi, 13px));
  line-height: 1.4;
  margin-top: 6px;
  word-break: break-word;
}

.carousel-slide-link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--carousel-link-color, #4f46e5);
  transition: transform 0.2s ease, background 0.2s ease;
}

.carousel-slide-link:hover .carousel-slide-link-icon {
  transform: translate(2px, -2px);
  background: rgba(255, 255, 255, 0.25);
}

.carousel-slide-link-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--carousel-link-color, #4f46e5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  z-index: 3;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: transform 0.2s ease;
}

.carousel-slide-link:hover .carousel-slide-link-badge {
  transform: scale(1.1);
}

/* Swiper Navigation Arrows */
.carousel-block-wrapper .carousel-arrow {
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  color: var(--carousel-nav-color, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: all 0.2s ease;
  z-index: 10;
  cursor: pointer;
  margin-top: -20px !important;
}

.carousel-block-wrapper:not(.carousel-layout-hero) .carousel-arrow.carousel-arrow-prev {
  left: 12px !important;
}

.carousel-block-wrapper:not(.carousel-layout-hero) .carousel-arrow.carousel-arrow-next {
  right: 12px !important;
}

.carousel-block-wrapper .carousel-arrow:hover {
  background: rgba(0, 0, 0, 0.7);
  transform: scale(1.08);
}

.carousel-block-wrapper .carousel-arrow.swiper-button-disabled {
  opacity: 0.2 !important;
  cursor: not-allowed;
  pointer-events: none;
}

.carousel-block-wrapper .carousel-arrow::after {
  display: none !important;
}

/* Swiper Pagination */
.carousel-block-wrapper .carousel-pagination-inside {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel-block-wrapper .carousel-pagination-outside {
  position: static;
  margin-top: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
}

/* Dots style */
.carousel-block-wrapper .carousel-nav-dots .swiper-pagination-bullet {
  background: var(--carousel-nav-color, #ffffff);
  opacity: 0.4;
  width: 8px;
  height: 8px;
  margin: 0 4px !important;
  transition: all 0.25s ease;
  border-radius: 50%;
}

.carousel-block-wrapper .carousel-nav-dots .swiper-pagination-bullet-active {
  opacity: 1;
  transform: scale(1.25);
  background: var(--carousel-nav-color, #ffffff);
}

/* Dashes style */
.carousel-block-wrapper .carousel-nav-dashes .swiper-pagination-bullet {
  background: var(--carousel-nav-color, #ffffff);
  opacity: 0.35;
  width: 22px;
  height: 4px;
  border-radius: 2px;
  margin: 0 3px !important;
  transition: all 0.25s ease;
}

.carousel-block-wrapper .carousel-nav-dashes .swiper-pagination-bullet-active {
  opacity: 1;
  width: 32px;
  background: var(--carousel-nav-color, #ffffff);
}

/* Desktop Typography & Layout Scaling */
@media (min-width: 768px) {
  .carousel-slide-title {
    font-size: var(--carousel-title-size-pc, 20px);
  }
  .carousel-slide-desc {
    font-size: var(--carousel-desc-size-pc, 14px);
  }
  .carousel-slide-overlay {
    padding: 20px 24px;
  }
}

/* ============================================================
   Floating Messengers Widget (Этап 3)
   ============================================================ */
.taplux-floating-messengers-root {
  position: fixed;
  z-index: 9999;
}

.taplux-floating-messengers-root.pos-bottom-right {
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  right: 24px;
}

.taplux-floating-messengers-root.pos-bottom-left {
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  left: 24px;
}

/* Круглая FAB-кнопка (работает и как <a>, и как <button>) */
.taplux-floating-fab {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  outline: none;
  padding: 0;
  text-decoration: none;
  background: var(--msg-brand-color, #4f46e5);
  color: #ffffff;
  font-size: 26px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28), 0 0 16px rgba(79, 70, 229, 0.35);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease;
}

.taplux-floating-fab:hover {
  transform: scale(1.06);
}

.taplux-floating-fab:active {
  transform: scale(0.95);
}

.taplux-fab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}

.taplux-fab-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Пульсирующее кольцо */
.taplux-pulse-ring {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  border: 2px solid var(--msg-brand-color, #4f46e5);
  animation: taplux-pulse 2s cubic-bezier(0.24, 0, 0.38, 1) infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes taplux-pulse {
  0% { transform: scale(0.95); opacity: 0.8; }
  70% { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}

/* Всплывающее меню */
.taplux-floating-menu {
  position: absolute;
  bottom: 70px;
  right: 0;
  min-width: 260px;
  max-width: 320px;
  background: rgba(24, 24, 27, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  display: none;
  opacity: 0;
  transform: translateY(12px) scale(0.95);
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.taplux-floating-messengers-root.pos-bottom-left .taplux-floating-menu {
  right: auto;
  left: 0;
}

.taplux-floating-menu.open {
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Шапка меню */
.taplux-floating-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 4px 10px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.taplux-floating-menu-title {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
}

.taplux-floating-menu-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border-radius: 50%;
  cursor: pointer;
  font-size: 15px;
  padding: 0;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.taplux-floating-menu-close:hover {
  background: rgba(255, 255, 255, 0.16);
}

.taplux-floating-menu-close:active {
  transform: scale(0.92);
}

/* Список мессенджеров */
.taplux-floating-menu-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.taplux-floating-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.taplux-floating-menu-item:hover {
  background: rgba(255, 255, 255, 0.09);
  transform: translateX(2px);
}

.taplux-floating-menu-item:active {
  transform: scale(0.98);
}

.taplux-floating-menu-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 8px;
  color: var(--msg-brand-color, #4f46e5);
}

.taplux-floating-menu-item-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.taplux-floating-menu-item-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.taplux-floating-menu-item-title {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.taplux-floating-menu-item-subtitle {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Light theme adaptation */
[data-theme="light"] .taplux-floating-menu {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}

[data-theme="light"] .taplux-floating-menu-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .taplux-floating-menu-title {
  color: #18181b;
}

[data-theme="light"] .taplux-floating-menu-close {
  color: #18181b;
  background: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .taplux-floating-menu-close:hover {
  background: rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .taplux-floating-menu-item {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .taplux-floating-menu-item:hover {
  background: rgba(0, 0, 0, 0.07);
}

[data-theme="light"] .taplux-floating-menu-item-title {
  color: #18181b;
}

[data-theme="light"] .taplux-floating-menu-item-subtitle {
  color: rgba(0, 0, 0, 0.55);
}

/* ══════════════════════════════════════════════════════════════════════
   PRO Блок: Форма заявки (form)
   Все селекторы с префиксом .form-pro- / .fp- — существующие блоки не затронуты.
   ══════════════════════════════════════════════════════════════════════ */
.form-pro-wrapper {
  width: 100%;
  box-sizing: border-box;
  padding: 24px 20px;
  margin: 12px 0;
  border-radius: var(--fp-card-radius, 16px);
  background: var(--fp-card-bg, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--fp-card-border, rgba(255, 255, 255, 0.1));
}

.form-pro-wrapper *,
.form-pro-wrapper *::before,
.form-pro-wrapper *::after {
  box-sizing: border-box;
}

/* Режим flush: компенсация gap: 1.5rem контейнера для бесшовного слияния с соседними секциями */
.form-pro-wrapper.form-pro-flush {
  margin: -1.5rem 0;
  border-radius: 0;
  border: none;
}

.fp-title {
  margin: 0 0 8px 0;
  text-align: center;
  line-height: 1.25;
}

.fp-desc {
  margin: 0 0 20px 0;
  text-align: center;
  line-height: 1.45;
}

.fp-fields-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  width: 100%;
}

@media (min-width: 768px) {
  .fp-fields-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .fp-field-full {
    grid-column: 1 / -1;
  }
  .fp-field-half {
    grid-column: span 1;
  }
}

.fp-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  min-width: 0;
}

.fp-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--fp-label-color, var(--fp-text-color, inherit));
  opacity: 0.9;
}

.fp-req {
  color: #ef4444;
}

.fp-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--fp-input-radius, 10px);
  background: var(--fp-input-bg, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--fp-input-border, rgba(255, 255, 255, 0.15));
  color: var(--fp-input-color, #ffffff);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.4;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.fp-input::placeholder {
  color: var(--fp-input-color, #ffffff);
  opacity: 0.45;
}

.fp-input:focus {
  border-color: #8B5CF6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
}

.fp-input.fp-input-error,
.fp-radio-group.fp-input-error,
.fp-checkbox-label.fp-input-error {
  border-color: #ef4444;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}

.fp-field-error {
  font-size: 12px;
  line-height: 1.35;
  color: #ef4444;
  margin-top: 2px;
}

.fp-textarea {
  resize: vertical;
  min-height: 80px;
}

.fp-select {
  padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 13px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.fp-select option {
  color: #111827;
  background: #ffffff;
}

/* Radio-группы (чипы) */
.fp-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fp-radio-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--fp-input-bg, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--fp-input-border, rgba(255, 255, 255, 0.12));
  cursor: pointer;
  font-size: 14px;
  line-height: 1.3;
  user-select: none;
  transition: background 0.15s, border-color 0.15s;
}

.fp-radio-label:hover {
  border-color: rgba(139, 92, 246, 0.6);
}

.fp-radio-label:has(input:checked) {
  background: rgba(139, 92, 246, 0.2);
  border-color: #8B5CF6;
  color: #ffffff;
}

.fp-radio-label input {
  accent-color: #8B5CF6;
  margin: 0;
}

/* Radio list style support (events / survey forms) */
.fp-radio-group-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}

.fp-radio-group-list .fp-radio-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: none;
  padding: 4px 0;
  font-size: 14.5px;
  color: var(--fp-text-color, inherit);
  cursor: pointer;
}

.fp-radio-group-list .fp-radio-label:has(input:checked) {
  background: transparent;
  border-color: transparent;
  color: #E4BC7E;
  font-weight: 600;
}

.fp-radio-group-list .fp-radio-label input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: #E4BC7E;
  margin: 0;
  cursor: pointer;
}

/* Checkbox */
.fp-checkbox-label {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.4;
  user-select: none;
}

.fp-checkbox-label input {
  accent-color: #8B5CF6;
  margin-top: 3px;
  flex-shrink: 0;
}

/* Кнопка отправки */
.fp-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px 28px;
  border: none;
  cursor: pointer;
  margin-top: 16px;
  transition: transform 0.15s, opacity 0.15s, filter 0.15s;
}

.fp-submit-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.fp-submit-btn:active {
  transform: translateY(0);
}

.fp-submit-btn:focus-visible {
  outline: 2px solid #8B5CF6;
  outline-offset: 2px;
}

.fp-note {
  margin-top: 12px;
  text-align: center;
  line-height: 1.4;
  opacity: 0.8;
}

/* Состояние успеха */
.fp-success-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  text-align: center;
  animation: fpFadeIn 0.3s ease;
}

@keyframes fpFadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.fp-success-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.fp-success-icon svg {
  width: 32px;
  height: 32px;
  fill: currentColor;
}

.fp-success-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}

.fp-success-desc {
  font-size: 14px;
  opacity: 0.8;
  max-width: 380px;
}

/* Светлая тема — без явного цвета полей ввод был бы нечитаемым */
[data-theme="light"] .fp-input::placeholder {
  opacity: 0.55;
}

/* ==========================================================================
   PRO-блок `steps` (Шаги / Таймлайн) — Этап 3
   ========================================================================== */
.steps-wrapper {
  width: 100%;
  margin: 16px 0;
  box-sizing: border-box;
}

.steps-wrapper *,
.steps-wrapper *::before,
.steps-wrapper *::after {
  box-sizing: border-box;
}

.steps-block-title {
  margin: 0 0 8px 0;
  line-height: 1.25;
  word-break: break-word;
}

.steps-block-desc {
  margin: 0 0 20px 0;
  line-height: 1.45;
  word-break: break-word;
}

.steps-list {
  display: flex;
  flex-direction: column;
  position: relative;
}

.step-item {
  display: flex;
  align-items: stretch;
  position: relative;
  gap: 16px;
  min-height: 56px;
}

.step-marker-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: var(--st-num-size, 36px);
  position: relative;
}

.step-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--st-num-size, 36px);
  height: var(--st-num-size, 36px);
  flex-shrink: 0;
  font-weight: 700;
  font-size: 14px;
  z-index: 2;
  transition: transform 0.2s ease;
}

.step-marker-circle {
  border-radius: 50%;
  background: var(--st-num-bg, #8B5CF6);
  color: var(--st-num-color, #ffffff);
}

.step-marker-square {
  border-radius: 8px;
  background: var(--st-num-bg, #8B5CF6);
  color: var(--st-num-color, #ffffff);
}

.step-marker-minimal {
  border-radius: 6px;
  background: transparent;
  color: var(--st-num-bg, #8B5CF6);
  font-size: 16px;
  font-weight: 800;
  border: 2px solid var(--st-num-bg, #8B5CF6);
}

.step-connector {
  position: absolute;
  top: var(--st-num-size, 36px);
  bottom: 0;
  width: 2px;
  background: var(--st-connector-color, rgba(255, 255, 255, 0.15));
  z-index: 1;
}

.step-item:last-child .step-connector {
  display: none;
}

.step-body-col {
  flex: 1;
  min-width: 0;
  padding-bottom: 24px;
}

.step-item:last-child .step-body-col {
  padding-bottom: 0;
}

.step-image {
  display: block;
  width: 100%;
  max-width: 100%;
  border-radius: 10px;
  margin-bottom: 12px;
  object-fit: cover;
  max-height: 240px;
}

.step-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.step-title {
  margin: 0;
  line-height: 1.3;
  word-break: break-word;
}

.step-time {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--st-text-color, #9ca3af);
  font-weight: 500;
  white-space: nowrap;
}

.step-text {
  margin: 0;
  line-height: 1.45;
  word-break: break-word;
}

/* Карточный режим шагов */
.steps-wrapper.steps-card-style .step-item {
  background: var(--st-card-bg);
  border: 1px solid var(--st-card-border);
  border-radius: var(--st-card-radius, 16px);
  padding: 16px;
  margin-bottom: 12px;
}

.steps-wrapper.steps-card-style .step-body-col {
  padding-bottom: 0;
}

.steps-wrapper.steps-card-style .step-connector {
  bottom: -13px;
}

/* Компактный режим шагов */
.steps-list.steps-compact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 12px;
}

.steps-compact .step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  min-height: auto;
}

.steps-compact .step-marker-col {
  width: auto;
}

.steps-compact .step-connector {
  display: none;
}

.steps-compact .step-body-col {
  padding-bottom: 0;
  width: 100%;
}

.steps-compact .step-header {
  justify-content: center;
}

.steps-compact .step-title {
  font-size: 13px;
}

.steps-compact .step-text {
  font-size: 12px;
}

/* ==========================================================================
   PRO-блок `stats` (Цифры / Факты / Метрики) — Этап 3
   ========================================================================== */
.stats-wrapper {
  width: 100%;
  margin: 16px 0;
  box-sizing: border-box;
}

.stats-wrapper *,
.stats-wrapper *::before,
.stats-wrapper *::after {
  box-sizing: border-box;
}

.stats-block-title {
  margin: 0 0 8px 0;
  line-height: 1.25;
  word-break: break-word;
}

.stats-block-desc {
  margin: 0 0 20px 0;
  line-height: 1.45;
  word-break: break-word;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(var(--stats-cols, 3), 1fr);
  gap: 16px;
  align-items: stretch;
}

.stat-item {
  display: flex;
  flex-direction: column;
  text-align: var(--stats-align, center);
  justify-content: center;
  position: relative;
  min-width: 0;
}

.stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.stat-icon i {
  font-size: var(--stats-icon-size, 26px);
  color: var(--stats-icon-color);
}

.stat-icon img {
  width: var(--stats-icon-size, 26px);
  height: var(--stats-icon-size, 26px);
  object-fit: contain;
}

.stat-value {
  line-height: 1.1;
  margin-bottom: 4px;
  word-break: break-word;
}

.stat-label {
  line-height: 1.35;
  word-break: break-word;
}

/* Стили карточек stats */
.stats-style-card .stat-item {
  background: var(--stats-card-bg, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--stats-card-border, rgba(255, 255, 255, 0.1));
  border-radius: var(--stats-card-radius, 16px);
  padding: 18px 14px;
}

.stats-style-radial .stat-item {
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid var(--stats-card-border, rgba(255, 255, 255, 0.12));
  border-radius: var(--stats-card-radius, 16px);
  padding: 20px 14px;
}

/* Разделители между колонками в стиле plain */
.stats-has-dividers.stats-style-plain .stat-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -8px;
  top: 15%;
  height: 70%;
  width: 1px;
  background: var(--stats-divider-color, rgba(255, 255, 255, 0.12));
}

@media (max-width: 600px) {
  .stats-grid {
    grid-template-columns: repeat(min(var(--stats-cols, 3), 2), 1fr);
    gap: 12px;
  }
}

/* ==========================================================================
   PRO-блок `pricing_cards` (Тарифные карточки) — Этап 4
   ========================================================================== */
.pricing-cards-wrapper {
  width: 100%;
  margin: 16px 0;
  box-sizing: border-box;
}

.pricing-cards-wrapper *,
.pricing-cards-wrapper *::before,
.pricing-cards-wrapper *::after {
  box-sizing: border-box;
}

.pricing-cards-title {
  margin: 0 0 8px 0;
  line-height: 1.25;
  word-break: break-word;
}

.pricing-cards-desc {
  margin: 0 0 20px 0;
  line-height: 1.45;
  word-break: break-word;
}

.pc-grid {
  display: grid;
  grid-template-columns: repeat(var(--pc-cols, 2), 1fr);
  gap: var(--pc-gap, 16px);
  align-items: stretch;
}

.pc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--pc-card-bg, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--pc-card-border, rgba(255, 255, 255, 0.1));
  border-radius: var(--pc-radius, 18px);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.pc-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.pc-card-highlighted {
  background: var(--pc-featured-bg, rgba(139, 92, 246, 0.08));
  border-color: var(--pc-featured-border, #8B5CF6);
  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.18);
  transform: translateY(-2px);
}

.pc-card-highlighted:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(139, 92, 246, 0.28);
}

.pc-card-ribbon {
  position: absolute;
  top: 18px;
  right: -32px;
  transform: rotate(45deg);
  background: var(--pc-badge-bg, #8B5CF6);
  color: var(--pc-badge-color, #ffffff);
  padding: 4px 34px;
  font-family: var(--pc-badge-font, 'Inter', sans-serif);
  font-size: var(--pc-badge-size, 11px);
  font-weight: var(--pc-badge-weight, 700);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  z-index: 3;
  pointer-events: none;
}

.pc-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 18px;
  text-align: var(--pc-align, center);
  position: relative;
  z-index: 2;
}

.pc-card-badge {
  display: inline-flex;
  align-items: center;
  align-self: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--pc-badge-bg, #8B5CF6);
  color: var(--pc-badge-color, #ffffff);
  font-family: var(--pc-badge-font, 'Inter', sans-serif);
  font-size: var(--pc-badge-size, 11px);
  font-weight: var(--pc-badge-weight, 700);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.pc-card-title {
  margin: 0 0 6px 0;
  line-height: 1.25;
  word-break: break-word;
}

.pc-card-subtitle {
  margin: 0 0 14px 0;
  line-height: 1.4;
  word-break: break-word;
}

.pc-price-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pricing-cards-wrapper[style*="--pc-align: left"] .pc-price-box,
.pricing-cards-wrapper[style*="--pc-align:left"] .pc-price-box {
  align-items: flex-start;
}

.pc-price-old {
  text-decoration: line-through;
  opacity: 0.75;
  margin-bottom: 2px;
}

.pc-price-main {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
}

.pricing-cards-wrapper[style*="--pc-align: left"] .pc-price-main,
.pricing-cards-wrapper[style*="--pc-align:left"] .pc-price-main {
  justify-content: flex-start;
}

.pc-price-val {
  line-height: 1.1;
  word-break: break-word;
}

.pc-currency {
  line-height: 1.1;
}

.pc-per {
  line-height: 1.3;
}

.pc-features-list {
  list-style: none;
  margin: 0 0 20px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  flex: 1;
}

.pc-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.4;
  word-break: break-word;
}

.pc-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 16px;
}

.pc-feature-text {
  flex: 1;
}

.pc-button-wrap {
  margin-top: auto;
  width: 100%;
}

.pc-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 20px;
  border-radius: 12px;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.15s ease;
  line-height: 1.3;
  text-align: center;
  border: none;
  box-sizing: border-box;
}

.pc-cta-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.pc-cta-btn:active {
  transform: translateY(0);
}

@media (max-width: 600px) {
  .pc-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* Мобильная карусель тарифов со свайпом (Рубрика 18 «Спорт»).
   Включается только классом .pc-carousel-mobile, который ядро ставит
   при design.mobile_layout === 'carousel'. На десктопе (> 600px) сетка
   остаётся обычной — вертикальные колонки по cols. */
@media (max-width: 600px) {
  .pc-carousel-mobile .pc-grid {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 8px 16px 16px 16px !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
    gap: 14px !important;
  }
  .pc-carousel-mobile .pc-grid::-webkit-scrollbar {
    display: none !important;
  }
  .pc-carousel-mobile .pc-card {
    flex: 0 0 85% !important;
    max-width: 320px !important;
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;
  }
  .pc-carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
  }
  .pc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pc-dot-color, rgba(61, 46, 44, 0.25));
    transition: all 0.25s ease;
    cursor: pointer;
  }
  .pc-dot.active {
    width: 22px;
    border-radius: 4px;
    background: var(--pc-dot-active-color, #433330);
  }
}

@media (min-width: 601px) {
  .pc-carousel-dots {
    display: none !important;
  }
}

/* ==========================================================================
   PRO-блок `price_list` (Прайс-лист с точечным лидером) — Этап 4
   ========================================================================== */
.price-list-wrapper {
  width: 100%;
  margin: 16px 0;
  box-sizing: border-box;
}

.price-list-wrapper *,
.price-list-wrapper *::before,
.price-list-wrapper *::after {
  box-sizing: border-box;
}

.price-list-title {
  margin: 0 0 8px 0;
  line-height: 1.25;
  word-break: break-word;
}

.price-list-desc {
  margin: 0 0 20px 0;
  line-height: 1.45;
  word-break: break-word;
}

.pl-groups-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pl-group {
  background: var(--pl-card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--pl-card-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--pl-card-radius, 16px);
  padding: 16px 20px;
}

.pl-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--pl-divider-color, rgba(255, 255, 255, 0.08));
}

.pl-group-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.pl-group-title {
  margin: 0;
  line-height: 1.3;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  word-break: break-word;
}

.pl-group-rows {
  display: flex;
  flex-direction: column;
}

.pl-row {
  display: flex;
  flex-direction: column;
  padding: var(--pl-row-padding, 10px) 0;
}

.pl-group-has-dividers .pl-row:not(:last-child) {
  border-bottom: 1px solid var(--pl-divider-color, rgba(255, 255, 255, 0.08));
}

.pl-row-main {
  display: flex;
  align-items: baseline;
  width: 100%;
  gap: 8px;
}

.pl-row-text {
  flex-shrink: 1;
  word-break: break-word;
  line-height: 1.4;
}

.pl-leader {
  flex-grow: 1;
  flex-shrink: 1;
  min-width: 14px;
  margin-bottom: 4px;
  align-self: flex-end;
}

.pl-leader-dotted {
  border-bottom: 2px dotted var(--pl-leader-color, rgba(255, 255, 255, 0.25));
}

.pl-leader-solid {
  border-bottom: 1px solid var(--pl-leader-color, rgba(255, 255, 255, 0.25));
}

.pl-leader-none {
  border-bottom: none;
}

.pl-row-price {
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1.3;
  text-align: var(--pl-align-price, right);
}

.pl-row-note {
  margin-top: 3px;
  line-height: 1.35;
  word-break: break-word;
}

.pl-button-wrap {
  margin-top: 18px;
  width: 100%;
}

.pl-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 13px 22px;
  border-radius: 12px;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.15s ease;
  line-height: 1.3;
  text-align: center;
  border: none;
  box-sizing: border-box;
}

.pl-cta-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.pl-cta-btn:active {
  transform: translateY(0);
}



/* ==========================================================================
   PRO-BLOCK: reviews (Отзывы)
   ========================================================================== */
.reviews-wrapper {
  width: 100%;
  margin-bottom: 24px;
  box-sizing: border-box;
}

.rev-header {
  margin-bottom: 18px;
  text-align: center;
}

.rev-title {
  margin: 0 0 6px 0;
  line-height: 1.25;
}

.rev-desc {
  margin: 0;
  line-height: 1.45;
}

.rev-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.rev-item-card {
  background: var(--rev-card-bg, rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--rev-card-radius, 16px);
  padding: 16px 18px;
  box-sizing: border-box;
}

.rev-item-text {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  padding: 14px 4px;
  box-sizing: border-box;
  text-align: center;
}

/* Centered layout for reviews (entertainment-pro) */
.rev-item-centered {
  background: var(--rev-card-bg, transparent);
  border: none;
  padding: 16px 8px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.rev-item-centered .rev-avatar-wrap {
  margin-bottom: 10px;
}
.rev-item-centered .rev-stars {
  justify-content: center;
  margin-bottom: 8px;
}
.rev-item-centered .rev-author-name {
  margin-bottom: 8px;
}
.rev-item-centered .rev-content-text {
  text-align: center;
  line-height: 1.5;
}

.rev-quote-mark {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
}

.rev-item-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.rev-avatar-wrap {
  flex-shrink: 0;
}

.rev-avatar {
  display: block;
  object-fit: cover;
  width: var(--rev-photo-size, 54px);
  height: var(--rev-photo-size, 54px);
}

.rev-avatar-circle {
  border-radius: 50%;
}

.rev-avatar-rounded {
  border-radius: 12px;
}

.rev-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  color: #9ca3af;
  font-size: 24px;
}

.rev-author-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.rev-author-name {
  line-height: 1.3;
}

.rev-author-role {
  line-height: 1.3;
}

.rev-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 10px;
  color: var(--rev-star-color, #f59e0b);
  font-size: 15px;
}

.rev-content-text {
  line-height: 1.5;
  word-break: break-word;
}

/* ==========================================================================
   PRO-BLOCK: gallery (Сетка фотографий)
   ========================================================================== */
.gallery-wrapper {
  width: 100%;
  margin-bottom: 24px;
  box-sizing: border-box;
}

.gal-header {
  margin-bottom: 18px;
  text-align: center;
}

.gal-title {
  margin: 0 0 6px 0;
  line-height: 1.25;
}

.gal-desc {
  margin: 0;
  line-height: 1.45;
}

.gal-grid {
  display: grid;
  grid-template-columns: repeat(var(--gal-cols, 2), 1fr);
  gap: var(--gal-gap, 12px);
  width: 100%;
}

@media (max-width: 480px) {
  .gal-grid {
    grid-template-columns: repeat(min(2, var(--gal-cols, 2)), 1fr);
  }
}

.gal-item {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

.gal-span-1x1 {
  grid-column: span 1;
}

.gal-span-2x1 {
  grid-column: span 2;
}

.gal-span-2x2 {
  grid-column: span 2;
  grid-row: span 2;
}

@media (max-width: 480px) {
  .gal-span-2x1,
  .gal-span-2x2 {
    grid-column: span 1;
  }
}

.gal-img-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
}

.gal-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.gal-item:hover .gal-img {
  transform: scale(1.03);
}

.gal-shape-rounded .gal-img-container {
  border-radius: var(--gal-radius, 14px);
}

.gal-shape-square .gal-img-container {
  border-radius: 0;
}

.gal-shape-circle .gal-img-container {
  border-radius: 50%;
  aspect-ratio: 1 / 1 !important;
}

.gal-shape-oval .gal-img-container {
  border-radius: 50% / 35%;
  aspect-ratio: 3 / 4 !important;
}

.gal-height-square .gal-img-container {
  aspect-ratio: 1 / 1;
}

.gal-height-portrait .gal-img-container {
  aspect-ratio: 3 / 4;
}

.gal-height-auto .gal-img-container {
  height: 100%;
  min-height: 120px;
}

.gal-caption-bottom {
  margin-top: 6px;
  text-align: center;
  line-height: 1.35;
  word-break: break-word;
}

.gal-caption-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 12px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
  line-height: 1.3;
  word-break: break-word;
  pointer-events: none;
}

/* ==========================================================================
   PRO-BLOCK: quote (Крупная цитата)
   ========================================================================== */
.quote-wrapper {
  width: 100%;
  margin-bottom: 24px;
  box-sizing: border-box;
}

.quote-box {
  position: relative;
  background: var(--quote-bg, transparent);
  border-radius: var(--quote-radius, 16px);
  padding: var(--quote-padding, 20px 24px);
  box-sizing: border-box;
}

.quote-border-left {
  border-left: 4px solid var(--quote-border-color, #8B5CF6);
  padding-left: 20px;
}

.quote-border-none {
  border-left: none;
}

.quote-align-center {
  text-align: center;
}

.quote-align-center .quote-author-wrap {
  justify-content: center;
}

.quote-align-left {
  text-align: left;
}

.quote-align-left .quote-author-wrap {
  justify-content: flex-start;
}

.quote-mark {
  margin-bottom: 12px;
  line-height: 1;
  color: var(--quote-mark-color, rgba(255, 255, 255, 0.18));
  font-size: 44px;
  font-family: Georgia, serif;
}

.quote-text {
  margin: 0 0 16px 0;
  line-height: 1.5;
  word-break: break-word;
}

.quote-text-italic {
  font-style: italic;
}

.quote-author-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.quote-photo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.quote-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.quote-author-name {
  line-height: 1.3;
}

.quote-author-role {
  line-height: 1.3;
}

/* ==========================================================================
   PRO-BLOCK: timer (Таймер обратного отсчёта)
   ========================================================================== */
.timer-wrapper {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 24px;
  padding: var(--timer-padding-y, 16px) 0;
  text-align: center;
}

.timer-title {
  margin: 0 0 10px 0;
  line-height: 1.4;
  word-break: break-word;
}

.timer-grid {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.timer-align-left {
  justify-content: flex-start;
  text-align: left;
}

.timer-align-left .timer-title {
  text-align: left;
}

.timer-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.timer-box {
  background: var(--timer-box-bg, #1E1E22);
  border: var(--timer-box-border, none);
  border-radius: var(--timer-box-radius, 8px);
  box-shadow: var(--timer-box-shadow, 0 4px 10px rgba(0,0,0, 0.15));
  padding: 8px 12px;
  min-width: 44px;
  box-sizing: border-box;
  text-align: center;
  line-height: 1.2;
}

/* Вариант «без рамок»: ни заливки, ни тени, ни обводки */
.timer-style-plain .timer-box {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* Вариант «с рамкой»: прозрачная заливка, обводка цветом разделителей */
.timer-style-outline .timer-box {
  background: transparent;
  border: 1px solid var(--timer-sep-color, #1E1E22);
  box-shadow: none;
}

.timer-num {
  color: var(--timer-num-color, #FFFFFF);
  font-family: var(--timer-num-font, 'Montserrat', monospace);
  font-size: var(--timer-num-size, 24px);
  font-weight: var(--timer-num-weight, 700);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  letter-spacing: 3px;
}

.timer-label {
  color: var(--timer-label-color, #7A6E67);
  font-family: var(--timer-label-font, 'Inter', sans-serif);
  font-size: var(--timer-label-size, 11px);
  font-weight: var(--timer-label-weight, 400);
  margin-top: 4px;
  line-height: 1.2;
  white-space: nowrap;
}

/* Разделитель выравнивается по верхней кромке цифр (тот же отступ, что у .timer-box) */
.timer-sep {
  color: var(--timer-sep-color, #1E1E22);
  font-size: var(--timer-sep-size, 22px);
  font-weight: 700;
  line-height: 1.2;
  margin-top: 8px;
}

.timer-finish {
  display: none;
  margin: 0;
  line-height: 1.4;
  word-break: break-word;
}

/* ============================================================================
   ЭТАП 6 — ДОРАБОТКИ СУЩЕСТВУЮЩИХ БЛОКОВ (D-3, D-4, D-5, D-6, D-7, D-9)
   Правило файла: ADD-ONLY. Ниже только новые селекторы, ни один существующий
   селектор не изменён и не удалён. Блоки без новых полей рендерятся как раньше.
   ============================================================================ */

/* ── D-3 / D-5: Бейджи и чипы (общий виджет banner-pro + hero-text-pro) ────── */
.bp-badges-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 12px 0;
}

.bp-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  white-space: nowrap;
  font-family: var(--font-family, 'Inter'), sans-serif;
}

.bp-badge-pill {
  padding: 6px 14px;
  border-radius: 9999px;
}

.bp-badge-circle {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  text-align: center;
}

/* ── D-3: Градиентный фон banner-pro ─────────────────────────────────────── */
.banner-pro-block.bp-has-gradient .bg-image-wrapper {
  display: none;
}

.banner-pro-block.bp-has-gradient {
  background-image: var(--bp-gradient, none);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

/* ── D-3: Оформление рамки / наклон ──────────────────────────────────────── */
.banner-pro-block.bp-frame-skew {
  transform: skewY(var(--bp-skew, -6deg));
  transform-origin: center center;
  overflow: hidden;
}

/* Компенсация наклона: текст остаётся горизонтальным и не «уезжает» из блока */
.banner-pro-block.bp-frame-skew .banner-pro-content {
  transform: skewY(calc(-1 * var(--bp-skew, -6deg)));
}

.banner-pro-block.bp-frame-border {
  border: var(--bp-frame-border, 2px solid #ffffff);
  border-radius: var(--bp-frame-radius, 12px);
  box-sizing: border-box;
}

/* ── D-5: Форма маски изображения hero-text-pro ──────────────────────────── */
.hero-text-pro-wrapper.ht-img-shape-circle {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  min-height: 0 !important;
  overflow: hidden;
}

.hero-text-pro-wrapper.ht-img-shape-oval {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50% / 35%;
  aspect-ratio: 10 / 16;
  min-height: 0 !important;
  overflow: hidden;
}

.hero-text-pro-wrapper.ht-img-shape-skew {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: skewY(-6deg);
  transform-origin: center center;
  overflow: hidden;
}

/* Текст внутри скошенной маски возвращается в горизонталь */
.hero-text-pro-wrapper.ht-img-shape-skew .ht-content {
  transform: skewY(6deg);
}

.ht-badges-list {
  justify-content: flex-start;
  margin-bottom: 14px;
}

/* ── D-4: Карточка icon_text с фотографией ───────────────────────────────── */
.icon-text-card.it-has-image {
  flex-direction: column;
  align-items: stretch;
  text-align: center;
}

.icon-text-img-wrap {
  width: 100%;
  margin-bottom: 12px;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: rgba(255, 255, 255, 0.05);
}

.icon-text-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── D-4: Кнопка под текстом пункта icon_text ────────────────────────────── */
.icon-text-btn {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px 16px;
  border-radius: 12px;
  background: #8B5CF6;
  color: #ffffff;
  font-size: var(--it-btn-fs, 15px);
  font-family: var(--it-btn-font, 'Inter', sans-serif);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.icon-text-btn:hover {
  transform: translateY(-2px);
  opacity: 0.92;
}

/* ── D-6: Картинка внутри ответа блока Q&A ────────────────────────────────── */
.qa-item-img-wrap {
  margin: 0 0 12px 0;
  border-radius: 12px;
  overflow: hidden;
  line-height: 0;
}

.qa-item-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ── D-7: Форма кнопок socials ───────────────────────────────────────────── */
.socials-shape-circle .social-link-item {
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  min-height: 0;
  flex-direction: column;
  gap: 6px;
}

.socials-shape-circle .social-link-icon {
  width: 42%;
  height: auto;
  aspect-ratio: 1 / 1;
}

/* Style: Centered circular social buttons (travel-pro) */
.socials-block-wrapper.socials-shape-circle {
  max-width: 240px;
  margin-left: auto;
  margin-right: auto;
}

/* ── D-7: Подписи соцсетей под иконками (в т.ч. в grid-режимах) ─────────── */
.socials-show-labels .socials-layout-grid-4 .social-link-item,
.socials-show-labels .socials-layout-grid-3 .social-link-item,
.socials-show-labels .socials-layout-grid-2 .social-link-item {
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  padding: 12px 6px;
}

.socials-show-labels .social-link-title {
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  max-width: 100%;
  opacity: 0.85;
}

/* ── D-9: Стили кнопки-ссылки (link) ──────────────────────────────────────── */
.cta-style-outline {
  background: transparent !important;
  border: 2px solid var(--button-bg) !important;
}

.cta-style-outline:hover {
  background: color-mix(in srgb, var(--button-bg) 12%, transparent) !important;
}

.cta-style-card {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--card-border) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18) !important;
  padding: 1.1rem 1.1rem !important;
  white-space: normal;
  text-align: left;
  justify-content: flex-start;
  gap: 12px;
}

.cta-style-card > span:not(.cta-subtitle) {
  font-size: 1.05rem;
  line-height: 1.3;
}

/* Иконка сверху над текстом */
.cta-button.cta-icon-top {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}

.cta-button.cta-icon-top .cta-subtitle {
  text-align: center;
}

/* ── Этап 7.3: вертикальная группа «заголовок + подпись» внутри кнопки ──
   Без неё .cta-subtitle (width: 100%) в flex-ряду .cta-button сжимался
   вместе с заголовком и обе строки слипались в нечитаемую строку. */
.cta-text-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  line-height: 1.25;
  text-align: center;
}

.cta-text-group .cta-title {
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.25;
}

.cta-text-group .cta-subtitle {
  width: auto;
  margin-top: 0;
  opacity: 0.85;
  font-weight: 400;
}

/* Карточный стиль: текст прижат влево — как до появления группы. */
.cta-style-card .cta-text-group {
  align-items: flex-start;
  text-align: left;
}

.cta-style-card .cta-text-group .cta-title {
  font-size: 1.05rem;
  line-height: 1.3;
}

/* Подзаголовок кнопки (пояснение) */
.cta-subtitle {
  display: block;
  width: 100%;
  font-size: 0.78em;
  font-weight: 400;
  line-height: 1.35;
  opacity: 0.75;
  white-space: normal;
}

/* ==========================================================================
   Carousel PRO · Шаг 1 модернизации — полноэкранный Hero-слайдер
   (референс Brooklands Detailing). Блок Add-only: правила ниже не переопределяют
   базовую вёрстку карусели и срабатывают только для новых классов
   .carousel-full-width / .carousel-layout-hero.
   ========================================================================== */

/* <picture> обёртка слайда. Без display:block картинка потеряет 100%-заполнение. */
.carousel-block-wrapper .carousel-slide-picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── Режим «На всю ширину экрана» (100vw, full-bleed) ───────────────────── */
.carousel-block-wrapper.carousel-full-width {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  position: relative !important;
  left: 0 !important;
  right: auto !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
}

.carousel-block-wrapper.carousel-full-width .carousel-swiper,
.carousel-block-wrapper.carousel-full-width .carousel-slide-inner,
.carousel-block-wrapper.carousel-full-width .carousel-slide-link,
.carousel-block-wrapper.carousel-full-width .carousel-slide-picture {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Если полноэкранный слайдер идет первым блоком — компенсируем верхний
   отступ контейнера (padding-top), чтобы слайд прижался к верхнему краю.
   Мобильный экран (<768px): вытягиваем под верхний край. */
#landing-content > div.carousel-block-wrapper.carousel-full-width:first-child,
#landing-content > .carousel-block-wrapper.carousel-full-width:first-child {
  margin-top: calc(-1 * var(--container-pt-mobi, 5rem)) !important;
}

@media (min-width: 768px) {
  .carousel-block-wrapper.carousel-full-width {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    left: 0 !important;
    right: auto !important;
  }

  /* Десктопный экран (>=768px): компенсируем десктопный отступ */
  #landing-content > div.carousel-block-wrapper.carousel-full-width:first-child,
  #landing-content > .carousel-block-wrapper.carousel-full-width:first-child {
    margin-top: calc(-1 * var(--container-pt-pc, 6rem)) !important;
  }
}

/* ── Пропорции слайда на ПК (независимо от мобильного aspect_ratio) ────── */
/* Правило включается только для блоков, у которых явно задан aspect_ratio_pc.
   Карусели без этого параметра сохраняют базовый --carousel-aspect-ratio. */
@media (min-width: 768px) {
  .carousel-block-wrapper.carousel-aspect-ratio-pc .carousel-slide-inner,
  .carousel-block-wrapper.carousel-aspect-ratio-pc .carousel-slide-link {
    aspect-ratio: var(--carousel-aspect-ratio-pc, 21 / 9);
    min-height: 520px;
  }
}

/* ── Навигация «Счётчик 1 / N» (nav_style = fraction) ───────────────────── */
.carousel-block-wrapper .carousel-nav-fraction .swiper-pagination-fraction {
  color: var(--carousel-nav-color, #ffffff);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}

.carousel-block-wrapper .carousel-nav-fraction .carousel-fraction-divider {
  opacity: 0.55;
  font-weight: 400;
}

.carousel-block-wrapper .carousel-nav-fraction .swiper-pagination-total {
  opacity: 0.7;
}

/* Для обычных (не hero) каруселей с fraction внутри слайдера */
.carousel-block-wrapper:not(.carousel-layout-hero) .carousel-nav-fraction.carousel-pagination-inside {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

/* ── Блок управления Hero-слайдера на ПК (.carousel-hero-controls) ────────── */
.carousel-layout-hero .carousel-hero-controls {
  position: absolute;
  bottom: 124px;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 12;
  pointer-events: none;
}

.carousel-layout-hero .carousel-hero-controls-inner {
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 60px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

/* Крупный счётчик слайдов на ПК (32px, как в Brooklands).
   Ширина фиксируется равной ширине ряда стрелок (48 + 10 + 48 = 106px),
   а содержимое центрируется — счётчик визуально встаёт по центру над стрелками. */
.carousel-layout-hero .carousel-hero-controls-inner .carousel-pagination {
  position: static !important;
  width: 106px !important;
  max-width: 106px !important;
  justify-content: center !important;
  text-align: center !important;
  height: auto !important;
  margin: 0 !important;
  pointer-events: auto;
  color: var(--carousel-nav-color, #ffffff);
  font-size: 32px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}

.carousel-layout-hero .carousel-hero-controls-inner .carousel-pagination .carousel-fraction-divider {
  opacity: 0.55;
  font-weight: 300;
}

.carousel-layout-hero .carousel-hero-controls-inner .carousel-pagination .swiper-pagination-total {
  opacity: 0.75;
}

/* Ряд стрелок на ПК: пара круглых кнопок 48x48px */
.carousel-layout-hero .carousel-hero-arrows {
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
}

.carousel-layout-hero .carousel-hero-arrows .carousel-arrow {
  position: static !important;
  transform: none !important;
  margin: 0 !important;
  width: 48px !important;
  height: 48px !important;
  font-size: 22px !important;
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 50% !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.carousel-layout-hero .carousel-hero-arrows .carousel-arrow:hover {
  background: var(--carousel-btn-hover-bg, #E94560) !important;
  border-color: var(--carousel-btn-hover-bg, #E94560) !important;
  transform: scale(1.08) !important;
}

/* ── Компоновка «Герой-витрина» (layout_style = hero) ──────────────────── */
.carousel-layout-hero .carousel-slide-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 60px 60px 60px;
  box-sizing: border-box;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.6) 45%, rgba(0, 0, 0, 0.2) 75%, transparent 100%);
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  gap: 32px;
  z-index: 10;
}

.carousel-hero-left {
  flex: 0 1 auto !important;
  max-width: 55%;
  margin-right: auto !important;
  margin-left: 0 !important;
  text-align: left;
  min-width: 0;
}

/* Опциональная многослойная тень текста для заголовка/описания (design.text_backdrop).
   Нужна, когда текст попадает на светлый кузов или светлую пену на фото.
   Прямоугольной подложки больше нет — фото слайда остаётся полностью чистым.
   Интенсивность задаётся дизайном: --carousel-text-shadow-opacity (0…1, шаблон auto-pro — 0.85). */
.carousel-hero-left.has-text-backdrop {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

/* Многослойная «кинематографическая» тень текста вместо прямоугольной плашки.
   Фотография слайда остаётся полностью чистой и открытой. */
.carousel-hero-left.has-text-backdrop .carousel-slide-title {
  text-shadow:
    0 2px 4px rgba(0, 0, 0, calc(var(--carousel-text-shadow-opacity, 0.85) * 0.95)),
    0 4px 16px rgba(0, 0, 0, calc(var(--carousel-text-shadow-opacity, 0.85) * 0.9)),
    0 8px 36px rgba(0, 0, 0, calc(var(--carousel-text-shadow-opacity, 0.85) * 0.8)),
    0 1px 2px rgba(0, 0, 0, var(--carousel-text-shadow-opacity, 0.85)) !important;
}

.carousel-hero-left.has-text-backdrop .carousel-slide-desc {
  text-shadow:
    0 1px 3px rgba(0, 0, 0, calc(var(--carousel-text-shadow-opacity, 0.85) * 0.95)),
    0 3px 12px rgba(0, 0, 0, calc(var(--carousel-text-shadow-opacity, 0.85) * 0.85)),
    0 6px 24px rgba(0, 0, 0, calc(var(--carousel-text-shadow-opacity, 0.85) * 0.75)) !important;
}

.carousel-hero-left .carousel-slide-title {
  font-size: var(--carousel-title-size-pc, 46px);
  line-height: 1.15;
  font-weight: var(--carousel-title-weight, 400);
  color: #ffffff;
  margin: 0 0 16px 0;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
}

.carousel-hero-left .carousel-slide-desc {
  font-size: var(--carousel-desc-size-pc, 15px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  max-width: 560px;
  margin: 0;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

.carousel-hero-right {
  flex: 0 0 auto !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 0;
  pointer-events: auto;
}

/* Кнопка действия слайда — десктопная стеклянная капсула.
   Цвета вынесены в CSS-переменные: --carousel-btn-bg / --carousel-btn-color /
   --carousel-btn-hover-bg (задаются инлайново из блока «Кнопка и акценты»). */
.carousel-slide-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 9999px;
  padding: 16px 36px;
  color: var(--carousel-btn-color, #ffffff);
  text-decoration: none;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.2s ease;
  box-sizing: border-box;
  min-height: 52px;
  background: var(--carousel-btn-bg, rgba(0, 0, 0, 0.35));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.carousel-slide-cta-btn:hover {
  background: var(--carousel-btn-hover-bg, #E94560);
  border-color: var(--carousel-btn-hover-bg, #E94560);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.carousel-slide-cta-btn i {
  font-size: 16px;
  transition: transform 0.2s ease;
}

.carousel-slide-cta-btn:hover i {
  transform: translateX(3px);
}

/* ── Мобильная версия Hero-слайдера (<= 767px) ────────────────────────── */
@media (max-width: 767px) {
  /* Элементы управления Hero-слайдера на мобильном (референс Screenshot_7):
     1. Счётчик слайдов: вверху справа под шапкой (капсула dark-glass).
     2. Стрелки: по бокам экрана по вертикальному центру (48px круги с белым контуром).
     3. Заголовок и описание: чуть ниже середины экрана.
     4. Кнопка: внизу экрана на всю ширину (пилюля). */
  .carousel-layout-hero .carousel-hero-controls {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 15 !important;
    display: block !important;
  }

  .carousel-layout-hero .carousel-hero-controls-inner {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    pointer-events: none !important;
  }

  /* Счётчик слайдов: капсула вверху справа под шапкой (референс Screenshot_7) */
  .carousel-layout-hero .carousel-hero-controls-inner .carousel-pagination {
    position: absolute !important;
    top: 72px !important;
    right: 20px !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 9999px !important;
    padding: 5px 13px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    letter-spacing: 0.05em !important;
    line-height: 1 !important;
    pointer-events: none !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
    font-variant-numeric: tabular-nums !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
  }

  .carousel-layout-hero .carousel-hero-controls-inner .carousel-pagination .carousel-fraction-divider {
    opacity: 0.65 !important;
    font-weight: 400 !important;
  }

  .carousel-layout-hero .carousel-hero-controls-inner .carousel-pagination .swiper-pagination-total {
    opacity: 0.85 !important;
  }

  /* Ряд стрелок перелистывания: по бокам экрана по вертикальному центру */
  .carousel-layout-hero .carousel-hero-arrows {
    position: absolute !important;
    top: 48% !important;
    transform: translateY(-50%) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    pointer-events: none !important;
  }

  /* Большие круглые стрелки с контуром на прозрачном фоне (референс Screenshot_7) */
  .carousel-layout-hero .carousel-hero-arrows .carousel-arrow {
    display: flex !important;
    position: static !important;
    transform: none !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    font-size: 20px !important;
    background: rgba(0, 0, 0, 0.25) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.55) !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    z-index: 16 !important;
    transition: all 0.2s ease !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
  }

  .carousel-layout-hero .carousel-hero-arrows .carousel-arrow:active {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: #ffffff !important;
    transform: scale(0.95) !important;
  }

  .carousel-layout-hero .carousel-hero-arrows .carousel-arrow-prev {
    left: auto !important;
    right: auto !important;
  }

  .carousel-layout-hero .carousel-hero-arrows .carousel-arrow-next {
    right: auto !important;
    left: auto !important;
  }

  /* ── Полноэкранный мобильный Hero (100dvh) ───────────────────────────────
     На смартфоне слайдер занимает весь экран: фото авто становится «обоями»
     первого экрана, а шапка header-pro (position: sticky) лежит поверх него.
     100vh идёт первым фолбэком для браузеров без dvh (Safari < 15.4):
     незнакомое значение они просто отбрасывают и берут предыдущую строку. */
  .carousel-layout-hero.carousel-full-width .carousel-swiper,
  .carousel-layout-hero.carousel-full-width .carousel-slide,
  .carousel-layout-hero.carousel-full-width .carousel-slide-inner,
  .carousel-layout-hero.carousel-full-width .carousel-slide-link {
    height: 100vh;
    height: 100dvh !important;
    min-height: 100vh;
    min-height: 100dvh !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }

  .carousel-layout-hero.carousel-full-width .carousel-slide-img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  /* Оверлей: градиент снизу для идеальной читаемости текста и элементов */
  .carousel-layout-hero .carousel-slide-overlay {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.72) 32%, rgba(0, 0, 0, 0.25) 55%, transparent 75%) !important;
    padding: 0 0 24px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: stretch !important;
    gap: 0 !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
  }

  /* Блок заголовка и описания: располагается чуть ниже середины экрана над кнопкой */
  .carousel-layout-hero .carousel-hero-left {
    flex: 0 0 auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 24px !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    pointer-events: auto !important;
  }

  /* Мобильный: чистая фотография без карточек, только тень текста */
  .carousel-layout-hero .carousel-hero-left.has-text-backdrop {
    background: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 20px !important;
    margin: 0 0 24px 0 !important;
  }

  /* Крупный выразительный заголовок как в референсе Screenshot_7 */
  .carousel-layout-hero .carousel-hero-left .carousel-slide-title {
    font-size: clamp(26px, 7vw, 32px) !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 10px 0 !important;
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75) !important;
  }

  .carousel-layout-hero .carousel-hero-left .carousel-slide-desc {
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 0 !important;
    max-width: 100% !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.75) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* Многослойная тень текста на мобильном (специфичность выше базовых правил выше). */
  .carousel-layout-hero .carousel-hero-left.has-text-backdrop .carousel-slide-title {
    text-shadow:
      0 2px 4px rgba(0, 0, 0, calc(var(--carousel-text-shadow-opacity, 0.85) * 0.95)),
      0 4px 16px rgba(0, 0, 0, calc(var(--carousel-text-shadow-opacity, 0.85) * 0.9)),
      0 8px 36px rgba(0, 0, 0, calc(var(--carousel-text-shadow-opacity, 0.85) * 0.8)),
      0 1px 2px rgba(0, 0, 0, var(--carousel-text-shadow-opacity, 0.85)) !important;
  }

  .carousel-layout-hero .carousel-hero-left.has-text-backdrop .carousel-slide-desc {
    text-shadow:
      0 1px 3px rgba(0, 0, 0, calc(var(--carousel-text-shadow-opacity, 0.85) * 0.95)),
      0 3px 12px rgba(0, 0, 0, calc(var(--carousel-text-shadow-opacity, 0.85) * 0.85)),
      0 6px 24px rgba(0, 0, 0, calc(var(--carousel-text-shadow-opacity, 0.85) * 0.75)) !important;
  }

  /* Ряд кнопки: на всю ширину слайда, центрируется пилюлей */
  .carousel-layout-hero .carousel-hero-right {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: center !important;
    pointer-events: auto !important;
  }

  /* Крупная парящая кнопка-пилюля «Выбрать услугу →» с контуром (референс Screenshot_7) */
  .carousel-layout-hero .carousel-slide-cta-btn {
    display: inline-flex !important;
    width: 100% !important;
    max-width: 440px !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
    border: 1.5px solid rgba(255, 255, 255, 0.55) !important;
    border-radius: 9999px !important;
    background: var(--carousel-btn-bg, rgba(0, 0, 0, 0.35)) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    color: var(--carousel-btn-color, #ffffff) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    white-space: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
  }

  .carousel-layout-hero .carousel-slide-cta-btn:active {
    background: var(--carousel-btn-hover-bg, #E94560) !important;
    border-color: var(--carousel-btn-hover-bg, #E94560) !important;
    transform: scale(0.98) !important;
  }

  .carousel-layout-hero .carousel-slide-cta-btn i {
    font-size: 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRO Блок: Sticky Header (header-pro) — премиум-шапка с прилипанием
   Этап 7.2. Все селекторы с префиксом .hp- / .header-pro, чтобы не затрагивать
   существующие блоки (.socials-link-item, .fp-* и т.п. не пересекаются).
   ═══════════════════════════════════════════════════════════════════════════ */
/*
  Десктопная полоса шапки крупная и просторная (Screenshot_5): высокая линия
  72px, бренд 22px, пункты меню и телефон 16px. min-height в базовом правиле —
  десктопный; <= 767px переопределяет его на 52px.
*/
.header-pro {
  position: relative;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  min-height: 72px;
  padding: 0 40px;
  box-sizing: border-box;
  font-family: 'Montserrat', 'Inter', sans-serif;
  color: var(--hp-text, #ffffff);
  background: var(--hp-bg, rgba(17, 17, 22, 0.85));
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Вариант без прилипания — обычный блок в потоке. */
.header-pro.hp-sticky {
  position: sticky;
  top: 0;
  left: 0;
  /*
    Шапка лежит внутри .container (max-width: 1200px), поэтому выносим её
    на всю ширину окна: тёмная полоса не должна обрываться на краях контейнера.
    Отрицательные поля симметричны — .container центрирован (margin: 0 auto).
  */
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  z-index: 1000;
}

/*
  На десктопе содержимое полноширинной шапки держим на линии контейнера
  (min(95vw, 1200px) + 40px полей), иначе бренд и CTA уедут к краям окна.
  Мобильный блок ниже задаёт свои 16px — поэтому правило отключено на <=767px.
*/
@media (min-width: 768px) {
  .header-pro.hp-sticky {
    padding-left: calc((100vw - min(95vw, 1200px)) / 2 + 40px);
    padding-right: calc((100vw - min(95vw, 1200px)) / 2 + 40px);
  }
}

/*
  Прозрачная шапка + затемнение при прокрутке.

  Исходное состояние (верх страницы): фон шапки полностью прозрачный — сквозь
  неё видно фото авто полноэкранного Hero-слайдера, который лежит под шапкой.
  При прокрутке (класс .hp-scrolled, ставит initHeaderProScroll в script.js)
  шапка плавно одевается в тёмное стекло: фон + blur(16px) + тень.

  Размытие живёт на псевдоэлементе ::before, а не на самой шапке:
  backdrop-filter (как и filter) создаёт containing block для fixed-потомков,
  а мобильная шторка .hp-drawer — это position: fixed внутри шапки, и blur на
  самой шапке сломал бы её раскрытие на весь экран. Псевдоэлемент обрезается
  по padding-box шапки, поэтому её нижняя граница остаётся видимой.
  Сплошной фон задан на самой шапке — если браузер не поддержит blur (или его
  отключат ради производительности), читаемость сохранится.
*/
/*
  Шапка с лёгким затемнением до скролла (референс Brooklands):
  полупрозрачный тёмный фон + blur(10px) на ::before обеспечивают 100% читаемость
  белых надписей меню и логотипа на светлых фото (например, белая плитка мойки),
  но сохраняют эффект фото, уходящего под шапку.
  При скролле (.hp-scrolled) шапка плавно переходит в глубокое плотное стекло.
*/
.header-pro.hp-sticky {
  background: rgba(10, 12, 18, 0.72) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

@media (min-width: 768px) {
  .header-pro.hp-sticky {
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
  }
}

.header-pro.hp-sticky::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  pointer-events: none;
  transition: -webkit-backdrop-filter 0.3s ease, backdrop-filter 0.3s ease, background 0.3s ease;
}

/* Плотное затемнённое стекло после прокрутки страницы (scrollY > 20px). */
.header-pro.hp-sticky.hp-scrolled {
  background: var(--hp-bg, rgba(10, 10, 14, 0.95)) !important;
  border-bottom-color: rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6) !important;
}

.header-pro.hp-sticky.hp-scrolled::before {
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(var(--hp-blur, 16px)) !important;
  backdrop-filter: blur(var(--hp-blur, 16px)) !important;
}

/*
  Шапка накладывается на полноэкранный Hero, который идёт сразу за ней:
  без отрицательного отступа шапка занимала бы свою полосу в потоке, и сквозь
  прозрачный фон был бы виден фон страницы, а не фото авто. Высота шапки —
  72px на десктопе и 52px на мобильных (см. базовые правила выше).
*/
/*
  Шапка первым блоком страницы компенсирует верхний отступ контейнера #landing-content.
*/
#landing-content > .header-pro:first-child {
  margin-top: calc(-1 * var(--container-pt-mobi, 5rem)) !important;
}

@media (min-width: 768px) {
  #landing-content > .header-pro:first-child {
    margin-top: calc(-1 * var(--container-pt-pc, 6rem)) !important;
  }
}

#landing-content > .header-pro.hp-sticky:has(+ .carousel-block-wrapper.carousel-full-width.carousel-layout-hero),
#landing-content > .header-pro.hp-sticky.hp-over-hero {
  margin-bottom: -72px;
}

@media (max-width: 767px) {
  #landing-content > .header-pro.hp-sticky:has(+ .carousel-block-wrapper.carousel-full-width.carousel-layout-hero),
  #landing-content > .header-pro.hp-sticky.hp-over-hero {
    margin-bottom: -52px;
  }
}

.header-pro *,
.header-pro *::before,
.header-pro *::after {
  box-sizing: border-box;
}

/* ── Левая группа: логотип + соцсети + город ── */
/*
  flex-shrink: 0 !important — жёсткий запрет на сжатие. Пока в шапку попадали
  все 7 услуг, левая группа ужималась, и «AUTOSELECT» наезжал на соцсети.
  На десктопе три группы (левая, меню, правая) не делят место — при нехватке
  шапка честно выйдет за край, но ничего не наедет друг на друга.
  На <= 767px сжатие возвращается: там 5 круглых иконок справа важнее целого
  слова в логотипе (см. правило в мобильном блоке).
*/
.hp-left {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0 !important;
  white-space: nowrap;
}

.hp-brand {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--hp-logo, #ffffff);
  white-space: nowrap;
  text-decoration: none;
  flex-shrink: 0;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

.hp-left .hp-socials-desktop {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.hp-logo-img {
  display: block;
  max-height: 34px;
  width: auto;
  object-fit: contain;
}

.hp-brand-subtitle {
  display: none;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}

.hp-socials {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hp-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--hp-text, #ffffff);
  background: rgba(255, 255, 255, 0.08);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.hp-social svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.hp-social i {
  font-size: 17px;
  line-height: 1;
}

.hp-social:hover {
  background: var(--hp-social-color, #ffffff);
  color: #101014;
  transform: translateY(-1px);
}

.hp-city {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--hp-text, #ffffff);
  flex-shrink: 0;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

.hp-city i {
  font-size: 16px;
  line-height: 1;
  opacity: 0.8;
}

/* ── Центральная группа: навигация (2 пункта, крупно и с воздухом) ── */
.hp-nav {
  display: flex;
  align-items: center;
  gap: 36px;
  flex: 1 1 auto;
  justify-content: center;
}

.hp-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.02em;
  opacity: 0.95;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  transition: opacity 0.2s ease, color 0.2s ease;
}

.hp-nav-link:hover {
  opacity: 1;
  color: var(--hp-accent, #E94560);
}

/* ── Правая группа: телефон + кнопка ── */
.hp-right {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0 !important;
  white-space: nowrap;
}

.hp-phone {
  font-size: 16px;
  font-weight: 700;
  color: var(--hp-text, #ffffff);
  text-decoration: none;
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  transition: color 0.2s ease;
}

a.hp-phone:hover {
  color: var(--hp-accent, #E94560);
}

.hp-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  min-height: 46px;
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--hp-text, #ffffff);
  background: transparent;
  border: 1px solid currentColor;
  border-radius: var(--hp-btn-radius, 999px);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.hp-cta i {
  font-size: 15px;
  line-height: 1;
  transition: transform 0.2s ease;
}

.hp-cta:hover {
  background: var(--hp-btn-hover-bg, rgba(233, 69, 96, 0.85));
  border-color: var(--hp-btn-hover-bg, rgba(233, 69, 96, 0.85));
  color: #ffffff;
}

.hp-cta:hover i {
  transform: translateX(3px);
}

/* Кнопка звонка и бургер — только на мобильных. */
.hp-call-btn,
.hp-burger {
  display: none;
}

/*
  Мобильная шторка. Живёт по умолчанию скрыта и на десктопе, и на мобильных:
  открывается только классом .hp-drawer-open (<= 767px). position: fixed
  относительно окна — поэтому шторка перекрывает всю страницу, а не падает
  узкой полосой под шапкой.
*/
.hp-drawer {
  display: none;
  position: fixed;
  inset: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #0a0a0c;
  z-index: 10001;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 16px 20px 32px 20px;
}

/* Копия соцсетей для мобильной полосы шапки. На десктопе соцсети живут
   в левой группе (.hp-socials-desktop), на <= 767px — справа от логотипа. */
.hp-socials-mobile {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Модальное окно быстрой заявки (Screenshot_3)
   Живёт вне потока: position:fixed + z-index 9999.
   ═══════════════════════════════════════════════════════════════════════════ */
.hp-modal-overlay {
  position: fixed;
  inset: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: hp-modal-fade 0.2s ease;
  overflow-y: auto;
  font-family: 'Montserrat', 'Inter', sans-serif;
}

.hp-modal-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  padding: 36px 32px;
  border-radius: var(--hp-modal-radius, 24px);
  background: var(--hp-modal-bg, #fdfbf7);
  color: var(--hp-modal-text, #111116);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: hp-modal-pop 0.22s ease;
  outline: none;
}

.hp-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  line-height: 1;
  color: var(--hp-modal-text, #111116);
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.hp-modal-close:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.06);
}

.hp-modal-view {
  flex-direction: column;
}

.hp-modal-view-success {
  display: none;
  align-items: center;
  text-align: center;
}

.hp-modal-title {
  margin: 0 0 10px;
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  color: var(--hp-modal-text, #111116);
  /* Заголовок не должен подъезжать под крестик закрытия. */
  padding-right: 28px;
}

.hp-modal-desc {
  margin: 0 0 24px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  text-align: center;
  color: var(--hp-modal-text, #111116);
  opacity: 0.75;
}

.hp-modal-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hp-modal-field {
  display: flex;
  flex-direction: column;
}

/* Поля ввода в стиле референса: только нижняя линия, без рамки. */
.hp-modal-input {
  width: 100%;
  padding: 10px 2px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: var(--hp-modal-text, #111116);
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 0;
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.hp-modal-input::placeholder {
  color: var(--hp-modal-text, #111116);
  opacity: 0.32;
}

.hp-modal-input:focus {
  border-bottom-color: var(--hp-modal-accent, #111116);
}

.hp-modal-field-error .hp-modal-input {
  border-bottom-color: #E94560;
}

.hp-modal-error {
  margin-top: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #E94560;
}

.hp-modal-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  line-height: 1.45;
  color: var(--hp-modal-text, #111116);
  cursor: pointer;
}

.hp-modal-consent input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 1px 0 0;
  accent-color: var(--hp-modal-accent, #111116);
  cursor: pointer;
}

.hp-modal-req {
  font-weight: 700;
}

.hp-modal-submit {
  width: 100%;
  min-height: 48px;
  padding: 12px 24px;
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fdfbf7;
  background: var(--hp-modal-accent, #111116);
  border: 1px solid var(--hp-modal-accent, #111116);
  border-radius: var(--hp-modal-btn-radius, 999px);
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.15s ease;
}

.hp-modal-submit:hover {
  opacity: 0.88;
}

.hp-modal-submit:active {
  transform: scale(0.99);
}

.hp-modal-success-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
}

.hp-modal-success-icon svg {
  width: 28px;
  height: 28px;
}

@keyframes hp-modal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes hp-modal-pop {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Уважаем системную настройку «уменьшить движение». */
@media (prefers-reduced-motion: reduce) {
  .hp-modal-overlay,
  .hp-modal-card {
    animation: none;
  }

  .hp-cta,
  .hp-social,
  .hp-nav-link {
    transition: none;
  }

  /* Заглушка слота остаётся читаемой, но без движения */
  .img-slot-empty::after {
    animation: none;
    transform: none;
    opacity: 0;
  }
}
/* ═══════════════════════════════════════════════════════════════════════════
   Мобильная версия: экраны <= 767px (референс Screenshot_2)
   Слева логотип, справа — плотный ряд круглых иконок 36x36:
   соцсети, кнопка звонка, бургер. Бургер открывает полноэкранную шторку.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .header-pro {
    min-height: 52px;
    padding: 0 16px;
    gap: 12px;
  }

  /*
    Кнопка действия «Связаться с нами» на мобильной полосе шапки не нужна:
    она шире логотипа и наезжала на него. В шторке та же кнопка остаётся
    (.hp-drawer-cta) — там для неё есть место.
  */
  .header-pro .hp-right .hp-cta {
    display: none !important;
  }

  /*
    Соцсети на мобильных переезжают вправо, город/подзаголовок/меню скрыты.
    !important обязателен: ниже общее правило .header-pro .hp-socials тоже с
    !important, и без флага десктопная копия осталась бы видимой поверх.
  */
  .header-pro .hp-left .hp-socials-desktop {
    display: none !important;
  }

  .header-pro .hp-city,
  .header-pro .hp-brand-subtitle,
  .header-pro .hp-nav,
  .header-pro .hp-phone {
    display: none;
  }

  .header-pro .hp-socials {
    display: flex !important;
    gap: 8px !important;
  }

  .header-pro .hp-right .hp-socials-mobile {
    display: flex !important;
  }

  /*
    Бренд ужимается, а не наезжает на иконки: у кнопок .hp-right стоит
    flex-shrink: 0, поэтому при узком экране (5 круглых иконок на 360px)
    подрезается текст, а не ломается вся полоса шапки.
    Запрет сжатия .hp-left из десктопных правил здесь отменяется: без него
    группа с логотипом не ужималась бы вовсе и полоса уезжала за край.
  */
  .hp-left {
    flex-shrink: 1;
    min-width: 0;
    white-space: normal;
  }

  .hp-brand {
    font-size: 18px;
    font-weight: 800;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
  }

  .hp-logo-img {
    max-height: 26px;
    max-width: 100%;
  }

  .hp-right {
    gap: 8px;
  }

  /* Ряд компактных круглых иконок справа от логотипа (референс).
     .hp-social-link — тот же узел, что и .hp-social, только без своей
     заливки: в референсе соцсети и кнопки выглядят одинаково. */
  .hp-social-link,
  .hp-call-btn,
  .hp-burger {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    color: var(--hp-text, #ffffff);
    background: transparent;
    cursor: pointer;
  }

  .hp-social-link:hover {
    background: var(--hp-social-color, rgba(255, 255, 255, 0.12));
    color: #101014;
  }

  .hp-social-link i {
    font-size: 17px;
    line-height: 1;
  }

  .hp-social-link svg {
    width: 17px;
    height: 17px;
  }

  .hp-call-btn {
    text-decoration: none;
    transition: background 0.2s ease;
  }

  .hp-call-btn i {
    font-size: 17px;
    line-height: 1;
  }

  .hp-call-btn:active,
  .hp-burger:active {
    background: rgba(255, 255, 255, 0.12);
  }

  .hp-burger {
    transition: background 0.2s ease;
  }

  .hp-burger i {
    font-size: 20px;
    line-height: 1;
  }

  /* ── Полноэкранная шторка (референс Screenshot_3) ── */
  .hp-drawer.hp-drawer-open {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  /* Верхняя строка: логотип + кнопка закрытия. */
  .hp-drawer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-shrink: 0;
  }

  .hp-drawer-brand {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #ffffff;
    white-space: nowrap;
  }

  .hp-drawer-logo {
    display: block;
    max-height: 30px;
    width: auto;
    object-fit: contain;
  }

  .hp-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    padding: 0;
    font-size: 24px;
    line-height: 1;
    color: #ffffff;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
  }

  .hp-drawer-close:active {
    background: rgba(255, 255, 255, 0.12);
  }

  /* Строка действий: пилюля «Связаться с нами» + телефон. */
  .hp-drawer-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 16px;
    flex-shrink: 0;
  }

  .hp-drawer-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 9999px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease;
  }

  .hp-drawer-cta i {
    font-size: 15px;
    line-height: 1;
  }

  .hp-drawer-cta:active {
    background: rgba(255, 255, 255, 0.12);
  }

  .hp-drawer-phone {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
  }

  /* Список разделов: строки во всю ширину с плюсом справа. */
  .hp-drawer-menu {
    display: flex;
    flex-direction: column;
  }

  .hp-drawer-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
  }

  .hp-drawer-link:active {
    color: rgba(255, 255, 255, 0.75);
  }

  .hp-menu-plus {
    flex-shrink: 0;
    font-size: 20px;
    font-weight: 300;
    line-height: 1;
    color: rgba(255, 255, 255, 0.7);
  }

  /* Город прижат к низу шторки, если меню не занимает весь экран. */
  .hp-drawer-city {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.85);
  }

  .hp-drawer-city i {
    font-size: 15px;
    line-height: 1;
    opacity: 0.8;
  }

  /*
    Cookie-баннер (z-index: 9998) живёт в корневом контексте наложения, а шапка —
    в своём (z-index: 1000), поэтому поверх открытой шторки баннер всплывал бы
    отдельной капсулой. Прячем его на время раскрытия: состояние согласия в
    localStorage не трогаем, после закрытия меню баннер вернётся.
  */
  body:has(.hp-drawer-open) .taplux-cookie-banner {
    display: none;
  }

  /* ── Модалка на мобильных: ближе к краям, крупнее поля ---*/
  .hp-modal-overlay {
    padding: 14px;
    align-items: center;
  }

  .hp-modal-card {
    max-width: 100%;
    padding: 30px 20px 26px;
    border-radius: 20px;
  }

  .hp-modal-title {
    font-size: 22px;
  }

  .hp-modal-desc {
    font-size: 13px;
    margin-bottom: 20px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Cookie-уведомление (Cookie Banner) — Этап 7.3
   Плавающая капсула внизу экрана по центру, тёмное стекло (референс
   Brooklands Detailing). Все селекторы с префиксом .cb- / .taplux-cookie-banner,
   чтобы не пересекаться с существующими стилями сайта.
   ═══════════════════════════════════════════════════════════════════════════ */

.taplux-cookie-banner {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9998;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: calc(100% - 40px);
  padding: 8px 14px 8px 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  background: rgba(18, 18, 22, 0.92);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
  box-sizing: border-box;
  opacity: 1;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Плавное скрытие перед удалением из DOM (класс вешает renderCookieBanner). */
.taplux-cookie-banner.cb-hide {
  opacity: 0;
  transform: translate(-50%, 20px);
  pointer-events: none;
}

.cb-text {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
}

.cb-policy-link {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cb-policy-link:hover {
  color: rgba(255, 255, 255, 0.75);
}

.cb-btn {
  background: #ffffff;
  color: #111116;
  border: none;
  border-radius: 9999px;
  padding: 8px 20px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease;
}

.cb-btn:hover {
  background: #e5e7eb;
  transform: scale(1.02);
}

.cb-close {
  color: rgba(255, 255, 255, 0.5);
  font-size: 16px;
  line-height: 1;
  padding: 4px;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  transition: color 0.2s ease;
}

.cb-close:hover {
  color: #ffffff;
}

@media (max-width: 767px) {
  .taplux-cookie-banner {
    bottom: 12px;
    width: calc(100% - 24px);
    max-width: 440px;
    border-radius: 18px;
    padding: 12px 14px;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
  }

  .cb-text {
    flex: 1 1 100%;
  }

  /* Кнопка прижата вправо, рядом крестик — вторая строка целиком справа. */
  .cb-btn {
    margin-left: auto;
  }

  .cb-close {
    order: 2;
  }
}

/* ==========================================================================
   BEAUTY-PRO: Студия маникюра MAGIC NAILS PRO
   Арочный Hero-сплит 7/5, карусель работ 4:3, прайс с точечным лидером,
   Bento-визитка мастера и унифицированные кнопки связи.

   ВАЖНО: селекторы сверены с фактическими контрактами рендереров js/script.js
     split-pro    → wrapper id = 'block-' + id, колонка .sp-image-col
     carousel    → wrapper id = 'carousel-wrapper-' + id, стрелки .carousel-arrow
     price_list  → wrapper id = 'block-' + id, карточки групп .pl-group
     offer-pro   → wrapper id = id (БЕЗ префикса block-)
     link        → wrapper id = 'block-' + id (добавлено в createLinkBlock)
   Мёртвые селекторы вроде .price-list-card / .carousel-nav-btn в разметке
   не существуют — здесь только реальные классы.
   ========================================================================== */

/* ── 1. Hero-экран (split-pro #block-beauty_b2_hero) ── */
#block-beauty_b2_hero {
  margin: 0.5rem auto 1.5rem auto;
}

#block-beauty_b2_hero .sp-eyebrow {
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  color: #0F3E36 !important;
}

#block-beauty_b2_hero .sp-title {
  font-family: 'Forum', serif !important;
  letter-spacing: 1px;
  line-height: 1.25;
}

#block-beauty_b2_hero .sp-title .sp-accent {
  font-family: 'Forum', serif !important;
  font-style: normal;
  color: #4B6E66 !important;
}

#block-beauty_b2_hero .sp-desc {
  letter-spacing: 0.1px;
}

/* Арочная маска для фото мастера/маникюра — нативный слот, заполненный
   пользователем (.img-slot-img) или пустой (.img-slot-empty). */
#block-beauty_b2_hero .sp-image-col {
  border-radius: 140px 140px 24px 24px !important;
}

#block-beauty_b2_hero .sp-image-col .img-slot,
#block-beauty_b2_hero .sp-image-col .img-slot-img,
#block-beauty_b2_hero .sp-image-col .img-slot-empty {
  border-radius: 140px 140px 24px 24px !important;
  overflow: hidden;
}

#block-beauty_b2_hero .sp-image-col .img-slot {
  box-shadow: 0 16px 36px rgba(15, 62, 54, 0.12);
}

/* Иконки чеклиста в Hero — глубокий изумруд (перекрывает --accent темы) */
#block-beauty_b2_hero .sp-item-icon {
  color: #0F3E36 !important;
}

/* Мобильный ритм Hero: photo-column уходит в порядок 3 сразу после H1.
   Базовый порядок 1…8 для .sp-preset-hero задаёт общий блок выше — здесь
   только изумрудная подпись CTA и вертикальный отступ. */
@media (max-width: 767px) {
  #block-beauty_b2_hero .sp-cta-note {
    color: #4B6E66 !important;
    text-align: center;
  }
}

/* ── 2. Карусель работ (#carousel-wrapper-beauty_b6_works_carousel) ── */
#carousel-wrapper-beauty_b6_works_carousel .carousel-arrow {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(15, 62, 54, 0.12) !important;
  color: #0F3E36 !important;
  box-shadow: 0 4px 12px rgba(15, 62, 54, 0.15) !important;
}

#carousel-wrapper-beauty_b6_works_carousel .carousel-arrow:hover {
  background: #0F3E36 !important;
  color: #FFFFFF !important;
}

#carousel-wrapper-beauty_b6_works_carousel .swiper-pagination-bullet {
  background: #0F3E36 !important;
  opacity: 0.3;
}

#carousel-wrapper-beauty_b6_works_carousel .swiper-pagination-bullet-active {
  opacity: 1;
}

/* Пустые слайды работ: вместо «дырки» — тёплая подложка в палитре студии */
#carousel-wrapper-beauty_b6_works_carousel .carousel-slide-placeholder {
  background: linear-gradient(160deg, #E8F0EE 0%, #F4F7F6 100%);
  color: #4B6E66;
}

/* ── 3. Прайс-лист (#block-beauty_b9_price_list) ── */
#block-beauty_b9_price_list .pl-group {
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(15, 62, 54, 0.06);
}

#block-beauty_b9_price_list .pl-group-title {
  font-family: 'Forum', serif !important;
  letter-spacing: 1.5px;
}

#block-beauty_b9_price_list .pl-cta-btn {
  border-radius: 28px !important;
  box-shadow: 0 4px 14px rgba(15, 62, 54, 0.2);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#block-beauty_b9_price_list .pl-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 62, 54, 0.28);
}

/* ── 4. Карусель мастеров (#carousel-wrapper-beauty_b11_master_card) ──
   Карточка = фото сверху + изумрудная плашка с именем, описанием и кнопкой
   записи. Плашка переведена из absolute в static, поэтому карточка растёт
   вниз, а кнопка прижата к низу через margin-top: auto.

   Два осознанных отступления от референсной раскладки:
   1) .swiper остаётся с overflow: hidden (базовое значение Swiper). При
      overflow: visible неактивные слайды выезжают за пределы блока и
      перекрывают соседние секции лендинга на ПК, где peeking выключен.
   2) .carousel-slide-overlay сохраняет pointer-events: none — кнопка
      остаётся кликабельной (у неё pointer-events: auto), а по плашке
      по-прежнему можно вести свайп. */
#carousel-wrapper-beauty_b11_master_card {
  margin: 1rem auto 2rem auto;
  padding: 6px 6px 10px;
  overflow: visible !important;
}

#carousel-wrapper-beauty_b11_master_card .carousel-slide {
  border-radius: 16px !important;
  overflow: hidden !important;
  background: #0F3E36 !important;
  box-shadow: 0 10px 28px rgba(15, 62, 54, 0.16) !important;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

#carousel-wrapper-beauty_b11_master_card .carousel-slide:not(.swiper-slide-active) {
  opacity: 0.85;
}

#carousel-wrapper-beauty_b11_master_card .carousel-slide-inner {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  /* Пропорция 4:5 из блока здесь не применяется: высота карточки задаётся
     фото (260px) + плашкой, иначе длинный текст обрезается. */
  aspect-ratio: auto !important;
  background: #0F3E36 !important;
}

/* Фото мастера занимает верхнюю часть карточки */
#carousel-wrapper-beauty_b11_master_card .carousel-slide-picture,
#carousel-wrapper-beauty_b11_master_card .carousel-slide-placeholder {
  width: 100% !important;
  height: 260px !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}

#carousel-wrapper-beauty_b11_master_card .carousel-slide-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
}

/* Заглушка незанятого фото — тёплая подложка в палитре студии,
   а не серая дыра. */
#carousel-wrapper-beauty_b11_master_card .carousel-slide-placeholder {
  background: linear-gradient(160deg, #E8F0EE 0%, #F4F7F6 100%) !important;
  color: #4B6E66;
}

#carousel-wrapper-beauty_b11_master_card .carousel-slide-placeholder i {
  color: rgba(15, 62, 54, 0.35);
}

#carousel-wrapper-beauty_b11_master_card .carousel-slide-placeholder span {
  color: #4B6E66;
}

/* Изумрудная плашка с текстом и кнопкой снизу */
#carousel-wrapper-beauty_b11_master_card .carousel-slide-overlay {
  position: static !important;
  background: #0F3E36 !important;
  padding: 16px 18px 20px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
}

#carousel-wrapper-beauty_b11_master_card .carousel-slide-overlay-header {
  gap: 8px;
}

#carousel-wrapper-beauty_b11_master_card .carousel-slide-title {
  color: #FFFFFF !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  margin-bottom: 6px !important;
}

#carousel-wrapper-beauty_b11_master_card .carousel-slide-desc {
  color: #B2D1C9 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  margin: 0 0 16px !important;
}

/* Кнопка «Записаться к мастеру» */
#carousel-wrapper-beauty_b11_master_card .carousel-slide-cta-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 44px !important;
  padding: 10px 16px !important;
  box-sizing: border-box !important;
  background: #092B25 !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
  /* Базовая капсула (.carousel-slide-cta-btn) рассчитана на стеклянный герой-слайд:
     здесь фон непрозрачный, поэтому блюр не нужен и только съедает кадры. */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  white-space: normal !important;
  margin-top: auto !important;
  cursor: pointer !important;
  transition: background 0.2s ease, transform 0.15s ease !important;
}

#carousel-wrapper-beauty_b11_master_card .carousel-slide-cta-btn:hover {
  background: #051A16 !important;
  transform: translateY(-1px) !important;
}

/* Акцентные точки пагинации (капсула + точки) */
#carousel-wrapper-beauty_b11_master_card .swiper-pagination {
  position: static !important;
  margin-top: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

#carousel-wrapper-beauty_b11_master_card .swiper-pagination-bullet {
  width: 8px !important;
  height: 8px !important;
  background: #B0C4BF !important;
  opacity: 1 !important;
  border-radius: 4px !important;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease !important;
}

#carousel-wrapper-beauty_b11_master_card .swiper-pagination-bullet-active {
  width: 24px !important;
  background: #0F3E36 !important;
  border-radius: 4px !important;
}

/* ПК: карточка не растягивается на всю ширину контентной области. */
@media (min-width: 768px) {
  #carousel-wrapper-beauty_b11_master_card {
    max-width: 560px;
  }

  #carousel-wrapper-beauty_b11_master_card .carousel-slide-picture,
  #carousel-wrapper-beauty_b11_master_card .carousel-slide-placeholder {
    height: 380px !important;
  }

  #carousel-wrapper-beauty_b11_master_card .carousel-slide-overlay {
    padding: 22px 26px 26px !important;
  }

  #carousel-wrapper-beauty_b11_master_card .carousel-slide-title {
    font-size: 19px !important;
  }

  #carousel-wrapper-beauty_b11_master_card .carousel-slide-desc {
    font-size: 14px !important;
  }

  #carousel-wrapper-beauty_b11_master_card .carousel-slide-cta-btn {
    min-height: 50px !important;
    font-size: 15px !important;
  }
}

/* ── 5. Кнопки связи (CTA link blocks) ──
   Селекторы строго по #block-<id>: глобальные a.cta-button[href*=...]
   протекали бы в чужие пользовательские сайты с Dikidi/WhatsApp-ссылками. */
#block-beauty_b14_cta_online,
#block-beauty_b15_cta_whatsapp,
#block-beauty_b16_cta_call {
  position: relative !important;
  min-height: 52px !important;
  padding-left: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  background: #0F3E36 !important;
  color: #FFFFFF !important;
  border-radius: var(--button-radius, 28px) !important;
  box-shadow: 0 4px 14px rgba(15, 62, 54, 0.2) !important;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#block-beauty_b14_cta_online:hover,
#block-beauty_b15_cta_whatsapp:hover,
#block-beauty_b16_cta_call:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(15, 62, 54, 0.28) !important;
}

#block-beauty_b14_cta_online i,
#block-beauty_b15_cta_whatsapp i,
#block-beauty_b16_cta_call i {
  position: absolute !important;
  left: 20px !important;
  font-size: 20px !important;
  color: #FFFFFF !important;
}

/* ── 6. Карта проезда (#map-beauty_b13_map) ──
   createMapBlock не вешает id на обёртку — идентификатор контейнера
   формируется как 'map-' + block.id. */
#map-beauty_b13_map {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(15, 62, 54, 0.06);
}