/**
 * Theme Name: Astra Child – Vector Lex
 * Description: Стилевой файл для сайта vectorlex.ru
 * Author: Brainstorm Force (child modifications by VL)
 * Version: 1.4
 * Text Domain: astra-child
 * Template: astra
 */

/* === Vector Lex: Dark Elegant (2026) === */

:root{
  --vl-bg: #0D0D0D;

  --vl-surface:   #121212;
  --vl-surface-2: #161616;
  --vl-border: rgba(255,255,255,.08);

  --vl-text:  #E8E8E8;
  --vl-soft:  rgba(255,255,255,.72);
  --vl-white: #FFFFFF;

--vl-font-ui: 'PT Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
--vl-font-display: 'Playfair Display', serif;
--vl-font-copy: 'PT Serif', serif;
}

/* База */
html, body{
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* На всякий случай фиксируем фон и на html, и на body */
html{
  background: var(--vl-bg);
}

body{
  background: var(--vl-bg);
  color: var(--vl-text);
  font-family: var(--vl-font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ВАЖНО: фон задаём оболочке (Astra часто кладёт белый именно сюда) */
.site,
#page{
  background: var(--vl-bg) !important;
  background-color: var(--vl-bg) !important;
    overflow-x: hidden; /* <<< добавь вот это */
}

/* Внутренние контейнеры делаем прозрачными, чтобы был единый фон */
.site-content,
#content,
#primary,
.ast-container,
.site-header,
.main-header-bar,
.site-footer{
  background: transparent !important;
  background-color: transparent !important;
}

/* На главной убираем лишние отступы контейнера Astra */
body.page-template-page-home-php #content .ast-container{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}






/* Меню: легче по весу + больше воздуха между буквами */
.ast-builder-menu-1 .main-header-menu > li > a,
.main-header-menu a,
.ast-header-menu a{
  font-family: var(--vl-font-ui);
  font-weight: 500;        /* было 600 — стало легче */
  letter-spacing: 0.02em;  /* чтобы не слипалось */
  line-height: 1.2;
  font-size: 16px;         /* можно 14–16 по вкусу */
}

/* Шапка прозрачная (если тема где-то подкрашивает) */
.main-header-bar,
.ast-primary-header-bar{
  background: transparent !important;
  box-shadow: none !important;
}


/* Блок входа/регистрации в шапке */
.vl-header-auth{
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

/* Кнопка "Войти" (матовая) */
.vl-header-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 18px;
  border-radius: 14px;

  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.14);

  color: rgba(255,255,255,.88);
letter-spacing: 0.006em;
  text-decoration: none;

  font-family: var(--vl-font-ui);
  font-weight: 600;
  font-size: 15px;

  transition:
    background .22s ease,
    border-color .22s ease,
    color .22s ease,
    box-shadow .22s ease,
    transform .22s cubic-bezier(.2,.8,.2,1);
}

.vl-header-btn:hover{
  background: #F2F2F2;
  border-color: #F2F2F2;
  color: #0D0D0D;
  transform: translateY(-0.75px);
  box-shadow: 0 12px 30px rgba(0,0,0,.44);
}

/* Ссылка "Регистрация" */
.vl-header-link{
  color: rgba(255,255,255,.70);
  text-decoration: none;

  font-family: var(--vl-font-ui);
  font-weight: 500;        /* было 600 — стало легче */
  letter-spacing: 0.02em;  /* чтобы не слипалось */
  line-height: 1.2;
  font-size: 16px;         /* можно 14–16 по вкусу */

  transition: color .18s ease;
}

.vl-header-link:hover{
  color: #FFFFFF;
}

/* AUTH page layout (slug: /auth/) */
.page-auth .vl-auth-page{
  min-height: calc(100vh - 120px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 140px 18px 90px;
}

.page-auth .vl-auth-page__dialog{
  width: 100%;
  max-width: 520px;
}

.page-auth .vl-auth__panel{
  transition: opacity 0.3s ease, transform 0.3s ease;
}




/* ===== Fullscreen Mobile Menu (VL) ===== */
.vl-mnav{
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #0D0D0D; /* чёрный, без прозрачности */
  display: none;
}

body.vl-mnav-open{
  overflow: hidden;
}

body.vl-mnav-open .vl-mnav{
  display: block;
}

.vl-mnav__panel{
  height: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 18px 16px 28px;
  display: flex;
  flex-direction: column;
}

.vl-mnav__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vl-mnav__brand img{
  height: 26px;
  width: auto;
  display: block;
}

.vl-mnav__brand span{
  color: rgba(255,255,255,.92);
  font-family: var(--vl-font-ui);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.vl-mnav__close{
  background: transparent;
  border: 0;
  color: rgba(255,255,255,.85);
  font-size: 26px;
  line-height: 1;
  padding: 10px;
}

/* Войти / Регистрация — по центру */
.vl-mnav__auth{
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}

.vl-mnav__cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 18px;
  border-radius: 16px;

  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.14);

  color: rgba(255,255,255,.92);
  text-decoration: none;
  font-family: var(--vl-font-ui);
  font-weight: 700;
  letter-spacing: 0.015em;
}

.vl-mnav__login{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;

  color: rgba(255,255,255,.70);
  text-decoration: none;
  font-family: var(--vl-font-ui);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Меню — слева */
.vl-mnav__nav{
  margin-top: 18px;
}

.vl-mnav__list{
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.vl-mnav__list > li{
  border-top: 1px solid rgba(255,255,255,.08);
}

.vl-mnav__list > li:last-child{
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Пункты меню: текст слева, одна стрелка справа */
.vl-mnav__list > li > a{
  display: flex;
  align-items: center;
  justify-content: flex-start; /* НЕ space-between */
  gap: 12px;

  padding: 16px 4px;
  width: 100%;

  color: rgba(255,255,255,.86);
  text-decoration: none;
  font-family: var(--vl-font-ui);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Стрелка справа */
.vl-mnav__list > li > a::after{
  content: "›";
  margin-left: auto;
  color: rgba(255,255,255,.40);
  font-size: 18px;
}

/* Убираем левую “стрелку/раскрытие” Astra и любые toggle-кнопки */
.vl-mnav__list .ast-menu-toggle,
.vl-mnav__list .ast-submenu-toggle,
.vl-mnav__list .dropdown-toggle,
.vl-mnav__list button{
  display: none !important;
}

/* Подменю скрываем (чтобы не было мусора) */
.vl-mnav__list .sub-menu,
.vl-mnav__list ul{
  display: none !important;
}

/* Убираем левую стрелку/иконку перед пунктами (Astra) */
.vl-mnav__list > li > a .ast-icon,
.vl-mnav__list > li > a .ast-iconset,
.vl-mnav__list > li > a .menu-link-icon,
.vl-mnav__list > li > a i,
.vl-mnav__list > li > a svg{
  display: none !important;
}

/* На всякий случай: если Astra рисует стрелку через ::before */
.vl-mnav__list > li > a::before{
  content: none !important;
  display: none !important;
}






/* ===== HERO (Главная) ===== */
.vl-home{
  width: 100%;
}

.vl-hero{
  position: relative;
  padding-top: clamp(78px, 10vh, 150px);
  padding-bottom: clamp(56px, 9vh, 120px);
}

/* Мягкий общий ореол на фоне */
.vl-hero::before{
  content: "";
  position: absolute;
  left: 50%;
  top: -160px;
  width: min(1100px, 140vw);
  height: 720px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255,255,255,.10), rgba(255,255,255,0) 70%);
  pointer-events: none;
  opacity: .26;
}

.vl-hero__inner{
  position: relative;
grid-template-areas: "copy media";
  max-width: 1200px;
  margin: 0 auto;
  padding-left: clamp(18px, 4vw, 44px);
  padding-right: clamp(18px, 4vw, 44px);
min-height: 640px;
  display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 0;
  align-items: center;
}

/* ВАЖНО: делаем “единый блок” — управляем отступами через gap, а не margin */
.vl-hero__copy{
  max-width: 760px;
  grid-area: copy;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: -60px;
}

/* Заголовок — единый градиент на обе строки + letter-spacing + уменьшенный размер */
.vl-hero__title{
  margin: 0;
  font-family: var(--vl-font-display);
    margin-top: -40px;
  font-weight: 700;

  /* уменьшаем, чтобы строки влезали ровно */
  font-size: clamp(36px, 3.9vw, 66px);

  /* чтобы Playfair не “резался” и выглядел цельно */
  line-height: 1.14;

  /* межбуквенный интервал, чтобы не слипалось */
  letter-spacing: 0.015em;

  /* градиент от верхнего левого к нижнему правому (на обе строки сразу) */
  background: linear-gradient(135deg, #F6F6F6 0%, #DCDCDC 45%, #AFAFAF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Гарантируем, что каждая строка заголовка не развалится на десктопе */
.vl-hero__title-line1,
.vl-hero__title-line2{
  white-space: nowrap;
}

.vl-hero__title-line2{
  display: inline-block;
  padding-bottom: 0.10em; /* даёт “воздух” снизу, чтобы буквы не резались */
}

/* Подзаголовок — без margin, т.к. gap управляет расстоянием */
.vl-hero__subtitle{
  margin: 0;
  font-family: var(--vl-font-copy);
  font-weight: 400;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.55;
  color: var(--vl-soft);
  letter-spacing: 0.005em;
  max-width: 680px;
}



/* Кнопка + ссылка под подзаголовком */
.vl-hero__actions{
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 28px;
}

/* Кнопка (вариант 2 — темнее, матовее) */
.vl-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 14px 28px;
  border-radius: 14px;

  background: rgba(255,255,255,.045);      /* темнее */
  border: 1px solid rgba(255,255,255,.14); /* аккуратная рамка */

  box-shadow:

    inset 0 1px 0 rgba(255,255,255,.10);   /* тонкая “линия света” сверху */
  color: rgba(255,255,255,.92);   /* было .88 — станет читаемее */

  text-decoration: none;

  font-family: var(--vl-font-ui);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.015em;        /* было 0.01 / 0.006 — меньше “слипаний” */

  transition:
    background .22s ease,
    border-color .22s ease,
    color .22s ease,
    box-shadow .22s ease,
    transform .22s cubic-bezier(.2,.8,.2,1);
}

.vl-btn:hover{
background: #F2F2F2;  /* мягкий белый */
border-color: #F2F2F2;
  color: #0D0D0D;
  transform: translateY(-0.75px); /* мягче, чем -1px */

  box-shadow:
    0 14px 36px rgba(0,0,0,.48);
}


/* Ссылка “Журнал” */
.vl-link{
  display: inline-flex;
  align-items: center;

  color: rgba(255,255,255,.70);
  text-decoration: none;

  font-family: var(--vl-font-ui); /* PT Sans */
  font-weight: 500;
    letter-spacing: 0.01em;
  font-size: 17px;

  transition: color .18s ease;
}

.vl-link:hover{
  color: #FFFFFF;
}



/* Правая область под 3D: без фона/рамки/скругления, без обрезки */
.vl-hero__media{
  width: 100%;
height: clamp(640px, 78vh, 950px);
grid-area: media;

  margin-left: auto;
  justify-self: end;

  position: relative;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;

  isolation: isolate;
}


.vl-hero__media iframe,
.vl-hero__media canvas,
.vl-hero__media video,
.vl-hero__media model-viewer,
.vl-hero__media spline-viewer{
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  position: relative;
  z-index: 1;
}



/* =========================================
   Mobile / Tablet (Hero + Header)
   ========================================= */

@media (max-width: 920px){

  /* уменьшаем пустоту первого экрана */
  .vl-hero{
    padding-top: 32px;
    padding-bottom: 56px;
  }

  /* Сетка: куб сверху, текст снизу */
  .vl-hero__inner{
    min-height: 0;                /* ВАЖНО: убираем 640px на мобилке */
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "copy";
    row-gap: 18px;
    justify-items: center;
    align-items: start;

    padding-left: 16px;
    padding-right: 16px;
  }

  /* Блок под 3D: квадрат, без обрезки */
  .vl-hero__media{
    justify-self: center;
    margin: 0 auto;

    width: 100%;
    max-width: 420px;

    aspect-ratio: 1 / 1;
    height: auto;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: visible;            /* ВАЖНО: не режем сцену */
  }

  /* На мобилке/планшете НИКАКИХ transform */
  .vl-hero__media spline-viewer{
    width: 100%;
    height: 100%;
    display: block;

    transform: none;
    transform-origin: 50% 50%;
  }

  /* Текст по центру и без отрицательных отступов */
  .vl-hero__copy{
    margin-top: 0 !important;     /* перебиваем -60px */
    text-align: center;
    align-items: center;
    max-width: 560px;
  }

  .vl-hero__title{
    margin-top: 0 !important;     /* перебиваем -40px */
    font-size: clamp(30px, 7.6vw, 46px);
    line-height: 1.14;
    letter-spacing: 0.01em;
  }

  /* подпись */
  .vl-hero__subtitle{
    font-size: clamp(15px, 3.8vw, 18px);
    line-height: 1.6;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Кнопки вертикально */
  .vl-hero__actions{
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
  }

  .vl-btn{
    width: min(90vw, 320px);
    justify-content: center;
  }

  .vl-link{
    justify-content: center;
  }
}

@media (max-width: 520px){

  .vl-hero__inner{
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Чуть меньше 3D-блок на телефоне */
  .vl-hero__media{
    max-width: 340px;
  }

  .vl-hero__title{
    font-size: clamp(24px, 8.6vw, 34px);
  }

  /* Шапка */
  .vl-header-auth{ gap: 8px; }
  .vl-header-btn{
    padding: 8px 14px;
    font-size: 14px;
    border-radius: 12px;
  }
  .vl-header-link{ font-size: 14px; }
}

/* Десктопный сдвиг 3D */
@media (min-width: 921px){
  .vl-hero__media spline-viewer{
    transform: translateY(-48px);
    transform-origin: 50% 50%;
  }
}





/* =========================================================
   SECTION 2 — Trust / Universities (marquee + mask fade)
   ========================================================= */

.vl-trust{
  background: transparent;
  padding: clamp(44px, 6vw, 84px) 0;

  position: relative;
  isolation: isolate;

  /* Top accent (line + glow) */
  --vl-trust-accent-w: min(1180px, 92vw);
  --vl-trust-glow-h: 150px;

  /* Logos / marquee */
  --vl-uni-box-w: clamp(180px, 13vw, 260px);
  --vl-uni-box-h: clamp(70px, 6.2vw, 110px);
  --vl-uni-gap:   clamp(12px, 1.6vw, 18px);
  --vl-uni-speed: 28s;
}

.vl-trust__inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 28px);
  text-align: center;
}

/* Заголовок (2 строки через span) */
.vl-trust__title{
  margin: 0;
  font-family: var(--vl-font-copy);
  font-weight: 400;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.55;
  color: var(--vl-soft);
  letter-spacing: 0.005em;

  /* чтобы по центру выглядело как аккуратный параграф */
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.vl-trust__title-line{
  display: block;
}

/* На всякий случай прячем старую “статику” */
.vl-uni-static{
  display: none !important;
}

.vl-uni-marquee{
  display: block !important;
margin-top: clamp(14px, 2.2vw, 24px) !important;
  padding: 2px 0; /* запас по вертикали для подъёма */
  overflow: hidden;
  position: relative;

  /* НАСТРОЙКИ “РАСТВОРЕНИЯ” (в процентах ширины контейнера):
     cut  — сколько по краям полностью пусто (ничего не видно)
     s1/s2 — промежуточные ступени (кривая растворения)
     full — где начинается 100% видимость (чем больше, тем раньше начнёт растворяться) */
  --vl-fade-cut: 7%;
  --vl-fade-s1:  14%;
  --vl-fade-s2:  22%;
  --vl-fade-full: 34%;

  -webkit-mask-image: linear-gradient(to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) var(--vl-fade-cut),
    rgba(0,0,0,0.10) var(--vl-fade-s1),
    rgba(0,0,0,0.55) var(--vl-fade-s2),
    rgba(0,0,0,1) var(--vl-fade-full),
    rgba(0,0,0,1) calc(100% - var(--vl-fade-full)),
    rgba(0,0,0,0.55) calc(100% - var(--vl-fade-s2)),
    rgba(0,0,0,0.10) calc(100% - var(--vl-fade-s1)),
    rgba(0,0,0,0) calc(100% - var(--vl-fade-cut)),
    rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) var(--vl-fade-cut),
    rgba(0,0,0,0.10) var(--vl-fade-s1),
    rgba(0,0,0,0.55) var(--vl-fade-s2),
    rgba(0,0,0,1) var(--vl-fade-full),
    rgba(0,0,0,1) calc(100% - var(--vl-fade-full)),
    rgba(0,0,0,0.55) calc(100% - var(--vl-fade-s2)),
    rgba(0,0,0,0.10) calc(100% - var(--vl-fade-s1)),
    rgba(0,0,0,0) calc(100% - var(--vl-fade-cut)),
    rgba(0,0,0,0) 100%);

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* Отключаем любые старые “шторки”, если они остались выше в CSS */
.vl-uni-marquee::before,
.vl-uni-marquee::after{
  content: none !important;
}

/* Трек: две одинаковые группы, двигаем на -50% */
.vl-uni-marquee__track{
  display: flex;
  width: max-content;
  will-change: transform;
  gap: 0 !important; /* важно для бесшовности */
  animation: vl-uni-scroll var(--vl-uni-speed) linear infinite;
}

/* Gap задаём внутри групп — так -50% совпадает идеально */
.vl-uni-marquee__group{
  display: flex;
  align-items: center;
  gap: var(--vl-uni-gap);
  padding-right: var(--vl-uni-gap);
}

/* Одинаковые “боксы” под логотипы */
.vl-uni-item{
  flex: 0 0 auto;
  width:  var(--vl-uni-box-w);
  height: var(--vl-uni-box-h);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Лого: одинаковый размер + белые через фильтр */
.vl-uni-item img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  display: block;

  /* Белый цвет для чёрных контуров PNG/SVG */
  filter: brightness(0) invert(1) !important;

  opacity: 0.94;
  transition: opacity .18s ease, transform .18s ease;
}

@media (hover:hover){
  .vl-uni-item img:hover{
    opacity: 1;
    transform: translateY(-1px);
  }
}

@keyframes vl-uni-scroll{
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); }
}

@media (prefers-reduced-motion: reduce){
  .vl-uni-marquee__track{ animation: none !important; }
}

@media (max-width: 520px){
  .vl-trust{
    --vl-uni-box-w: 160px;
    --vl-uni-box-h: 74px;
    --vl-uni-gap: 14px;
    --vl-uni-speed: 22s;
  }

  /* На мобиле делаем растворение чуть “короче”, чтобы не съедало ленту */
  .vl-uni-marquee{
    --vl-fade-cut: 6%;
    --vl-fade-s1:  12%;
    --vl-fade-s2:  20%;
    --vl-fade-full: 30%;
  }
}

/* ===== Desktop: full-bleed marquee (wider stripe) ===== */
@media (min-width: 1024px){
  .vl-trust{ overflow-x: clip; }

  /* ОТ ЭТА СТРОКА ЗАМЕДЛЯЕТ ТОЛЬКО ДЕСКТОП */
  .vl-trust{ --vl-uni-speed: 44s; }

  .vl-uni-marquee{
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}

@media (hover:hover){
  .vl-uni-marquee:hover .vl-uni-marquee__track{
    animation-play-state: paused;
  }
}

/* Очень мягкое свечение сверху — только из центра, без “жёстких краёв” */
.vl-trust::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  transform: translateX(-50%);
  width: var(--vl-trust-accent-w);
  height: var(--vl-trust-glow-h);
  pointer-events:none;
  z-index:0;

  /* мягкая “дымка” */
  background: radial-gradient(
    ellipse 60% 120% at 50% 0%,
rgba(255,255,255,0.05) 0%,
rgba(255,255,255,0.028) 28%,
rgba(255,255,255,0.010) 52%,
    rgba(255,255,255,0) 78%
  );
}

/* Тонкая линия — без свечения (без box-shadow и без ауры) */
.vl-trust::after{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  transform: translateX(-50%);
  width: var(--vl-trust-accent-w);
  height: 1px;
  pointer-events:none;
  z-index:0;

  /* центр чуть заметнее, к краям уходит в ноль */
  background: linear-gradient(to right,
  rgba(255,255,255,0) 0%,
  rgba(255,255,255,0.06) 22%,
  rgba(255,255,255,0.12) 50%,
  rgba(255,255,255,0.06) 78%,
  rgba(255,255,255,0) 100%
);
} 

/* Контент всегда выше свечения */
.vl-trust__inner{
  position: relative;
  z-index: 1;
}






/* =========================================================
   Universities tooltip — FIX for mask clipping
   ========================================================= */

/* 1) Даем место сверху внутри ленты (иначе tooltip режется mask-image) */
.vl-uni-marquee{
  padding-top: 56px !important;   /* было 72 */
  padding-bottom: 8px !important; /* было 10 */
}

/* 2) Опускаем логотипы вниз, чтобы сверху был “воздух” */
.vl-uni-marquee__group{
  align-items: flex-end !important;
}

/* 3) Якорь для tooltip */
.vl-uni-item{
  position: relative;
}

/* Tooltip делаем для “десктопных” указателей (мышь/трекпад) */
@media (pointer: fine){

  .vl-uni-item[data-uni-label]::after{
    content: attr(data-uni-label);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 12px);
    transform: translate(-50%, 10px);

    padding: 8px 10px;
    border-radius: 999px;

    font-family: var(--vl-font-ui);
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;

    color: rgba(255,255,255,0.92);
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(10px);

    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
    z-index: 50;
  }

  .vl-uni-item[data-uni-label]::before{
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    transform: translate(-50%, 10px) rotate(45deg);

    width: 8px;
    height: 8px;

    background: rgba(0,0,0,0.55);
    border-right: 1px solid rgba(255,255,255,0.10);
    border-bottom: 1px solid rgba(255,255,255,0.10);

    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
    z-index: 49;
  }

  .vl-uni-item[data-uni-label]:hover::after{
    opacity: 1;
    transform: translate(-50%, 0);
  }
  .vl-uni-item[data-uni-label]:hover::before{
    opacity: 1;
    transform: translate(-50%, 0) rotate(45deg);
  }

  .vl-uni-item[data-uni-label]:focus-visible::after{
    opacity: 1;
    transform: translate(-50%, 0);
  }
  .vl-uni-item[data-uni-label]:focus-visible::before{
    opacity: 1;
    transform: translate(-50%, 0) rotate(45deg);
  }
}

/* Фокус для клавиатуры */
.vl-uni-item:focus-visible{
  outline: 2px solid rgba(255,255,255,0.16);
  outline-offset: 6px;
  border-radius: 14px;
}

/* Чтобы ничего не подрезалось — убираем подъём логотипов */
@media (hover:hover){
  .vl-uni-item img:hover{
    transform: none !important;
  }
}



/* Заголовок секции: 1 строка на десктопе */
@media (min-width: 1024px){
  .vl-trust__title{
    max-width: none;
    font-size: clamp(18px, 1.8vw, 22px);
    line-height: 1.45;
  }
  .vl-trust__title-line{
    display: inline;
  }
  .vl-trust__title-line + .vl-trust__title-line::before{
    content: " ";
  }
}















/* =========================================================
   SECTION — Advantages (tabs + one panel)
   ========================================================= */

.vl-adv{
  padding: clamp(54px, 7vw, 100px) 0;
}

.vl-adv__inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 28px);
}

.vl-adv__h{
  margin: 0 0 16px 0;      /* чуть плотнее к вкладкам */
  padding-bottom: 0.14em;  /* чтобы низ Playfair не обрезался */

  font-family: var(--vl-font-display);
  font-weight: 700;
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.01em;

  background: linear-gradient(135deg, #F6F6F6 0%, #DCDCDC 45%, #AFAFAF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* Tabs row */
.vl-adv__tabs{
  display: flex;
  gap: 10px;
  align-items: center;

  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 8px;
  margin-bottom: 14px;
}
.vl-adv__tabs::-webkit-scrollbar{ display:none; }

.vl-adv__tab{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 10px 14px;
  border-radius: 14px;

  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.10);

  color: rgba(255,255,255,.78);
  font-family: var(--vl-font-ui);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;

  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.vl-adv__tab:hover{
  color: rgba(255,255,255,.92);
  border-color: rgba(255,255,255,.16);
  transform: translateY(-1px);
}

.vl-adv__tab.is-active{
  color: rgba(255,255,255,.96);
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.08) 0%,
    rgba(255,255,255,.045) 100%
  );
  border-color: rgba(255,255,255,.26);
  font-weight: 600;
}  


.vl-adv__tab:focus-visible{
  outline: 2px solid rgba(255,255,255,.16);
  outline-offset: 4px;
}

/* Icon placeholder (позже заменишь на свои SVG) */
.vl-adv__ico{
  width: 20px;
  height: 20px;
  flex: 0 0 auto;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 0;
  background: transparent;
  border-radius: 0;
  line-height: 0;
}

.vl-adv__icoImg{
  width: 20px;
  height: 20px;
  display: block;
  opacity: .92;
}
/* Panel */
.vl-adv__panelWrap{
  position: relative;
}

.vl-adv__panel{
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  padding: clamp(18px, 2.4vw, 28px);

  min-height: 180px;
}

.vl-adv__panel[hidden]{ display:none !important; }

.vl-adv__panel.is-active{
  animation: vlAdvPop .22s cubic-bezier(.2,.8,.2,1);
}

@keyframes vlAdvPop{
  from{ opacity: 0; transform: translateY(6px); }
  to{ opacity: 1; transform: translateY(0); }
}

.vl-adv__panelTitle{
  font-family: var(--vl-font-copy);
  font-weight: 700;
  color: rgba(255,255,255,.92);

  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.35;
  letter-spacing: 0.005em;

  margin-bottom: 10px;
}

.vl-adv__panelText{
  margin: 0;
  font-family: var(--vl-font-copy);
  font-weight: 400;
  color: var(--vl-soft);
    font-size: clamp(16px, 1.35vw, 18px);
  line-height: 1.6;
  max-width: 70ch;
}

.vl-adv__chips{
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.vl-chip{
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 999px;

  font-family: var(--vl-font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;

  color: rgba(255,255,255,.86);
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.12);
}


/* ==============================
   Advantages: silver tone icons
   ============================== */

/* 1) Базовая “серебристость” (все иконки приводим к одной тональности) */
.vl-adv__icoImg{
  /* делаем всё в серый + чуть подсвечиваем */
  filter: grayscale(1) saturate(0) brightness(1.18) contrast(1.05);
  opacity: .82;
}

/* 2) На активной вкладке — немного ярче */
.vl-adv__tab.is-active .vl-adv__icoImg{
  filter: grayscale(1) saturate(0) brightness(1.32) contrast(1.08);
  opacity: .95;
}

/* 3) На hover — мягкий “подсвет” (по желанию) */
@media (hover:hover){
  .vl-adv__tab:hover .vl-adv__icoImg{
    opacity: .92;
  }
}


/* =========================================================
   Advantages: panel split + proof widget (Uniq demo)
   ========================================================= */

.vl-adv__panelGrid{
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(280px, 360px);
  gap: 26px;
  align-items: center;
}

.vl-adv__panelCol--demo{
  display: flex;
  justify-content: flex-end;
}

/* На мобилке — в колонку */
@media (max-width: 920px){
  .vl-adv__panelGrid{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .vl-adv__panelCol--demo{
    justify-content: flex-start;
  }
}

/* ===== Proof widget ===== */
.vl-proof{
  width: 100%;
  max-width: 360px;

  border-radius: 18px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);

  padding: 14px;
}

.vl-proof__head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.vl-proof__brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.vl-proof__mark{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.65), rgba(255,255,255,.12));
  box-shadow: 0 0 18px rgba(255,255,255,.10);
}

.vl-proof__brandName{
  font-family: var(--vl-font-ui);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,.86);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vl-proof__score{
  text-align: right;
  line-height: 1.1;
}

.vl-proof__scoreLabel{
  display: block;
  font-family: var(--vl-font-ui);
  font-size: 11px;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,.55);
}

.vl-proof__scoreVal{
  display: block;
  font-family: var(--vl-font-ui);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,.90);
}

.vl-proof__card{
  border-radius: 16px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
  padding: 12px;
}

/* upload field */
.vl-proof__drop{
  display: flex;
  align-items: center;
  gap: 10px;

  border-radius: 14px;
  border: 1px dashed rgba(255,255,255,.16);
  background: rgba(255,255,255,.02);

  padding: 10px 12px;
  color: rgba(255,255,255,.62);

  font-family: var(--vl-font-ui);
  font-size: 12px;
}

.vl-proof__dropIcon{
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;


}

.vl-proof__dropIcon::before{
  content:"";
  width: 14px;
  height: 14px;
  display:block;

  background: rgba(255,255,255,.78);

  -webkit-mask: url("assets/img/icons/advantages/upload.svg") center / contain no-repeat;
  mask: url("assets/img/icons/advantages/upload.svg") center / contain no-repeat;
}

.vl-proof__file{
  display: flex;
  align-items: center;
  gap: 10px;

  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  padding: 10px 12px;

  margin-top: 10px;
}

.vl-proof__fileIcon{
  width: 22px;
  height: 22px;
  display: block;

  border: 0;
  background: transparent;
  border-radius: 0;

  opacity: .92;
}

.vl-proof__fileName{
  font-family: var(--vl-font-ui);
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.86);
  line-height: 1.1;
}

.vl-proof__fileSub{
  font-family: var(--vl-font-ui);
  font-size: 11px;
  color: rgba(255,255,255,.55);
  margin-top: 2px;
}

.vl-proof__bar{
  height: 7px;
  margin-top: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}

.vl-proof__barFill{
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.70), rgba(255,255,255,.22));
}

.vl-proof__foot{
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  font-family: var(--vl-font-ui);
  font-size: 12px;
  color: rgba(255,255,255,.60);
}

.vl-proof__ok{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.88);
  font-size: 12px;
  line-height: 1;
}

/* ===== Animation states ===== */
.vl-proof .vl-proof__file,
.vl-proof .vl-proof__bar,
.vl-proof .vl-proof__status,
.vl-proof .vl-proof__pct{
  opacity: 0;
  transform: translateY(6px);
}

.vl-proof .vl-proof__status.is-b,
.vl-proof .vl-proof__pct.is-b{
  display: none;
}

/* run: оставляем верхний статус-блок видимым (не убираем) */
.vl-proof.is-run .vl-proof__drop{
  opacity: 1;
  transform: none;
  animation: none;
}

/* Появление файла */
.vl-proof.is-run .vl-proof__file{
  animation: vlProofIn .40s ease forwards;
  animation-delay: .50s;
}

/* Появление полосы */
.vl-proof.is-run .vl-proof__bar{
  animation: vlProofIn .40s ease forwards;
  animation-delay: .70s;
}

/* Заполнение полосы — СЛЕГКА медленнее (было 2.40s → стало 3.00s) */
.vl-proof.is-run .vl-proof__barFill{
  animation: vlProofFill 3.00s linear forwards;
  animation-delay: .85s;
}

/* Статус “Проверка документа…” (слева) исчезает к концу заполнения */
.vl-proof.is-run .vl-proof__status.is-a{
  animation: vlProofStatusA 3.00s ease forwards;
  animation-delay: .85s;
}

/* Проценты справа (is-a) — просто появляются и остаются (цифры обновляет JS) */
.vl-proof.is-run .vl-proof__pct.is-a{
  animation: vlProofIn .35s ease forwards;
  animation-delay: .85s;
}

/* Финальный статус “Документ проверен” появляется после заполнения:
   0.85 + 3.00 = 3.85s */
.vl-proof.is-run .vl-proof__status.is-b{
  display: inline;
  animation: vlProofIn .40s ease forwards;
  animation-delay: 3.85s;
}

/* pct.is-b нам больше не нужен — оставляем скрытым всегда */

/* keyframes */
@keyframes vlProofIn{
  from{ opacity: 0; transform: translateY(6px); }
  to{ opacity: 1; transform: translateY(0); }
}

@keyframes vlProofFill{
  from{ width: 0%; }
  to{ width: 100%; }
}

@keyframes vlProofStatusA{
  0%{ opacity: 0; transform: translateY(6px); }
  15%{ opacity: 1; transform: translateY(0); }
  85%{ opacity: 1; }
  100%{ opacity: 0; transform: translateY(-2px); }
}

/* если пользователь просит меньше анимации — показываем финальное состояние */
@media (prefers-reduced-motion: reduce){
  .vl-proof__file,
  .vl-proof__bar{
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .vl-proof__barFill{
    width: 100% !important;
    animation: none !important;
  }

  .vl-proof__status.is-a{ display: none !important; }
  .vl-proof__status.is-b{
    display: inline !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  /* Для reduced-motion показываем статичные 100% через is-b */
  .vl-proof__pct.is-a{ display: none !important; }
  .vl-proof__pct.is-b{
    display: inline !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}


@media (min-width: 921px){
  .vl-adv__panelCol--text{
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 240px; /* можно 220–280 по вкусу */
  }
}


/* Advantages: equal tabs on desktop (cleaner look) */
@media (min-width: 1024px){
  .vl-adv__tabs{
    overflow-x: visible;      /* на десктопе скролл не нужен */
    padding-bottom: 0;
  }

  .vl-adv__tab{
    flex: 1 1 0;              /* все вкладки одной ширины */
    justify-content: center;  /* иконка+текст по центру */
    min-width: 0;             /* важно, чтобы длинные слова не ломали flex */
  }

  .vl-adv__label{
    white-space: nowrap;      /* чтобы не переносило “Конфиденциальность” */
  }
}






/* =========================================================
   Timeline widget (Оперативность) — dots + subline
   ========================================================= */

.vl-tl{
  width: 100%;
  max-width: 360px;

  border-radius: 18px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);

  padding: 14px;

  /* мягкий “техно-синий” только для активного этапа */
  --vl-tl-accent: rgba(120,170,255,.86);
  --vl-tl-accent-glow: rgba(120,170,255,.20);
}

/* header */
.vl-tl__head{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  margin-bottom: 10px;
}

.vl-tl__headBlock{ min-width: 0; }
.vl-tl__headBlock--right{ text-align: right; }

.vl-tl__headLabel{
  font-family: var(--vl-font-ui);
  font-size: 11px;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,.55);
}

.vl-tl__headValue{
  font-family: var(--vl-font-ui);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,.90);
  margin-top: 2px;
}

/* bar */
.vl-tl__bar{
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}

.vl-tl__barFill{
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--vl-tl-accent), rgba(255,255,255,.22));

  /* прогресс двигает JS → без transition */
  transition: none;
}

/* steps */
.vl-tl__steps{
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vl-tl__step{
  display: flex;
  align-items: flex-start; /* важно: подстрока ниже */
  gap: 10px;

  font-family: var(--vl-font-ui);
  font-size: 13px;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,.66);
}

.vl-tl__stepBody{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.vl-tl__text{
  line-height: 1.2;
}

/* Подстрока: показываем только у активного этапа */
.vl-tl__sub{
  font-family: var(--vl-font-ui);
  font-size: 12px;
  line-height: 1.25;
  color: rgba(255,255,255,.52);

  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(4px);

  transition:
    max-height .26s ease,
    opacity .22s ease,
    transform .22s ease;
}

.vl-tl__step.is-active .vl-tl__sub{
  max-height: 44px;  /* хватает на 1–2 строки */
  opacity: 1;
  transform: translateY(0);
}

/* DOT (default): пустой контур */
.vl-tl__icon{
  width: 12px;
  height: 12px;
  margin-top: 2px; /* чуть ровнее по первой строке */

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;

  box-shadow: none;
}

/* ACTIVE: горит мягким синим */
.vl-tl__step.is-active{
  color: rgba(255,255,255,.90);
}
.vl-tl__step.is-active .vl-tl__icon{
  border-color: var(--vl-tl-accent);
  background: var(--vl-tl-accent);
  box-shadow: 0 0 18px var(--vl-tl-accent-glow);
}

/* DONE: спокойная “серебряная” точка */
.vl-tl__step.is-done{
  color: rgba(255,255,255,.78);
}
.vl-tl__step.is-done .vl-tl__icon{
  border-color: rgba(255,255,255,.34);
  background: rgba(255,255,255,.58);
  box-shadow: none;
}

/* защита от старых правил с галочкой */
.vl-tl__step .vl-tl__icon::after{
  content: none !important;
}

/* footer */
.vl-tl__foot{
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;

  font-family: var(--vl-font-ui);
  font-size: 12px;
  color: rgba(255,255,255,.60);
}

/* visually hidden (для доступности, без визуального шума) */
.vl-sr-only{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* когда слева статус скрыт — выравниваем “Этап…” вправо */
.vl-tl__foot--right{
  justify-content: flex-end;
}

.vl-tl__state{
  color: rgba(255,255,255,.70);
}

.vl-tl__stage{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 6px 10px;
  border-radius: 999px;

  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);

  color: rgba(255,255,255,.78);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;

  white-space: nowrap;
}

/* маленький “акцентный” индикатор слева внутри капсулы */
.vl-tl__stage::before{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;

  background: var(--vl-tl-accent);
  box-shadow: 0 0 12px var(--vl-tl-accent-glow);
}

/* reduced motion: показываем финал */
@media (prefers-reduced-motion: reduce){
  .vl-tl__barFill{ width: 100% !important; }
}






/* =========================================================
   Format widget (Оформление) — before/after + checklist
   ========================================================= */
.vl-fmt{
  width: 100%;
  max-width: 360px;

  border-radius: 18px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);

  padding: 14px;

--vl-fmt-accent: rgba(120,170,255,.86);
--vl-fmt-accent-glow: rgba(120,170,255,.20);
}

.vl-fmt__head{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  margin-bottom: 10px;
}

.vl-fmt__headBlock{ min-width: 0; }
.vl-fmt__headBlock--right{ text-align: right; }

.vl-fmt__headLabel{
  font-family: var(--vl-font-ui);
  font-size: 11px;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,.55);
}

.vl-fmt__headValue{
  font-family: var(--vl-font-ui);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,.90);
  margin-top: 2px;
}

.vl-fmt__body{
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 148px;
  gap: 12px;
  align-items: start;
}

@media (max-width: 520px){
  .vl-fmt__body{ grid-template-columns: 1fr; }
}

.vl-fmt__paper{
  position: relative;
  border-radius: 14px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
  height: 172px;
  overflow: hidden;
}

.vl-fmt__page{
  position: absolute;
  inset: 10px;

  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.10);

  padding: 10px 11px;
  display: flex;
  flex-direction: column;
  gap: 6px;

  transition: opacity .28s ease, transform .28s ease, filter .28s ease;
}

.vl-fmt__page--before{
  opacity: 1;
  transform: translateY(0);
  filter: saturate(.85);
}

.vl-fmt__page--after{
  opacity: 0;
  transform: translateY(6px);
}

.vl-fmt.is-clean .vl-fmt__page--before{
  opacity: 0;
  transform: translateY(-6px);
}

.vl-fmt.is-clean .vl-fmt__page--after{
  opacity: 1;
  transform: translateY(0);
}

.vl-fmt__ln{
  height: 6px;
  width: var(--w, 100%);
  border-radius: 999px;
  background: rgba(255,255,255,.18);
}

.vl-fmt__ln.is-h1{ height: 7px; background: rgba(255,255,255,.26); }
.vl-fmt__ln.is-h2{ height: 6px; background: rgba(255,255,255,.22); }
.vl-fmt__ln.is-note{ height: 5px; background: rgba(255,255,255,.14); }

.vl-fmt__gap{ height: 10px; }
.vl-fmt__gap.sm{ height: 6px; }

.vl-fmt__guides{
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.vl-fmt__g{
  position: absolute;
  top: 10px;
  bottom: 10px;
  width: 1px;

  background: rgba(255,255,255,.10);
  opacity: .55;

  transition: background .28s ease, opacity .28s ease;
}

.vl-fmt__g--l{ left: 18px; }
.vl-fmt__g--r{ right: 18px; }

.vl-fmt.is-clean .vl-fmt__g{
  background: var(--vl-fmt-accent);
  opacity: .38;
}

.vl-fmt__list{
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-top: 2px;
}

.vl-fmt__item{
  display: flex;
  gap: 10px;
  align-items: flex-start;

  font-family: var(--vl-font-ui);
  font-size: 12px;
  line-height: 1.25;
  color: rgba(255,255,255,.62);
}

.vl-fmt__dot{
  width: 12px;
  height: 12px;
  margin-top: 2px;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.04);

  flex: 0 0 auto;
  position: relative;

  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.vl-fmt__item.is-done .vl-fmt__dot{
  background: var(--vl-fmt-accent);
  border-color: var(--vl-fmt-accent);
  box-shadow: 0 0 18px var(--vl-fmt-accent-glow);
  transform: translateY(-.5px);
}


.vl-fmt__foot{
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;

  font-family: var(--vl-font-ui);
  font-size: 12px;
  color: rgba(255,255,255,.60);
}

.vl-fmt__state{ color: rgba(255,255,255,.70); }
.vl-fmt.is-ready .vl-fmt__state{ color: rgba(255,255,255,.86); }
.vl-fmt__stage{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 6px 10px;
  border-radius: 999px;

  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);

  color: rgba(255,255,255,.78);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;

  white-space: nowrap;
}

.vl-fmt__stage::before{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;

  background: var(--vl-fmt-accent);
  box-shadow: 0 0 12px var(--vl-fmt-accent-glow);
}


@media (prefers-reduced-motion: reduce){
  .vl-fmt__page,
  .vl-fmt__g,
  .vl-fmt__dot{
    transition: none !important;
  }
}










/* =========================================================
   Privacy widget (Приватность) — doc mask + lock + steps
   ========================================================= */
.vl-prv{
  width: 100%;
  max-width: 360px;

  border-radius: 18px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);

  padding: 14px;

  --vl-prv-accent: rgba(120,170,255,.86);
  --vl-prv-accent-glow: rgba(120,170,255,.20);
}

.vl-prv__head{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  margin-bottom: 10px;
}

.vl-prv__headBlock{ min-width: 0; }
.vl-prv__headBlock--right{ text-align: right; }

.vl-prv__headLabel{
  font-family: var(--vl-font-ui);
  font-size: 11px;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,.55);
}

.vl-prv__headValue{
  font-family: var(--vl-font-ui);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,.90);
  margin-top: 2px;
}

.vl-prv__body{
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 148px;
  gap: 12px;
  align-items: start;
}

@media (max-width: 520px){
  .vl-prv__body{ grid-template-columns: 1fr; }
}

.vl-prv__paper{
  position: relative;
  border-radius: 14px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
  height: 172px;
  overflow: hidden;
}

.vl-prv__paper::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 14px;
  pointer-events:none;

  background:
    radial-gradient(80% 60% at 22% 10%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.14));

  opacity: .38;
}

.vl-prv__doc{
  position: absolute;
  inset: 10px;

  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.10);

  padding: 10px 11px;
  display: flex;
  flex-direction: column;
  gap: 6px;
z-index: 1;
overflow: hidden;
  transition: filter .28s ease, opacity .28s ease;
}


/* “sealed / protected film” over the document */
.vl-prv__doc::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 12px;
  pointer-events:none;

  background:
    linear-gradient(135deg,
      rgba(255,255,255,.12),
      rgba(255,255,255,0) 38%,
      rgba(255,255,255,.05) 72%,
      rgba(0,0,0,.10)
    );

  opacity: .16;
  transition: opacity .28s ease;
}

.vl-prv__doc::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 12px;
  pointer-events:none;

  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.035) 0 1px,
      transparent 1px 6px
    );

  opacity: 0;
  transition: opacity .28s ease;
  mix-blend-mode: overlay;
}

/* activate the “film” when privacy starts */
.vl-prv.is-masked .vl-prv__doc{
  filter: saturate(.85) contrast(.96);
}

.vl-prv.is-masked .vl-prv__doc::before{ opacity: .46; }
.vl-prv.is-masked .vl-prv__doc::after{ opacity: .18; }

.vl-prv.is-ready  .vl-prv__doc::before{ opacity: .56; }
.vl-prv.is-ready  .vl-prv__doc::after{ opacity: .22; }


.vl-prv__ln{
  height: 6px;
  width: var(--w, 100%);
  border-radius: 999px;
  background: rgba(255,255,255,.18);
}

.vl-prv__ln.is-h1{ height: 7px; background: rgba(255,255,255,.26); }
.vl-prv__ln.is-sens{ background: rgba(255,255,255,.14); opacity: .65; }

.vl-prv__gap{ height: 10px; }
.vl-prv__gap.sm{ height: 6px; }

/* “Скрытие данных” */
.vl-prv.is-masked .vl-prv__ln.is-sens{
  opacity: .18;
  filter: blur(2px);
}

.vl-prv__badge{
  position: absolute;
  left: 12px;
  bottom: 12px;

  padding: 6px 10px;
  border-radius: 999px;

  font-family: var(--vl-font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;

  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.78);

  opacity: 0;
  transform: translateY(6px);
  transition: opacity .22s ease, transform .22s ease;
}




/* lock as “seal” bottom-left */
/* lock icon (no circle, bigger, always glowing) */
.vl-prv__lock{
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 3;

  width: 28px;
  height: 28px;
}

.vl-prv__lockIcon{
  width: 28px;
  height: 28px;
  display: block;

  background: var(--vl-prv-accent);

  -webkit-mask: url("assets/img/icons/advantages/lock.svg") center / contain no-repeat;
  mask: url("assets/img/icons/advantages/lock.svg") center / contain no-repeat;

  opacity: .95;
  filter: drop-shadow(0 0 10px var(--vl-prv-accent-glow));
  transition: filter .22s ease, opacity .22s ease;
}

/* опционально: чуть сильнее, когда "locked" */
.vl-prv.is-locked .vl-prv__lockIcon{
  filter: drop-shadow(0 0 14px var(--vl-prv-accent-glow));
}


/* list */
.vl-prv__list{
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-top: 2px;
}

.vl-prv__item{
  display: flex;
  gap: 10px;
  align-items: flex-start;

  font-family: var(--vl-font-ui);
  font-size: 12px;
  line-height: 1.25;
  color: rgba(255,255,255,.62);
}

.vl-prv__dot{
  width: 12px;
  height: 12px;
  margin-top: 2px;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.04);

  flex: 0 0 auto;

  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.vl-prv__item.is-active{ color: rgba(255,255,255,.90); }
.vl-prv__item.is-active .vl-prv__dot{
  background: var(--vl-prv-accent);
  border-color: var(--vl-prv-accent);
  box-shadow: 0 0 18px var(--vl-prv-accent-glow);
}

.vl-prv__item.is-done{ color: rgba(255,255,255,.82); }
.vl-prv__item.is-done .vl-prv__dot{
  background: var(--vl-prv-accent);
  border-color: var(--vl-prv-accent);
  box-shadow: 0 0 12px rgba(120,170,255,.14);
}

/* footer + capsule stage */
.vl-prv__foot{
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;

  font-family: var(--vl-font-ui);
  font-size: 12px;
  color: rgba(255,255,255,.60);
}

.vl-prv__state{ color: rgba(255,255,255,.70); }
.vl-prv.is-ready .vl-prv__state{ color: rgba(255,255,255,.86); }

.vl-prv__stage{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 6px 10px;
  border-radius: 999px;

  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);

  color: rgba(255,255,255,.78);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
}

.vl-prv__stage::before{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--vl-prv-accent);
  box-shadow: 0 0 12px var(--vl-prv-accent-glow);
}

@media (prefers-reduced-motion: reduce){
  .vl-prv__doc,
  .vl-prv__badge,
  .vl-prv__shackle,
  .vl-prv__lockBody,
  .vl-prv__dot{
    transition: none !important;
  }
}



/* =========================================================
   Support widget (Сопровождение) — chat (smooth stack)
   ========================================================= */
.vl-sup{
  width: 100%;
  max-width: 360px;

  border-radius: 18px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);

  padding: 14px;

  --vl-sup-accent: rgba(120,170,255,.86);
  --vl-sup-accent-glow: rgba(120,170,255,.20);
}

/* header */
.vl-sup__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:14px;
  margin-bottom:10px;
}
.vl-sup__headBlock{ min-width:0; }
.vl-sup__headBlock--right{ text-align:right; }

.vl-sup__headLabel{
  font-family: var(--vl-font-ui);
  font-size: 11px;
  letter-spacing: .01em;
  color: rgba(255,255,255,.55);
}
.vl-sup__headValue{
  font-family: var(--vl-font-ui);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .01em;
  color: rgba(255,255,255,.90);
  margin-top:2px;
}

/* online */
.vl-online{
  display:inline-flex;
  align-items:center;
  gap:8px;
  justify-content:flex-end;
}
.vl-online__dot{
  width:6px;
  height:6px;
  border-radius:999px;
  background: var(--vl-sup-accent);
  box-shadow: 0 0 14px var(--vl-sup-accent-glow);
  animation: vlPulse 1.8s ease-in-out infinite;
}
@keyframes vlPulse{
  0%,100%{ opacity:.65; transform: scale(1); }
  50%{ opacity:1; transform: scale(1.15); }
}

/* chat container (bigger height because no footer) */
.vl-chat{
  position:relative;
  height: 214px;

  border-radius:14px;
  background: rgba(0,0,0,.26);
  border: 1px solid rgba(255,255,255,.10);

  padding: 12px;
  overflow:hidden;
}

.vl-chat::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:14px;
  pointer-events:none;
  background:
    radial-gradient(80% 60% at 22% 10%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.16));
  opacity:.32;
  z-index: 0;
}

/* noise + vignette */
.vl-chat::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:14px;
  pointer-events:none;
  background:
    radial-gradient(120% 95% at 50% 0%, rgba(255,255,255,.07) 0%, rgba(0,0,0,0) 55%),
    radial-gradient(120% 140% at 50% 120%, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 55%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,0) 28%, rgba(0,0,0,.18)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  opacity: .22;
  mix-blend-mode: soft-light;
  z-index: 0;
}

/* fade edges so messages “go behind” borders */
.vl-chat__fade{
  position:absolute;
  inset:0;
  border-radius:14px;
  pointer-events:none;
  z-index: 2;
  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.34) 0%,
      rgba(0,0,0,0) 28px,
      rgba(0,0,0,0) calc(100% - 28px),
      rgba(0,0,0,.34) 100%
    );
  opacity: .9;
}

/* IMPORTANT: log is absolute, grows by content (so we can measure height reliably) */
.vl-chat__log{
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;

  display:flex;
  flex-direction:column;
  gap: 10px;

  z-index: 1;
  will-change: transform;
}

/* messages */
.vl-msg{
  display:flex;
  --tx: 0px;

  opacity: 0;
  transform: translate(var(--tx), 10px);

  will-change: transform, opacity;

  transition:
    opacity .34s ease,
    transform .80s cubic-bezier(0.22, 1, 0.36, 1);
}

.vl-msg.is-client{ justify-content:flex-start; --tx: -10px; }
.vl-msg.is-you{ justify-content:flex-end; --tx: 10px; }

.vl-msg.is-show{
  opacity: 1;
  transform: translate(0,0);
}

.vl-msg.is-exit{
  opacity: 0;
  transform: translate(0,-8px);
}

.vl-msg.is-dim .vl-msg__bubble{ opacity:.62; }

/* bubble */
.vl-msg__bubble{
  max-width: 78%;
  padding: 8px 10px;
  border-radius: 14px;

  font-family: var(--vl-font-ui);
  font-size: 12px;
  line-height: 1.25;

  color: rgba(255,255,255,.86);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(8px);
}

.vl-msg.is-you .vl-msg__bubble{
  background: rgba(120,170,255,.16);
  border-color: rgba(120,170,255,.28);
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .vl-online__dot{ animation: none !important; }
  .vl-msg{ transition: none !important; }
}






/* =========================================
   Home — Journal showcase (Premium focus / static)
   ========================================= */

.vl-journalHome{
  position: relative;
  isolation: isolate;
  padding: clamp(56px, 6vw, 96px) 0;
}

.vl-journalHome::before{
  display: none;
}

.vl-journalHome__inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 28px);
}

.vl-journalHome__head{
  max-width: 1180px;
  margin: 0 0 18px;
}

.vl-journalHome__title{
  margin: 0;
  padding-bottom: 0.14em;
  font-family: var(--vl-font-display);
  font-weight: 700;
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.01em;

  background: linear-gradient(135deg, #F6F6F6 0%, #DCDCDC 45%, #AFAFAF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.vl-journalHome__desc{
  display: none;
}

.vl-jCover{
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  border: 1px solid rgba(255,255,255,.09);
  background:
    radial-gradient(980px 340px at 12% 0%, rgba(214,218,225,.08), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.010)),
    rgba(255,255,255,.014);
  box-shadow: none;
  padding: clamp(24px, 3vw, 34px);
}

.vl-jCover::before{
  content: "";
  position: absolute;
  right: -60px;
  top: 90px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.06), rgba(255,255,255,0) 70%);
  opacity: .22;
  pointer-events: none;
}

.vl-jCover__top{
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 18px;
}

.vl-jCover__actions{
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-start;
  margin-top: 22px;
}

.vl-jCover__jump{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.86);
  background: linear-gradient(180deg, rgba(248,248,249,.98), rgba(232,234,238,.94));
  color: #121316;
  text-decoration: none;
  font-family: var(--vl-font-ui);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .01em;
  box-shadow: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}

.vl-jCover__jump:hover{
  transform: translateY(-1px);
  background: #ffffff;
  border-color: #ffffff;
  color: #111214;
}




.vl-jCover__grid{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: clamp(20px, 2.8vw, 34px);
  align-items: start;
}

.vl-jCover__content{
  min-width: 0;
  max-width: none;
}
.vl-jCover__kicker{
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.025);
  color: rgba(255,255,255,.64);
  font-family: var(--vl-font-ui);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.vl-jCover__title{
  margin: 16px 0 14px;
  font-family: var(--vl-font-copy);
  font-size: clamp(20px, 2.15vw, 34px);
  line-height: 1.12;
  letter-spacing: -.01em;
  font-weight: 600;
  color: rgba(255,255,255,.96);
  max-width: none;
}

.vl-jCover__text{
  margin: 0;
  width: 100%;
  max-width: none;
  color: rgba(255,255,255,.72);
  font-family: var(--vl-font-copy);
  font-size: 15px;
  line-height: 1.76;

  position: relative;
  display: block;
  overflow: visible;
  max-height: none;
  padding-bottom: 0;

  -webkit-mask-image: none;
  mask-image: none;
  -webkit-mask-repeat: initial;
  mask-repeat: initial;
  -webkit-mask-size: auto;
  mask-size: auto;
}


.vl-jCover__topics{
  min-width: 0;
  width: 100%;
  max-width: 420px;
  margin-left: auto;
  padding-left: 24px;
  border-left: 1px solid rgba(255,255,255,.08);
}

.vl-jCover__topicsTitle{
  margin: 2px 0 14px;
  color: rgba(255,255,255,.72);
  font-family: var(--vl-font-copy);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: none;
}

.vl-jCover__topicsCol{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vl-jCover__topic{
  min-height: 62px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  color: rgba(255,255,255,.86);
  font-family: var(--vl-font-copy);
  font-size: 13px;
  line-height: 1.55;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

@media (max-width: 980px){
  .vl-jCover__grid{
    grid-template-columns: 1fr;
  }

  .vl-jCover__title{
    max-width: 13ch;
    font-size: clamp(30px, 6vw, 46px);
  }

  .vl-jCover__topics{
    padding-left: 0;
    padding-top: 20px;
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.08);
  }
}

@media (max-width: 767px){
  .vl-journalHome{
    padding: 48px 0;
  }

  .vl-jCover{
    border-radius: 24px;
    padding: 18px;
  }

  .vl-jCover::before{
    display: none;
  }

  .vl-jCover__top{
    justify-content: flex-start;
    margin-bottom: 16px;
  }

.vl-jCover__title{
  max-width: none;
  font-size: clamp(19px, 6vw, 25px);
}

.vl-jCover__text{
  width: 100%;
  max-width: none;
  font-size: 14px;
  line-height: 1.7;
  max-height: none;
  padding-bottom: 0;
}

  .vl-jCover__topic{
    min-height: auto;
  }
  
.vl-jCover__actions{
  margin-top: 18px;
  justify-content: flex-start;
}
  .vl-jCover__jump{
    width: 100%;
    max-width: 240px;
  }
}
























/* =========================================
   Home — Reviews Vector Lex
   ========================================= */

.vl-reviewsHome{
  position: relative;
  isolation: isolate;
  padding: clamp(56px, 6vw, 96px) 0;
}

.vl-reviewsHome__inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 28px);
}

.vl-reviewsHome__head{
  margin: 0 0 18px;
}

.vl-reviewsHome__title{
  margin: 0;
  padding-bottom: 0.14em;
  font-family: var(--vl-font-display);
  font-weight: 700;
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, #F6F6F6 0%, #DCDCDC 45%, #AFAFAF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.vl-reviewsHome__badges{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.vl-rTrust{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.026), rgba(255,255,255,.012)),
    rgba(255,255,255,.014);
  color: rgba(255,255,255,.92);
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.vl-rTrust:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.16);
  background:
    linear-gradient(180deg, rgba(255,255,255,.038), rgba(255,255,255,.018)),
    rgba(255,255,255,.02);
}

.vl-rTrust__icon{
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.vl-rTrust__icon img{
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}

/* Yandex: если svg загружен как wordmark с текстом */
.vl-rTrust.is-yandex .vl-rTrust__icon{
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  min-width: 18px;
}

.vl-rTrust.is-yandex .vl-rTrust__icon img{
  width: 18px;
  height: 18px;
  max-width: none;
  object-fit: contain;
  filter: none;
  opacity: 1;
}

.vl-rTrust.is-yandex .vl-rTrust__label{
  display: inline-flex;
}

.vl-rTrust__iconFallback{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
  font-family: var(--vl-font-ui);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.vl-rTrust__label{
  font-family: var(--vl-font-ui);
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.86);
}

.vl-rTrust__score{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  font-family: var(--vl-font-ui);
  font-size: 12px;
  font-weight: 800;
  color: rgba(255,255,255,.96);
}

.vl-rGrid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.vl-rCard{
  position: relative;
  overflow: hidden;
  min-height: 268px;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.09);
  background:
    radial-gradient(760px 220px at 12% 0%, rgba(214,218,225,.08), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.010)),
    rgba(255,255,255,.014);
  display: flex;
  flex-direction: column;
}

.vl-rCard::before{
  content: "";
  position: absolute;
  inset: auto -14% -22% auto;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.05), rgba(255,255,255,0) 70%);
  opacity: .18;
  pointer-events: none;
}

.vl-rCard__meta{
  display: none;
}

.vl-rCard__source{
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.024);
  color: rgba(255,255,255,.72);
  font-family: var(--vl-font-ui);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.vl-rCard__score{
  color: rgba(255,255,255,.58);
  font-family: var(--vl-font-ui);
  font-size: 12px;
  font-weight: 800;
}

.vl-rCard__text{
  position: relative;
  z-index: 2;
  margin: 0;
  color: rgba(255,255,255,.84);
  font-family: var(--vl-font-copy);
  font-size: 15px;
  line-height: 1.68;
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vl-rCard__link{
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding-top: 18px;

  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: 100%;

  color: rgba(255,255,255,.92);
  text-decoration: none;
}

.vl-rCard__linkText{
  display: inline-flex;
  align-items: center;
  color: rgba(255,255,255,.92);
  font-family: var(--vl-font-ui);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  transition: color .18s ease;
}

.vl-rCard__linkIcon{
  width: 36px;
  height: 36px;
  flex: 0 0 36px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.90);

  position: relative;
  box-shadow: none !important;

  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}

.vl-rCard__linkIcon i{
  font-size: 16px;
  line-height: 1;
  color: inherit;
}

.vl-rCard__link:hover .vl-rCard__linkIcon{
  transform: translateY(-0.5px);
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.98);
}

.vl-rCard__link:hover .vl-rCard__linkText{
  color: #fff;
}

.vl-rCard__link:hover .vl-rCard__linkIcon{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.16);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
    rgba(255,255,255,.024);
}

@media (max-width: 1180px){
  .vl-rGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px){
  .vl-reviewsHome{
    padding: 48px 0;
  }

  .vl-rGrid{
    grid-template-columns: 1fr;
  }

  .vl-rCard{
    min-height: auto;
    border-radius: 22px;
    padding: 16px;
  }

  .vl-rCard__text{
    font-size: 14px;
    line-height: 1.65;
    -webkit-line-clamp: 6;
  }
  
    .vl-rCard__link{
    padding-top: 14px;
  }

.vl-rCard__linkIcon{
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  border-radius: 12px;
}
}





































/* =========================================================
   Journal (Edition) — Vector Lex
   Template: page-journal.php (vl-edition*)
   ========================================================= */

.vl-edition-wrap{
  /* чистый фон без “стен” */
  background: var(--vl-bg, #0b0b0b);
  padding: 92px 0 72px;
}


/* Mobile: приподнять журнал ближе к шапке */
@media (max-width: 768px){
  body.page-template-page-journal-php .vl-edition-wrap{
    padding-top: 68px; /* можно 68px, если хочешь ещё ближе */
  }
}

@media (max-width: 480px){
  body.page-template-page-journal-php .vl-edition-wrap{
    padding-top: 64px;
  }
}
.vl-edition{
  width: min(1180px, 92vw);
  margin: 0 auto;
}

.vl-edition-body{
  width: min(1180px, 92vw);
  margin: 0 auto;
  padding-top: 18px;
}

/* ---------------------------
   Topline (date)
--------------------------- */

.vl-edition__topline{
  display: flex;
  align-items: center;
  justify-content: center;   /* центр */
  text-align: center;        /* центр текста */
  gap: 10px;

  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);

  font-family: var(--vl-font-copy);
  font-size: 12px;
  letter-spacing: .01em;
  color: rgba(255,255,255,.62);
}

/* убираем бренд из строки даты */
.vl-edition__sep,
.vl-edition__meta{
  display: none;
}

.vl-edition__date{
  color: rgba(255,255,255,.74);
}



/* ---------------------------
   Masthead
--------------------------- */

.vl-edition__masthead{
  padding: 22px 0 14px;
  text-align: center; /* центр */
}

.vl-edition__title{
  margin: 0;
  font-family: var(--vl-font-display);
  font-weight: 700;
  letter-spacing: .015em;
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.05;
  color: rgba(255,255,255,.92);
}

/* premium title gradient (white → silver) */
.vl-edition__mark{
  background: linear-gradient(90deg,
    rgba(255,255,255,.98) 0%,
    rgba(236,238,242,.92) 38%,
    rgba(198,202,210,.86) 72%,
    rgba(255,255,255,.94) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.vl-edition__titleGrad{
  background: linear-gradient(145deg,
    rgba(255,255,255,.98) 0%,
    rgba(244,246,250,.96) 22%,
    rgba(210,214,222,.92) 52%,
    rgba(242,244,248,.96) 78%,
    rgba(255,255,255,.98) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* very subtle “premium glow” */
  text-shadow: 0 0 18px rgba(255,255,255,.06);
}

.vl-edition__subtitle{
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  max-width: 760px;   /* чтобы было аккуратно и “премиально” */
  font-family: var(--vl-font-copy);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,.64);
}

/* ---------------------------
   Nav (center, no pills)
--------------------------- */

/* =========================================================
   Journal NAV — Search + Sections (mega panel)
   ========================================================= */

.vl-edition__nav{
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.vl-edition__navInner{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 26px;
  flex-wrap: wrap;
}





/* -------- links (no pills) -------- */
.vl-edition__navLink{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  font-family: var(--vl-font-ui);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;

  color: rgba(255,255,255,.74);
  text-decoration: none;

  padding: 6px 0;
  background: transparent;
  border: none;
  border-radius: 0;

  position: relative;
  transition: color .18s ease, transform .18s ease;
}

/* underline */
.vl-edition__navLink::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: rgba(255,255,255,.18);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .18s ease, background .18s ease;
}

.vl-edition__navLink:hover{
  color: rgba(255,255,255,.90);
  transform: translateY(-1px);
}
.vl-edition__navLink:hover::after{
  transform: scaleX(1);
  background: rgba(255,255,255,.30);
}

.vl-edition__navLink i{
  opacity: .85;
  transition: transform .18s ease;
}

.vl-navText{ line-height: 1; }

/* -------- details reset -------- */
.vl-searchdd,
.vl-sectionsdd{
  position: relative;
}

/* важно: подпанель дисциплин должна позиционироваться относительно .vl-sectionsPanel,
   а не относительно самого <details> (иначе всё “съезжает”) */
.vl-sec-sub{ position: static; }
.vl-searchdd > summary,
.vl-sectionsdd > summary,
.vl-sec-sub > summary{
  list-style: none;
  cursor: pointer;
}

.vl-searchdd > summary::-webkit-details-marker,
.vl-sectionsdd > summary::-webkit-details-marker,
.vl-sec-sub > summary::-webkit-details-marker{
  display: none;
}

/* caret rotate */
.vl-sectionsdd[open] > summary i{
  transform: rotate(180deg);
}

/* search icon size */
.vl-edition__navLink--search i{
  font-size: 16px;
}




/* =========================================================
   SECTIONS mega panel (Vector Lex)
   1) Старт: 2 колонки (меню + превью)
   2) Внутренние вкладки: 1 колонка (превью скрыто), контент на всю ширину
   ========================================================= */

.vl-searchdd,
.vl-sectionsdd{
  position: relative;
}

.vl-sectionsPanel{
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  z-index: 80;

  width: min(980px, 92vw);
  border-radius: 22px;

  background: rgba(18,18,18,.92);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(14px);
  box-shadow: 0 26px 80px rgba(0,0,0,.60);

  display: grid;
  grid-template-columns: 260px 1fr;
  overflow: hidden;

  isolation: isolate; /* стабильные слои */
}

/* Когда открыта внутренняя вкладка (details open) — скрываем превью и даём 1 колонку */
.vl-sectionsPanel:has(details[open]){
  grid-template-columns: 1fr;
}

.vl-sectionsPanel:has(details[open]) .vl-sectionsPanel__right{
  display: none;
}

.vl-sectionsPanel:has(details[open]) .vl-sectionsPanel__left{
  border-right: 0;
}

.vl-sectionsPanel__left{
  padding: 14px;
  border-right: 1px solid rgba(255,255,255,.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vl-sectionsPanel__right{
  padding: 14px;
  display: flex;
}

/* left items (a + summary share the same class) */
.vl-sec-link{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;

  padding: 12px 12px;
  border-radius: 16px;

  font-family: var(--vl-font-ui);
  font-weight: 700;
  font-size: 14px;

  color: rgba(255,255,255,.78);
  text-decoration:none;

  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.10);

  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}

.vl-sec-link:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
}

.vl-sec-link i{ opacity:.8; }

/* right preview card (видно только в стартовом состоянии) */
.vl-secPreview{
  flex: 1;
  border-radius: 18px;
  padding: 16px;

  background:
    radial-gradient(760px 260px at 22% 0%, rgba(210,214,222,.10), rgba(0,0,0,0) 58%),
    rgba(255,255,255,.02);

  border: 1px solid rgba(255,255,255,.10);
  position: relative;
  overflow: hidden;
}

.vl-secPreview__kicker{
  font-family: var(--vl-font-ui);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.58);
}

.vl-secPreview__title{
  margin-top: 8px;
  font-family: var(--vl-font-copy);
  font-weight: 700;
  font-size: 22px;
  color: rgba(255,255,255,.90);
}

.vl-secPreview__desc{
  margin-top: 8px;
  font-family: var(--vl-font-ui);
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,.62);
  max-width: 420px;
}

.vl-secMock{
  margin-top: 16px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.vl-secLine{
  height: 10px;
  width: var(--w, 70%);
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.06);
}

/* =========================================================
   SUBPANEL (Дисциплины/Вопросы/Тесты и т.п.)
   ВАЖНО: это НЕ оверлей на всё окно браузера, это контент внутри mega panel.
   ========================================================= */

.vl-sec-sub{
  position: static; /* не даём подпанели привязаться к маленькой зоне summary */
}

.vl-sec-subpanel{
  margin-top: 10px;

  padding: 14px;
  border-radius: 18px;

  background:
    radial-gradient(760px 260px at 22% 0%, rgba(210,214,222,.10), rgba(0,0,0,0) 58%),
    rgba(255,255,255,.02);

  border: 1px solid rgba(255,255,255,.10);

  display: none;

  /* если категорий много — скролл внутри панели, без горизонтали */
  max-height: min(520px, 70vh);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.22) rgba(255,255,255,.06);
}

.vl-sec-subpanel::-webkit-scrollbar{ width: 10px; }
.vl-sec-subpanel::-webkit-scrollbar-track{ background: rgba(255,255,255,.06); border-radius: 999px; }
.vl-sec-subpanel::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.22); border-radius: 999px; }

.vl-sec-sub[open] .vl-sec-subpanel{ display:block; }

.vl-sec-subpanel__top{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;

  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 12px;
}

.vl-sec-back{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;

  font-family: var(--vl-font-ui);
  font-weight: 700;
  font-size: 12px;

  color: rgba(255,255,255,.78);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  cursor: pointer;

  white-space: nowrap;
}

.vl-sec-back:hover{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.14);
}

.vl-sec-subpanel__ttl{
  text-align: center;

  font-family: var(--vl-font-copy);
  font-weight: 700;
  font-size: 16px;
  color: rgba(255,255,255,.90);
}

.vl-sec-all{
  font-family: var(--vl-font-ui);
  font-weight: 800;
  font-size: 12px;
  text-decoration:none;

  padding: 8px 10px;
  border-radius: 999px;

  color: rgba(0,0,0,.86);
  background: rgba(245,246,248,.96);
  border: 1px solid rgba(245,246,248,.86);

  white-space: nowrap;
}

.vl-sec-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.vl-sec-item{
  padding: 10px 12px;
  border-radius: 14px;

  font-family: var(--vl-font-copy);
  font-weight: 600;
  font-size: 14px;

  color: rgba(255,255,255,.86);
  text-decoration:none;

  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.10);

  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;

  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}



/* Hover/Focus: белая плашка + чёрный текст */
.vl-sec-item:hover,
.vl-sec-item:focus-visible{
  transform: translateY(-1px);
  background: rgba(245,246,248,.96);
  border-color: rgba(245,246,248,.86);
  color: rgba(0,0,0,.86) !important;      /* перебиваем синий hover от темы */
  text-decoration: none !important;
}

/* responsive */
@media (max-width: 820px){
  .vl-sectionsPanel{
    grid-template-columns: 1fr;
  }
  .vl-sectionsPanel__right{
    display:none;
  }
  .vl-sec-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px){
  .vl-sec-grid{
    grid-template-columns: 1fr;
  }
}




/* Perfect text alignment: ПОИСК vs РАЗДЕЛЫ */
.vl-searchdd > summary.vl-edition__navLink,
.vl-sectionsdd > summary.vl-edition__navLink{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
  padding: 7px 0; /* одинаковая высота клика */
}

.vl-searchdd > summary .vl-navText,
.vl-sectionsdd > summary .vl-navText{
  display: inline-block;
  line-height: 1;
  transform: none !important;
}

.vl-searchdd > summary i,
.vl-sectionsdd > summary i{
  position: relative;
  top: 0 !important;
  transform: none !important;
}


/* ---------------------------
   Search dropdown (fixed + premium)
--------------------------- */

.vl-searchpanel{
  position: absolute;
  top: calc(100% + 12px);
  left: 0;           /* лучше под "ПОИСК" (а не right:0) */
  right: auto;
  z-index: 60;

  width: min(520px, 92vw);
  padding: 12px;

  border-radius: 18px;
  background: rgba(18,18,18,.92);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
}

.vl-searchpanel__form{
  display: flex;
  gap: 12px;
  align-items: center;
}

/* INPUT */
.vl-searchpanel__field,
.vl-searchpanel__field[type="search"]{
  flex: 1 1 auto;
  width: 100%;
  height: 44px;

  font-family: var(--vl-font-ui);
  font-size: 14px;

  /* текст и курсор — чистые */
  color: rgba(255,255,255,.94) !important;
  -webkit-text-fill-color: rgba(255,255,255,.94) !important;
  caret-color: rgba(255,255,255,.94);

  background: rgba(255,255,255,.04) !important;  /* перебиваем белый фон Astra */
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 14px !important;

  padding: 0 14px !important;

  outline: none !important;
  box-shadow: none !important;

  -webkit-appearance: none;
  appearance: none;
}

.vl-searchpanel__field::placeholder{
  color: rgba(255,255,255,.45) !important;
}

.vl-searchpanel__field:focus{
  /* серебристый фокус вместо синего */
  border-color: rgba(210,214,222,.30) !important;
  box-shadow: 0 0 0 3px rgba(210,214,222,.10) !important;
}


/* BUTTON */
.vl-searchpanel__btn{
  flex: 0 0 auto;
  height: 44px;

  font-family: var(--vl-font-ui);
  font-weight: 800;
  font-size: 13px;

  padding: 0 16px;
  border-radius: 14px;

  /* стабильный цвет текста */
  color: rgba(255,255,255,.92) !important;
  -webkit-text-fill-color: rgba(255,255,255,.92) !important;

  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.12) !important;

  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}

.vl-searchpanel__btn:hover{
  /* light “paper” (не режущий белый) */
  background: rgba(245,246,248,.96) !important;
  border-color: rgba(245,246,248,.90) !important;

  /* тёмный текст */
  color: rgba(0,0,0,.86) !important;
  -webkit-text-fill-color: rgba(0,0,0,.86) !important;

  transform: translateY(-1px);
}

.vl-searchpanel__btn:active{
  transform: translateY(0);
}

/* аккуратный фокус с серебром */
.vl-searchpanel__btn:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(210,214,222,.12) !important;
}


/* reset link */
.vl-searchpanel__reset{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;

  font-family: var(--vl-font-ui);
  font-weight: 700;
  font-size: 12px;

  color: rgba(255,255,255,.74) !important;
  -webkit-text-fill-color: rgba(255,255,255,.74) !important;
  text-decoration: none;

  padding: 8px 12px;
  border-radius: 999px;

  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.10) !important;

  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}

.vl-searchpanel__reset:hover{
  background: rgba(245,246,248,.92) !important;
  border-color: rgba(245,246,248,.86) !important;

  color: rgba(0,0,0,.82) !important;
  -webkit-text-fill-color: rgba(0,0,0,.82) !important;

  transform: translateY(-1px);
}

.vl-searchpanel__reset:active{
  transform: translateY(0);
}
/* ---------------------------
   Search note
--------------------------- */

.vl-edition__searchNote{
  margin-top: 12px;
  padding: 10px 12px;

  border-radius: 16px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.10);

  font-family: var(--vl-font-ui);
  font-size: 13px;
  color: rgba(255,255,255,.70);
}

.vl-edition__q{
  color: rgba(255,255,255,.90);
  background: rgba(120,170,255,.14);
  border: 1px solid rgba(120,170,255,.22);
  padding: 2px 8px;
  border-radius: 999px;
}

/* ---------------------------
   Grid (main + side)
--------------------------- */

.vl-edition-grid{
  display: grid;
  grid-template-columns: 8fr 4fr;
  gap: 18px;
  margin-top: 18px;
}

@media (max-width: 980px){
  .vl-edition-grid{
    grid-template-columns: 1fr;
  }
}

/* ---------------------------
   Meta tokens
--------------------------- */

.vl-cat{
  display: inline-flex;
  align-items: center;
  font-family: var(--vl-font-ui);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .03em;

  padding: 5px 9px;
  border-radius: 999px;

  color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
}

.vl-meta,
.vl-metaSep{
  font-family: var(--vl-font-ui);
  font-size: 12px;
  color: rgba(255,255,255,.60);
}

.vl-metaSep{ opacity: .55; }

/* ---------------------------
   Lead story
--------------------------- */

.vl-lead{
  padding: 16px 14px 18px;
  border-radius: 22px;

  background:
    radial-gradient(980px 300px at 14% 0%, rgba(210,214,222,.11), rgba(0,0,0,0) 58%),
    rgba(255,255,255,.02);

  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}

.vl-lead__meta{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.vl-lead__title{
  margin: 12px 0 0;
  font-family: var(--vl-font-copy);
  font-weight: 700;
  letter-spacing: 0;
  font-size: 26px;
  line-height: 1.15;
}

/* Journal: уменьшить заголовок lead-статьи на мобильном */
@media (max-width: 720px){
  body.page-template-page-journal-php .vl-lead__title{
    font-size: 22px;
    line-height: 1.18;
  }
}

@media (max-width: 480px){
  body.page-template-page-journal-php .vl-lead__title{
    font-size: 20px;
    line-height: 1.20;
  }
}

.vl-lead__title a{
  color: rgba(255,255,255,.92);
  text-decoration: none;
}

.vl-lead__title a:hover{
  text-decoration: underline;
  text-underline-offset: 4px;
}

.vl-lead__excerpt{
  margin: 12px 0 0;
  font-family: var(--vl-font-copy);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,.68);
  max-width: 920px;
}

.vl-lead__link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;

  font-family: var(--vl-font-ui);
  font-weight: 800;
  font-size: 13px;

  color: rgba(255,255,255,.88);
  text-decoration: none;

  padding: 9px 12px;
  border-radius: 999px;

  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);

  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.vl-lead__link:hover{
  transform: translateY(-1px);

  background: rgba(245,246,248,.96);
  border-color: rgba(245,246,248,.90);

  color: rgba(0,0,0,.86);
  -webkit-text-fill-color: rgba(0,0,0,.86);
}

.vl-lead__link:hover i{
  color: rgba(0,0,0,.86);
}

/* ---------------------------
   Stream list
--------------------------- */

.vl-stream{
  margin-top: 16px;
  padding: 14px 0 0;
}

.vl-stream__title{
  margin: 0 0 10px;
  font-family: var(--vl-font-ui);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
}

.vl-stream__list{
  border-top: 1px solid rgba(255,255,255,.08);
}

.vl-item{
  padding: 14px 2px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.vl-item__meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.vl-item__title{
  margin: 10px 0 0;
  font-family: var(--vl-font-copy);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.22;
  letter-spacing: 0;
}

.vl-item__title a{
  color: rgba(255,255,255,.90);
  text-decoration: none;
}

.vl-item__title a:hover{
  text-decoration: underline;
  text-underline-offset: 4px;
}

.vl-item__excerpt{
  margin-top: 8px;
  font-family: var(--vl-font-copy);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(255,255,255,.66);
}

/* ---------------------------
   Side column
--------------------------- */

.vl-side{
  position: sticky;
  top: 110px;
  padding: 14px;
  border-radius: 22px;

  background:
    radial-gradient(720px 220px at 18% 0%, rgba(210,214,222,.07), rgba(0,0,0,0) 55%),
    rgba(255,255,255,.02);

  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}
@media (max-width: 980px){
  .vl-side{ position: static; }
}

.vl-side__head{
  font-family: var(--vl-font-ui);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 10px;
}

.vl-side__list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vl-side__item{
  display: flex;
  flex-direction: column;
  gap: 6px;

  padding: 10px 10px;
  border-radius: 16px;

  text-decoration: none;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.08);

  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.vl-side__item:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.14);
}

.vl-side__cat{
  font-family: var(--vl-font-ui);
  font-weight: 800;
  font-size: 11px;
  color: rgba(255,255,255,.66);
}

.vl-side__ttl{
  font-family: var(--vl-font-copy);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.25;
  letter-spacing: 0;
  color: rgba(255,255,255,.90);
}

/* ---------------------------
   Pagination
--------------------------- */

.vl-edition-pagi{
  margin-top: 18px;
  display: flex;
  justify-content: center;
}

.vl-edition-pagi .page-numbers{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  margin: 0 4px;
  border-radius: 12px;

  font-family: var(--vl-font-ui);
  font-weight: 800;
  font-size: 13px;

  color: rgba(255,255,255,.70);
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.10);
  text-decoration: none;

  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.vl-edition-pagi .page-numbers:hover{
  background: rgba(245,246,248,.92);
  border-color: rgba(245,246,248,.82);
  color: rgba(0,0,0,.82);
  -webkit-text-fill-color: rgba(0,0,0,.82);
  transform: translateY(-1px);
}

.vl-edition-pagi .page-numbers.current{
  color: rgba(0,0,0,.86);
  -webkit-text-fill-color: rgba(0,0,0,.86);

  background: rgba(245,246,248,.96);
  border-color: rgba(245,246,248,.86);
}

/* ---------------------------
   Empty
--------------------------- */

.vl-edition-empty{
  margin-top: 18px;
  padding: 18px 14px;
  border-radius: 22px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.10);
  font-family: var(--vl-font-ui);
  color: rgba(255,255,255,.70);
}

/* анонсы: line-clamp + мягкий fade без плашки (mask на текст) */
.vl-lead__excerpt,
.vl-item__excerpt{
  position: relative;
  overflow: hidden;

  display: -webkit-box;
  -webkit-box-orient: vertical;
}

/* сколько строк */
.vl-lead__excerpt{ -webkit-line-clamp: 3; }
.vl-item__excerpt{ -webkit-line-clamp: 2; }

/* fade по правому краю — без “прямоугольника” */
.vl-lead__excerpt{
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 88%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.vl-item__excerpt{
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 84%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 84%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* NAV: hard reset text + normalize icons (fix visual baseline) */
.vl-searchdd > summary .vl-navText,
.vl-sectionsdd > summary .vl-navText{
  transform: none !important;
  line-height: 1;
}

/* make both icons same size and optically centered */
.vl-searchdd > summary i,
.vl-sectionsdd > summary i{
  font-size: 14px;     /* лупа станет меньше */
  line-height: 1;
  display: inline-block;
  transform: translateY(1px); /* оптическое выравнивание иконок */
}

/* если хочешь, чтобы caret был ещё чуть ниже (часто помогает) */
.vl-sectionsdd > summary i{
  transform: translateY(2px);
}



/* =========================================================
   Journal — Mobile: только "РАЗДЕЛЫ" (центр + ширина экрана)
   ========================================================= */
@media (max-width: 720px){

  /* Делаем якорь для панели "Разделы" не на кнопке, а на всей строке навигации */
  body.page-template-page-journal-php .vl-edition__navInner{
    position: relative;
  }

  /* Важно: чтобы absolute-панель не позиционировалась от ширины кнопки */
  body.page-template-page-journal-php .vl-sectionsdd{
    position: static;
  }

  /* Само окно "Разделы" — по центру экрана и по ширине */
  body.page-template-page-journal-php .vl-sectionsPanel{
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;

    width: calc(100vw - 24px) !important; /* ровные поля по 12px */
    max-width: none !important;
    box-sizing: border-box;

    /* чтобы не упиралось в низ экрана */
    max-height: calc(100vh - 220px);
    overflow: hidden; /* сохраняем скругления */
  }

  /* На мобиле — один столбик и без превью справа */
  body.page-template-page-journal-php .vl-sectionsPanel{
    grid-template-columns: 1fr !important;
  }
  body.page-template-page-journal-php .vl-sectionsPanel__right{
    display: none !important;
  }

  /* Левая часть становится “основной”, со скроллом внутри */
  body.page-template-page-journal-php .vl-sectionsPanel__left{
    border-right: 0 !important;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Подрубрики (Дисциплины/Вопросы/Тесты) — всегда 1 колонка */
  body.page-template-page-journal-php .vl-sec-grid{
    grid-template-columns: 1fr !important;
  }
}




/* Journal template: убираем системный сайдбар Astra (у нас своя правая колонка внутри шаблона) */
body.page-template-page-journal-php #secondary,
body.page-template-page-journal-php .widget-area{
  display: none !important;
}

body.page-template-page-journal-php #primary{
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  margin: 0 !important;
}

/* чтобы контейнер Astra не играл в "две колонки" */
body.page-template-page-journal-php .ast-container{
  display: block !important;
}

/* опционально: убираем боковые паддинги контейнера Astra (ширину контролирует .vl-edition) */
body.page-template-page-journal-php #content .ast-container{
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* =========================================================
   Category (Journal rubrics) — убираем системный сайдбар Astra
   ========================================================= */

body.category #secondary{
  display: none !important;
}

body.category #primary{
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  margin: 0 !important;
}

/* Astra часто делает контейнер flex под сайдбар — ломаем это */
body.category .ast-container{
  display: block !important;
}

/* по желанию: чтобы совпало с журналом по краям */
body.category #content .ast-container{
  padding-left: 0 !important;
  padding-right: 0 !important;
}





















/* =========================================================
   Edition Reader — Single post (single.php)
   Scope: only on posts
   ========================================================= */

body.single-post #secondary{
  display: none !important;
}
body.single-post #primary{
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  margin: 0 !important;
}
body.single-post .ast-container{
  display: block !important;
}
body.single-post #content .ast-container{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* =========================
   Progress bar
   ========================= */
body.single-post #vl-read-progress{
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  z-index: 999999;

  background: linear-gradient(90deg,
    rgba(245,246,248,.96) 0%,
    rgba(210,214,222,.90) 55%,
    rgba(245,246,248,.96) 100%
  );
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  border-radius: 0 999px 999px 0;
  pointer-events: none;
}

/* =========================
   Header: topline + title
   ========================= */
body.single-post .vl-article-wrap{
  /* у нас уже есть .vl-edition-wrap (92px top) — тут можно чуть поджать */
  padding-top: 84px;
}
@media (max-width: 768px){
  body.single-post .vl-article-wrap{ padding-top: 66px; }
}
@media (max-width: 480px){
  body.single-post .vl-article-wrap{ padding-top: 62px; }
}

/* В журнале .vl-edition__sep скрыт глобально — на single показываем */
body.single-post .vl-edition__sep{
  display: inline !important;
  opacity: .55;
}

/* Topline на single — слева и с переносами */
body.single-post .vl-article__topline{
  justify-content: flex-start;
  text-align: left;
  flex-wrap: wrap;
  gap: 10px;

  border-bottom: 1px solid rgba(255,255,255,.10);
  padding-bottom: 12px;

  font-family: var(--vl-font-ui);
  font-size: 12px;
  letter-spacing: .02em;
  color: rgba(255,255,255,.70);
}

body.single-post .vl-article__back{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 7px 10px;
  border-radius: 999px;

  color: rgba(255,255,255,.84);
  text-decoration: none;

  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);

  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
body.single-post .vl-article__back:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
}

body.single-post .vl-article__cat{
  color: rgba(255,255,255,.84);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.22);
  padding-bottom: 1px;
  transition: color .18s ease, border-color .18s ease;
}
body.single-post .vl-article__cat:hover{
  color: rgba(255,255,255,.94);
  border-color: rgba(255,255,255,.34);
}

body.single-post .vl-article__date,
body.single-post .vl-article__rt,
body.single-post .vl-article__upd{
  color: rgba(255,255,255,.70);
}

/* Заголовок статьи */
body.single-post .vl-article-head .vl-edition__masthead{
  text-align: left;
  padding: 18px 0 10px;
}

body.single-post .vl-article__title{
  margin: 0;
  max-width: 980px;

  font-family: var(--vl-font-display);
  font-weight: 700;
  letter-spacing: .01em;

  font-size: clamp(26px, 2.2vw, 40px);
  line-height: 1.12;

  color: rgba(255,255,255,.94);
}

@media (max-width: 480px){
  body.single-post .vl-article__title{
    font-size: 26px;
    line-height: 1.14;
  }
}

/* =========================
   Article layout + cards
   ========================= */
body.single-post .vl-article-grid{
  margin-top: 18px;
}

body.single-post .vl-article-main,
body.single-post .vl-article-side{
  min-width: 0; /* важно для длинных слов/таблиц */
}

/* Основная карточка статьи */
body.single-post .vl-article{
  padding: 18px 16px 22px;
  border-radius: 22px;

  background:
    radial-gradient(980px 320px at 14% 0%, rgba(210,214,222,.10), rgba(0,0,0,0) 58%),
    rgba(255,255,255,.02);

  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}

/* Контент: ограничиваем длину строки */
body.single-post .vl-article__content{
  max-width: 760px;
}

/* чтобы якоря в TOC не прятались под шапку */
body.single-post .vl-article__content h2,
body.single-post .vl-article__content h3{
  scroll-margin-top: 120px;
}

/* =========================
   Typography (Gutenberg / prose)
   ========================= */
body.single-post .vl-content-formatted{
  font-family: var(--vl-font-copy);
  font-size: 16px;
  line-height: 1.85;
  color: rgba(255,255,255,.82);
}

body.single-post .vl-content-formatted p{
  margin: 0 0 14px;
}

/* Заголовки внутри статьи — более строгая типографика */
body.single-post .vl-content-formatted h2{
  margin: 22px 0 10px;
  font-family: var(--vl-font-copy);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  color: rgba(255,255,255,.92);
}

body.single-post .vl-content-formatted h3{
  margin: 16px 0 8px;
  font-family: var(--vl-font-copy);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.28;
  color: rgba(255,255,255,.90);
}

/* Mobile */
@media (max-width: 768px){
  body.single-post .vl-content-formatted h2{ font-size: 20px; margin: 20px 0 10px; }
  body.single-post .vl-content-formatted h3{ font-size: 17px; margin: 14px 0 8px; }
}

@media (max-width: 480px){
  body.single-post .vl-content-formatted h2{ font-size: 19px; line-height: 1.28; }
  body.single-post .vl-content-formatted h3{ font-size: 16px; line-height: 1.30; }
}

body.single-post .vl-content-formatted a{
  color: rgba(255,255,255,.92);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(255,255,255,.28);
  transition: color .18s ease, text-decoration-color .18s ease;
}
body.single-post .vl-content-formatted a:hover{
  color: rgba(255,255,255,.98);
  text-decoration-color: rgba(255,255,255,.44);
}

body.single-post .vl-content-formatted ul,
body.single-post .vl-content-formatted ol{
  margin: 0 0 14px 1.2em;
  padding: 0;
}
body.single-post .vl-content-formatted li{
  margin: 6px 0;
}

/* цитаты */
body.single-post .vl-content-formatted blockquote{
  margin: 18px 0;
  padding: 14px 14px;
  border-radius: 18px;

  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.10);
  border-left: 3px solid rgba(245,246,248,.60);

  color: rgba(255,255,255,.78);
}
body.single-post .vl-content-formatted blockquote p{
  margin: 0;
}

/* inline code + pre */
body.single-post .vl-content-formatted code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.92em;

  padding: 2px 6px;
  border-radius: 10px;

  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.88);
}
body.single-post .vl-content-formatted pre{
  margin: 16px 0;
  padding: 14px 14px;
  border-radius: 18px;

  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);

  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
body.single-post .vl-content-formatted pre code{
  padding: 0;
  border: none;
  background: transparent;
}

/* изображения/фигуры */
body.single-post .vl-content-formatted img{
  max-width: 100%;
  height: auto;
  border-radius: 18px;
}
body.single-post .vl-content-formatted figure{
  margin: 18px 0;
}
body.single-post .vl-content-formatted figcaption{
  margin-top: 8px;
  font-family: var(--vl-font-ui);
  font-size: 12px;
  color: rgba(255,255,255,.62);
}

/* таблицы */
body.single-post .vl-content-formatted table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 16px 0;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
}
body.single-post .vl-content-formatted th,
body.single-post .vl-content-formatted td{
  padding: 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  border-right: 1px solid rgba(255,255,255,.08);
}
body.single-post .vl-content-formatted th{
  font-family: var(--vl-font-ui);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.03);
}
body.single-post .vl-content-formatted tr:last-child td{
  border-bottom: none;
}
body.single-post .vl-content-formatted td:last-child,
body.single-post .vl-content-formatted th:last-child{
  border-right: none;
}

/* =========================
   TOC (right column)
   ========================= */
body.single-post .vl-toc{
  position: sticky;
  top: 110px;

  padding: 14px;
  border-radius: 22px;

  background:
    radial-gradient(720px 220px at 18% 0%, rgba(210,214,222,.08), rgba(0,0,0,0) 55%),
    rgba(255,255,255,.02);

  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);

  margin-bottom: 14px;
}

/* =========================
   Single: sticky only for TOC
   ========================= */
body.single-post .vl-article-side .vl-side{
  position: static;
  top: auto;
}

/* =========================
   Single: Latest products block (sidebar)
   ========================= */
body.single-post .vl-side--shop{
  margin-top: 14px;
}

body.single-post .vl-side__head--split{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body.single-post .vl-side__headLink{
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;

  color: rgba(255,255,255,.55);
  font-weight: 700;
  font-size: 12px;

  letter-spacing: 0;
  text-transform: none;
}

body.single-post .vl-side__headLink:hover{
  color: rgba(255,255,255,.88);
  text-decoration-thickness: 1px;
}

/* =========================
   Latest products: layout (specs left, actions right)
   ========================= */
body.single-post .vl-side__item--shop{
  gap: 10px;
}

body.single-post .vl-side__metaRow{
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body.single-post .vl-side__specs{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

body.single-post .vl-side__chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 6px 8px;
  border-radius: 12px;

  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);

  font-family: var(--vl-font-ui);
  font-weight: 800;
  font-size: 11px;
  line-height: 1;

  color: rgba(255,255,255,.78);
  white-space: nowrap;
}

body.single-post .vl-side__chip i{
  font-size: 14px;
  color: rgba(255,255,255,.72);
}

body.single-post .vl-side__actions{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

/* Price tag (same height as arrow) */
body.single-post .vl-side__actions .vl-side__price{
  height: 34px;
  display: inline-flex;
  align-items: center;

  padding: 0 10px;
  border-radius: 12px;

  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);

  color: rgba(255,255,255,.92);
  font-family: var(--vl-font-ui);
  font-weight: 900;
  font-size: 12px;
  white-space: nowrap;
}

body.single-post .vl-side__price del{
  opacity: .55;
  margin-right: 6px;
}

body.single-post .vl-side__price ins{
  text-decoration: none;
}

/* Arrow button */
body.single-post .vl-side__arr{
  width: 34px;
  height: 34px;
  border-radius: 12px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.90);

  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
  flex: 0 0 34px;
}

body.single-post .vl-side__item--shop:hover .vl-side__arr{
  transform: translateY(-0.5px);
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.98);
}

/* Mobile: show 5 (hide 6th+) */
@media (max-width: 680px){
  body.single-post .vl-side--shop .vl-side__list > .vl-side__item:nth-child(n+6){
    display: none;
  }
}



@media (max-width: 980px){
  body.single-post .vl-toc{ position: static; }
}

body.single-post .vl-toc__title{
  font-family: var(--vl-font-ui);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);

  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 10px;
}

body.single-post .vl-toc__list{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.single-post .vl-toc__item{
  display: block;
  text-decoration: none;

  padding: 9px 10px;
  border-radius: 14px;

  font-family: var(--vl-font-copy);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.25;

  color: rgba(255,255,255,.86);
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.08);

  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
body.single-post .vl-toc__item.is-h3{
  font-size: 12px;
  padding-left: 16px;
  color: rgba(255,255,255,.78);
}

body.single-post .vl-toc__item:hover,
body.single-post .vl-toc__item:focus-visible{
  transform: translateY(-1px);
  background: rgba(245,246,248,.96);
  border-color: rgba(245,246,248,.86);
  color: rgba(0,0,0,.86) !important;
  outline: none;
}
body.single-post .vl-toc__item.is-active{
  background: rgba(245,246,248,.96);
  border-color: rgba(245,246,248,.86);
  color: rgba(0,0,0,.86) !important;
}

/* =========================
   Tags
   ========================= */
body.single-post .vl-article__tags{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}
body.single-post .vl-article__tagsTitle{
  font-family: var(--vl-font-ui);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
  margin-bottom: 10px;
}
body.single-post .vl-article__tagsList{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.single-post .vl-tag{
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 999px;

  text-decoration: none;

  font-family: var(--vl-font-ui);
  font-weight: 800;
  font-size: 12px;

  color: rgba(255,255,255,.74);
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.10);

  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
body.single-post .vl-tag:hover{
  transform: translateY(-1px);
  background: rgba(245,246,248,.96);
  border-color: rgba(245,246,248,.86);
  color: rgba(0,0,0,.86) !important;
}

/* =========================
   Prev / Next
   ========================= */
body.single-post .vl-article-nav{
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 680px){
  body.single-post .vl-article-nav{ grid-template-columns: 1fr; }
}

body.single-post .vl-article-nav__item{
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;

  padding: 14px 14px;
  border-radius: 22px;

  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.10);

  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
body.single-post .vl-article-nav__k{
  font-family: var(--vl-font-ui);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
}
body.single-post .vl-article-nav__t{
  font-family: var(--vl-font-copy);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.25;
  color: rgba(255,255,255,.90);
}
body.single-post .vl-article-nav__item:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.14);
}

/* =========================
   Related
   ========================= */
body.single-post .vl-related{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}
body.single-post .vl-related__title{
  margin: 0 0 10px;
  font-family: var(--vl-font-ui);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
}
body.single-post .vl-related__list{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 860px){
  body.single-post .vl-related__list{ grid-template-columns: 1fr; }
}

body.single-post .vl-related__item{
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;

  padding: 12px 12px;
  border-radius: 18px;

  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.08);

  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
body.single-post .vl-related__meta{
  font-family: var(--vl-font-ui);
  font-weight: 800;
  font-size: 11px;
  color: rgba(255,255,255,.66);
}
body.single-post .vl-related__ttl{
  font-family: var(--vl-font-copy);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.25;
  color: rgba(255,255,255,.90);
}
body.single-post .vl-related__item:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.14);
}

/* =========================
   Mobile: "Разделы" по центру (только для single)
   Не трогаем "Поиск" — как ты просил
   ========================= */
@media (max-width: 720px){
  body.single-post .vl-edition__navInner{
    position: relative;
  }
  body.single-post .vl-sectionsdd{
    position: static;
  }
  body.single-post .vl-sectionsPanel{
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;

    width: calc(100vw - 24px) !important;
    max-width: none !important;

    grid-template-columns: 1fr !important;
    max-height: calc(100vh - 220px);
    overflow: hidden;
  }
  body.single-post .vl-sectionsPanel__right{
    display: none !important;
  }
  body.single-post .vl-sectionsPanel__left{
    border-right: 0 !important;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.single-post .vl-sec-grid{
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   Single: TOC accordion on mobile
   ========================================================= */

body.single-post .vl-toc-mobile{
  display: none;
  margin: 0 0 14px;
  padding: 14px;
  border-radius: 22px;

  background:
    radial-gradient(720px 220px at 18% 0%, rgba(210,214,222,.08), rgba(0,0,0,0) 55%),
    rgba(255,255,255,.02);

  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}

body.single-post .vl-toc-mobile__head{
  list-style: none;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 0;
  margin: 0;
}

body.single-post .vl-toc-mobile__head::-webkit-details-marker{
  display: none;
}

body.single-post .vl-toc-mobile__title{
  font-family: var(--vl-font-ui);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
}

/* стрелка */
body.single-post .vl-toc-mobile__head i{
  opacity: .75;
  transition: transform .18s ease, opacity .18s ease;
}
body.single-post .vl-toc-mobile[open] .vl-toc-mobile__head i{
  transform: rotate(180deg);
  opacity: .95;
}

body.single-post .vl-toc-mobile .vl-toc__nav{
  margin-top: 12px;
}


/* =========================================================
   Single: pagination inside post (<!--nextpage-->)
   ========================================================= */
body.single-post .vl-post-pagi{
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

body.single-post .vl-post-pagi .vl-pagi__item{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 42px;
  height: 42px;
  padding: 0 12px;

  border-radius: 999px;

  font-family: var(--vl-font-ui);
  font-weight: 800;
  font-size: 12px;

  text-decoration: none;

  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.78);

  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}

body.single-post .vl-post-pagi a.vl-pagi__item:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
}

body.single-post .vl-post-pagi .vl-pagi__item.is-current{
  background: rgba(245,246,248,.96);
  border-color: rgba(245,246,248,.86);
  color: rgba(0,0,0,.86);
}

body.single-post .vl-post-pagi .vl-pagi__item.is-arrow{
  padding: 0;
}

@media (max-width: 480px){
  body.single-post .vl-post-pagi{
    gap: 8px;
  }
  body.single-post .vl-post-pagi .vl-pagi__item{
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
  }
}



/* На мобиле показываем аккордеон, а боковой TOC скрываем */
@media (max-width: 980px){
  body.single-post .vl-toc-mobile{
    display: block;
  }
  body.single-post .vl-article-side .vl-toc{
    display: none !important;
  }
}

body.single-post .vl-article-head .vl-edition__masthead{
  border-bottom: 1px solid rgba(255,255,255,.10);
  padding-bottom: 14px;
  margin-bottom: 14px;
}

/* =========================================================
   Single post — выравнивание (убираем резерв Astra под сайдбар)
   ========================================================= */

body.single-post #secondary{
  display: none !important;
}

/* Astra иногда верстает колонки через flex/float — ломаем это в пользу 100% ширины */
body.single-post .site-content .ast-container{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.single-post #primary{
  float: none !important;
  clear: both !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* страховка: центрируем наш контейнер Edition */
body.single-post .vl-edition,
body.single-post .vl-edition-body{
  margin-left: auto !important;
  margin-right: auto !important;
}


/* Tag archives — убираем системный сайдбар Astra */
body.tag #secondary{ display:none !important; }
body.tag #primary{
  width:100% !important;
  max-width:100% !important;
  flex:0 0 100% !important;
  margin:0 !important;
}
body.tag .ast-container{ display:block !important; }
body.tag #content .ast-container{
  padding-left:0 !important;
  padding-right:0 !important;
}



/* Search archive — убираем системный сайдбар Astra */
body.search #secondary{ display:none !important; }
body.search #primary{
  width:100% !important;
  max-width:100% !important;
  flex:0 0 100% !important;
  margin:0 !important;
}
body.search .ast-container{ display:block !important; }
body.search #content .ast-container{
  padding-left:0 !important;
  padding-right:0 !important;
}






/* =========================================================
   Woo Shop — Astra layout FIX (как Journal/Single)
   ========================================================= */

body.post-type-archive-product #secondary,
body.tax-product_cat #secondary,
body.tax-product_tag #secondary{
  display: none !important;
}

body.post-type-archive-product #primary,
body.tax-product_cat #primary,
body.tax-product_tag #primary{
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  margin: 0 !important;
}

/* Astra иногда держит контейнер “под сайдбар” — выравниваем */
body.post-type-archive-product .ast-container,
body.tax-product_cat .ast-container,
body.tax-product_tag .ast-container{
  display: block !important;
}

/* убираем боковые паддинги Astra, ширину контролирует наш контейнер */
body.post-type-archive-product #content .ast-container,
body.tax-product_cat #content .ast-container,
body.tax-product_tag #content .ast-container{
  padding-left: 0 !important;
  padding-right: 0 !important;
}





/* ======================================================
   AUTH (page-auth) — fullscreen + hide header/footer
   + remove Astra boxed/separate frames + remove Woo wrapper
   KEEP AT THE VERY END of astra-child/style.css
   ====================================================== */

/* Base */
html,
body.page-auth{
  background: #0D0D0D !important;
  overflow-x: hidden !important;
}

body.page-auth{
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide header/footer */
body.page-auth .site-header,
body.page-auth header.site-header,
body.page-auth .ast-primary-header-bar,
body.page-auth .ast-desktop-header,
body.page-auth .ast-mobile-header,
body.page-auth .site-footer{
  display: none !important;
}

/* No sidebar + no page title */
body.page-auth #secondary{ display: none !important; }
body.page-auth .entry-header{ display: none !important; }

body.page-auth #primary{
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
}

/* Remove Astra "boxed/separate" frames */
body.page-auth.ast-box-layout{ padding: 0 !important; margin: 0 !important; }

body.page-auth #page,
body.page-auth .site,
body.page-auth .site-content,
body.page-auth #content,
body.page-auth .content-area,
body.page-auth .site-content .ast-container,
body.page-auth .ast-container,
body.page-auth .ast-container-fluid,
body.page-auth.ast-separate-container .ast-article-single,
body.page-auth.ast-separate-container .ast-article-post,
body.page-auth.ast-separate-container .ast-woocommerce-container,
body.page-auth.ast-separate-container article,
body.page-auth.ast-separate-container .entry,
body.page-auth.ast-separate-container .page,
body.page-auth.ast-separate-container .site-content > .ast-container{
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;

  width: 100% !important;
  max-width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.page-auth #page::before,
body.page-auth #page::after,
body.page-auth .site::before,
body.page-auth .site::after,
body.page-auth .site-content::before,
body.page-auth .site-content::after,
body.page-auth .ast-container::before,
body.page-auth .ast-container::after,
body.page-auth.ast-separate-container .ast-article-single::before,
body.page-auth.ast-separate-container .ast-article-single::after,
body.page-auth.ast-separate-container .ast-article-post::before,
body.page-auth.ast-separate-container .ast-article-post::after,
body.page-auth.ast-separate-container .ast-woocommerce-container::before,
body.page-auth.ast-separate-container .ast-woocommerce-container::after{
  content: none !important;
  display: none !important;
}

/* Remove WooCommerce wrapper frame */
body.page-auth .entry-content > .woocommerce,
body.page-auth .woocommerce{
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;

  margin: 0 !important;
  padding: 0 !important;

  width: 100% !important;
  max-width: 100vw !important;
}

body.page-auth .entry-content > .woocommerce::before,
body.page-auth .entry-content > .woocommerce::after,
body.page-auth .woocommerce::before,
body.page-auth .woocommerce::after{
  content: none !important;
  display: none !important;
}

@supports (display: contents){
  body.page-auth .entry-content > .woocommerce{
    display: contents !important;
  }
}

/* Fullscreen center our auth root */
body.page-auth .vl-auth-page{
  width: 100% !important;
  margin: 0 !important;

  height: 100vh;
  height: 100svh;
  min-height: 100svh;

  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
  padding: clamp(28px, 6vh, 72px) 18px;

  overflow-y: auto;
}

body.page-auth .vl-auth-page__dialog{
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

body.page-auth .vl-auth__card{
  box-shadow: none !important;
}

/* Back button positioning only */
body.page-auth .vl-authTopBack{
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 999999;
}

@media (max-width: 520px){
  body.page-auth .vl-authTopBack{
    left: 12px;
    top: 12px;
  }
}










/* =========================================================
   Vector Lex — Legal Pages (FULL CONTROL via code)
   Requires body_class() from functions.php:
     - vl-legal-page
     - vl-legal-terms (user agreement)
     - vl-legal-privacy (privacy policy)
   Управляем ВСЕМ через код: ширина, отступы, шрифты, цвета.
   Перебивает Gutenberg/Astra inline (без правок блоков).
   ========================================================= */

/* =========================
   0) Tokens (edit here)
   ========================= */
body.vl-legal-page{
  --vl-legal-bg: var(--vl-bg, #0D0D0D);

  --vl-legal-maxw: 860px;      /* ширина колонки чтения */
  --vl-legal-wide: 1180px;     /* ширина контейнера Astra */
  --vl-legal-side: 22px;       /* боковые поля */
  --vl-legal-pad-top: 80px;   /* верхний отступ контента (под шапку сайта) */
  --vl-legal-pad-bot: 84px;    /* нижний отступ */

  --vl-legal-font-ui: var(--vl-font-ui, "PT Sans", system-ui);
  --vl-legal-font-display: var(--vl-font-display, "Playfair Display", serif);
  --vl-legal-font-copy: var(--vl-font-copy, "PT Serif", serif);

  --vl-legal-title: rgba(255,255,255,.94);
  --vl-legal-text:  rgba(255,255,255,.82);
  --vl-legal-soft:  rgba(255,255,255,.72);
  --vl-legal-muted: rgba(255,255,255,.58);

  --vl-legal-link: rgba(255,255,255,.92);
  --vl-legal-link-underline: rgba(255,255,255,.28);
  --vl-legal-link-underline-hover: rgba(255,255,255,.44);

  --vl-legal-border: rgba(255,255,255,.10);
  --vl-legal-border-soft: rgba(255,255,255,.07);

  --vl-legal-code-bg: rgba(255,255,255,.05);
  --vl-legal-quote-bg: rgba(255,255,255,.02);

  background: var(--vl-legal-bg) !important;
  color: var(--vl-legal-text) !important;
}

/* (Опционально) индивидуальные отличия страниц */
body.vl-legal-privacy{ /* тут можно менять переменные, если нужно */ }
body.vl-legal-terms{   /* тут можно менять переменные, если нужно */ }

/* =========================
   1) Layout (ВАЖНО: не трогаем header/menu)
   ========================= */

/* Отступы и ширину задаём ТОЛЬКО контенту (site-content), а не всем .ast-container */
body.vl-legal-page .site-content .ast-container{
  max-width: var(--vl-legal-wide) !important;
  padding-left: var(--vl-legal-side) !important;
  padding-right: var(--vl-legal-side) !important;
  padding-top: var(--vl-legal-pad-top) !important;
  padding-bottom: var(--vl-legal-pad-bot) !important;
}

/* Страховка: шапку/меню точно не сдвигаем */
body.vl-legal-page #masthead .ast-container,
body.vl-legal-page header .ast-container{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Убираем лишние фоны/рамки у статьи (если Astra добавляет) */
body.vl-legal-page .ast-article-single,
body.vl-legal-page article{
  background: transparent !important;
}

/* =========================
   2) Page title (H1)
   ========================= */
body.vl-legal-page .entry-header{
  max-width: var(--vl-legal-maxw);
  margin: 0 auto 14px !important;
}
body.vl-legal-page .entry-header .entry-title{
  font-family: var(--vl-legal-font-display) !important;
  font-size: clamp(28px, 3.4vw, 44px) !important;
  line-height: 1.08 !important;
  letter-spacing: .01em !important;
  text-align: center;
  color: var(--vl-legal-title) !important;
  margin: 0 !important;
}

/* Тонкая линия под заголовком */
body.vl-legal-page .entry-header:after{
  content:"";
  display:block;
  height: 1px;
  max-width: var(--vl-legal-maxw);
  margin: 14px auto 0;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.12),
    rgba(255,255,255,0)
  );
}

/* =========================
   3) Breadcrumbs (Rank Math) if present
   ========================= */
body.vl-legal-page .rank-math-breadcrumb{
  max-width: var(--vl-legal-maxw);
  margin: 0 auto 10px;
  font-family: var(--vl-legal-font-ui);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--vl-legal-muted);
}
body.vl-legal-page .rank-math-breadcrumb a{
  color: rgba(255,255,255,.78);
  text-decoration: none;
}
body.vl-legal-page .rank-math-breadcrumb a:hover{
  color: rgba(255,255,255,.92);
}

/* =========================
   4) Prose column
   ========================= */
body.vl-legal-page .entry-content{
  max-width: var(--vl-legal-maxw) !important;
  margin-left: auto !important;
  margin-right: auto !important;

  font-family: var(--vl-legal-font-copy) !important;
  font-size: 16px !important;
  line-height: 1.85 !important;
  color: var(--vl-legal-text) !important;
}

/* =========================
   5) HARD OVERRIDES (Gutenberg / inline)
   (ТОЛЬКО внутри entry-content)
   ========================= */
body.vl-legal-page .entry-content .has-text-color{ color: inherit !important; }
body.vl-legal-page .entry-content .has-background{ background: transparent !important; }

body.vl-legal-page .entry-content [style*="color"]{ color: inherit !important; }
body.vl-legal-page .entry-content [style*="background"]{ background: transparent !important; }
body.vl-legal-page .entry-content [style*="font-size"]{ font-size: inherit !important; }

body.vl-legal-page .entry-content .has-small-font-size,
body.vl-legal-page .entry-content .has-medium-font-size,
body.vl-legal-page .entry-content .has-large-font-size,
body.vl-legal-page .entry-content .has-huge-font-size{
  font-size: inherit !important;
}

/* =========================
   6) Meta block (class: vl-legal-meta)
   ========================= */
body.vl-legal-page .entry-content .vl-legal-meta{
  font-family: var(--vl-legal-font-ui) !important;
  font-size: 12px !important;
  line-height: 1.65 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.62) !important;
  margin: 0 0 16px !important;
}

/* =========================
   7) Text elements
   ========================= */
body.vl-legal-page .entry-content p{
  margin: 0 0 14px !important;
}

body.vl-legal-page .entry-content h2{
  margin: 22px 0 10px !important;
  font-family: var(--vl-legal-font-copy) !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  line-height: 1.25 !important;
  color: rgba(255,255,255,.92) !important;
  scroll-margin-top: 120px;
}

body.vl-legal-page .entry-content h3{
  margin: 16px 0 8px !important;
  font-family: var(--vl-legal-font-copy) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: 1.28 !important;
  color: rgba(255,255,255,.90) !important;
  scroll-margin-top: 120px;
}

body.vl-legal-page .entry-content h4{
  margin: 14px 0 8px !important;
  font-family: var(--vl-legal-font-ui) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  color: rgba(255,255,255,.88) !important;
}

/* Links */
body.vl-legal-page .entry-content a{
  color: var(--vl-legal-link) !important;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--vl-legal-link-underline);
}
body.vl-legal-page .entry-content a:hover{
  text-decoration-color: var(--vl-legal-link-underline-hover);
}

/* Lists */
body.vl-legal-page .entry-content ul,
body.vl-legal-page .entry-content ol{
  margin: 0 0 14px 1.2em !important;
  padding: 0 !important;
}
body.vl-legal-page .entry-content li{
  margin: 6px 0;
}

/* Separator */
body.vl-legal-page .entry-content hr,
body.vl-legal-page .entry-content .wp-block-separator{
  border: 0;
  height: 1px;
  background: var(--vl-legal-border-soft);
  margin: 18px 0;
}

/* Blockquote */
body.vl-legal-page .entry-content blockquote{
  margin: 18px 0;
  padding: 14px 16px;
  border-left: 2px solid rgba(255,255,255,.22);
  background: var(--vl-legal-quote-bg);
  border-radius: 14px;
}
body.vl-legal-page .entry-content blockquote p{
  margin: 0 !important;
  color: var(--vl-legal-soft) !important;
}

/* Tables */
body.vl-legal-page .entry-content table{
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0 18px;
  font-family: var(--vl-legal-font-ui) !important;
  font-size: 14px !important;
  color: rgba(255,255,255,.86) !important;
}
body.vl-legal-page .entry-content th,
body.vl-legal-page .entry-content td{
  border: 1px solid rgba(255,255,255,.08) !important;
  padding: 10px 12px !important;
  vertical-align: top;
}
body.vl-legal-page .entry-content th{
  background: rgba(255,255,255,.03) !important;
  color: rgba(255,255,255,.92) !important;
  font-weight: 700 !important;
}

/* Code */
body.vl-legal-page .entry-content code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
  font-size: .92em !important;
  background: var(--vl-legal-code-bg) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  padding: .12em .35em !important;
  border-radius: 10px !important;
}
body.vl-legal-page .entry-content pre{
  margin: 16px 0;
  padding: 14px 16px;
  overflow: auto;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
}

/* Images / captions */
body.vl-legal-page .entry-content img{
  max-width: 100%;
  height: auto;
  border-radius: 14px;
}
body.vl-legal-page .wp-caption-text{
  font-family: var(--vl-legal-font-ui);
  font-size: 12px;
  color: var(--vl-legal-muted);
  margin-top: 8px;
}

/* =========================
   8) Mobile
   ========================= */
@media (max-width: 768px){
  body.vl-legal-page{
    --vl-legal-pad-top: 90px;
    --vl-legal-side: 16px;
  }

  body.vl-legal-page .entry-content{
    font-size: 15.5px !important;
  }

  body.vl-legal-page .entry-content h2{ font-size: 20px !important; }
  body.vl-legal-page .entry-content h3{ font-size: 17px !important; }
}





/* =========================
   Global Scrollbar (Premium)
   ========================= */

/* 1) Подсказываем браузеру: сайт в dark-схеме */
:root { color-scheme: dark; }

/* 2) Firefox */
html{
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) rgba(255,255,255,.06);
}

/* 3) Chrome/Edge/Safari */
@media (pointer:fine){
  ::-webkit-scrollbar{ width: 12px; height: 12px; }
  ::-webkit-scrollbar-track{
    background: rgba(255,255,255,.06);
  }
  ::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,.18);
    border-radius: 999px;
    border: 3px solid rgba(0,0,0,0);
    background-clip: padding-box;
  }
  ::-webkit-scrollbar-thumb:hover{
    background: rgba(255,255,255,.28);
    background-clip: padding-box;
  }
}












































/* =========================================================
   Footer — Vector Lex / Final Minimal
   ========================================================= */

.page-auth .vl-footer-minimal{
  display: none;
}

.vl-footer-minimal{
  position: relative;
  margin-top: 56px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: transparent;
}

.vl-footer-minimal__inner{
  width: min(1240px, calc(100vw - 48px));
  margin: 0 auto;
  padding: 38px 0 26px;
}

.vl-footer-minimal__grid{
  display: grid;
  grid-template-columns: 1.02fr .96fr .72fr .95fr;
  align-items: start;
}

.vl-footer-minimal__col{
  min-width: 0;
  padding: 0 32px;
}

.vl-footer-minimal__col:first-child{
  padding-left: 0;
}

.vl-footer-minimal__col:last-child{
  padding-right: 0;
}

@media (min-width: 1025px){
  .vl-footer-minimal__col + .vl-footer-minimal__col{
    border-left: 1px solid rgba(255,255,255,.06);
  }
}

/* Заголовки колонок — PT Sans */
.vl-footer-minimal__title{
  margin: 0 0 18px;
  font-family: var(--vl-font-ui);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255,255,255,.46);
}

/* Основной текст footer — PT Serif */
.vl-footer-minimal__label,
.vl-footer-minimal__worktime,
.vl-footer-minimal__mail,
.vl-footer-minimal__links a,
.vl-footer-minimal__copy,
.vl-footer-minimal__requisites{
  font-family: var(--vl-font-copy);
}

/* Первый столбец */
.vl-footer-minimal__label{
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  color: rgba(255,255,255,.56);
}

.vl-footer-minimal__label--mail{
  margin-top: 22px;
}

.vl-footer-minimal__worktime{
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255,255,255,.84);
}

.vl-footer-minimal__mail{
  display: inline-block;
  color: rgba(255,255,255,.82);
  text-decoration: none;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  transition: color .2s ease, opacity .2s ease;
}

.vl-footer-minimal__mail:hover{
  color: #FFFFFF;
  opacity: 1;
}

/* Ссылки */
.vl-footer-minimal__links{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}

.vl-footer-minimal__links a{
  display: inline-block;
  color: rgba(255,255,255,.84);
  text-decoration: none;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.58;
  transition: color .2s ease, opacity .2s ease;
}

.vl-footer-minimal__links a:hover{
  color: #FFFFFF;
  opacity: 1;
}

/* Контакты текстом */
.vl-footer-minimal__links--contacts{
  gap: 14px;
}

/* Оплата */
.vl-footer-minimal__payments{
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
}

.vl-footer-minimal__payments li{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.vl-footer-minimal__payments{
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 14px;
}

.vl-footer-minimal__payments li{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
}

.vl-footer-minimal__payments img{
  display: block;
  width: auto;
  height: auto;
  max-width: none;
  object-fit: contain;
  opacity: .86;
  filter: grayscale(1) saturate(0) brightness(1.72) contrast(.92);
  transition: opacity .18s ease, filter .18s ease, transform .18s ease;
}

/* Оптическое выравнивание логотипов */
.vl-footer-minimal__payments li:nth-child(1) img{ height: 15px; } /* Visa */
.vl-footer-minimal__payments li:nth-child(2) img{ height: 15px; } /* Мир */
.vl-footer-minimal__payments li:nth-child(3) img{ height: 17px; } /* Mastercard */
.vl-footer-minimal__payments li:nth-child(4) img{ height: 16px; } /* ЮMoney */
.vl-footer-minimal__payments li:nth-child(5) img{ height: 16px; } /* СБП */

.vl-footer-minimal__payments li:hover img{
  opacity: .96;
  filter: grayscale(1) saturate(0) brightness(1.86) contrast(.95);
}

/* Нижняя строка */
.vl-footer-minimal__bottom{
  margin-top: 30px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.vl-footer-minimal__copy{
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255,255,255,.54);
  white-space: nowrap;
}

.vl-footer-minimal__requisites{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255,255,255,.44);
  text-align: right;
}

.vl-footer-minimal__dot{
  color: rgba(255,255,255,.22);
}

/* Tablet */
@media (max-width: 1024px){
  .vl-footer-minimal__inner{
    padding: 34px 0 24px;
  }

  .vl-footer-minimal__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 36px;
  }

  .vl-footer-minimal__col{
    padding: 0;
    border-left: none !important;
  }

  .vl-footer-minimal__payments{
    flex-wrap: wrap;
    gap: 12px 14px;
  }



  .vl-footer-minimal__bottom{
    flex-direction: column;
    align-items: flex-start;
  }

  .vl-footer-minimal__requisites{
    justify-content: flex-start;
    text-align: left;
  }
}

/* Mobile */
@media (max-width: 640px){
  .vl-footer-minimal{
    margin-top: 42px;
  }

  .vl-footer-minimal__inner{
    width: min(1240px, calc(100vw - 24px));
    padding: 28px 0 22px;
  }

  .vl-footer-minimal__grid{
    grid-template-columns: 1fr;
    gap: 0;
  }

  .vl-footer-minimal__col{
    padding: 0;
  }

  .vl-footer-minimal__col + .vl-footer-minimal__col{
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.06);
  }

  .vl-footer-minimal__title{
    margin-bottom: 16px;
  }

  .vl-footer-minimal__label{
    font-size: 13px;
  }

  .vl-footer-minimal__worktime,
  .vl-footer-minimal__mail,
  .vl-footer-minimal__links a{
    font-size: 14px;
  }

  .vl-footer-minimal__payments{
    gap: 12px;
  }

.vl-footer-minimal__payments li:nth-child(1) img{ height: 14px; } /* Visa */
.vl-footer-minimal__payments li:nth-child(2) img{ height: 14px; } /* Мир */
.vl-footer-minimal__payments li:nth-child(3) img{ height: 16px; } /* Mastercard */
.vl-footer-minimal__payments li:nth-child(4) img{ height: 15px; } /* ЮMoney */
.vl-footer-minimal__payments li:nth-child(5) img{ height: 15px; } /* СБП */

  .vl-footer-minimal__bottom{
    margin-top: 24px;
    padding-top: 14px;
    gap: 10px;
  }

  .vl-footer-minimal__copy,
  .vl-footer-minimal__requisites{
    font-size: 13px;
  }
}



/* =========================================
   Header dropdown — Services clean premium
   ========================================= */

@media (min-width: 922px){

  /* Родительский пункт */
  .ast-desktop .main-header-menu > .menu-item-has-children{
    position: relative;
  }

  /* Невидимый мостик между пунктом меню и dropdown,
     чтобы меню не пропадало при наведении */
  .ast-desktop .main-header-menu > .menu-item-has-children::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 14px;
  }

  /* Сам dropdown */
  .ast-desktop .main-header-menu > .menu-item-has-children > .sub-menu{
    left: 50% !important;
    top: calc(100% + 6px) !important;
    right: auto !important;
    width: 360px;
    min-width: 360px;
    margin: 0 !important;
    padding: 10px !important;

    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 18px !important;

    background:
      linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)),
      rgba(10,10,10,.97) !important;

    box-shadow: none !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateX(-50%) translateY(6px);
    transition:
      opacity .18s ease,
      transform .18s ease,
      visibility .18s ease;

    z-index: 1000;
  }

  /* Маленький верхний носик */
  .ast-desktop .main-header-menu > .menu-item-has-children > .sub-menu::before{
    content: "";
    position: absolute;
    left: 50%;
    top: -6px;
    width: 12px;
    height: 12px;
    transform: translateX(-50%) rotate(45deg);
    background: rgba(10,10,10,.97);
    border-top: 1px solid rgba(255,255,255,.10);
    border-left: 1px solid rgba(255,255,255,.10);
    box-shadow: none;
  }

  /* Показ dropdown */
  .ast-desktop .main-header-menu > .menu-item-has-children:hover > .sub-menu,
  .ast-desktop .main-header-menu > .menu-item-has-children.focus > .sub-menu,
  .ast-desktop .main-header-menu > .menu-item-has-children.ast-submenu-expanded > .sub-menu{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }

  /* Список */
  .ast-desktop .main-header-menu > .menu-item-has-children > .sub-menu > li{
    margin: 0 !important;
  }

  .ast-desktop .main-header-menu > .menu-item-has-children > .sub-menu > li + li{
    margin-top: 2px !important;
  }

  /* Ссылки */
  .ast-desktop .main-header-menu > .menu-item-has-children > .sub-menu > li > a{
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 11px 14px !important;
    border-radius: 12px;

    background: transparent !important;
    color: rgba(255,255,255,.78) !important;

    font-family: var(--vl-font-ui);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: .01em;
    text-decoration: none;

    white-space: normal;
    transition:
      background .16s ease,
      color .16s ease;
  }

  .ast-desktop .main-header-menu > .menu-item-has-children > .sub-menu > li > a:hover,
  .ast-desktop .main-header-menu > .menu-item-has-children > .sub-menu > li.current-menu-item > a,
  .ast-desktop .main-header-menu > .menu-item-has-children > .sub-menu > li.current_page_item > a,
  .ast-desktop .main-header-menu > .menu-item-has-children > .sub-menu > li.current-menu-ancestor > a{
    background: rgba(255,255,255,.045) !important;
    color: #FFFFFF !important;
  }

  /* Убираем старые стили Astra */
  .ast-desktop .main-header-menu > .menu-item-has-children > .sub-menu,
  .ast-desktop .main-header-menu > .menu-item-has-children > .sub-menu a{
    box-shadow: none !important;
  }
}



/* =========================================
   HOME / Advantages — mobile cleanup
   Вставить в конец style.css
   ========================================= */
@media (max-width: 767px){

  /* Чуть расширяем секцию по краям */
  .vl-adv__inner{
    padding-left: 12px;
    padding-right: 12px;
  }

  /* 5 иконок в одну линию без текста */
  .vl-adv__tabs{
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    overflow: visible;
    padding-bottom: 0;
    margin-bottom: 12px;
  }

  .vl-adv__tab{
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 12px 0;
    justify-content: center;
    gap: 0;
    border-radius: 12px;
  }

  /* Текст вкладок визуально скрываем, но оставляем для доступности */
  .vl-adv__label{
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .vl-adv__ico{
    width: 18px;
    height: 18px;
  }

  .vl-adv__icoImg{
    width: 18px;
    height: 18px;
  }

  /* Чуть шире и аккуратнее сама карточка */
  .vl-adv__panel{
    border-radius: 16px;
    padding: 16px 14px;
  }

  .vl-adv__panelGrid{
    gap: 14px;
  }

  .vl-adv__panelTitle{
    margin-bottom: 8px;
    font-size: 18px;
    line-height: 1.32;
  }

  .vl-adv__panelText{
    font-size: 15px;
    line-height: 1.56;
    max-width: none;
  }

  /* Убираем mobile-чипы */
  .vl-adv__chips{
    display: none;
  }

  /* Демо-виджеты не зажимаем по ширине */
  .vl-adv__panelCol--demo{
    justify-content: stretch;
  }

  .vl-proof,
  .vl-tl,
  .vl-fmt,
  .vl-prv,
  .vl-sup{
    max-width: none;
  }
}

/* =========================================
   Reviews badges — mobile
   Вставить в конец style.css
   ========================================= */
@media (max-width: 767px){

  .vl-reviewsHome__badges{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
  }

  .vl-rTrust{
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 0 10px;
    gap: 6px;
    justify-content: center;
  }

  .vl-rTrust__icon{
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    min-width: 16px;
  }

  .vl-rTrust__icon img{
    width: 16px;
    height: 16px;
  }

  .vl-rTrust.is-yandex .vl-rTrust__icon{
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    min-width: 16px;
  }

  .vl-rTrust.is-yandex .vl-rTrust__icon img{
    width: 16px;
    height: 16px;
  }

  .vl-rTrust__label{
    font-size: 12px;
    white-space: nowrap;
  }

  .vl-rTrust__score{
    min-height: 20px;
    padding: 0 7px;
    font-size: 11px;
  }
}

@media (max-width: 374px){
  .vl-rTrust{
    padding: 0 8px;
    gap: 5px;
  }

  .vl-rTrust__label{
    font-size: 11px;
  }

  .vl-rTrust__score{
    padding: 0 6px;
    font-size: 10px;
  }
}