/* =========================================================================
   Coin X — Redesign 2026
   Подключается после style.css через wp_enqueue_style.
   Source of truth: ../redesign-context.md (Figma Coin-X-NEW)

   Брейкпоинты (mobile-first):
     base           — mobile  (≤ 640)
     @media 641+    — tablet  (641 — 1024)
     @media 1025+   — desktop (≥ 1025)
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Design tokens (Figma variables)
   ------------------------------------------------------------------------- */
:root {
  /* Foreground / fills */
  --cx-fg-white: #ffffff;
  --cx-fg-black: #131313;
  --cx-fg-grey-1: #f4f4f4; /* card bg */
  --cx-fg-grey-2: #eaeaea; /* divider, secondary bg */
  --cx-fg-grey-3: #e2e2e2; /* border */
  --cx-fg-grey-5: #bdbbbb; /* dashed border */
  --cx-fg-grey-7: #989797;
  --cx-fg-steel-blue-1: #9ea2ab;
  --cx-fg-blue-1: #dee5ff;
  --cx-fg-blue-2: #2361ff; /* PRIMARY */
  --cx-fg-violet-1: #f6e3fa;
  --cx-fg-violet-2: #962cdd;
  --cx-fg-green-1: #d5f0e1;
  --cx-fg-green-2: #20ad0a;

  /* Text */
  --cx-text-black: #131313;
  --cx-text-white: #ffffff;
  --cx-text-grey-1: #b5b5b5; /* footer text */
  --cx-text-grey-2: #7a7a7a; /* labels */
  --cx-text-grey-3: #636363; /* nav inactive */
  --cx-text-grey-4: #666666; /* hours label */

  /* Gradients */
  --cx-gr-blue-light: linear-gradient(180deg, #f0f4ff 0%, #f5f5f5 100%);
  --cx-gr-review-band: linear-gradient(180deg, #f4f5f5 0%, #ffffff 100%);
  --cx-gr-partners-band: linear-gradient(180deg, #f0f4ff 0%, #ffffff 100%);
  --cx-gr-advantage-wide: linear-gradient(0deg, #f5f5f5 0%, #f0f4ff 100%);

  /* Radii */
  --cx-r-12: 12px;
  --cx-r-16: 16px;
  --cx-r-24: 24px;
  --cx-r-48: 48px;
  --cx-r-pill: 1000px;

  /* Shadows */
  --cx-shadow-review: 0px 4px 40px 0px rgba(0, 0, 0, 0.05);
  --cx-shadow-card: 0px 10px 40px -10px rgba(0, 0, 0, 0.08);

  /* Typography */
  --cx-font-base:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  --cx-font-mono: "Rubik", var(--cx-font-base);

  /* Layout */
  --cx-container: 1200px;
  --cx-gutter-desktop: 120px;
  --cx-gutter-tablet: 40px;
  --cx-gutter-mobile: 16px;
}

/* -------------------------------------------------------------------------
   2. Inter font — web-safe fallback, подгружается Google Fonts
   ------------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Rubik:wght@400;500&display=swap");

/* -------------------------------------------------------------------------
   3. Минимальный reset для новых классов .cx-*
   (НЕ трогаем существующие .footer, .navigation, .user-bar — чтобы не
    ломать остальные страницы. Новая вёрстка идёт под новыми классами
    или поверх селекторов существующих через высокую специфичность.)
   ------------------------------------------------------------------------- */
.cx-section,
.cx-section * {
  box-sizing: border-box;
}

/* =========================================================================
   HEADER — новая вёрстка
   ========================================================================= */

.cx-header {
  position: relative;
  z-index: 50;
  background: var(--cx-fg-white);
  font-family: var(--cx-font-base);
  padding: 16px var(--cx-gutter-mobile);
}

.cx-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
}

/* Логотип */
.cx-header__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: 121.27px;
  height: 34px;
  text-decoration: none;
}
.cx-header__logo img,
.cx-header__logo svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Блок с часами (на мобильном — под лого, на десктопе — справа) */
.cx-header__hours,
.light .cx-header__hours,
.cx-header .cx-header__hours {
  font-family: "Rubik", var(--cx-font-base) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 14px !important;
  line-height: 18px !important;
  letter-spacing: 0 !important;
  color: #666666 !important;
  margin-top: 4px;
}
/* На проде .cx-header__hours отрендерен плагином через apply_filters('comment_text'),
   который оборачивает текст в <p>. Стили темы могут делать <p> жирным — форсим
   font-weight и на потомков. */
.cx-header__hours,
.cx-header__hours *,
.light .cx-header__hours,
.light .cx-header__hours * {
  font-weight: 400 !important;
  font-family: "Rubik", var(--cx-font-base) !important;
}
.cx-header__logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Правая группа (lang / auth / burger) */
.cx-header__right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Переключатель языка RU ▾.
   Кнопка (pill с bg + hover) — на .langlist_div в блоке 5.5.
   Родитель .cx-header__lang — только wrapper для позиционирования dropdown,
   без собственного bg/padding/hover — иначе визуально две вложенные pill. */
.cx-header__lang {
  display: inline-flex;
  align-items: center;
  position: relative;
  font: 600 16px/20px var(--cx-font-base);
  letter-spacing: -0.48px;
  color: var(--cx-text-black);
}
.cx-header__lang svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* Бейдж-кнопки хедера — общая основа */
.cx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--cx-r-pill);
  font: 600 16px/20px var(--cx-font-base);
  letter-spacing: -0.48px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
  white-space: nowrap;
}
/* Primary «Войти» — 3 состояния */
.cx-btn--primary {
  background: var(--cx-fg-black); /* #131313 */
  color: var(--cx-text-white);
}
.cx-btn--primary:hover {
  background: #2d2d2d; /* чуть светлее */
}
.cx-btn--primary:active {
  background: #000; /* полный чёрный при нажатии */
}

/* Ghost «Регистрация» — 3 состояния */
.cx-btn--ghost {
  background: var(--cx-fg-white);
  color: var(--cx-text-black);
  border-color: var(--cx-fg-grey-3); /* #e2e2e2 */
}
.cx-btn--ghost:hover {
  background: var(--cx-fg-grey-1); /* #f4f4f4 */
}
.cx-btn--ghost:active {
  background: var(--cx-fg-grey-2); /* #eaeaea */
  border-color: var(--cx-fg-grey-5); /* #bdbbbb */
}
.cx-btn--soft {
  background: var(--cx-fg-grey-1);
  color: var(--cx-text-black);
}

/* Nav-pills (Главная / Новости / Отзывы / Контакты) */
.cx-header__nav {
  display: none; /* скрываем на мобайле, показываем на tablet+ */
}
.cx-header__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 8px;
}
.cx-header__nav-list li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cx-header__nav-list a {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: var(--cx-r-pill);
  font: 600 16px/20px var(--cx-font-base);
  letter-spacing: -0.48px;
  color: var(--cx-text-grey-3);
  text-decoration: none;
  background: transparent;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}
.cx-header__nav-list a:hover {
  color: var(--cx-text-black);
  background: var(--cx-fg-grey-1); /* #f4f4f4 */
}
.cx-header__nav-list a:active {
  background: var(--cx-fg-grey-2); /* #eaeaea */
  color: var(--cx-text-black);
}
.cx-header__nav-list .current-menu-item > a,
.cx-header__nav-list .current_page_item > a,
.cx-header__nav-list .current-menu-ancestor > a {
  background: var(--cx-fg-grey-1);
  color: var(--cx-text-black);
}

/* Мобильная версия меню — кнопки-pill полной ширины */
.cx-header__nav-list--mobile {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100%;
  list-style: none; /* убираем буллеты */
  margin: 0 !important;
  padding: 0 !important;
}
.cx-header__nav-list--mobile li {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: block;
}
.cx-header__nav-list--mobile a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  padding: 8px 16px;
  background: var(--cx-fg-white);
  color: var(--cx-text-black);
  border: 1px solid var(--cx-fg-grey-3);
  border-radius: var(--cx-r-pill);
  font: 600 16px/20px var(--cx-font-base);
  letter-spacing: -0.48px;
  text-decoration: none;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}
.cx-header__nav-list--mobile a:hover {
  background: var(--cx-fg-grey-1);
}
/* Активный пункт — filled серой pill без бордера */
.cx-header__nav-list--mobile .current-menu-item > a,
.cx-header__nav-list--mobile .current_page_item > a,
.cx-header__nav-list--mobile .current-menu-ancestor > a {
  background: var(--cx-fg-grey-1);
  border-color: transparent;
}

/* Бургер-кнопка (только mobile) — 3 состояния + open */
.cx-header__burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 40px;
  padding: 0;
  border: 1px solid transparent; /* резерв под hover-border */
  background: var(--cx-fg-grey-1); /* normal: #f4f4f4 */
  border-radius: var(--cx-r-pill);
  cursor: pointer;
  position: relative;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}
.cx-header__burger:hover {
  background: var(--cx-fg-grey-2); /* hover: #eaeaea */
  border-color: var(--cx-fg-grey-3); /* #e2e2e2 */
}
.cx-header__burger:active,
.cx-header__burger.is-open {
  background: var(--cx-fg-grey-2); /* pressed/open: #eaeaea */
  border-color: var(--cx-fg-grey-5); /* #bdbbbb */
}
.cx-header__burger span {
  width: 18px;
  height: 2px;
  background: var(--cx-text-black);
  position: relative;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}
.cx-header__burger span::before,
.cx-header__burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--cx-text-black);
  transition: transform 0.2s ease;
}
.cx-header__burger span::before {
  top: -6px;
}
.cx-header__burger span::after {
  top: 6px;
}

/* Скрытые элементы для desktop */
.cx-header__auth {
  display: none;
}

/* Мобильный оверлей-меню */
.cx-header__menu {
  position: absolute;
  top: calc(100% - 16px);                            /* 8 - 24 = -16px от низа хедера */
  right: calc(var(--cx-gutter-mobile) - 10px);      /* сдвиг на 10px вправо */
  min-width: 200px;
  background: var(--cx-fg-white);
  border: 1px solid var(--cx-fg-grey-3);
  border-radius: var(--cx-r-24);
  padding: 12px;
  box-shadow: var(--cx-shadow-card);
  display: none;
  flex-direction: column;
  gap: 8px;
  z-index: 60;
}
.cx-header__menu.is-open {
  display: flex;
}
.cx-header__menu-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cx-header__menu-divider {
  height: 1px;
  background: var(--cx-fg-grey-2);
  margin: 4px 0;
}
.cx-header__menu .cx-btn,
.cx-header__menu .cx-header__nav-link {
  justify-content: center;
  width: 100%;
}

/* Когда меню открыто — бургер превращается в крест */
.cx-header__burger.is-open span {
  background: transparent;
}
.cx-header__burger.is-open span::before {
  transform: rotate(45deg) translate(4px, 4px);
}
.cx-header__burger.is-open span::after {
  transform: rotate(-45deg) translate(4px, -4px);
}

/* --- Tablet (≥ 641): показываем nav, скрываем бургер --- */
@media (min-width: 641px) {
  .cx-header {
    padding: 20px var(--cx-gutter-tablet) 26px;
  }
  .cx-header__logo-wrap {
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }
  .cx-header__hours {
    margin-top: 0;
    align-self: flex-end;
    order: 3;
  }
  .cx-header__nav {
    display: flex;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  .cx-header__burger {
    display: none;
  }
  .cx-header__auth {
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }
  /* На десктопе часы уходят под блок кнопок справа */
  .cx-header__right {
    flex-direction: row;
    align-items: flex-start;
    position: relative;
  }
  .cx-header__hours {
    position: absolute;
    /* ghost-кнопка «Регистрация» h=37.6px, начало y=0 (внутри header__inner).
       Нужно 4px зазор снизу от кнопки: 37.6 + 4 = 41.6px. */
    top: 41.6px;
    right: 0;
    margin: 0;
  }
  /* Мобильное меню скрыто на планшете+ */
  .cx-header__menu {
    display: none !important;
  }
}

/* --- Desktop (≥ 1025) --- */
@media (min-width: 1025px) {
  .cx-header {
    padding: 20px var(--cx-gutter-desktop) 26px;
  }
}

/* =========================================================================
   HERO + CALCULATOR
   ========================================================================= */

.cx-hero {
  position: relative;
  padding: 40px var(--cx-gutter-mobile) 60px;
  font-family: var(--cx-font-base);
}

.cx-hero__inner {
  max-width: 590px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: stretch;
  position: relative;
}

.cx-hero__title {
  font: 600 28px/32px var(--cx-font-base);
  letter-spacing: -0.84px;
  color: var(--cx-text-black);
  text-align: center;
  margin: 0;
}
/* Отдельный override только цвета — чтобы не перебивать responsive font-size */
.light .cx-hero__title {
  color: var(
    --cx-text-black
  ) !important; /* style.css .light h1/h2 перебивал на #424242 */
}

@media (min-width: 641px) {
  .cx-hero {
    padding: 60px var(--cx-gutter-tablet) 80px;
  }
  .cx-hero__title {
    font-size: 36px;
    line-height: 40px;
    letter-spacing: -1.08px;
  }
}

@media (min-width: 1025px) {
  .cx-hero {
    padding: 80px var(--cx-gutter-desktop) 120px;
  }
  .cx-hero__inner {
    gap: 36px;
  }
  .cx-hero__title {
    font-size: 44px;
    line-height: 48px;
    letter-spacing: -1.32px;
  }
}

/* -------------------------------------------------------------------
   «Лицензия госрегулятора» — плавающая карточка справа (desktop only)
   ------------------------------------------------------------------- */
.cx-license-card {
  display: none;
  position: absolute;
  width: 258px;
  height: 298px;
  padding: 82px 24px 24px;
  border-radius: var(--cx-r-24);
  background: var(--cx-gr-blue-light);
  overflow: visible;
  z-index: 2;
}

.cx-license-card__shield {
  position: absolute;
  top: -26px;
  left: 24px;
  width: 80px;
  height: 92px;
  transform: rotate(-4.68deg);
  background: linear-gradient(206deg, #7f33f2 2%, #6af0d1 100%);
  border-radius: 12px;
  /* SVG shield через mask — fallback пока simple gradient */
  -webkit-mask: url("../images/cx/logo-base.svg") no-repeat center / contain;
  mask: url("../images/cx/logo-base.svg") no-repeat center / contain;
}
/* Временная SVG-эмблема (щит) — inline в HTML будет более гибко */
.cx-license-card__shield-img {
  position: absolute;
  top: -26px;
  left: 24px;
  width: 80px;
  height: 92px;
  transform: rotate(-4.68deg);
  display: block;
  filter: drop-shadow(0 6px 12px rgba(79, 40, 180, 0.15));
}

.cx-license-card__title {
  font: 600 20px/24px var(--cx-font-base);
  letter-spacing: -0.6px;
  color: var(--cx-text-black);
  margin: 0 0 16px;
}
.cx-license-card__text {
  font: 400 14px/18px var(--cx-font-base);
  color: var(--cx-text-grey-2);
  margin: 0 0 20px;
}
.cx-license-card__btn {
  display: inline-flex;
  align-items: center;
  padding: 4px 16px;
  background: var(--cx-fg-steel-blue-1);
  color: var(--cx-text-white);
  border-radius: var(--cx-r-pill);
  font: 600 14px/18px var(--cx-font-base);
  letter-spacing: -0.42px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background 0.2s ease;
}
.cx-license-card__btn:hover {
  background: #7f838c;
}

@media (min-width: 1025px) {
  .cx-license-card {
    display: block;
    top: 120px;
    right: calc(50% - 590px / 2 - 258px - 40px);
  }
}

/* =========================================================================
   CALCULATOR — переопределение плагинного DOM (.xchange_table_wrap .xtl_*)
   Стили применяются только внутри обёртки .cx-calc, чтобы не ломать
   плагинные страницы (личный кабинет и т.п.).
   ========================================================================= */

.cx-calc {
  width: 100%;
  font-family: var(--cx-font-base);
}

.cx-calc .xchange_table_wrap {
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  position: relative;
}
.cx-calc .homechange_abs,
.cx-calc .xchange_type_list,
.cx-calc .xchange_type_list_ins,
.cx-calc .xtl_table_wrap,
.cx-calc .xtl_table_wrap_ins,
.cx-calc .xtl_html_wrap,
.cx-calc #js_html {
  background: transparent;
  padding: 0;
  margin: 0;
  border: 0;
  box-shadow: none;
  width: 100%;
}

/* Корень колонок — превращаем 3-col grid в вертикальный stack с gap */
.cx-calc .xtl_table_body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.cx-calc .xtl_table_body::before,
.cx-calc .xtl_table_body::after {
  content: none;
}
.cx-calc .clear {
  display: none;
}

/* Скрываем «С комиссией» (xtl_commis_wrap) — нет в новом дизайне */
.cx-calc .xtl_commis_wrap {
  display: none !important;
}

/* ---- Колонки «Отправляете» / «Получаете» = grey cards ---- */
.cx-calc .xtl_left_col,
.cx-calc .xtl_right_col {
  background: var(--cx-fg-grey-1);
  border-radius: var(--cx-r-24);
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  float: none;
  margin: 0;
  min-height: 0;
}

/* Заголовок «Отправляете» / «Получаете» */
.cx-calc .xtl_table_title {
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  font-weight: 500;
}
.cx-calc .xtl_table_title_ins {
  font: 500 16px/20px var(--cx-font-base);
  letter-spacing: -0.32px;
  color: var(--cx-text-grey-2);
  padding: 0;
  margin: 0;
}

/* Select (выбор валюты) */
.cx-calc .xtl_selico_wrap {
  background: var(--cx-fg-white);
  border-radius: var(--cx-r-16);
  padding: 10px 10px 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  min-height: 56px;
  position: relative;
}
.cx-calc .xtl_ico_wrap {
  width: 32px;
  height: 32px;
  padding: 2px;
  flex-shrink: 0;
  background: transparent;
  border: 0;
  margin: 0;
}
.cx-calc .xtl_ico,
.cx-calc .currency_logo {
  width: 28px;
  height: 28px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
}
.cx-calc .xtl_select_wrap {
  flex: 1 1 auto;
  min-width: 0;
}
.cx-calc .select_js,
.cx-calc .iselect_js {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  height: auto;
  position: static;
}
.cx-calc .select_js_title {
  padding: 0;
  border: 0;
  background: transparent;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.cx-calc .select_js_title_ins {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0;
}
.cx-calc .select_ico {
  display: none; /* иконка уже рендерится в .xtl_ico — тут дубль */
}
.cx-calc .select_txt {
  font: 600 20px/24px var(--cx-font-base);
  letter-spacing: -0.6px;
  color: var(--cx-text-black);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Chevron (стрелка вниз у select) */
.cx-calc .select_js_abs {
  width: 36px;
  height: 36px;
  background: var(--cx-fg-white);
  border: 1px solid var(--cx-fg-grey-3);
  border-radius: var(--cx-r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  right: auto;
  top: auto;
  margin-left: auto;
}
.cx-calc .select_js_abs::before {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--cx-text-black);
  border-bottom: 2px solid var(--cx-text-black);
  transform: rotate(45deg) translate(-2px, -2px);
}

/* Выпадающий список */
.cx-calc .select_js_ul {
  margin-top: 8px;
  background: var(--cx-fg-white);
  border-radius: var(--cx-r-16);
  border: 1px solid var(--cx-fg-grey-3);
  box-shadow: var(--cx-shadow-card);
  overflow: hidden;
  max-height: 320px;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
}
.cx-calc .select_js_ul_ins {
  max-height: 320px;
  overflow-y: auto;
  padding: 8px 0;
}
.cx-calc .select_js_ulli {
  padding: 0;
  background: transparent;
}
.cx-calc .select_js_ulli:hover {
  background: var(--cx-fg-grey-1);
}
.cx-calc .select_js_ulli_ins {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  font: 400 16px/20px var(--cx-font-base);
  letter-spacing: -0.32px;
  color: var(--cx-text-black);
}
.cx-calc .select_js_ulli .select_ico {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cx-calc .select_js_search {
  padding: 8px 16px;
  border-bottom: 1px solid var(--cx-fg-grey-2);
}
.cx-calc .select_js_search input {
  width: 100%;
  border: 0;
  background: transparent;
  font: 400 16px/20px var(--cx-font-base);
  outline: 0;
  color: var(--cx-text-black);
}

/* Поле суммы */
.cx-calc .xtl_input_wrap {
  background: var(--cx-fg-white);
  border-radius: var(--cx-r-16);
  padding: 0;
  position: relative;
  border: 0;
}
.cx-calc .xtl_input_wrap input,
.cx-calc .xtl_input_wrap .js_sum_val {
  width: 100%;
  height: 56px;
  min-height: 56px;
  max-height: 56px;
  padding: 16px;
  margin: 0 !important; /* плагин задаёт margin-top: 8px (0.5em каскад) */
  background: transparent;
  border: 0;
  border-radius: var(--cx-r-16);
  font: 600 20px/24px var(--cx-font-base);
  letter-spacing: -0.6px;
  color: var(--cx-text-black);
  outline: 0;
  box-sizing: border-box;
}
.cx-calc .xtl_input_wrap {
  height: 56px; /* обёртка равна инпуту */
  min-height: 56px;
}
.cx-calc .xtl_input_wrap input:focus,
.cx-calc .xtl_input_wrap .js_sum_val:focus {
  box-shadow: 0 0 0 1px var(--cx-fg-steel-blue-1) inset;
}
.cx-calc .xtl_input_wrap.js_wrap_error.error input,
.cx-calc .xtl_input_wrap.js_wrap_error.error .js_sum_val {
  box-shadow: 0 0 0 1px #e11d2e inset;
}
.cx-calc .js_error {
  padding: 0;
  margin: 4px 4px 0;
  font: 400 14px/18px var(--cx-font-base);
  color: #e11d2e;
  background: transparent;
  border: 0;
}

/* Swap-button (между cards, абсолютный) */
.cx-calc .xtl_center_col {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  z-index: 5;
  background: transparent;
}
.cx-calc .xtl_center_col::before {
  content: none;
}
.cx-calc .xtl_change {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--cx-fg-black);
  border-radius: 50%;
  border: 4px solid var(--cx-fg-white);
  padding: 0;
  text-indent: 0;
  overflow: visible;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.cx-calc .xtl_change:hover {
  transform: rotate(180deg);
}
.cx-calc .xtl_change::before {
  content: "";
  width: 20px;
  height: 20px;
  background: url("../images/cx/swap_vert.svg") no-repeat center / contain;
  filter: invert(1);
}

/* Обёртка Rate + Reserve (создаётся JS-ом) */
.cx-calc .cx-calc-rate {
  background: var(--cx-fg-white);
  border: 1px dashed var(--cx-fg-grey-5);
  border-radius: var(--cx-r-24);
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
}
.cx-calc .xtl_line.xtl_exchange_rate,
.cx-calc .xtl_line.xtl_exchange_reserve {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  font: 400 16px/20px var(--cx-font-base);
  letter-spacing: -0.32px;
  color: var(--cx-text-black);
}
.cx-calc .xtl_line.xtl_exchange_reserve {
  color: var(--cx-text-grey-2);
}
.cx-calc .cx-calc-rate::before {
  content: "";
  display: none;
}
/* разделитель между Курс и Резерв */
.cx-calc .cx-calc-rate .xtl_line.xtl_exchange_reserve {
  padding-top: 16px;
  border-top: 1px solid var(--cx-fg-grey-2);
}

/* Label «Курс» и info-иконка c тултипом — держим их одной flex-группой,
   иначе flex `justify-content: space-between` разнесёт их. */
.cx-calc .xtl_exchange_rate .cx-rate-labelgroup {
  display: inline-flex;
  align-items: center;
}
.cx-calc .xtl_exchange_rate .cx-rate-label {
  display: inline-flex;
  align-items: center;
}
.cx-calc .xtl_exchange_rate {
  gap: 0; /* схлопываем дефолтный flex-gap */
}
.cx-calc .cx-rate-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: 4px;
  cursor: help;
  outline: 0;
}
.cx-calc .cx-rate-info__icon {
  width: 20px;
  height: 20px;
  display: block;
  pointer-events: none;
}
/* Тултип — белый pill с тенью, позиционирован сверху-слева от иконки */
.cx-calc .cx-rate-info__tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: -12px;
  width: 236px;
  padding: 12px 16px;
  background: var(--cx-fg-white);
  border-radius: 12px;
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.12);
  color: var(--cx-text-black);
  font: 400 14px/18px var(--cx-font-base);
  letter-spacing: -0.28px;
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease,
    visibility 0.15s;
  pointer-events: none;
  z-index: 20;
}
.cx-calc .cx-rate-info:hover .cx-rate-info__tip,
.cx-calc .cx-rate-info:focus .cx-rate-info__tip,
.cx-calc .cx-rate-info:focus-within .cx-rate-info__tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* CTA row (создаётся JS-ом: «Связаться в TG» + «Продолжить»).
   Mobile — обе кнопки width: 100% в столбик.
   Tablet+ (≥641px) — hug-content в ряд, центрированы. */
.cx-calc .cx-calc-cta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
  align-items: stretch; /* mobile: растянуть на ширину */
}
.cx-calc .xtl_submit_wrap {
  padding: 0;
  margin: 0;
  width: 100%; /* mobile default */
}
.cx-calc .xtl_submit_ins {
  padding: 0;
  margin: 0;
  width: 100%;
}
.cx-calc .xtl_submit,
.cx-calc .js_exchange_link {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%; /* mobile: full width */
  height: 48px;
  min-height: 48px;
  padding: 12px 28px;
  background: var(--cx-fg-blue-2);
  color: var(--cx-text-white);
  font: 600 18px/24px var(--cx-font-base);
  letter-spacing: -0.54px;
  border-radius: var(--cx-r-pill);
  border: 0;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition:
    background 0.2s ease,
    transform 0.1s ease;
}
.cx-calc .xtl_submit:hover,
.cx-calc .js_exchange_link:hover {
  background: #1e52d6;
}
.cx-calc .xtl_submit:active {
  transform: scale(0.98);
}

/* Кнопка «Связаться в TG» (создаётся JS-ом).
   Mobile — full width, tablet+ — hug content (240×48 по Figma). */
.cx-calc .cx-calc-tg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%; /* mobile: full width */
  height: 48px;
  min-height: 48px;
  padding: 12px 28px;
  background: var(--cx-fg-grey-2);
  color: var(--cx-text-grey-2);
  font: 600 18px/24px var(--cx-font-base);
  letter-spacing: -0.54px;
  border-radius: var(--cx-r-pill);
  border: 0;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: background 0.2s ease;
}
.cx-calc .cx-calc-tg:hover {
  background: #dcdcdc;
}
.cx-calc .cx-calc-tg svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* Tablet+: CTA row в одну строку, обе кнопки hug-content, центр */
@media (min-width: 641px) {
  .cx-calc .cx-calc-cta {
    flex-direction: row;
    gap: 8px;
    align-items: center;
    justify-content: center;
  }
  .cx-calc .xtl_submit_wrap,
  .cx-calc .xtl_submit_ins {
    flex: 0 0 auto;
    width: auto;
  }
  .cx-calc .xtl_submit,
  .cx-calc .js_exchange_link {
    width: auto; /* hug content на tablet+ */
    display: inline-flex !important;
  }
  .cx-calc .cx-calc-tg {
    flex-shrink: 0;
    width: auto; /* hug content на tablet+ */
    display: inline-flex;
  }
}

/* =========================================================================
   SECTIONS — общие
   ========================================================================= */
.cx-section {
  font-family: var(--cx-font-base);
  padding: 64px var(--cx-gutter-mobile);
}
.cx-section__inner {
  max-width: 1200px;
  margin: 0 auto;
}
.cx-section__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}
.cx-section__eyebrow {
  font: 600 14px/18px var(--cx-font-base);
  letter-spacing: -0.14px;
  color: var(--cx-text-grey-2);
  text-transform: uppercase;
}
.cx-section__title,
.light .cx-section__title {
  font-family: var(--cx-font-base);
  font-weight: 600; /* Semi Bold */
  font-size: 38px;
  line-height: 44px;
  letter-spacing: -1.14px; /* -3% × 38px */
  color: var(
    --cx-text-black
  ) !important; /* style.css .light h2 перебивал на #424242 */
  margin: 0;
  text-align: center;
}
.cx-section__head {
  text-align: center;
  align-items: center !important;
}
.cx-section__subtitle {
  font: 400 16px/20px var(--cx-font-base);
  letter-spacing: -0.32px;
  color: var(--cx-text-grey-2);
  max-width: 561px;
  margin: 0 auto;
  text-align: center;
}

@media (min-width: 641px) {
  .cx-section {
    padding: 80px var(--cx-gutter-tablet);
  }
  .cx-section__eyebrow {
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.16px;
  }
  .cx-section__subtitle {
    font-size: 18px;
    line-height: 22px;
    letter-spacing: -0.36px;
  }
  .cx-section__head {
    margin-bottom: 44px;
  }
}
@media (min-width: 1025px) {
  .cx-section {
    padding: 100px var(--cx-gutter-desktop);
  }
  .cx-section__subtitle {
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -0.6px;
  }
  .cx-section__head {
    margin-bottom: 52px;
  }
}

/* =========================================================================
   «Безопасный обмен криптовалюты для стран СНГ» (.cx-services)
   ========================================================================= */
.cx-services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px; /* расстояние между карточками на mobile */
}
.cx-service-card {
  position: relative;
  background: var(--cx-gr-blue-light);
  border-radius: var(--cx-r-24);
  padding: 140px 24px 24px;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 280px;
  text-align: center; /* mobile — по центру */
  align-items: center;
}
.cx-service-card__img {
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 160px;
  max-width: 200px;
  object-fit: contain;
  object-position: center top;
  pointer-events: none;
}
.cx-service-card__title,
.light .cx-service-card__title {
  font-family: var(--cx-font-base);
  font-weight: 600;
  font-size: 24px;
  line-height: 28px;
  letter-spacing: -0.72px; /* -3% × 24px */
  color: var(--cx-text-black) !important;
  margin: 0;
}
.cx-service-card__text {
  font: 400 14px/18px var(--cx-font-base);
  color: var(--cx-text-grey-2);
  margin: 0;
}
@media (min-width: 641px) {
  .cx-services-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .cx-service-card {
    padding: 240px 24px 24px;
    min-height: 328px;
    text-align: center;
    align-items: center;
  }
  .cx-service-card__img {
    top: -37px;
    left: 0;
    right: 0;
    margin: 0 auto;
    height: 252px;
    max-width: 100%;
    object-position: center top;
  }
  /* .cx-service-card__title уже 24/28 в base — не меняем */
  .cx-service-card__text {
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.32px;
  }
}

/* =========================================================================
   «Крупные сделки от $50,000» (.cx-premium)
   ========================================================================= */
.cx-premium-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* mobile: 2 колонки */
  gap: 8px;
}
.cx-premium-card {
  background: var(--cx-fg-grey-1);
  border-radius: var(--cx-r-24);
  padding: 16px 8px 20px;           /* mobile: узкий padding, чтобы влезли крупные заголовки */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  min-width: 0;                     /* разрешаем grid-cell сжиматься */
  overflow: hidden;
}
.cx-premium-card__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--cx-fg-white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cx-premium-card__icon img {
  width: 32px;
  height: 32px;
  display: block;
}
.cx-premium-card__title,
.light .cx-premium-card__title {
  font-family: var(--cx-font-base);
  font-weight: 600;
  font-size: 24px;
  line-height: 28px;
  letter-spacing: -0.72px;
  color: var(--cx-text-black) !important;
  margin: 0;
  overflow-wrap: break-word;        /* разрешаем перенос длинных слов */
  word-break: break-word;
  hyphens: auto;
}
@media (min-width: 641px) {
  .cx-premium-grid {
    grid-template-columns: repeat(2, 1fr);  /* tablet: 2 колонки */
    gap: 20px;
  }
  .cx-premium-card {
    padding: 20px 20px 24px;
    gap: 20px;
  }
  .cx-premium-card__icon {
    width: 80px;
    height: 80px;
  }
  .cx-premium-card__icon img {
    width: 40px;
    height: 40px;
  }
  /* .cx-premium-card__title уже 24/28 в base — не меняем */
}
@media (min-width: 1025px) {
  .cx-premium-grid {
    grid-template-columns: repeat(4, 1fr);  /* desktop: 4 в ряд */
  }
}

/* =========================================================================
   «Ваше доверие — наш главный приоритет» (.cx-reviews)
   ========================================================================= */
.cx-reviews {
  background: var(--cx-gr-review-band);
}
.cx-reviews .cx-section__head {
  align-items: center;
  text-align: center;
  max-width: 589px;
  margin-left: auto;
  margin-right: auto;
}
.cx-reviews-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 600px;
  margin: 0 auto;
}
.cx-review {
  background: var(--cx-fg-white);
  border: 1px solid var(--cx-fg-grey-2);
  border-radius: var(--cx-r-24);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--cx-shadow-review);
}
.cx-review__header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cx-review__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cx-review__avatar img {
  width: 28px;
  height: 28px;
  display: block;
}
.cx-review__avatar--violet {
  background: var(--cx-fg-violet-1);
}
.cx-review__avatar--blue {
  background: var(--cx-fg-blue-1);
}
.cx-review__avatar--green {
  background: var(--cx-fg-green-1);
}
.cx-review__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cx-review__name,
.light .cx-review__name {
  font-family: var(--cx-font-base);
  font-weight: 600; /* Semi Bold */
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.48px; /* -3% × 16px */
  color: #636363 !important; /* не менять через .light h* и т.п. */
}
.cx-review__date,
.light .cx-review__date {
  font-family: var(--cx-font-base);
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0; /* явный 0 вместо normal */
  color: #7a7a7a !important;
}
.cx-review__quote,
.light .cx-review__quote {
  background: var(--cx-fg-grey-1);
  border-radius: var(--cx-r-12);
  padding: 12px;
  font-family: var(--cx-font-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.32px; /* -2% × 16px */
  color: #131313 !important;
  margin: 0;
}
.cx-reviews__cta {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.cx-reviews__cta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 4px 28px; /* 4px вокруг badge справа, слева 28px */
  background: var(--cx-fg-blue-2);
  color: var(--cx-text-white);
  border-radius: var(--cx-r-pill);
  font: 600 18px/24px var(--cx-font-base);
  letter-spacing: -0.54px;
  text-decoration: none;
  transition: background 0.2s ease;
}
.cx-reviews__cta a:hover {
  background: #1e52d6;
}
.cx-reviews__cta-label {
  padding: 10px 0; /* чтобы высота label = высоте бейджа - 4×2 */
}
.cx-reviews__cta-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cx-fg-white);
  border-radius: var(--cx-r-pill);
  flex-shrink: 0;
}
.cx-reviews__cta-badge img {
  height: 44px;
  width: auto;
  display: block;
}
/* Убираем underline у кнопки «Читать все отзывы» во всех состояниях */
.cx-reviews__cta a,
.cx-reviews__cta a:hover,
.cx-reviews__cta a:focus,
.cx-reviews__cta a:active,
.cx-reviews__cta a:visited {
  text-decoration: none !important;
}

/* Убираем underline со всех ссылок в хедере — style.css темы ставит
   text-decoration: underline на a:hover глобально */
.cx-header a,
.cx-header a:hover,
.cx-header a:focus,
.cx-header a:active,
.cx-header a:visited {
  text-decoration: none !important;
}

@media (min-width: 1025px) {
  /* На десктопе — шахматка:
       - Card1 и Card3 слева (margin-left: 0)
       - Card2 смещён вправо на 100px
       - Каждый следующий накладывается на предыдущий на 20px сверху
       - Ширина карточки уже контейнера, чтобы card2 не вылезал */
  .cx-reviews-grid {
    position: relative;
    max-width: 522px; /* ширина card (422) + 100px сдвиг card2 */
    margin: 0 auto;
    gap: 0; /* наложение через margin-top, не gap */
  }
  .cx-review {
    width: 488px;
    max-width: 488px;
    position: relative;
  }
  .cx-review + .cx-review {
    margin-top: -24px; /* накладывается на предыдущий на 24px */
  }
  .cx-review:nth-child(1) {
    margin-left: 0;
    z-index: 1;
  }
  .cx-review:nth-child(2) {
    margin-left: 100px;
    z-index: 2;
  }
  .cx-review:nth-child(3) {
    margin-left: 0;
    z-index: 3;
  }
  /* каждый следующий — выше по z-index, чтобы тень правильно ложилась */
}

/* =========================================================================
   «Почему выбирают CoinX?» (.cx-advantages)
   ========================================================================= */
.cx-advantages-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.cx-advantage-card {
  background: var(--cx-gr-blue-light);
  border-radius: var(--cx-r-24);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cx-advantage-card__img {
  width: 100%;
  max-width: 360px;
  height: 200px;
  object-fit: contain;
  object-position: center;
  align-self: center;
}
.cx-advantage-card__title,
.light .cx-advantage-card__title {
  font-family: var(--cx-font-base);
  font-weight: 600;
  font-size: 24px;
  line-height: 28px;
  letter-spacing: -0.72px;
  color: var(--cx-text-black) !important;
  margin: 0;
}
.cx-advantage-card__text {
  font: 400 14px/18px var(--cx-font-base);
  color: var(--cx-text-grey-2);
  margin: 0;
}
@media (min-width: 641px) {
  .cx-advantages-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .cx-advantage-card {
    padding: 24px;
    gap: 24px;
  }
  .cx-advantage-card__img {
    height: 252px;
    max-width: 440px;
  }
  /* .cx-advantage-card__title уже 24/28 в base — не меняем */
  .cx-advantage-card__text {
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.32px;
  }
  .cx-advantage-card--wide {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    background: var(--cx-gr-advantage-wide);
  }
  .cx-advantage-card--wide .cx-advantage-card__img {
    flex: 0 0 363px;
    align-self: center;
  }
  .cx-advantage-card--wide .cx-advantage-card__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
}

/* =========================================================================
   «Доступные резервы» (.cx-reserves)
   ========================================================================= */
.cx-reserves .cx-section__head {
  align-items: center;
  text-align: center;
}
.cx-reserves-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 800px;
  margin: 0 auto;
}
.cx-reserve-card {
  background: var(--cx-fg-grey-1);
  border-radius: var(--cx-r-24);
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.cx-reserve-card__logo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--cx-fg-white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 4px;
}
.cx-reserve-card__logo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: contain;
}
.cx-reserve-card__amount {
  font: 600 14px/18px var(--cx-font-base);
  letter-spacing: -0.42px;
  color: var(--cx-text-black);
  margin: 0;
}
.cx-reserve-card__name {
  font: 400 12px/16px var(--cx-font-base);
  color: var(--cx-text-grey-2);
  margin: 0;
}

/* Кнопка «Смотреть больше» — только mobile, выше 640 скрыта вместе с поведением */
.cx-reserves__more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}
.cx-reserves__more {
  display: none; /* показывается только на mobile если карт > 6 */
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 240px;
  padding: 14px 28px;
  background: var(--cx-fg-steel-blue-1);
  color: var(--cx-text-white);
  font: 600 16px/20px var(--cx-font-base);
  letter-spacing: -0.48px;
  border: 0;
  border-radius: var(--cx-r-pill);
  cursor: pointer;
  transition: background 0.2s ease;
}
.cx-reserves__more:hover {
  background: #858992;
}

/* На mobile: скрываем карточки от 7-ой, показываем кнопку */
@media (max-width: 640px) {
  .cx-reserves-grid.has-more .cx-reserve-card:nth-child(n + 7) {
    display: none;
  }
  .cx-reserves-grid.has-more.is-expanded .cx-reserve-card:nth-child(n + 7) {
    display: flex;
  }
  .cx-reserves-grid.has-more + .cx-reserves__more-wrap .cx-reserves__more {
    display: inline-flex;
  }
}

@media (min-width: 641px) {
  .cx-reserves-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .cx-reserve-card {
    padding: 16px 20px;
    gap: 12px;
  }
  .cx-reserve-card__logo {
    width: 56px;
    height: 56px;
  }
  .cx-reserve-card__amount {
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.48px;
  }
  .cx-reserve-card__name {
    font-size: 14px;
    line-height: 18px;
  }
}
@media (min-width: 1025px) {
  .cx-reserves-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  .cx-reserve-card__logo {
    width: 60px;
    height: 60px;
  }
}

/* =========================================================================
   «Держим планку вместе с лидерами индустрии» (.cx-partners)
   ========================================================================= */
.cx-partners {
  background: var(--cx-gr-partners-band);
}
.cx-partners .cx-section__head {
  max-width: 450px;
  margin-left: auto;
  margin-right: auto;
}
.cx-partners-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.cx-partner {
  background: var(--cx-fg-white);
  border: 1px solid var(--cx-fg-grey-3);
  border-radius: var(--cx-r-24);
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.cx-partner:hover {
  border-color: var(--cx-fg-grey-5);
}
.cx-partner img {
  width: 80%;                       /* логотип занимает 80% ширины карточки */
  height: auto;
  max-height: 50%;                  /* не выше половины высоты карточки */
  object-fit: contain;
  display: block;
  margin: 0 auto;                   /* центр по горизонтали */
}
.cx-partner__placeholder {
  font: 600 16px/20px var(--cx-font-base);
  letter-spacing: -0.32px;
  color: var(--cx-text-grey-2);
}
@media (min-width: 641px) {
  .cx-partners-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .cx-partner {
    height: 100px;
  }
  /* .cx-partner img — остаётся 55% width / 50% max-height через base */
}
@media (min-width: 1025px) {
  .cx-partners-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  .cx-partner {
    height: 124px;
  }
  /* .cx-partner img — остаётся 55% width / 50% max-height через base */
}

/* =========================================================================
   FOOTER — новая вёрстка
   ========================================================================= */

/* Основной контейнер футера (целиком в теме переопределён новым markup) */
.cx-footer {
  font-family: var(--cx-font-base);
  padding: 60px var(--cx-gutter-mobile);
  background: transparent;
}
.cx-footer__inner {
  max-width: calc(1440px - (var(--cx-gutter-desktop) * 2));
  margin: 0 auto;
}

.cx-footer__card {
  position: relative;
  background: var(--cx-fg-black);
  color: var(--cx-text-grey-1);
  border-radius: var(--cx-r-24);
  padding: 48px 24px;
  overflow: hidden;
}

/* Логотип */
.cx-footer__logo {
  display: block;
  width: 121.27px;
  height: 34px;
  margin-bottom: 32px;
}
.cx-footer__logo svg,
.cx-footer__logo img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Блок контактов (TG, email) */
.cx-footer__contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 40px;
}

.cx-footer__contact {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--cx-text-grey-1);
  font: 400 16px/20px var(--cx-font-base);
  letter-spacing: -0.32px;
  text-decoration: none;
  transition: color 0.2s ease;
}
.cx-footer__contact:hover {
  color: var(--cx-text-white);
}

.cx-footer__contact-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cx-footer__contact-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Описание (блок о компании) */
.cx-footer__about {
  font: 400 16px/20px var(--cx-font-base);
  letter-spacing: -0.32px;
  color: var(--cx-text-grey-1);
  margin-bottom: 40px;
}
.cx-footer__about p {
  margin: 0 0 12px;
}
.cx-footer__about p:last-child {
  margin-bottom: 0;
}

/* Нижний ряд: copyright + legal links */
.cx-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.cx-footer__copy {
  font: 400 16px/20px var(--cx-font-base);
  letter-spacing: -0.32px;
  color: var(--cx-text-grey-1);
  margin: 0;
}

.cx-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
}

.cx-footer__links a {
  color: var(--cx-text-grey-1);
  font: 400 16px/20px var(--cx-font-base);
  letter-spacing: -0.16px;
  text-decoration: underline;
  text-decoration-skip-ink: auto;
  transition: color 0.2s ease;
}
.cx-footer__links a:hover {
  color: var(--cx-text-white);
}

/* -------------------------------------------------------------------------
   Tablet (641 — 1024)
   ------------------------------------------------------------------------- */
@media (min-width: 641px) {
  .cx-footer {
    padding: 80px var(--cx-gutter-tablet);
  }
  .cx-footer__card {
    border-radius: 32px;
    padding: 64px 48px;
  }
  .cx-footer__logo {
    margin-bottom: 40px;
  }
  .cx-footer__contacts {
    gap: 32px;
  }
  .cx-footer__about {
    max-width: 420px;
  }
  .cx-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-top: 48px;
    border-top: none;
  }
  .cx-footer__links {
    gap: 24px;
  }
}

/* -------------------------------------------------------------------------
   Desktop (≥ 1025)
   ------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  .cx-footer {
    padding: 0 var(--cx-gutter-desktop) 120px;
  }
  .cx-footer__card {
    min-height: 454px;
    padding: 80px 102px 60px;
    border-radius: var(--cx-r-48);
  }

  /* На десктопе: сверху две колонки (logo+contacts слева | описание справа).
       Снизу (position: absolute) — copyright + links.
       Повторяет абсолютный макет Figma. */
  .cx-footer__card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    column-gap: 24px;
  }

  .cx-footer__logo {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
  }

  .cx-footer__contacts {
    grid-column: 1;
    grid-row: 2;
    margin-top: 44px;
    margin-bottom: 0;
    align-self: start;
    gap: 40px;
  }

  .cx-footer__about {
    grid-column: 2;
    grid-row: 1 / 3;
    max-width: 386px;
    justify-self: end;
    margin-bottom: 0;
    margin-top: 2px; /* оптическое выравнивание с лого */
  }

  .cx-footer__bottom {
    grid-column: 1 / 3;
    grid-row: 3;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-top: 0;
    margin-top: auto;
    border-top: none;
  }
}

/* -------------------------------------------------------------------------
   4. Скрытие старых элементов футера (выключаем legacy разметку,
      когда тема подключит новый .cx-footer. Старые .footer остаются
      в DOM у внутренних страниц, пока не переверстаем footer.php.)

      Текущий подход: новый markup заменяет .footer внутри footer.php,
      поэтому override здесь не нужен. Если появятся конфликты —
      добавим .no-old-footer overrides ниже.
   ------------------------------------------------------------------------- */

/* =========================================================================
   5. PRIORITY OVERRIDES — борьба со старым style.css (3402 правила)
      Все правила ниже имеют !important, потому что старая тема инжектит
      `.xtl_ico_wrap { display: none }` и т.п. селекторами той же
      специфичности. Пишем финальный слой здесь.
   ========================================================================= */

/* --- 5.1 Debug-блок queries от плагина (position:fixed, z-index:9999) --- */
body > div[style*="z-index: 9999"][style*="position: fixed"],
body > div[style*="z-index:9999"][style*="position:fixed"] {
  display: none !important;
}

/* --- 5.1.1 Body: сброс синего фона и паттерна Arrows-Light из старой темы --- */
body,
body.home,
body.home.page-template-pn-homepage {
  background: var(--cx-bg, #ffffff) !important;
  background-color: #ffffff !important;
  background-image: none !important;
}

/* --- 5.1.2 Hero: чистый белый фон (без градиента) --- */
.cx-hero {
  background: #ffffff !important;
  background-image: none !important;
}

/* --- 5.1.3 Старая обёртка .homepage_wrap — full-width, центрированная, без фона --- */
.homepage_wrap,
body.home .homepage_wrap,
body.home.page-template-pn-homepage .homepage_wrap,
body .homepage_wrap {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
  max-width: none !important;
  width: 100% !important;
}

/* --- 5.1.4 Секции: внутренности центрировать, контент ограничить --- */
.cx-section__inner,
.cx-hero__inner {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Старые контейнеры калькулятора (плагин) — прозрачные */
.xchange_table_wrap,
.homechange,
.xchange_type_list,
.xchange_type_list_ins,
.xtl_table_wrap,
.xtl_table_wrap_ins,
.xtl_html_wrap {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  box-shadow: none !important;
}

/* --- 5.2 Валютная иконка в калькуляторе (старый style.css прячет её) --- */
.cx-calc .xtl_ico_wrap {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 2px;
}
.cx-calc .xtl_ico,
.cx-calc .xtl_ico.currency_logo {
  display: block !important;
  width: 28px !important;
  height: 28px !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  border-radius: 50%;
  float: none !important;
  margin: 0 !important;
}

/* --- 5.3 Chevron: старый треугольник .xtl_select_wrap может добавлять ::after --- */
.cx-calc .xtl_select_wrap::after,
.cx-calc .select_js::after,
.cx-calc .iselect_js::after,
.cx-calc .select_js_title::after {
  content: none !important;
}

/* --- 5.4 Скрываем комиссию (в дизайне её нет) --- */
.cx-calc .xtl_commis_wrap {
  display: none !important;
}

/* --- 5.5 Language switcher: превращаем .langlist_div в pill-кнопку --- */
.cx-header__lang-wrap {
  position: relative;
}
.cx-header__lang .langlist_div {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: transparent; /* normal: без фона */
  border: 1px solid transparent; /* резервируем 1px под hover-бордер */
  border-radius: var(--cx-r-pill);
  cursor: pointer;
  position: relative;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
  min-width: auto;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
/* Hover — тонкая серая обводка, фон тот же */
.cx-header__lang .langlist_div:hover {
  border-color: var(--cx-fg-grey-3); /* #e2e2e2 */
}
/* Active (pressed) — чуть темнее обводка */
.cx-header__lang .langlist_div:active {
  border-color: var(--cx-fg-grey-5); /* #bdbbbb */
}
/* Open — обводка как на hover, chevron перевёрнут (см. ::after правило ниже) */
.cx-header__lang .langlist_div.is-open {
  border-color: var(--cx-fg-grey-3);
}
.cx-header__lang .langlist_title {
  display: flex !important;
  align-items: center;
  gap: 0 !important; /* расстояние до стрелки — через margin-left ::after */
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  font: 600 16px/20px var(--cx-font-base);
  letter-spacing: -0.48px;
  color: var(--cx-text-black);
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
}
.cx-header__lang .langlist_title::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--cx-text-black);
  border-bottom: 2px solid var(--cx-text-black);
  transform: rotate(45deg) translate(-2px, -2px);
  margin-left: 10px; /* расстояние от "RU" до стрелки */
  display: inline-block;
  flex-shrink: 0;
  transition: transform 0.18s ease;
}
/* Открытое состояние — стрелка на 180° (вверх) */
.cx-header__lang .langlist_div.is-open .langlist_title::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.cx-header__lang .langlist_title span {
  text-transform: uppercase;
  font-weight: 600;
}

/* Dropdown язык-листа */
.cx-header__lang .langlist_ul {
  display: none !important;
  position: absolute !important;
  top: calc(100% + 8px);
  right: 0;
  min-width: 0;
  background: var(--cx-fg-white);
  border: 0 !important;
  border-radius: 24px;
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.12); /* #0000001F */
  z-index: 40;
  padding: 4px;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Открывается ТОЛЬКО по клику (класс .is-open ставит JS), не по hover */
.cx-header__lang .langlist_div.is-open .langlist_ul {
  display: flex !important;
}
.cx-header__lang .langlist_li {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 0 !important;
  padding: 10px 16px !important;
  font: 600 16px/20px var(--cx-font-base) !important;
  letter-spacing: -0.48px !important;
  color: var(--cx-text-black) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 16px !important; /* pill-ish inside wrapper */
  text-decoration: none !important;
  width: auto !important;
  min-width: 64px;
  height: auto !important;
  float: none !important;
  text-transform: uppercase;
  transition: background 0.15s ease;
}
/* Скрываем флаги — в дизайне только текст RU/En */
.cx-header__lang .langlist_liimg,
.cx-header__lang .langlist_liimg img {
  display: none !important;
}
/* Langlist items — 3 состояния:
   normal = прозрачный, hover = grey-1, active/pressed = grey-2 */
.cx-header__lang .langlist_li:hover {
  background: var(--cx-fg-grey-1) !important; /* #f4f4f4 */
}
.cx-header__lang .langlist_li:active {
  background: var(--cx-fg-grey-2) !important; /* #eaeaea — pressed */
}
/* Постоянного фона у выбранного языка НЕ ставим — по дизайну только hover/click */
/* Прячем оригинальный текст ссылки плагина ("Русский"/"English")
   и подставляем через ::after короткий код. */
.cx-header__lang .langlist_li {
  font-size: 0 !important; /* убирает текст-ноду плагина */
}
.cx-header__lang .langlist_li::after {
  font: 600 16px/20px var(--cx-font-base);
  letter-spacing: -0.48px;
  color: var(--cx-text-black);
  text-transform: uppercase;
  content: attr(data-lang-short);
}

/* --- 5.6 Убираем лишние .select_ico в select_js_title_ins (дубли иконок) --- */
.cx-calc .xtl_selico_wrap .select_js_title_ins .select_ico,
.cx-calc .xtl_selico_wrap .select_js_title_ins > .select_ico {
  display: none !important;
}

/* --- 5.6.1 Chevron (.select_js_abs) — только title, не dropdown items --- */
.cx-calc
  .xtl_selico_wrap
  > .xtl_select_wrap
  > .select_js
  > .select_js_title
  .select_js_abs,
.cx-calc .select_js_title > .select_js_title_ins > .select_js_abs {
  width: 36px !important;
  height: 36px !important;
  background: var(--cx-fg-white) !important;
  background-image: none !important;
  border: 1px solid var(--cx-fg-grey-3) !important;
  border-radius: var(--cx-r-pill) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  left: auto !important;
  bottom: auto !important;
  transform: translateY(-50%);
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer;
  z-index: 2;
}
.cx-calc
  .xtl_selico_wrap
  > .xtl_select_wrap
  > .select_js
  > .select_js_title
  .select_js_abs::before,
.cx-calc .select_js_title > .select_js_title_ins > .select_js_abs::before {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--cx-text-black);
  border-bottom: 2px solid var(--cx-text-black);
  transform: rotate(45deg) translate(-2px, -2px);
  background: none !important;
  display: block !important;
  position: static !important;
}
.cx-calc .select_js_title .select_js_abs::after {
  content: none !important;
  background: none !important;
}

/* --- 5.6.1b Убираем лишние chevron-кнопки внутри dropdown items --- */
.cx-calc .select_js_ul .select_js_abs,
.cx-calc .select_js_ul_ins .select_js_abs,
.cx-calc .select_js_ulli .select_js_abs,
.cx-calc .select_js_ulli_ins .select_js_abs {
  display: none !important;
}

/* --- 5.6.1f Dropdown items: компактные отступы и серый hover/active по Figma --- */
.cx-calc .select_js_ulli {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
.cx-calc .select_js_ulli_ins {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 16px !important;
  font: 400 16px/20px var(--cx-font-base) !important;
  letter-spacing: -0.32px !important;
  color: var(--cx-text-black) !important;
  background: transparent !important;
  border-radius: 12px !important;
  margin: 0 !important;
  cursor: pointer;
  transition: background 0.12s ease;
}
.cx-calc .select_js_ulli:hover .select_js_ulli_ins,
.cx-calc .select_js_ulli_ins:hover {
  background: var(--cx-fg-grey-1) !important;
}
/* .active (текущее выбранное) — без фона по умолчанию */
.cx-calc .select_js_ulli.active .select_js_ulli_ins,
.cx-calc .select_js_ul_ins.active .select_js_ulli_ins {
  background: transparent !important;
}
/* …но hover на .active всё равно подсвечивает (specificity выше .active-правил).
   ВАЖНО: только конкретный li.active:hover — НЕ ul_ins.active (это контейнер всех). */
.cx-calc .select_js_ul .select_js_ulli.active:hover .select_js_ulli_ins {
  background: var(--cx-fg-grey-1) !important;
}
.cx-calc .select_js_ulli_ins .select_ico,
.cx-calc .select_js_ulli .select_ico {
  display: block !important;
  width: 28px !important;
  height: 28px !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border-radius: 50% !important;
  flex-shrink: 0;
  margin: 0 !important;
  padding: 0 !important;
}
.cx-calc .select_js_ulli_ins .select_txt {
  font: 400 16px/20px var(--cx-font-base) !important;
  color: var(--cx-text-black) !important;
  letter-spacing: -0.32px !important;
}

/* Dropdown wrapper (.select_js_ul) — чистый белый с мягкой тенью, БЕЗ бордера.
   Отступ от select — через top: calc(100% + 6px) в блоке 6.2.2, не margin-top. */
.cx-calc .select_js_ul {
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
  padding: 8px !important;
  margin-top: 0 !important;
  overflow: hidden !important;
}
.cx-calc .select_js_ul_ins {
  max-height: 320px;
  overflow-y: auto;
  padding: 0 !important;
  background: transparent !important;
}

/* --- 5.6.1c Сброс focus outline + border (синяя рамка) для селектов --- */
.cx-calc .select_js,
.cx-calc .iselect_js,
.cx-calc .select_js_title,
.cx-calc .select_js_title_ins,
.cx-calc .xtl_selico_wrap {
  outline: none !important;
  border: 0 !important;
}
.cx-calc .select_js:focus,
.cx-calc .iselect_js:focus,
.cx-calc .select_js_title:focus,
.cx-calc .select_js_title_ins:focus,
.cx-calc .select_js:focus-visible,
.cx-calc .iselect_js:focus-visible,
.cx-calc .select_js_title:focus-visible,
.cx-calc .select_js_title_ins:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* --- 5.6.1d Скрываем поле поиска внутри dropdown (в дизайне его нет) --- */
.cx-calc .select_js_search {
  display: none !important;
}

/* --- 5.6.1e Скрываем любые native ::before/::after стрелки на selectах --- */
.cx-calc .select_js::before,
.cx-calc .select_js::after,
.cx-calc .iselect_js::before,
.cx-calc .iselect_js::after,
.cx-calc .xtl_select_wrap::before,
.cx-calc .xtl_select_wrap::after,
.cx-calc .select_js_ul::before,
.cx-calc .select_js_ul::after,
.cx-calc .select_js_ul_ins::before,
.cx-calc .select_js_ul_ins::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* --- 5.6.2 Скрыть любые старые chevron-иконки на select --- */
.cx-calc .select_js_title_ins::after,
.cx-calc .xtl_select_wrap select {
  content: none !important;
}
.cx-calc .xtl_select_wrap select.js_my_sel,
.cx-calc .xtl_select_wrap #js_left_sel,
.cx-calc .xtl_select_wrap #js_right_sel {
  display: none !important;
}

/* --- 5.7 Hero title в 1 строку на десктопе (вместо wrap) --- */
.cx-hero__title {
  font-weight: 600;
}

/* --- 5.8 Inline style="display:none" у langlist_ul работал некорректно — сбросим --- */
.cx-header__lang .langlist_ul[style*="display: none"],
.cx-header__lang .langlist_ul[style*="display:none"] {
  display: none !important;
}
.cx-header__lang .langlist_div.is-open .langlist_ul[style*="display: none"],
.cx-header__lang .langlist_div.is-open .langlist_ul[style*="display:none"] {
  display: block !important;
}

/* =========================================================================
   6. Финальная правка дропдауна калькулятора (2026-04-23)
   Плагин каскадит font-size: 0.65em на .iselect_js → .select_js_title.
   Всё принудительно возвращаем к дизайну Figma (Inter SB 20/24).
   ========================================================================= */

/* 6.1 Селект-header: принудительный font-size */
.cx-calc .iselect_js,
.cx-calc .select_js,
.cx-calc .select_js_title,
.cx-calc .select_js_title_ins {
  font-size: 20px !important;
  line-height: 24px !important;
  letter-spacing: -0.6px !important;
  color: var(--cx-text-black) !important;
  height: auto !important;
}

/* 6.2 Высота .xtl_selico_wrap — 56px как в Figma
   Убираем вертикальный padding — он ел 20px и inner-элементы не могли
   растянуться на 56px через height: 100% (резолвилось в 36). Оставляем
   только горизонтальный, вертикально центрирование работает через
   align-items: center на самом xtl_selico_wrap. */
.cx-calc .xtl_selico_wrap {
  min-height: 56px !important;
  height: 56px !important;
  padding: 0 10px 0 16px !important;
}

/* 6.2.1 Title и title_ins должны занимать ВСЮ высоту контейнера (56px),
   иначе chevron (absolute-positioned) центрируется по высоте текста (24px)
   и выглядит как обрезанный. xtl_selico_wrap — flex align-items:center,
   поэтому flex-child по умолчанию не стретчится. Форсируем через align-self. */
.cx-calc .xtl_selico_wrap > .xtl_select_wrap {
  align-self: stretch !important;
  flex: 1 1 auto !important;
}
.cx-calc .xtl_selico_wrap .xtl_select_wrap,
.cx-calc .xtl_selico_wrap .select_js,
.cx-calc .xtl_selico_wrap .iselect_js,
.cx-calc .xtl_selico_wrap .select_js_title,
.cx-calc .xtl_selico_wrap .select_js_title_ins {
  height: 100% !important;
  min-height: 100% !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  margin: 0 !important; /* плагин каскадит margin-bottom: 0.65em (~5px),
                              flex центрирует item+margin → смещение вверх */
  padding: 0 !important;
}
/* ВАЖНО: position: relative только на title/title_ins — иначе dropdown
   (абсолютный .select_js_ul) привяжется к узкому .select_js и станет уже
   чем сам select. Поэтому промежуточные обёртки — position: static. */
.cx-calc .xtl_selico_wrap .xtl_select_wrap,
.cx-calc .xtl_selico_wrap .select_js,
.cx-calc .xtl_selico_wrap .iselect_js {
  position: static !important;
}
.cx-calc .xtl_selico_wrap .select_js_title,
.cx-calc .xtl_selico_wrap .select_js_title_ins {
  position: relative !important;
}
/* Chevron — прижимаем к правому краю самого селектора, не title-а внутри */
.cx-calc
  .xtl_selico_wrap
  > .xtl_select_wrap
  > .select_js
  > .select_js_title
  .select_js_abs,
.cx-calc
  .xtl_selico_wrap
  .select_js_title
  > .select_js_title_ins
  > .select_js_abs {
  right: 0 !important; /* padding-right 10px у xtl_selico_wrap уже даёт отступ от края */
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* 6.2.2 Dropdown привязываем к xtl_selico_wrap (full width),
   а не к узкому .select_js. Отступ 6px. На мобильных плагин задаёт
   transform: translateX(-50%) в style.css media (max-width: 640px) —
   сбрасываем. */
.cx-calc .xtl_selico_wrap .select_js_ul {
  left: 0 !important;
  right: 0 !important;
  top: calc(100% + 6px) !important;
  width: auto !important;
  transform: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 6.3 Название валюты в закрытом state */
.cx-calc .xtl_selico_wrap .select_js_title_ins > .select_txt,
.cx-calc .xtl_selico_wrap .select_txt {
  font: 600 20px/24px var(--cx-font-base) !important;
  letter-spacing: -0.6px !important;
  color: var(--cx-text-black) !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 6.4 Chevron — поворот при .open */
.cx-calc .select_js.open .select_js_abs::before,
.cx-calc .iselect_js.open .select_js_abs::before,
.cx-calc .select_js_title.open .select_js_abs::before {
  transform: rotate(225deg) translate(-2px, -2px) !important;
}

/* 6.5 Dropdown wrapper — отдельная карточка ниже, только тень (без бордера).
   Отступ 6px даётся в блоке 6.2.2 через top: calc(100% + 6px). */
.cx-calc .select_js_ul {
  margin-top: 0 !important;
  padding: 8px !important;
  border-radius: 16px !important;
  border: 0 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

/* 6.6 Items — крупный текст Inter SB 20/24, иконка 32px, pill radius.
   Высота айтема ровно 56px (и у li и у ins). */
.cx-calc .select_js_ul .select_js_ulli,
.cx-calc .select_js_ulli {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  list-style: none !important;
  height: 56px !important;
  min-height: 56px !important;
  box-sizing: border-box !important;
}
.cx-calc .select_js_ul .select_js_ulli_ins,
.cx-calc .select_js_ulli_ins {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 16px !important;
  height: 56px !important;
  min-height: 56px !important;
  font: 600 20px/24px var(--cx-font-base) !important;
  letter-spacing: -0.6px !important;
  color: var(--cx-text-black) !important;
  background: transparent !important;
  border-radius: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  cursor: pointer;
  transition: background 0.12s ease;
}
.cx-calc .select_js_ulli:hover .select_js_ulli_ins,
.cx-calc .select_js_ulli_ins:hover {
  background: var(--cx-fg-grey-1) !important;
}
/* .active-выбранный item без серого фона по умолчанию */
.cx-calc .select_js_ul .select_js_ulli.active .select_js_ulli_ins {
  background: transparent !important;
}
/* …но при hover на .active — тоже серый (specificity выше чем .active-правила). */
.cx-calc .select_js_ul .select_js_ulli.active:hover .select_js_ulli_ins,
.cx-calc .select_js_ul .select_js_ulli.active .select_js_ulli_ins:hover {
  background: var(--cx-fg-grey-1) !important;
}

/* 6.7 Иконка валюты в item — 32px (как в selected) */
.cx-calc .select_js_ulli .select_ico,
.cx-calc .select_js_ulli_ins .select_ico {
  display: block !important;
  width: 32px !important;
  height: 32px !important;
  flex-shrink: 0 !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border-radius: 50% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 6.8 Текст item — 20/24 SB, чёрный */
.cx-calc .select_js_ulli .select_txt,
.cx-calc .select_js_ulli_ins .select_txt {
  font: 600 20px/24px var(--cx-font-base) !important;
  letter-spacing: -0.6px !important;
  color: var(--cx-text-black) !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 6.9 Убираем clear:both divs, которые плагин вставляет внутрь items */
.cx-calc .select_js_ulli_ins > div[style*="clear"],
.cx-calc .select_js_ulli > div[style*="clear"] {
  display: none !important;
}

/* 6.10 Вертикальный скролл внутри дропдауна + гарантированное отсутствие
   разделителей между айтемами. Плагин может вставлять border-bottom
   или псевдо-hr — перекрываем всё. */
.cx-calc .select_js_ul {
  max-height: 360px !important;
  overflow: hidden !important;
  padding: 8px !important;
}
.cx-calc .select_js_ul_ins {
  max-height: 344px !important; /* 360 - 8*2 = 344 под внутренний паддинг ul */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important; /* плагинный каскад ставит 0.65em = ~10px — убираем */
  display: block !important;
  /* кастомный тонкий скроллбар */
  scrollbar-width: thin;
  scrollbar-color: var(--cx-fg-grey-3) transparent;
}
.cx-calc .select_js_ul {
  gap: 0 !important;
}
.cx-calc .select_js_ulli {
  gap: 0 !important;
}
.cx-calc .select_js_ul_ins::-webkit-scrollbar {
  width: 6px;
}
.cx-calc .select_js_ul_ins::-webkit-scrollbar-track {
  background: transparent;
}
.cx-calc .select_js_ul_ins::-webkit-scrollbar-thumb {
  background: var(--cx-fg-grey-3);
  border-radius: 100px;
}
.cx-calc .select_js_ul_ins::-webkit-scrollbar-thumb:hover {
  background: var(--cx-fg-grey-5);
}

/* Никаких border/hr между айтемами */
.cx-calc .select_js_ulli,
.cx-calc .select_js_ulli_ins,
.cx-calc .select_js_ul_ins > *,
.cx-calc .select_js_ul > * {
  border-bottom: 0 !important;
  border-top: 0 !important;
  box-shadow: none !important;
}
.cx-calc .select_js_ulli::before,
.cx-calc .select_js_ulli::after,
.cx-calc .select_js_ulli_ins::before,
.cx-calc .select_js_ulli_ins::after {
  content: none !important;
  border: 0 !important;
  background: none !important;
}