:root{
  /* База чуть светлее, с холодным сине-бирюзовым bias под акцент сайта */
  --bg: #0e151e;
  /* «Пол» страницы и стык с футером — как на главной (#0d1117) */
  --bg2:#0d1117;
  /* Нижний «пол» html / #site-footer; чуть темнее прежнего #090d13 */
  --siteFooterFloor: #05080c;
  --panel:#141f2e;
  --panel2:#172436;
  --text:#e7eef9;
  --muted:#9fb0c8;
  --line: rgba(255,255,255,.08);
  --accent:#27d3ff;
  --accent2:#7c3aed;
  --good:#19c37d;
  --warn:#fbbf24;
  --bad:#ef4444;
  --shadow: 0 20px 50px rgba(0,0,0,.45);
  --radius: 16px;
  --radius2: 22px;
  --max: 1180px;
  --ease: cubic-bezier(.2,.8,.2,1);
  --cardRadius: 20px;
  --cardCoverH: 280px;
  --cardGap: 14px;
  --siteFontStack: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  /* Только названия плиток на главной (.gameTitle) и карточек в каталоге (.tileTitle); задаётся из SEO (seo.tileTitleFont). */
  --tileTitleFontStack: "Montserrat", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  /* Всплывающие блоки (акции/новости): под шапкой и строкой хлебных крошек */
  --siteNavHeight: 64px;
  --siteCrumbBarReserve: 44px;
  /* Фактическая высота #site-header; до initSite = 64px, после — измерение в JS (убирает щель под крошками) */
  --siteHeaderReserve: 64px;
  --sitePopupDockBelowCrumbsGap: 4px;
  /* Сдвиг колонки попапов чуть выше (ниже значение top в calc). */
  --sitePopupDockLift: 12px;
  /* Отступ контента под крошками (юрстраницы, FAQ, новости, статус и т.д.) */
  --siteCrumbsContentPad: 20px;
  /* Единый зазор #main → футер: как у корня /catalog (13px) — все публичные страницы */
  --siteMainPadBottom: 13px;
  /* Нижний padding первой секции #main до низа main (эталон — /not-working, .section--nw) */
  --siteTextPageSectionPadBottom: 32px;
  /*
   * Каталог: страница категории / избранного (без «карточки» вокруг контента).
   * Нижний padding .container — вместе с --siteTextPageSectionPadBottom и --siteMainPadBottom
   * даёт ~80–100px от последнего блока (сетка или «Рекомендуем») до футера, как на эталоне.
   * clamp: на мобильных не раздувает зазор; на широких — визуально тот же порядок.
   */
  --siteCatalogCategoryEndPad: clamp(30px, 4.2vw, 52px);
}

*{box-sizing:border-box}
body{
  /* В паре с html { min-height:100% } без height:100% на body — нет «хвоста» под подвалом на коротких страницах */
  height: auto;
  margin:0;
  font-family: var(--siteFontStack);
  color:var(--text);
  background:
    radial-gradient(1000px 560px at 72% -15%, rgba(39,211,255,.07), transparent 56%),
    var(--bg);
  --fineprintBg:
    radial-gradient(1000px 560px at 72% -15%, rgba(39,211,255,.12), transparent 56%),
    linear-gradient(180deg, #111b29 0%, #0d1117 100%);
  overflow-x:hidden;
}

/* Initial app boot is handled by inline #boot-loader injected into HTML. */

/* ── Skeleton utilities (no layout shift) ─────────────────────────────────── */
:root{
  --skel-bg1: rgba(255,255,255,.10);
  --skel-bg2: rgba(255,255,255,.05);
  --skel-bd: rgba(255,255,255,.06);
}
.skel{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(90deg, var(--skel-bg1), var(--skel-bg2), var(--skel-bg1));
  background-size: 200% 100%;
  border: 1px solid var(--skel-bd);
  animation: skelShimmer 1.15s ease-in-out infinite;
}
.skelLine{
  height: 12px;
  border-radius: 999px;
}
@keyframes skelShimmer{
  0%{ background-position: 0% 0%; }
  100%{ background-position: -200% 0%; }
}
@media (prefers-reduced-motion: reduce){
  .skel{ animation: none; }
}

/* Background-image loader: put real bg only after it is loaded */
.bgLoad{
  position: relative;
}
.bgLoad.isLoading::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--skel-bg1), var(--skel-bg2), var(--skel-bg1));
  background-size: 200% 100%;
  border: 1px solid var(--skel-bd);
  animation: skelShimmer 1.15s ease-in-out infinite;
  pointer-events:none;
}
.bgLoad.isLoaded::after{
  opacity:0;
  transition: opacity .35s var(--ease);
}
.bgLoad{
  transition: background-image .0s linear, filter .25s var(--ease);
}

/* Rich content images: reserve space early to reduce late-load layout jumps */
#article-body img,
.articlePageBody img,
#news-body img,
#page-body img,
.productDetailRich img,
.productDetailBody img,
.pFeaturesText img{
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

a{color:inherit;text-decoration:none}
button,input{font:inherit}
select,textarea{font-family:inherit}

.container{max-width:var(--max);margin:0 auto;padding:0 18px}
.row{display:flex;align-items:center;gap:12px}
.spacer{flex:1}

.skip{
  position:absolute;left:-999px;top:12px;
  background:var(--panel);border:1px solid var(--line);padding:10px 12px;border-radius:12px;
}
.skip:focus{left:18px;z-index:9999}

.topbar{
  position:sticky;
  top:0;
  z-index:81;
  backdrop-filter: blur(12px) saturate(1.05);
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
  background:
    radial-gradient(900px 140px at 28% 0%, rgba(39,211,255,.09), transparent 68%),
    rgba(14,21,32,.58);
  /* Чёткая граница сверху/снизу + центральная «неоновая» полоска (::after) */
  border-top: 1px solid rgba(39,211,255,.2);
  border-bottom: 1px solid rgba(255,255,255,.11);
  box-shadow: 0 12px 28px rgba(0,0,0,.2);
}

/* Публичный сайт: шапка закреплена при прокрутке (у admin #site-header скрыт) */
#site-header:not([hidden]){
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
}
body:not(.adminPage){
  padding-top: var(--siteHeaderReserve);
  /* Короткие страницы: flex-колонка, футер внизу; не ломаем body.adminPage */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
/* Юр. страницы: под радиалом подложка = «пол» футера (футер сразу под контентом). */
body:not(.adminPage):has(#legal-head){
  background-color: var(--siteFooterFloor, #05080c);
}
/* Кастомные (page): не задаём тот же тёмный floor на весь body — иначе зазор между
   #main и футером (margin-top:auto) даёт ровную почти чёрную полосу, чужую градиенту #main. */
body:not(.adminPage) #site-footer{
  flex-shrink: 0;
  /* Короткие страницы: футер внизу вьюпорта без пустого «хвоста» #main (см. #main flex/min-height) */
  margin-top: auto;
}
body.adminPage{
  padding-top: 0;
  height: 100%;
  min-height: 100%;
}
html{
  /* Стык с низом вьюпорта / overscroll: тот же «пол», что #site-footer — без «чужой» полосы. */
  background-color: var(--siteFooterFloor, #05080c);
  min-height: 100%;
  min-height: 100dvh;
  /* Keep layout width stable when modals lock page scroll (no horizontal jump). */
  scrollbar-gutter: stable;
  scroll-padding-top: max(96px, calc(var(--siteHeaderReserve) + 12px));
}
html:has(body.adminPage){
  height: 100%;
  min-height: 100%;
  background-color: var(--bg);
}
/* Подвал — тот же шрифт, что у названий плиток (seo.tileTitleFont → --tileTitleFontStack) */
#site-footer{
  font-family: var(--tileTitleFontStack);
  /* Стык с html/body: тот же «пол», что низ .footer, без отдельной полоски */
  background-color: var(--siteFooterFloor, #05080c);
}
/* Категории каталога: иначе непрозрачный #site-footer перекрывает cat-bg — .footer с backdrop-filter «стеклит» только #090d13, а не фон страницы */
body.catBgPage #site-footer{
  background: none;
  background-color: transparent;
}
/* Лёгкая полоска по центру, к краям растворяется (премиальный акцент) */
.topbar::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  transform:translate(-50%, 1px);
  width:min(520px, 82%);
  height:2px;
  border-radius:999px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(39,211,255,.45),
    rgba(124,58,237,.28),
    rgba(39,211,255,.45),
    transparent
  );
  box-shadow:
    0 0 14px rgba(39,211,255,.42),
    0 0 32px rgba(39,211,255,.14);
  pointer-events:none;
  opacity:.88;
}

/* Крошки: полупрозрачный бар + лёгкое стекло, без нижней полоски (как в каталоге) */
.crumbBar{
  border-bottom: none;
  box-shadow: none;
  background-color: transparent;
  background-image:
    radial-gradient(1280px 680px at 50% -22%, rgba(39, 211, 255, 0.11), transparent 58%),
    radial-gradient(920px 540px at 100% 26%, rgba(39, 211, 255, 0.055), transparent 54%),
    radial-gradient(780px 480px at 0% 52%, rgba(124, 58, 237, 0.07), transparent 52%),
    linear-gradient(180deg, rgba(17,28,42,.58) 0%, rgba(14,21,30,.50) 44%, rgba(13,17,23,.44) 100%);
  backdrop-filter: blur(14px) saturate(1.06);
  -webkit-backdrop-filter: blur(14px) saturate(1.06);
}

/* Product page: make the crumb bar background truly full-bleed (100vw),
   even though the crumbs content sits inside a centered .container. */
body.page-product #site-crumbs{
  position: relative;
  background-image: none; /* use the full-bleed layer below */
}
body.page-product #site-crumbs::before{
  content:"";
  position:absolute;
  inset:0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1280px 680px at 50% -22%, rgba(39, 211, 255, 0.11), transparent 58%),
    radial-gradient(920px 540px at 100% 26%, rgba(39, 211, 255, 0.055), transparent 54%),
    radial-gradient(780px 480px at 0% 52%, rgba(124, 58, 237, 0.07), transparent 52%),
    linear-gradient(180deg, rgba(17,28,42,.58) 0%, rgba(14,21,30,.50) 44%, rgba(13,17,23,.44) 100%);
}
body.page-product #site-crumbs > .container{
  position: relative;
  z-index: 1;
}
/* Под фиксированными крошками: убираем «двойной» .section{28px} у первой секции.
   Исключения — тот же ритм, что у корня /catalog: #catalog-page-toolbar (см. —siteCrumbsContentPad) и
   /status (#status-head в .container): секции нужен padding-top под крошками, иначе карточка прижата к хедеру. */
body.siteHasCrumbs:not(.adminPage) #main > section.section:first-child:not(:has(#catalog-page-toolbar)):not(:has(#status-head)),
body:not(.adminPage):has(#site-crumbs:not([hidden])) #main > section.section:first-child:not(:has(#catalog-page-toolbar)):not(:has(#status-head)){
  padding-top: 0;
}
.crumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  padding:10px 0;
  font-size:12px;
  color: rgba(231,238,249,.78);
}
.crumb{
  color: rgba(231,238,249,.78);
  text-decoration:none;
  white-space:nowrap;
  max-width: 60ch;
  overflow:hidden;
  text-overflow:ellipsis;
}
a.crumb:hover{color: var(--text)}
.crumbSep{opacity:.6}

/* Default text tone for custom pages like legal docs */
#page-body{
  color: var(--muted);
  line-height: 1.75;
}

/* Admin auth screen: hide admin UI behind modal */
body.authLocked .adminLayout,
body.authLocked #reload,
body.authLocked .adminMain{
  visibility:hidden;
}

body.authLocked #site-header,
body.authLocked #site-footer{
  visibility:hidden;
}
.nav{
  height:64px;
  display:flex;align-items:center;gap:8px;
}
.nav > .spacer{min-width:6px}
.brand{
  display:flex;align-items:center;gap:7px;
  font-weight:800;letter-spacing:.15px;
  font-size:12.5px;
  flex-shrink:0;
}
.logo{
  width:30px;height:30px;border-radius:11px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.25), transparent 45%),
              linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 10px 24px rgba(39,211,255,.18);
}
.brandLogo{
  width:30px;
  height:30px;
  border-radius:11px;
  object-fit:cover;
  box-shadow: 0 10px 24px rgba(39,211,255,.18);
  display:block;
}
.badge{
  font-size:11px;color:var(--muted);
  padding:3px 7px;border-radius:999px;border:1px solid var(--line);
  background: rgba(255,255,255,.03);
}
.badge.robotsSelectBadge{
  white-space: nowrap;
  text-transform: lowercase;
}
.robotsField{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:280px;
  flex:0 1 360px;
}
.robotsFieldLabel{
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
.robotsField .robotsSelect{
  flex:1 1 auto;
  min-width:190px;
}

.pageLoaderBackdrop{
  position:absolute;
  inset:0;
  background:
    radial-gradient(800px 420px at 30% 20%, rgba(39,211,255,.12), transparent 60%),
    radial-gradient(900px 500px at 80% 0%, rgba(124,58,237,.11), transparent 62%),
    rgba(8,12,18,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.pageLoaderCard{
  position: relative;
  width: 100%;
  max-width: 420px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(18, 27, 42, 0.88), rgba(12, 18, 26, 0.78));
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
  padding: 18px 18px;
  text-align: center;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* No extra loader nodes: navigations reuse #boot-loader. */
.pageLoader,
.pageLoaderBackdrop,
.pageLoaderCard,
.pageLoaderInner,
.pageLoaderSpinner{
  display:none !important;
}

/* Preboot mask between pages: disable legacy dark overlay so it cannot conflict. */
html.site-preboot-nav body{ overflow: auto; }
html.site-preboot-nav body > *{ visibility: visible; }
html.site-preboot-nav body::before,
html.site-preboot-nav body::after{ content:none !important; display:none !important; }
.pageLoaderInner{
  width: 54px;
  height: 54px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(18,27,42,.55);
  box-shadow: 0 18px 50px rgba(0,0,0,.28), 0 0 40px rgba(39,211,255,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity: .78;
  transform: translateY(12px) scale(.955);
  transition: transform 1.05s cubic-bezier(0.22, 1, 0.36, 1), opacity .95s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .95s cubic-bezier(0.22, 1, 0.36, 1);
}
.pageLoader.isOn .pageLoaderInner{
  opacity: 1;
  transform: translateY(0) scale(1);
}
.pageLoaderSpinner{
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  border-radius: 50%;
  box-sizing: border-box;
  border: 3px solid rgba(255, 255, 255, 0.12);
  border-top-color: rgba(39, 211, 255, 0.95);
  border-right-color: rgba(39, 211, 255, 0.28);
  animation: spin 2.1s linear infinite;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce){
  .pageLoaderSpinner{
    animation-duration: 3.8s;
  }
}
.pageLoaderCard .pageLoaderSpinner{
  margin-bottom: 12px;
}

/* Cookie consent banner */
.cookieBanner{
  position:fixed;
  left:12px;
  right:12px;
  bottom:12px;
  z-index:90;
  pointer-events:none;
}
.cookieInner{
  max-width: min(var(--max), calc(100% - 0px));
  margin:0 auto;
  border:1px solid var(--line);
  border-radius:16px;
  background: rgba(18,27,42,.92);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  padding:12px 12px;
  display:flex;
  gap:12px;
  align-items:center;
  pointer-events:auto;
}
.cookieText{color:var(--muted);line-height:1.5;flex:1;min-width:0}
.cookieActions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* Footer additional "users" block */
.footerUsers{
  margin-top:12px;
  border:1px solid var(--line);
  border-radius:16px;
  background: rgba(255,255,255,.02);
  padding:12px 14px;
}
.footerUsersTitle{
  font-weight:900;
  margin-bottom:10px;
}
.footerUsersLinks{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:8px 14px;
}
.footerUsersLinks a{color:var(--muted)}
.footerUsersLinks a:hover{color:var(--text)}

@media (max-width: 720px){
  .footerUsersLinks{grid-template-columns: 1fr}
}

/* Status table (baunticheats-like, in our theme) */
.statusLegend{
  margin-bottom:12px;
}
.statusLegendInner--noDividers::after{display:none !important;}
.statusLegendInner--noDividers .statusLegendHead::after{display:none !important;}

.statusLegendInner{
  position:relative;
  border:1px solid var(--line);
  border-radius:18px;
  background: rgba(18,27,42,.42);
  box-shadow: 0 18px 45px rgba(0,0,0,.22);
  padding:16px 16px 22px;
  overflow:hidden;
}
/* Полоска внизу блока — как #status-head::after */
.statusLegendInner::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  border-radius:999px;
  background:linear-gradient(
    90deg,
    rgba(30,90,130,0) 0%,
    rgba(34,111,162,.52) 20%,
    rgba(42,128,184,.62) 50%,
    rgba(34,111,162,.52) 80%,
    rgba(30,90,130,0) 100%
  );
  box-shadow:0 0 8px rgba(36,122,182,.25), 0 0 16px rgba(36,122,182,.14);
  pointer-events:none;
}
.statusLegendHead{
  position:relative;
  font-family: var(--tileTitleFontStack);
  font-weight:900;
  font-size:15px;
  letter-spacing:-0.02em;
  color:var(--text);
  margin:0 0 14px;
  padding:0 0 14px;
  text-align:center;
  border-bottom:none;
}
/* Линия под заголовком — тот же стиль, что под шапкой страницы */
.statusLegendHead::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  border-radius:999px;
  background:linear-gradient(
    90deg,
    rgba(30,90,130,0) 0%,
    rgba(34,111,162,.52) 20%,
    rgba(42,128,184,.62) 50%,
    rgba(34,111,162,.52) 80%,
    rgba(30,90,130,0) 100%
  );
  box-shadow:0 0 8px rgba(36,122,182,.25), 0 0 16px rgba(36,122,182,.14);
  pointer-events:none;
}
.statusLegendGrid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap:12px;
}
.statusLegendIntro{
  margin:0 auto 14px;
  max-width:72ch;
  text-align:center;
  font-size:14px;
  line-height:1.55;
  color:var(--muted);
}
.statusLegendCard{
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(10,14,22,.35);
  padding:12px 12px 12px 14px;
  position:relative;
  min-height:100%;
  box-sizing:border-box;
  overflow:hidden;
  will-change: transform;
  transition:
    transform .22s var(--ease),
    border-color .22s var(--ease),
    box-shadow .22s var(--ease),
    background .22s var(--ease);
}
.statusLegendCard::before{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:3px;
  border-radius:999px;
  background: rgba(148,163,184,.55);
}
.statusLegendCard.stGood{
  border-color: rgba(25,195,125,.22);
  background: rgba(25,195,125,.06);
  box-shadow: 0 0 0 1px rgba(25,195,125,.08) inset;
}
.statusLegendCard.stGood::before{background: rgba(25,195,125,.9)}
.statusLegendCard.stBad{
  border-color: rgba(239,68,68,.24);
  background: rgba(239,68,68,.07);
  box-shadow: 0 0 0 1px rgba(239,68,68,.08) inset;
}
.statusLegendCard.stBad::before{background: rgba(239,68,68,.92)}
.statusLegendCard.stInfo{
  border-color: rgba(56,189,248,.24);
  background: rgba(56,189,248,.07);
  box-shadow: 0 0 0 1px rgba(56,189,248,.08) inset;
}
.statusLegendCard.stInfo::before{background: rgba(56,189,248,.92)}
.statusLegendCard.stWarn{
  border-color: rgba(251,191,36,.22);
  background: rgba(251,191,36,.06);
  box-shadow: 0 0 0 1px rgba(251,191,36,.08) inset;
}
.statusLegendCard.stWarn::before{background: rgba(251,191,36,.9)}
.statusLegendCard.stOrange{
  border-color: rgba(249,115,22,.24);
  background: rgba(249,115,22,.07);
  box-shadow: 0 0 0 1px rgba(249,115,22,.08) inset;
}
.statusLegendCard.stOrange::before{background: rgba(249,115,22,.92)}
.statusLegendCard.stViolet{
  border-color: rgba(167,139,250,.28);
  background: rgba(124,58,237,.08);
  box-shadow: 0 0 0 1px rgba(124,58,237,.1) inset;
}
.statusLegendCard.stViolet::before{background: rgba(167,139,250,.95)}
.statusLegendCard.stCyan{
  border-color: rgba(34,211,238,.26);
  background: rgba(34,211,238,.07);
  box-shadow: 0 0 0 1px rgba(34,211,238,.1) inset;
}
.statusLegendCard.stCyan::before{background: rgba(34,211,238,.95)}
.statusLegendCard.stMagenta{
  border-color: rgba(244,63,94,.26);
  background: rgba(244,63,94,.07);
  box-shadow: 0 0 0 1px rgba(244,63,94,.1) inset;
}
.statusLegendCard.stMagenta::before{background: rgba(244,114,182,.95)}
.statusLegendCard.stGray{
  border-color: rgba(148,163,184,.3);
  background: rgba(148,163,184,.08);
  box-shadow: 0 0 0 1px rgba(148,163,184,.12) inset;
}
.statusLegendCard.stGray::before{background: rgba(148,163,184,.88)}
.statusLegendCard.stRose{
  border-color: rgba(251,113,133,.28);
  background: rgba(251,113,133,.07);
  box-shadow: 0 0 0 1px rgba(251,113,133,.1) inset;
}
.statusLegendCard.stRose::before{background: rgba(251,113,133,.95)}
.statusLegendCard::after{
  content:"";
  position:absolute;
  left:12%;
  right:12%;
  top:0;
  height:2px;
  border-radius:0 0 999px 999px;
  background:linear-gradient(90deg, transparent, rgba(39,211,255,.45), rgba(124,58,237,.35), transparent);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s var(--ease), filter .22s var(--ease);
  z-index:2;
}
.statusLegendCardTop{
  position:relative;
  z-index:1;
  margin-bottom:8px;
}
.statusLegendCardBody{
  position:relative;
  z-index:1;
  color: var(--muted);
  font-size:13px;
  line-height:1.55;
}
.statusLegendCard .statusBadge{
  text-transform:none;
  font-size:12px;
}
.statusLegendCard:hover{
  transform:translateY(-4px);
  border-color: rgba(39,211,255,.26);
  box-shadow:
    0 14px 36px rgba(0,0,0,.26),
    0 0 0 1px rgba(39,211,255,.08) inset;
  background: rgba(10,14,22,.48);
}
.statusLegendCard:hover::after{
  opacity:.92;
  filter:brightness(1.08);
}
.statusLegendCard.stGood:hover{
  border-color: rgba(25,195,125,.38);
  box-shadow:0 14px 36px rgba(0,0,0,.26), 0 0 0 1px rgba(25,195,125,.1) inset;
}
.statusLegendCard.stBad:hover{
  border-color: rgba(239,68,68,.4);
  box-shadow:0 14px 36px rgba(0,0,0,.26), 0 0 0 1px rgba(239,68,68,.1) inset;
}
.statusLegendCard.stInfo:hover{
  border-color: rgba(56,189,248,.4);
  box-shadow:0 14px 36px rgba(0,0,0,.26), 0 0 0 1px rgba(56,189,248,.1) inset;
}
.statusLegendCard.stWarn:hover{
  border-color: rgba(251,191,36,.38);
  box-shadow:0 14px 36px rgba(0,0,0,.26), 0 0 0 1px rgba(251,191,36,.1) inset;
}
.statusLegendCard.stOrange:hover{
  border-color: rgba(249,115,22,.4);
  box-shadow:0 14px 36px rgba(0,0,0,.26), 0 0 0 1px rgba(249,115,22,.1) inset;
}
.statusLegendCard.stViolet:hover{
  border-color: rgba(167,139,250,.45);
  box-shadow:0 14px 36px rgba(0,0,0,.26), 0 0 0 1px rgba(124,58,237,.12) inset;
}
.statusLegendCard.stCyan:hover{
  border-color: rgba(34,211,238,.45);
  box-shadow:0 14px 36px rgba(0,0,0,.26), 0 0 0 1px rgba(34,211,238,.12) inset;
}
.statusLegendCard.stMagenta:hover{
  border-color: rgba(244,114,182,.45);
  box-shadow:0 14px 36px rgba(0,0,0,.26), 0 0 0 1px rgba(244,63,94,.12) inset;
}
.statusLegendCard.stGray:hover{
  border-color: rgba(148,163,184,.48);
  box-shadow:0 14px 36px rgba(0,0,0,.26), 0 0 0 1px rgba(148,163,184,.15) inset;
}
.statusLegendCard.stRose:hover{
  border-color: rgba(251,113,133,.45);
  box-shadow:0 14px 36px rgba(0,0,0,.26), 0 0 0 1px rgba(251,113,133,.12) inset;
}
@media (prefers-reduced-motion: reduce){
  .statusLegendCard{
    transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
    will-change:auto;
  }
  .statusLegendCard:hover{transform:none}
  .statusLegendCard::after{transition:opacity .2s ease}
}
@media (max-width: 520px){
  .statusLegendGrid{grid-template-columns: 1fr}
}

.statusGroups{display:grid;gap:12px}
.statusGroup{
  border:1px solid var(--line);
  border-radius:18px;
  background: rgba(18,27,42,.40);
  box-shadow: 0 18px 45px rgba(0,0,0,.22);
  overflow:hidden;
}
.statusGroupHead{
  padding:14px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.statusGroupTitle{
  font-family: var(--tileTitleFontStack);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-align:center;
}
.statusGroupMeta{margin-left:auto;color:var(--muted);font-size:12px}

.statusTable{
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background: rgba(18,27,42,.55);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
}
/* Одинаковые колонки у шапки и строк — иначе auto/разная ширина ломает выравнивание */
.statusHead{
  display:grid;
  grid-template-columns: minmax(0,1fr) 220px 300px;
  gap:12px;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font-size:13px;
}
.statusRow{
  display:grid;
  grid-template-columns: minmax(0,1fr) 220px 300px;
  gap:12px;
  padding:12px 14px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.06);
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.statusRow:hover{
  background: rgba(255,255,255,.03);
}
.statusRow:last-child{border-bottom:0}
.statusCell{min-width:0}
.statusCell.statusSt{
  display:flex;
  justify-content:center;
  align-items:center;
}
.statusHead .statusCell.statusSt{
  justify-content:center;
  text-align:center;
}
/* «Товар» — в одной вертикали с текстом названия (иконка 40px + gap 12px, выравнивание как у .statusTitle) */
.statusHead .statusCell.statusName{
  padding-left:52px;
  text-align:left;
  box-sizing:border-box;
}
.statusProductLink{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  color:inherit;
  text-decoration:none;
  transition: color .18s var(--ease);
}
.statusProductLink:hover{color:var(--accent)}
.statusThumbWrap{
  flex-shrink:0;
  width:40px;
  height:40px;
  border-radius:999px;
  overflow:hidden;
  border:1px solid rgba(39,211,255,.22);
  background: rgba(39,211,255,.08);
  box-shadow: 0 0 0 1px rgba(0,0,0,.2) inset;
}
.statusThumbWrap--ph{
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(39,211,255,.06);
}
.statusThumb{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.statusThumbLetter{
  font-size:15px;
  font-weight:900;
  color:var(--accent);
  line-height:1;
  user-select:none;
}
.statusTitleGroup{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex:1;
  min-width:0;
  overflow:hidden;
}
.statusTitle{
  font-family: var(--tileTitleFontStack);
  font-weight: 800;
  font-size: 14px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 0 1 auto;
}
.statusSub{color:var(--muted);font-size:12px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.statusBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  font-weight:900;
  text-transform:lowercase;
}
.statusPrice{font-weight:900}
.statusCell.statusBuy{
  display:flex;
  justify-content:center;
  align-items:center;
  min-width:0;
}
.statusHead .statusBuy{
  display:flex;
  justify-content:center;
}
.statusBuy--head{text-align:center;width:100%}
.statusBuyBtn{
  height:40px;
  min-height:40px;
  padding:0 14px;
  box-sizing:border-box;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:900;
  white-space:nowrap;
  width:100%;
  max-width:min(100%,220px);
  text-align:center;
}

@media (max-width: 980px){
  .statusHead,.statusRow{grid-template-columns: minmax(0,1fr) 150px 260px}
}
@media (max-width: 720px){
  .statusHead{display:none}
  .statusRow{
    grid-template-columns: 1fr;
    gap:8px;
  }
  .statusSt,.statusBuy{justify-self:stretch}
  .statusCell.statusSt{justify-content:flex-start}
  .statusCell.statusBuy{justify-content:center}
  .statusBuyBtn{max-width:min(100%,220px);justify-content:center}
}
.navlinks{
  display:flex;
  align-items:center;
  gap:2px;
  flex-shrink:1;
  min-width:0;
  overflow:hidden;
  padding-block:4px;
  margin-block:-4px;
}
.navlinks a{
  padding:4px 7px;
  border-radius:9px;
  font-size:13px;
  white-space:nowrap;
  color:var(--muted);
  border:1px solid transparent;
  flex-shrink:0;
  transition:
    background .18s var(--ease),
    color .18s var(--ease),
    border-color .18s var(--ease),
    box-shadow .18s var(--ease);
}
.navlinks a:hover{
  background:color-mix(in srgb, var(--accent) 10%, transparent);
  color:color-mix(in srgb, var(--accent) 85%, var(--text));
  border-color:color-mix(in srgb, var(--accent) 30%, transparent);
  box-shadow:0 0 10px color-mix(in srgb, var(--accent) 20%, transparent);
}

.navActions{
  display:flex;
  align-items:center;
  gap:4px;
  flex-shrink:0;
}
.navlinks a[aria-current="page"]{
  background:color-mix(in srgb, var(--accent) 16%, transparent);
  color:color-mix(in srgb, var(--accent) 95%, var(--text));
  border-color:color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow:0 0 14px color-mix(in srgb, var(--accent) 28%, transparent);
}
.navlinks a.navlink--promo{
  background: rgba(39, 211, 255, 0.1);
  color: var(--accent);
  border-color: rgba(39, 211, 255, 0.28);
  font-weight: 700;
}
.navlinks a.navlink--promo:hover{
  background: rgba(39, 211, 255, 0.16);
  color: #7fe8ff;
  border-color: rgba(39, 211, 255, 0.42);
}
.navlinks a.navlink--promo[aria-current="page"]{
  background: rgba(39,211,255,.14);
  border-color: rgba(39,211,255,.38);
  color: var(--text);
}

.nav .iconbtn{
  height:32px;
  min-width:32px;
  border-radius:10px;
}
.nav .iconbtn svg{width:14px;height:14px}
.nav .btn{
  height:32px;
  padding:0 11px;
  border-radius:10px;
  font-size:12px;
  font-weight:700;
  gap:7px;
  white-space:nowrap;
  flex-shrink:0;
}

.iconbtn{
  height:36px;min-width:36px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:12px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--text);
  transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.iconbtn:hover{transform: translateY(-1px);border-color: rgba(255,255,255,.16);background:rgba(255,255,255,.05)}
.iconbtn:active{transform: translateY(0)}
.iconbtn svg{width:16px;height:16px;opacity:.9}
.langSphere{border-radius:999px !important}

.langWidget{position:relative;display:inline-flex;align-items:center}
.langTriggerRow{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
}
.langCodeChip{
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
  line-height:1;
  padding:5px 7px;
  border-radius:9px;
  border:1px solid rgba(39,211,255,.32);
  background: rgba(39,211,255,.12);
  color: rgba(255,255,255,.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  min-width:2em;
  text-align:center;
  user-select:none;
  pointer-events:none;
}
.langDropdown{
  position:absolute;
  top:42px;
  right:0;
  min-width:220px;
  max-height:320px;
  overflow:auto;
  padding:8px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(18,27,42,.96);
  box-shadow: var(--shadow);
  display:none;
  z-index:200;
}
.langDropdown.isOpen{display:grid;gap:6px}
.langOptionBtn{
  height:34px;
  border-radius:10px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.02);
  color: var(--text);
  text-align:left;
  padding:0 10px;
  cursor:pointer;
}
.langOptionBtn:hover{background: rgba(39,211,255,.08); border-color: rgba(39,211,255,.25)}
.langOptionBtn.isSelected{
  background: rgba(39,211,255,.14);
  border-color: rgba(39,211,255,.42);
  box-shadow: 0 0 0 1px rgba(39,211,255,.18);
}
/* Не блокируем клики: зависший перевод иначе «глушит» кнопку навсегда */
.iconbtn[aria-busy="true"]{opacity:.65}

.btn{
  height:40px;
  padding:0 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--text);
  display:inline-flex;align-items:center;gap:10px;
  cursor: pointer;
  transition: transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.faqMoveBtns{
  display:flex;
  align-items:center;
  gap:4px;
  flex:0 0 auto;
}
/* Унифицированные кнопки ↑/↓ (FAQ, глоссарий, подвал и т.п.) */
.btn.faqMoveBtn,
.btn.moveBtn{
  width:32px;
  min-width:32px;
  height:32px;
  padding:0;
  border-radius:10px;
  justify-content:center;
  font-size:14px;
  font-weight:900;
  line-height:1;
  border-color:rgba(255,255,255,.09);
  background:rgba(255,255,255,.04);
  color:rgba(231,238,249,.65);
  transition:
    background .18s var(--ease),
    border-color .18s var(--ease),
    color .18s var(--ease),
    box-shadow .18s var(--ease),
    transform .14s var(--ease);
}
.btn.faqMoveBtn:hover:not(:disabled),
.btn.moveBtn:hover:not(:disabled){
  background:color-mix(in srgb, var(--accent) 14%, rgba(255,255,255,.06));
  border-color:color-mix(in srgb, var(--accent) 42%, transparent);
  color:color-mix(in srgb, var(--accent) 80%, var(--text));
  box-shadow:0 0 10px color-mix(in srgb, var(--accent) 18%, transparent);
  transform:translateY(-1px);
}
.btn.faqMoveBtn:active:not(:disabled),
.btn.moveBtn:active:not(:disabled){
  transform:translateY(0) scale(.95);
}
.btn.faqMoveBtn:disabled,
.btn.moveBtn:disabled{
  opacity:.22;
  cursor:not-allowed;
  pointer-events:none;
}

/* Admin: category preview upload/clear buttons */
.btn.catPcUploadBtn{
  min-width: 132px;
  height: 28px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 900;
  border-radius: 999px;
  border-color: rgba(39,211,255,.28);
  background: linear-gradient(135deg, rgba(39,211,255,.22), rgba(124,58,237,.16));
  box-shadow: 0 10px 26px rgba(0,0,0,.26), 0 0 18px rgba(39,211,255,.10);
  backdrop-filter: blur(6px);
}
.btn.catPcUploadBtn:hover{
  border-color: rgba(39,211,255,.45);
  background: linear-gradient(135deg, rgba(39,211,255,.28), rgba(124,58,237,.20));
}
.btn.catPcClearBtn{
  min-width: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 999px;
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-color: rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
}
.btn.catPcClearBtn:hover{
  border-color: rgba(255,255,255,.22);
  background: rgba(0,0,0,.28);
}
.btn:hover{transform: translateY(-1px);background:rgba(255,255,255,.05);border-color: rgba(255,255,255,.16)}
.btn.primary{
  border-color: rgba(39,211,255,.22);
  background: linear-gradient(135deg, rgba(39,211,255,.18), rgba(124,58,237,.14));
}
.btn.primary:hover{border-color: rgba(39,211,255,.35)}

/* Guarantees page CTA button */
.guarCtaBtn{
  white-space: nowrap;
  min-width: 170px;
  justify-content: center;
  padding: 0 18px;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.22), 0 0 22px rgba(39,211,255,.08);
}

/* Admin login modal: larger inputs */
#auth-modal .authForm{gap:12px}
#auth-modal .authInput{
  height:64px;
  border-radius:20px;
  font-size:17px;
  padding:0 20px;
  border: 2px solid rgba(255,255,255,.12);
  background:
    radial-gradient(520px 120px at 18% 0%, rgba(39,211,255,.08), transparent 60%),
    rgba(255,255,255,.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 10px 26px rgba(0,0,0,.22);
}
#auth-modal input.input.authInput{
  height:64px !important;
  border-radius:20px !important;
  font-size:17px !important;
  padding:0 20px !important;
}
#auth-modal .authInput::placeholder{color: rgba(159,176,200,.86)}
#auth-modal .authInput:focus{
  border-color: rgba(39,211,255,.42);
  box-shadow:
    0 0 0 5px rgba(39,211,255,.14),
    0 18px 46px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.08);
}

#auth-modal .btn#auth-submit{
  height:46px;
  padding:0 18px;
  border-radius:16px;
  font-weight:900;
}

.hamburger{display:none}

.hero{
  padding:42px 0 18px;
}
.heroGrid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:16px;
  align-items:stretch;
}
.heroCard{
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}
.heroCard::before{
  content:"";
  position:absolute;inset:-2px;
  background: radial-gradient(700px 300px at 10% 0%, rgba(39,211,255,.22), transparent 55%),
              radial-gradient(700px 300px at 90% 20%, rgba(124,58,237,.20), transparent 55%);
  opacity:.75;
  pointer-events:none;
}
.heroInner{position:relative;padding:28px}
.kicker{color:var(--muted);font-weight:600;letter-spacing:.2px}
h1{
  margin:10px 0 12px;
  font-size:40px;line-height:1.06;
}
.lead{color:var(--muted);max-width:56ch;line-height:1.55}
.ctaRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}

.stats{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:12px;
  padding:18px;
}
.stat{
  border:1px solid var(--line);
  background: rgba(18,27,42,.55);
  border-radius: var(--radius);
  padding:14px;
}
.stat .n{font-weight:800;font-size:22px}
.stat .t{color:var(--muted);font-size:13px;margin-top:2px}
.pillRow{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pill{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  color:var(--muted);
}

.section{
  padding:28px 0;
}
/*
  Снизу у первой секции #main: var(--siteTextPageSectionPadBottom) (как /not-working).
  Без :has(.page-home) на #main: в старых браузерах незнакомый :has() мог сделать весь селектор невалидным
  — правило тогда не применялось, оставался .section{ padding-bottom:28px }.
  Главная: <main class="page-home"> — исключаем #main:not(.page-home). Каталог/товар/отзывы — через body.
*/
body:not(.adminPage):not(.page-catalog):not(.page-product):not(.reviewsPage) #main:not(.page-home) > section.section:first-of-type{
  padding-bottom: var(--siteTextPageSectionPadBottom);
}
.sectionHead{
  display:flex;align-items:end;gap:12px;
  margin-bottom:14px;
}
.sectionHead h2{margin:0;font-size:22px}
.sectionHead p{margin:0;color:var(--muted)}

#legal-head{
  position: relative;
  overflow: hidden;
  justify-content: center;
  padding-bottom: 14px;
}
#legal-head .legalHeadMain{
  width: 100%;
}
#legal-title{
  margin: 0;
  font-size: clamp(23px, 2.65vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-align: center;
}
#legal-head #legal-lead{
  margin: 8px auto 0;
  max-width: 1120px;
  font-size: 1.0625rem;
  line-height: 1.42;
  text-align: center;
}
#legal-head::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(30,90,130,0) 0%,
    rgba(34,111,162,.52) 20%,
    rgba(42,128,184,.62) 50%,
    rgba(34,111,162,.52) 80%,
    rgba(30,90,130,0) 100%
  );
  box-shadow: 0 0 8px rgba(36,122,182,.25), 0 0 16px rgba(36,122,182,.14);
  pointer-events: none;
}

#page-head.isPaymentDelivery{
  position: relative;
  overflow: hidden;
  justify-content: center;
  padding-bottom: 14px;
}
#page-head.isPaymentDelivery .pageHeadMain{
  width: 100%;
}
#page-head.isPaymentDelivery #page-title{
  margin: 0;
  font-size: clamp(23px, 2.65vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-align: center;
}
#page-head.isPaymentDelivery #page-lead{
  margin: 8px auto 0;
  max-width: 1120px;
  font-size: 1.0625rem;
  line-height: 1.42;
  text-align: center;
}
#page-head.isPaymentDelivery .spacer{
  display: none;
}
#page-head.isPaymentDelivery::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(30,90,130,0) 0%,
    rgba(34,111,162,.52) 20%,
    rgba(42,128,184,.62) 50%,
    rgba(34,111,162,.52) 80%,
    rgba(30,90,130,0) 100%
  );
  box-shadow: 0 0 8px rgba(36,122,182,.25), 0 0 16px rgba(36,122,182,.14);
  pointer-events: none;
}

/*
  Единый отступ под крошками до контента (первая секция #main) — padding-top у .container.
  Не трогаем каталог (.section с #catalog-page-toolbar) и товар.
  /status: верх карточки — в блоке «как #catalog-page-toolbar > .container» (26px), не дублируем здесь.
*/
#main > section.section:first-child > .container:has(#legal-head),
#main > section.section:first-child > .container:has(#page-head),
#main > section.section:first-child > .container:has(#guar-head),
#main > section.section:first-child > .container:has(#con-head),
#main > section.section:first-child > .container:has(#nw-page),
#main > section.section:first-child > .container:has(#rev-head),
#main > section.section:first-child.section--news > .container,
#main > section.section:first-child.section--faq > .container,
#main > section.section:first-child.section--promo > .container,
#main > section.section:first-child.section--glossary > .container,
#main > section.section:first-child.section--articles > .container,
#main > section.section:first-child.section--article > .container{
  padding-top: var(--siteCrumbsContentPad);
}

/* Главная: плотнее блоки (hero → секции → «Популярные игры») */
.page-home .hero{
  padding:28px 0 6px;
}
/* Световая полоска между блоками (и над «Популярные игры») — как на FAQ; ширина = .container, не на весь экран */
.page-home > section.section{
  padding: 0 0 4px;
}
.page-home > section.section > .container{
  position: relative;
  padding-top: 40px;
}
.page-home > section.section > .container::before{
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 16px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    color-mix(in srgb, var(--accent) 65%, transparent),
    rgba(255, 255, 255, 0.1),
    transparent
  );
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 18%, transparent);
  opacity: 0.85;
}
.page-home .sectionHead{
  margin-bottom:10px;
}
.page-home > section.section .sectionHead h2{
  font-size: clamp(23px, 2.65vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.page-home > section.section .sectionHead p{
  font-size: 1.0625rem;
  line-height: 1.55;
}
/* Заголовок + подзаголовок над сеткой (удобство сервиса, популярные игры) — по центру, как сетка карточек ниже */
.page-home > section.section .sectionHead{
  align-items: center;
}
.page-home > section.section .sectionHead > div{
  width: 100%;
  text-align: center;
}
.page-home .page-homeCatalogCta{
  margin-top:32px;
  margin-bottom:-6px;
}

/* Секция «каталог игр»: тот же внешний отступ, что у «Топ месяца» — ритм по вертикали */
.page-home > section.section:has(#home-catalog-toolbar){
  margin-top: var(--home-major-block-gap, 22px);
  padding-bottom: var(--siteTextPageSectionPadBottom);
}

/* Подложка блока каталога: как фон страницы (--bg), чуть светлее рамка */
.page-home > section.section:has(#home-catalog-toolbar) > .container{
  position: relative;
  background: var(--bg);
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  /* вертикальные поля как у блока «Топ месяца» над ним */
  padding-top: 24px;
  padding-bottom: 24px;
}
/* Верх блока «Каталог игр» — светящаяся полоска как у секции «Почему удобно» */
.page-home > section.section:has(#home-catalog-toolbar) > .container::before{
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  opacity: 0.88;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    color-mix(in srgb, var(--accent) 65%, transparent),
    rgba(255, 255, 255, 0.1),
    transparent
  );
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Главная: карусель «Топ месяца» над каталогом игр */
.page-home > section.section.homeTopMonthSection{
  margin-top: var(--home-major-block-gap, 22px);
  margin-bottom: 0;
}
.page-home > section.section.homeTopMonthSection > .container{
  position: relative;
  background: var(--bg);
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  padding: 24px 18px 24px;
  overflow: hidden;
}
.page-home > section.section.homeTopMonthSection > .container::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    color-mix(in srgb, var(--accent) 65%, transparent),
    rgba(255, 255, 255, 0.1),
    transparent
  );
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 18%, transparent);
  opacity: 0.88;
}
.homeTopMonth{
  position: relative;
  --homeTopMonthGap: 14px;
}
/* Заголовок над слайдером — те же правила, что у блока «Каталог игр» (.sectionHead на главной) */
.page-home .homeTopMonth > .sectionHead{
  margin-bottom: 10px;
  align-items: center;
}
.page-home .homeTopMonth > .sectionHead > div{
  width: 100%;
  text-align: center;
}
.page-home .homeTopMonth > .sectionHead h2{
  margin: 0;
  font-size: clamp(23px, 2.65vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.page-home .homeTopMonth > .sectionHead p{
  margin: 8px 0 0;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--muted);
}
.homeTopMonthViewport{
  position: relative;
  padding: 0 52px;
}
@media (max-width: 720px){
  .homeTopMonthViewport{ padding: 0 46px; }
}
.homeTopMonthTrackWrap{
  overflow: hidden;
  border-radius: 16px;
}
.homeTopMonthTrack{
  display: flex;
  justify-content: flex-start;
  gap: var(--homeTopMonthGap);
  will-change: transform;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.homeTopMonthTrack .gameCard.gameCard--topMonth{
  flex: 0 0 auto;
}
.homeTopMonthTrack .gameCard--topMonth .gameCover{
  position: relative;
}
.homeTopMonthBadge{
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #f0b864;
  background: rgba(18, 10, 6, 0.88);
  border: 1px solid rgba(237, 151, 2, 0.38);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.homeTopMonthNav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
  cursor: pointer;
  border: 1px solid rgba(39, 211, 255, 0.38);
  background: color-mix(in srgb, var(--accent) 32%, rgba(6, 10, 16, 0.94));
  color: #061018;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.4),
    0 0 22px rgba(39, 211, 255, 0.18);
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.homeTopMonthNav:hover{
  border-color: rgba(39, 211, 255, 0.55);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.45),
    0 0 28px rgba(39, 211, 255, 0.26);
}
.homeTopMonthNav:active{ transform: translateY(-50%) scale(0.96); }
.homeTopMonthNav:disabled{
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}
.homeTopMonthNav--prev{ left: 4px; }
.homeTopMonthNav--next{ right: 4px; }
.homeTopMonthNav svg{
  width: 20px;
  height: 20px;
  display: block;
}
@media (max-width: 520px){
  .homeTopMonthNav{ width: 40px; height: 40px; border-radius: 10px; }
}

/* Страница /catalog: лёгкий воздух между крошками и общей карточкой */
#main > section.section:has(#catalog-page-toolbar){
  margin-top: 0;
  padding-top: var(--siteCrumbsContentPad);
  padding-bottom: var(--siteTextPageSectionPadBottom);
}
#main > section.section:has(#catalog-page-toolbar) > .container{
  position: relative;
  background: var(--bg);
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  padding-top: 26px;
  padding-bottom: 20px;
}
#main > section.section:has(#catalog-page-toolbar) > .container::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05),
    transparent
  );
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.35);
  opacity: 0.75;
}

/* Категория / избранное: убрать «карточку» вокруг всего блока — в общий фон страницы */
#main > section.section > .container:has(#catalog-head.isCategory),
#main > section.section > .container:has(#catalog-head.isFavorites){
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding-top: 12px;
  padding-bottom: var(--siteCatalogCategoryEndPad);
}
#main > section.section > .container:has(#catalog-head.isCategory)::before,
#main > section.section > .container:has(#catalog-head.isFavorites)::before{
  display: none;
}

/* Под заголовком корня каталога — нейтральная линия вместо «голубой» полосы */
#main:has(#catalog-page-toolbar) #catalog-head:not(.isCategory):not(.isFavorites)::after{
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.09),
    rgba(255, 255, 255, 0.05),
    transparent
  );
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.22);
}

#catalog-head{
  position:relative;
  overflow:hidden;
  padding-bottom: 14px;
}
#catalog-head .catalogHeadMain{
  width: 100%;
  text-align: center;
}
#catalog-head h2{
  margin: 0;
  font-size: clamp(23px, 2.65vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
#catalog-head #catalog-lead{
  margin: 8px auto 0;
  max-width: 1120px;
  font-size: 1.0625rem;
  line-height: 1.42;
}
#guar-title{
  margin: 0;
  font-size: clamp(23px, 2.65vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-align: center;
}
#guar-head{
  position: relative;
  overflow: hidden;
  justify-content: center;
  padding-bottom: 14px;
}
#guar-head > div{
  width: 100%;
}
#guar-head::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(30,90,130,0) 0%,
    rgba(34,111,162,.52) 20%,
    rgba(42,128,184,.62) 50%,
    rgba(34,111,162,.52) 80%,
    rgba(30,90,130,0) 100%
  );
  box-shadow: 0 0 8px rgba(36,122,182,.25), 0 0 16px rgba(36,122,182,.14);
  pointer-events: none;
}
#guar-lead{
  margin: 8px auto 0;
  max-width: 1120px;
  font-size: 1.0625rem;
  line-height: 1.42;
  text-align: center;
}
#catalog-head::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(30,90,130,0) 0%,
    rgba(34,111,162,.52) 20%,
    rgba(42,128,184,.62) 50%,
    rgba(34,111,162,.52) 80%,
    rgba(30,90,130,0) 100%
  );
  box-shadow: 0 0 8px rgba(36,122,182,.25), 0 0 16px rgba(36,122,182,.14);
  pointer-events: none;
}
#catalog-head.isCategory::after,
#catalog-head.isFavorites::after{
  display: none;
}
#status-head{
  position: relative;
  overflow: hidden;
  padding-bottom: 14px;
}
#status-head > div{
  width: 100%;
  text-align: center;
}
#status-head h2{
  margin: 0;
  font-size: clamp(23px, 2.65vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
#status-head #status-lead{
  margin: 8px auto 0;
  max-width: 72ch;
  font-size: 1.0625rem;
  line-height: 1.55;
}
#status-head::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(30,90,130,0) 0%,
    rgba(34,111,162,.52) 20%,
    rgba(42,128,184,.62) 50%,
    rgba(34,111,162,.52) 80%,
    rgba(30,90,130,0) 100%
  );
  box-shadow: 0 0 8px rgba(36,122,182,.25), 0 0 16px rgba(36,122,182,.14);
  pointer-events: none;
}
#main{
  position:relative;
  isolation:isolate;
  /* Под всеми слоями — тот же «пол», что у футера (если где-то просвет) */
  background-color: var(--bg2);
  /* Единый отступ до футера (см. --siteMainPadBottom); исключения: body.reviewsPage, и т.д. */
  padding-bottom: var(--siteMainPadBottom);
  /* Длинный сход к var(--bg2) и сплошной низ — без бирюзового «хвоста» радиалов у края */
  background-image:
    linear-gradient(
      180deg,
      transparent 0%,
      transparent calc(100% - 240px),
      var(--bg2) calc(100% - 96px),
      var(--bg2) 100%
    ),
    radial-gradient(1280px 680px at 50% -22%, rgba(39,211,255,.11), transparent 58%),
    radial-gradient(920px 540px at 100% 26%, rgba(39,211,255,.055), transparent 54%),
    radial-gradient(780px 480px at 0% 52%, rgba(124,58,237,.07), transparent 52%),
    linear-gradient(180deg, #111c2a 0%, var(--bg) 44%, var(--bg2) 100%);
}
/* Публичный сайт: #main — колонка для вложенных сеток; не flex-grow:1 — иначе под коротким контентом
   (legal, contacts, …) тянется пустой фон #main до футера. Preboot #main{min-height:100vh} сбрасываем.
   Футер вниз: body flex + #site-footer { margin-top: auto }. */
body:not(.adminPage) #main{
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
/* legal: футер сразу под контентом (ритм как /not-working), без дыры над футером. */
body:not(.adminPage):has(#legal-head) #site-footer{
  margin-top: 0;
}
/* Кастомные (page.html /p/…): #main растягивается (flex:1) — пустой низ вьюпорта внутри
   #main, тот же градиент что и у страницы; нет зазора body у футера = нет тёмной полосы.
   margin-top:0 — футер сразу под #main, при коротком контенте всё ещё внизу за счёт роста #main. */
body:not(.adminPage):has(#page-head) #main{
  flex: 1 0 auto;
}
body:not(.adminPage):has(#page-head) #site-footer{
  margin-top: 0;
}
/* Только page.html (#page-head): при низкой высоте #main первый слой с calc(100% - …px)
   даёт резкую горизонтальную полосу над подвалом — убираем этот слой, остальной фон как у остальных */
#main:has(#page-head){
  background-image:
    radial-gradient(1280px 680px at 50% -22%, rgba(39,211,255,.11), transparent 58%),
    radial-gradient(920px 540px at 100% 26%, rgba(39,211,255,.055), transparent 54%),
    radial-gradient(780px 480px at 0% 52%, rgba(124,58,237,.07), transparent 52%),
    linear-gradient(180deg, #111c2a 0%, var(--bg) 44%, var(--bg2) 100%);
}
/* Главная и корень /catalog: фон не зависит от высоты контента
   (иначе при смене фильтра «Все игры / Мобильные / Спуферы» тон уходит в темнее).
   Важно: на главной класс page-home висит на #main (см. index.html), не на body. */
#main.page-home,
#main:has(#catalog-page-toolbar):has(#catalog-head:not(.isCategory):not(.isFavorites)){
  background-image:
    radial-gradient(1280px 680px at 50% -210px, rgba(39,211,255,.11), transparent 58%),
    radial-gradient(920px 540px at 100% 250px, rgba(39,211,255,.055), transparent 54%),
    radial-gradient(780px 480px at 0% 500px, rgba(124,58,237,.07), transparent 52%),
    linear-gradient(180deg, #111c2a 0px, var(--bg) 460px, var(--bg2) 980px);
}
/* #main padding-bottom: глобально var(--siteMainPadBottom) */
#main.page-home{
  /* Одинаковый шаг между крупными блоками (карусель ↔ каталог и т.п.) */
  --home-major-block-gap: 22px;
}
/* /status: тот же фон «как корень /catalog»; сетка отступов — глобальные #main + .section + карточка */
body.page-status #main,
#main:has(#status-head) {
  background-image:
    radial-gradient(1280px 680px at 50% -210px, rgba(39,211,255,.11), transparent 58%),
    radial-gradient(920px 540px at 100% 250px, rgba(39,211,255,.055), transparent 54%),
    radial-gradient(780px 480px at 0% 500px, rgba(124,58,237,.07), transparent 52%),
    linear-gradient(180deg, #111c2a 0px, var(--bg) 460px, var(--bg2) 980px);
}
body.page-status #main > section.section:has(#status-head),
#main:has(#status-head) > section.section:has(#status-head) {
  margin-top: 0;
  padding-top: var(--siteCrumbsContentPad);
  padding-bottom: var(--siteTextPageSectionPadBottom);
  flex: 1 0 auto;
}
/* Карточка + отступы как #main > section:has(#catalog-page-toolbar) > .container */
body.page-status #main > section.section:has(#status-head) > .container,
#main:has(#status-head) > section.section:has(#status-head) > .container {
  position: relative;
  background: var(--bg);
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  padding-top: 26px;
  padding-bottom: 20px;
}
body.page-status #main > section.section:has(#status-head) > .container::before,
#main:has(#status-head) > section.section:has(#status-head) > .container::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05),
    transparent
  );
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.35);
  opacity: 0.75;
}
body.reviewsPage #main{
  padding-bottom: 8px;
}
/* В режиме категории размытая обложка на body::before должна быть видна по всей высоте main, иначе верх «глухой», а низ — через стекло футера */
body.catBgPage #main{
  background: transparent;
}
body.catBgPage{
  --fineprintBg:
    linear-gradient(180deg, rgba(5,9,16,.40) 0%, rgba(5,9,16,.68) 100%),
    var(--catBg, linear-gradient(180deg, #111b29 0%, #0d1117 100%)) center/cover no-repeat fixed;
}
body.catBgPage::before{
  content:"";
  position:fixed;
  inset:-60px;
  background-image: var(--catBg);
  background-size: cover;
  background-position: center calc(50% + var(--catBgOffset, 0px));
  filter: blur(10px) saturate(1.12) contrast(1.02);
  opacity:.58;
  transform: scale(1.10);
  pointer-events:none;
  z-index:0;
}
body.catBgPage::after{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(80% 90% at 50% 8%, rgba(0,0,0,.08), rgba(0,0,0,.36)),
    linear-gradient(180deg,
      rgba(0,0,0,.28) 0%,
      rgba(0,0,0,.16) 32%,
      rgba(0,0,0,.06) 68%,
      rgba(0,0,0,0) 100%
    );
  pointer-events:none;
  z-index:0;
}
@media (prefers-reduced-motion: reduce){
  body.catBgPage::before{background-position:center}
}

#main, .footer{
  position:relative;
  z-index:1;
}
/* Category with custom bg image — blur the fixed body background through the footer */
body.catBgPage .footer{
  --footerFineBg: rgba(5,9,18,.50);
  --footerFineBlur: blur(11px) saturate(1.14);
  border-top: 1px solid rgba(255,255,255,.22);
  background: rgba(5,9,18,.57);
  backdrop-filter: blur(11px) saturate(1.14);
  -webkit-backdrop-filter: blur(11px) saturate(1.14);
}
body.catBgPage .footer::before{
  display: none; /* hide the default accent bar — not needed over blurred bg */
}
body.catBgPage .fineprint{
  border-top: 1px solid rgba(255,255,255,.14);
  background: transparent;
}
body.catBgPage .footer a,
body.catBgPage .footer .k,
body.catBgPage .footer .v,
body.catBgPage .fineprint{
  text-shadow: 0 1px 3px rgba(0,0,0,.50);
}

/* Product page: stronger teal/purple accent echoes the page gradient */
body.page-product .footer{
  background:
    radial-gradient(1000px 280px at 18% 0%, rgba(39,211,255,.09), transparent 60%),
    radial-gradient(780px 220px at 88% 0%, rgba(124,58,237,.07), transparent 56%),
    linear-gradient(180deg, var(--bg2) 0%, #080c12 100%);
}

#catalog-head > *{
  position:relative;
  z-index:1;
}

.catHeroIcon{
  width:64px;
  height:64px;
  border-radius:999px;
  /* Цвет свечения и обводки = --catDescGlow с #catalog-head (как у рамки описания) или --accent */
  --_iconGlow: var(--catDescGlow, var(--accent));
  border:1px solid color-mix(in srgb, var(--_iconGlow) 32%, rgba(255,255,255,.12));
  background: rgba(255,255,255,.04);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--_iconGlow) 14%, transparent),
    0 0 30px color-mix(in srgb, var(--_iconGlow) 28%, transparent),
    0 0 58px color-mix(in srgb, var(--_iconGlow) 16%, transparent),
    0 0 88px color-mix(in srgb, var(--_iconGlow) 8%, transparent),
    0 18px 40px rgba(0,0,0,.28);
  display:grid;
  place-items:center;
  margin: 0 0 10px 0;
  background-size: cover;
  background-position: center;
}
#catalog-head.isCategory .catHeroIcon{
  margin-left:auto;
  margin-right:auto;
}
#catalog-head.isCategory h2{
  font-size:34px;
  line-height:1.1;
  font-family: var(--tileTitleFontStack);
}
@media (max-width: 640px){
  .catHeroIcon{width:56px;height:56px}
  #catalog-head.isCategory h2{font-size:28px}
}
#catalog-head.isCategory{
  align-items:center;
  justify-content:center;
  position:relative;
  /* Иначе overflow:hidden у #catalog-head обрезает box-shadow иконки сверху */
  overflow: visible;
}
#catalog-head.isCategory .catalogHeadMain{
  flex:1;
  text-align:center;
  max-width: 920px;
  margin: 0 auto;
}
#catalog-head.isCategory .spacer{display:none}
#catalog-head.isCategory #catalog-info{
  position:absolute;
  right:0;
  top:0;
}
#catalog-head.isCategory .catSeoText{
  font-size:16px;
  max-width: 860px;
  margin-left:auto;
  margin-right:auto;
}

/* ---- Заголовок решётки товаров (Доступные читы) ---- */
#catalog-grid-title{
  font-family: var(--tileTitleFontStack);
  font-size: 19px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--catalogGridTitleColor, var(--accent));
  text-shadow: none;
  margin: 8px 0 14px;
  padding-left: 0;
  display: none;
  text-align: center;
}
#catalog-grid-title.isVisible{ display: block; }

/* ---- Описание категории: стилизованная рамка ---- */
.catDescFrame{
  --_cdg: var(--catDescGlow, var(--accent));
  margin: 16px 0 4px;
  padding: 18px 22px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--_cdg) 5%, var(--card));
  border: 1px solid color-mix(in srgb, var(--_cdg) 20%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--_cdg) 65%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--_cdg) 7%, transparent),
    0 0 24px -6px color-mix(in srgb, var(--_cdg) 16%, transparent),
    inset 3px 0 14px -5px color-mix(in srgb, var(--_cdg) 10%, transparent);
  position: relative;
  overflow: hidden;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.catDescFrame::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(480px 120px at 50% 0%, color-mix(in srgb, var(--_cdg) 9%, transparent), transparent 70%);
  pointer-events: none;
}
.catDescFrame .catDescFrameInner{
  position: relative;
  z-index: 1;
  font-size: 15px;
  line-height: 1.65;
  /* Как .catSeoText и «Авто» в админке: без inline color текст не #e7eef9, а приглушённый */
  color: var(--muted);
}
.catDescFrame .catDescFrameInner a{ color: var(--accent); }
.catDescFrame .catDescFrameInner a:hover{ text-decoration: underline; }


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

/* Страница гарантий: сетка информационных блоков (ховер в духе карточек «Не работает») */
.guar-feature-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:20px;
  margin-top:4px;
}
.guar-feature-card{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  background: rgba(18, 27, 42, 0.75);
  border-radius:var(--radius);
  padding:18px;
  box-shadow: 0 10px 32px rgba(0,0,0,.2);
  will-change: transform;
  transition:
    transform .22s var(--ease),
    border-color .22s var(--ease),
    box-shadow .22s var(--ease),
    background .22s var(--ease);
}
.guar-feature-card::before{
  content:"";
  position:absolute;
  left:12%;
  right:12%;
  top:0;
  height:2px;
  border-radius:0 0 999px 999px;
  background: linear-gradient(90deg, transparent, rgba(39,211,255,.45), rgba(124,58,237,.35), transparent);
  opacity:.35;
  pointer-events:none;
  transition: opacity .22s var(--ease), filter .22s var(--ease);
}
.guar-feature-card:hover{
  transform: translateY(-4px);
  border-color: rgba(39,211,255,.22);
  box-shadow:
    0 14px 40px rgba(0,0,0,.28),
    0 0 0 1px rgba(39,211,255,.06) inset;
  background: rgba(18, 27, 42, 0.82);
}
/* .fadeInUp.isShown задаёт transform:none — без этого hover не поднимает карточку */
.guar-feature-card.fadeInUp.isShown:hover{
  transform: translateY(-4px);
}
.guar-feature-card:hover::before{
  opacity:.95;
  filter: brightness(1.08);
}
.guar-feature-icon{
  position:relative;
  z-index:1;
  width:48px;
  height:48px;
  border-radius:12px;
  border:1px solid rgba(39,211,255,.2);
  background: rgba(39,211,255,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--accent);
  margin-bottom:12px;
  transition:
    border-color .22s var(--ease),
    box-shadow .22s var(--ease),
    background .22s var(--ease),
    transform .22s var(--ease);
}
.guar-feature-card:hover .guar-feature-icon{
  border-color: rgba(39,211,255,.35);
  background: rgba(39,211,255,.12);
  box-shadow: 0 0 24px rgba(39,211,255,.14);
}
.guar-feature-icon svg{width:22px;height:22px}
@media (prefers-reduced-motion: reduce){
  .guar-feature-card{transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;will-change:auto}
  .guar-feature-card:hover,
  .guar-feature-card.fadeInUp.isShown:hover{transform:none}
  .guar-feature-card::before{transition: opacity .2s ease}
  .guar-feature-icon{transition: border-color .2s ease, box-shadow .2s ease, background .2s ease}
}
.guar-feature-title{
  margin:0 0 10px;
  font-size:15px;
  font-weight:800;
  font-family: var(--tileTitleFontStack);
  color: var(--text);
  line-height:1.25;
}
.guar-feature-text{
  margin:0;
  font-size:13px;
  font-family: var(--tileTitleFontStack);
  color:var(--muted);
  line-height:1.5;
}
.card{
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border-radius: var(--radius);
  padding:14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.32);
  position:relative;
  overflow:hidden;
  transition: transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.card:hover{transform: translateY(-3px);border-color: rgba(255,255,255,.16);background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02))}
.card h3{margin:10px 0 6px;font-size:16px}
.card p{margin:0;color:var(--muted);line-height:1.45}
.reviewCard{
  transition:
    transform .25s var(--ease),
    border-color .25s var(--ease),
    box-shadow .25s var(--ease),
    background .25s var(--ease);
  will-change: transform;
}
.reviewCard::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  opacity:0;
  transition: opacity .25s var(--ease);
  background: radial-gradient(820px 240px at 50% 0%, rgba(39,211,255,.10), transparent 62%);
}
.reviewCard:hover{
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.reviewCard:hover::after{opacity:1}
.reviewCard.fadeInUp.isShown:hover{
  transform: translateY(-4px);
}
.reviewCardGood:hover{
  border-color: rgba(25,195,125,.26);
}
.reviewCardBad:hover{
  border-color: rgba(239,68,68,.22);
}
.reviewCardGood{
  border-color: rgba(25,195,125,.22);
  box-shadow:
    0 0 0 1px rgba(25,195,125,.05),
    0 18px 40px rgba(0,0,0,.32);
}
.reviewCardBad{
  border-color: rgba(239,68,68,.18);
  box-shadow:
    0 0 0 1px rgba(239,68,68,.05),
    0 18px 40px rgba(0,0,0,.32);
}
.reviewCardGood::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(520px 200px at 30% 0%, rgba(25,195,125,.10), transparent 70%);
  opacity:.75;
}
.reviewCardBad::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(520px 200px at 30% 0%, rgba(239,68,68,.09), transparent 70%);
  opacity:.7;
}
.reviewReply{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(39,211,255,.18);
  background: linear-gradient(180deg, rgba(39,211,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
  position: relative;
}
.reviewReply::before{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:3px;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(39,211,255,.95), rgba(124,58,237,.85));
}
.reviewReply .k{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight: 950;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 4px;
  padding-left: 8px;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .92;
}
.reviewReplyIcon{
  width:16px;
  height:16px;
  display:inline-block;
  flex: 0 0 auto;
  background: linear-gradient(180deg, rgba(39,211,255,.95), rgba(124,58,237,.88));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H9l-4.2 3.15A1 1 0 0 1 3 19.35V6a2 2 0 0 1 2-2Zm2 4a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2H6Zm0 4a1 1 0 1 0 0 2h12a1 1 0 1 0 0-2H6Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H9l-4.2 3.15A1 1 0 0 1 3 19.35V6a2 2 0 0 1 2-2Zm2 4a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2H6Zm0 4a1 1 0 1 0 0 2h12a1 1 0 1 0 0-2H6Z'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 10px rgba(39,211,255,.18));
}
.reviewReply .v{
  color: var(--muted);
  line-height: 1.65;
  font-size: 14px;
  white-space: pre-wrap;
  padding-left: 8px;
}

/* Reviews info block (above list) */
.panel.reviewTopNote{
  /* Default = same "neon frame" as the block below, but still customizable via CSS vars */
  border: 1px solid var(--revNoteBorder, rgba(39,211,255,.22));
  background: var(--revNoteBg,
    radial-gradient(900px 260px at 18% 0%, rgba(39,211,255,.14), transparent 62%),
    radial-gradient(820px 220px at 84% 0%, rgba(124,58,237,.12), transparent 64%),
    linear-gradient(180deg, rgba(18,27,42,.78), rgba(12,18,26,.64))
  );
  box-shadow: 0 22px 60px rgba(0,0,0,.34);
  position: relative;
  overflow: hidden;
}
.panel.reviewTopNote::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(700px 160px at 22% 0%, rgba(39,211,255,.18), transparent 70%);
  opacity:.65;
}
.panel.reviewTopNote .panelInner{
  padding: 12px 14px;
  color: var(--revNoteText, rgba(231,238,249,.78));
  font-size: 12px;
  line-height: 1.55;
}
.reviewInfoBlock{
  border:1px solid rgba(39,211,255,.22);
  background:
    radial-gradient(900px 260px at 18% 0%, rgba(39,211,255,.14), transparent 62%),
    radial-gradient(820px 220px at 84% 0%, rgba(124,58,237,.12), transparent 64%),
    linear-gradient(180deg, rgba(18,27,42,.78), rgba(12,18,26,.64));
  box-shadow: 0 22px 60px rgba(0,0,0,.34);
  position:relative;
  overflow:hidden;
}
.reviewInfoBlock::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(700px 160px at 22% 0%, rgba(39,211,255,.18), transparent 70%);
  opacity:.65;
}
.reviewInfoTop{
  display:flex;
  align-items:center;
  gap:10px;
}
.reviewInfoIcon{
  width:26px;
  height:26px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:950;
  font-size:14px;
  color: rgba(231,238,249,.92);
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), transparent 55%),
    linear-gradient(135deg, rgba(39,211,255,.30), rgba(124,58,237,.22));
  box-shadow: 0 12px 28px rgba(39,211,255,.14);
  flex:0 0 auto;
  position:relative;
  z-index:1;
}
.reviewInfoTitle{
  font-weight:950;
  font-size:16px;
  letter-spacing:.2px;
  position:relative;
  z-index:1;
}
.reviewInfoText{
  margin-top:10px;
  color: rgba(231,238,249,.82);
  line-height:1.65;
  position:relative;
  z-index:1;
}
.reviewInfoText p{margin:0 0 10px}
.reviewInfoText p:last-child{margin-bottom:0}
.reviewInfoText a{color: var(--accent); text-decoration: underline; text-underline-offset: 3px}
.reviewInfoText a:hover{color: rgba(39,211,255,.95)}
.reviewInfoText ul,.reviewInfoText ol{margin:8px 0 12px 22px}
.reviewInfoText li{margin:4px 0}
.reviewInfoText blockquote{
  margin:10px 0;
  padding:10px 12px;
  border-left:3px solid rgba(39,211,255,.95);
  border-radius:14px;
  background: rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(231,238,249,.86);
}

/* Reviews: stats row (total / good / bad) */
.revStats{
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
}
@media (max-width: 720px){
  .revStats{grid-template-columns: 1fr}
}
.revStatCard{
  border:1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  padding:18px 14px 16px;
  min-height: 108px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:
    radial-gradient(820px 180px at 30% 0%, rgba(255,255,255,.06), transparent 58%),
    linear-gradient(180deg, rgba(22,32,48,.88), rgba(14,20,30,.72));
  box-shadow:
    0 0 0 1px rgba(39,211,255,.06),
    0 18px 55px rgba(0,0,0,.32);
  text-align:center;
  position:relative;
  overflow:hidden;
}
button.revStatCard{
  width:100%;
  margin:0;
  font:inherit;
  color:inherit;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
button.revStatCard:hover{
  border-color: rgba(255,255,255,.16);
  box-shadow:
    0 0 0 1px rgba(39,211,255,.12),
    0 20px 60px rgba(0,0,0,.38);
}
button.revStatCard:active{
  transform: translateY(1px);
}
button.revStatCard:focus{
  outline:none;
}
button.revStatCard:focus-visible{
  box-shadow:
    0 0 0 2px rgba(12,18,26,.95),
    0 0 0 4px rgba(39,211,255,.45),
    0 18px 55px rgba(0,0,0,.32);
}
.revStatCard[aria-pressed="true"]{
  box-shadow:
    0 0 0 2px rgba(39,211,255,.42),
    0 0 0 1px rgba(39,211,255,.18),
    0 18px 55px rgba(0,0,0,.32);
}
.revStatCard.isGood[aria-pressed="true"]{
  box-shadow:
    0 0 0 2px rgba(25,195,125,.45),
    0 0 0 1px rgba(25,195,125,.22),
    0 18px 55px rgba(0,0,0,.32);
}
.revStatCard.isBad[aria-pressed="true"]{
  box-shadow:
    0 0 0 2px rgba(239,68,68,.42),
    0 0 0 1px rgba(239,68,68,.2),
    0 18px 55px rgba(0,0,0,.32);
}
.revStatCaption{
  display:block;
  position:relative;
  z-index:1;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: rgba(168,186,218,.72);
  line-height:1.35;
  max-width:22ch;
}
.revStatCard::before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background: radial-gradient(700px 220px at 50% 0%, rgba(39,211,255,.12), transparent 70%);
  opacity:.85;
}
.revStatValue{
  font-weight: 950;
  font-size: clamp(26px, 4.2vw, 36px);
  letter-spacing: .02em;
  line-height:1.05;
  position:relative;
  z-index:1;
  color: rgba(252,252,255,.98);
}
.revStatCard.isGood{
  border-color: rgba(25,195,125,.26);
  background:
    radial-gradient(820px 220px at 30% 0%, rgba(25,195,125,.10), transparent 62%),
    linear-gradient(180deg, rgba(18,27,42,.78), rgba(12,18,26,.62));
}
.revStatCard.isGood .revStatValue{color: rgba(46,220,130,.98)}
.revStatCard.isBad{
  border-color: rgba(239,68,68,.22);
  background:
    radial-gradient(820px 220px at 30% 0%, rgba(239,68,68,.09), transparent 62%),
    linear-gradient(180deg, rgba(18,27,42,.78), rgba(12,18,26,.62));
}
.revStatCard.isBad .revStatValue{color: rgba(248,113,113,.96)}

/* Отзывы: «Показать ещё» вместо нумерации страниц */
.revLoadMoreWrap{
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 6px 0 4px;
}
.revLoadMoreBtn{
  appearance:none;
  margin:0;
  cursor:pointer;
  font:inherit;
  font-weight:700;
  font-size:14px;
  letter-spacing:.04em;
  color: rgba(252,252,255,.95);
  padding: 14px 32px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(32,40,54,.95), rgba(22,28,40,.92));
  box-shadow:
    0 0 0 1px rgba(0,0,0,.35),
    0 10px 36px rgba(0,0,0,.35);
  transition: border-color .18s ease, background .18s ease, transform .12s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.revLoadMoreBtn:hover{
  border-color: rgba(39,211,255,.28);
  background: linear-gradient(180deg, rgba(38,48,64,.98), rgba(26,34,48,.95));
  box-shadow:
    0 0 0 1px rgba(39,211,255,.08),
    0 14px 44px rgba(0,0,0,.4);
}
.revLoadMoreBtn:active{
  transform: translateY(1px);
}
.revLoadMoreBtn:focus{
  outline:none;
}
.revLoadMoreBtn:focus-visible{
  box-shadow:
    0 0 0 2px rgba(12,16,22,.95),
    0 0 0 4px rgba(39,211,255,.4),
    0 10px 36px rgba(0,0,0,.35);
}
.revLoadMoreBtn:disabled,
.revLoadMoreBtn.isBusy{
  opacity:.55;
  cursor:wait;
  pointer-events:none;
}

.section--reviews{
  padding: 26px 0 2px;
}
.revSpacer{
  height: 12px;
}
.revSpacer--tight{
  height: 5px;
}
.section--reviews .revSpacer--tight{
  height: 3px;
}
.section--reviews .revSpacer--before-load-more{
  height: 14px;
}
.section--reviews .revLoadMoreWrap{
  margin-top: 2px;
  margin-bottom: 0;
}

.contactCard{cursor:pointer}
.contactCard:focus{outline:none;box-shadow: 0 0 0 3px rgba(39,211,255,.10)}

/* Contacts: "Write to us" form */
.contactFormPanel{
  background:
    radial-gradient(900px 280px at 18% 0%, rgba(39,211,255,.10), transparent 62%),
    linear-gradient(180deg, rgba(23,36,54,.86), rgba(20,31,46,.72));
}
.contactFormTitle{
  text-align:center;
  font-weight:950;
  letter-spacing:.2px;
}
.contactFormGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px 14px;
  padding:14px;
  border:1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background: rgba(18,27,42,.35);
}
.contactField{min-width:0}
.contactFieldWide{grid-column: 1 / -1}
.contactLabel{
  font-size:14px;
  font-weight: 800;
  letter-spacing: .15px;
  color: rgba(231,238,249,.90);
  margin: 0 0 7px;
}
.contactInput{min-width: 0}
.contactTextarea{
  width:100%;
  min-width:0;
  height: 160px;
}
.contactSendBtn{
  width:100%;
  min-width: 0;
  height: 46px;
  border-radius: 16px;
  justify-content:center;
  background:
    radial-gradient(800px 140px at 30% 0%, rgba(39,211,255,.22), transparent 62%),
    linear-gradient(90deg, rgba(39,211,255,.22), rgba(124,58,237,.14));
  border: 1px solid rgba(39,211,255,.25);
  box-shadow:
    0 14px 34px rgba(0,0,0,.34),
    0 0 22px rgba(39,211,255,.10);
}
.contactSendBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(39,211,255,.38);
  box-shadow:
    0 18px 44px rgba(0,0,0,.36),
    0 0 28px rgba(39,211,255,.14);
}
.contactFormNote{
  color: var(--muted);
  font-size: 12px;
  margin-top: 10px;
  line-height: 1.5;
}

@media (max-width: 720px){
  .contactFormGrid{grid-template-columns:1fr}
}

/* Страница «Контакты»: две симметричные колонки без формы */
body.page-contacts #main{
  font-family: var(--tileTitleFontStack);
  background:
    radial-gradient(1100px 520px at 22% -6%, rgba(39, 211, 255, 0.12), transparent 58%),
    radial-gradient(920px 460px at 96% 14%, rgba(124, 58, 237, 0.1), transparent 56%),
    linear-gradient(180deg, #162436 0%, #131f2e 40%, #101a28 100%);
}
.contactPageLead{
  margin: 0;
  max-width: 56rem;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 500;
  letter-spacing: -0.012em;
}
#con-head{
  position: relative;
  overflow: hidden;
  justify-content: center;
  padding-bottom: 14px;
}
#con-head > div{
  width: 100%;
}
#con-title{
  margin: 0;
  font-size: clamp(23px, 2.65vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-align: center;
}
#con-head #con-lead{
  margin: 8px auto 0;
  max-width: 1120px;
  font-size: 1.0625rem;
  line-height: 1.42;
  text-align: center;
}
#con-head::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(30,90,130,0) 0%,
    rgba(34,111,162,.52) 20%,
    rgba(42,128,184,.62) 50%,
    rgba(34,111,162,.52) 80%,
    rgba(30,90,130,0) 100%
  );
  box-shadow: 0 0 8px rgba(36,122,182,.25), 0 0 16px rgba(36,122,182,.14);
  pointer-events: none;
}
#rev-head{
  position: relative;
  overflow: hidden;
  justify-content: center;
  padding-bottom: 14px;
}
#rev-head > div{
  width: 100%;
}
#rev-title{
  margin: 0;
  font-size: clamp(23px, 2.65vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-align: center;
}
#rev-head #rev-lead{
  margin: 8px auto 0;
  max-width: 1120px;
  font-size: 1.0625rem;
  line-height: 1.42;
  text-align: center;
}
#rev-head::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(30,90,130,0) 0%,
    rgba(34,111,162,.52) 20%,
    rgba(42,128,184,.62) 50%,
    rgba(34,111,162,.52) 80%,
    rgba(30,90,130,0) 100%
  );
  box-shadow: 0 0 8px rgba(36,122,182,.25), 0 0 16px rgba(36,122,182,.14);
  pointer-events: none;
}
.contactPageGrid{
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: stretch;
}
body.page-contacts .contactChannelsPanel,
body.page-contacts .contactSchedulePanel{
  min-height: 100%;
  background:
    radial-gradient(900px 280px at 18% 0%, rgba(39, 211, 255, 0.1), transparent 62%),
    linear-gradient(180deg, rgba(23, 36, 54, 0.86), rgba(20, 31, 46, 0.72));
  border-radius: 18px;
}
body.page-contacts .contactChannelsPanel .panelInner,
body.page-contacts .contactSchedulePanel .panelInner{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.contactPanelCol{
  flex: 1;
}
.contactBlockTitle{
  margin: 0 0 14px;
  text-align: center;
  font-weight: 950;
  font-size: 17px;
  letter-spacing: 0.2px;
  color: rgba(242, 246, 252, 0.96);
  text-shadow: 0 0 24px rgba(39, 211, 255, 0.08);
}
.contactChannelsList{
  flex: 1;
  min-height: 0;
}
.contactScheduleBody{
  flex: 1;
  margin-top: 0;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: rgba(18, 27, 42, 0.35);
  box-shadow: inset 0 0 0 1px rgba(39, 211, 255, 0.04);
}
.contactScheduleRich{
  color: var(--muted);
  line-height: 1.6;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.contactScheduleRich a{
  color: rgba(39, 211, 255, 0.92);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.contactScheduleRich a:hover{
  color: #7ce9ff;
}
@media (max-width: 900px){
  .contactPageGrid{
    grid-template-columns: 1fr;
  }
}

/* Favorites hero (catalog.html#favorites) */
#catalog-head.isFavorites{
  justify-content:center;
  text-align:center;
}
#catalog-head.isFavorites .spacer{display:none}
#catalog-head.isFavorites #catalog-info{display:none}
#catalog-head.isFavorites .catalogHeadMain{align-items:center}
.favHeroPill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(39,211,255,.32);
  background: linear-gradient(180deg, rgba(39,211,255,.12), rgba(255,255,255,.03));
  box-shadow: 0 12px 30px rgba(0,0,0,.22), 0 0 22px rgba(39,211,255,.10);
  font-weight:950;
  letter-spacing:.2px;
  color: rgba(231,238,249,.96);
  font-size:14px;
  margin-bottom: 22px;
}
#catalog-head.isFavorites h2{
  margin-top: 6px;
}
.favHeroPillIcon{color: rgba(39,211,255,.95)}
.favHeroWrap{
  margin: 24px auto 10px;
  max-width: 560px;
  padding: 26px 18px;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 320px at 20% 0%, rgba(39,211,255,.10), transparent 62%),
    radial-gradient(720px 260px at 80% 0%, rgba(124,58,237,.10), transparent 64%),
    rgba(18,27,42,.34);
  box-shadow: 0 30px 90px rgba(0,0,0,.45);
  text-align:center;
}
.products.isFavEmpty{
  display:flex;
  justify-content:center;
}
.favHeroCount{
  display:inline-flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:7px;
  margin-bottom: 14px;
}
.favHeroCountN{
  flex-shrink:0;
  font-size: 26px;
  font-weight:900;
  font-variant-numeric: tabular-nums;
  color: rgba(239,68,68,.94);
  text-shadow: 0 0 18px rgba(239,68,68,.18);
  line-height: 1;
  letter-spacing: -0.02em;
  display:inline-flex;
  align-items:center;
}
.favHeroCountLabel{
  flex-shrink:0;
  font-size: 11px;
  font-weight:900;
  line-height: 1.15;
  letter-spacing: .12em;
  color: rgba(231,238,249,.78);
  text-transform: uppercase;
  /* оптически чуть выше середины цифры из‑за капса без нижних выносных */
  transform: translateY(-2px);
}
.favHeroIcon{
  width: 52px;
  height: 52px;
  margin: 6px auto 10px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(231,238,249,.55);
}
.favHeroIcon svg{width:28px;height:28px;display:block}
.favHeroEmptyTitle{
  font-size: 20px;
  font-weight: 950;
  margin-top: 6px;
}
.favHeroEmptyText{
  color: var(--muted);
  line-height: 1.6;
  margin-top: 8px;
  max-width: 520px;
  margin-left:auto;
  margin-right:auto;
}
.favHeroBtn{
  margin-top: 18px;
  height: 44px;
  padding: 0 22px;
  border-radius: 16px;
  justify-content:center;
  min-width: 220px;
  background:
    radial-gradient(800px 140px at 30% 0%, rgba(39,211,255,.26), transparent 62%),
    linear-gradient(135deg, rgba(39,211,255,.20), rgba(124,58,237,.16));
  border-color: rgba(39,211,255,.30);
  color: rgba(231,238,249,.98);
  box-shadow:
    0 18px 44px rgba(0,0,0,.36),
    0 0 26px rgba(39,211,255,.12);
}
.favHeroBtn:hover{
  border-color: rgba(39,211,255,.44);
  box-shadow:
    0 22px 52px rgba(0,0,0,.38),
    0 0 32px rgba(39,211,255,.16);
}
.cardTop{display:flex;align-items:center;gap:10px}
.icon{
  width:38px;height:38px;border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.16), transparent 45%),
              linear-gradient(135deg, rgba(39,211,255,.14), rgba(124,58,237,.12));
  display:flex;align-items:center;justify-content:center;
}
.icon svg{width:18px;height:18px;opacity:.9}

.products{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:var(--cardGap);
}
@media (min-width: 1440px){
  .products{grid-template-columns: repeat(4, 1fr)}
}
.product{
  padding:12px;
  border-radius: var(--radius);
  border:1px solid var(--line);
  background: rgba(18,27,42,.55);
  position: relative;
  overflow: hidden;
  will-change: transform;
  transition:
    transform .28s var(--ease),
    border-color .28s var(--ease),
    box-shadow .28s var(--ease),
    background .28s var(--ease);
  cursor: pointer;
}
/* top accent bar — fades in on hover */
.product::before{
  content:"";
  position:absolute;
  left:12%; right:12%; top:0;
  height:2px;
  border-radius:0 0 999px 999px;
  background: linear-gradient(90deg, transparent, rgba(39,211,255,.48), rgba(124,58,237,.34), transparent);
  opacity:.2;
  pointer-events:none;
  transition: opacity .28s var(--ease), filter .28s var(--ease);
}
.product:hover{
  transform: translateY(-4px);
  border-color: rgba(39,211,255,.22);
  box-shadow:
    0 0 0 1px rgba(39,211,255,.09),
    0 0 32px -10px rgba(39,211,255,.14),
    0 18px 48px rgba(0,0,0,.30);
  background: rgba(18,27,42,.72);
}
.product:hover::before{
  opacity:1;
  filter: brightness(1.1);
}

/* Catalog product tiles (bigger, like screenshot) */
.productTile{
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--cardRadius);
  overflow:hidden;
  background: rgba(14,21,32,.25);
  box-shadow:
    0 0 0 1px rgba(39,211,255,.05),
    0 18px 45px rgba(0,0,0,.26);
  transition:
    transform .30s var(--ease),
    border-color .30s var(--ease),
    box-shadow .30s var(--ease),
    background .30s var(--ease);
  cursor:pointer;
  position:relative;
  will-change: transform;
}
/* top accent glow bar — lights up smoothly on hover */
.productTile::before{
  content:"";
  position:absolute;
  left:10%; right:10%; top:0;
  height:2px;
  border-radius:0 0 999px 999px;
  background: linear-gradient(90deg, transparent, rgba(39,211,255,.52), rgba(124,58,237,.38), transparent);
  opacity:.15;
  pointer-events:none;
  transition: opacity .30s var(--ease), filter .30s var(--ease);
  z-index:3;
}
.productTile:hover{
  transform: translateY(-5px);
  border-color: rgba(39,211,255,.24);
  box-shadow:
    0 0 0 1px rgba(39,211,255,.13),
    0 0 44px -10px rgba(39,211,255,.18),
    0 28px 68px rgba(0,0,0,.38);
  background: rgba(14,21,32,.40);
}
.productTile:hover::before{
  opacity:1;
  filter: brightness(1.12);
}
.tileCover{
  height:var(--cardCoverH);
  background-size:cover;
  background-position: 50% 50% !important;
  background-repeat: no-repeat;
  position:relative;
  filter: brightness(1.08) contrast(1.04) saturate(1.02);
  transition: transform .44s var(--ease), filter .30s var(--ease);
}
.productTile:hover .tileCover{
  transform: scale(1.04);
  filter: brightness(1.14) contrast(1.05) saturate(1.06);
}
.tileShade{
  position:absolute;inset:0;
  /* slightly brighter cover while keeping text readable */
  background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.38));
}
/* ---- Блок «Рекомендуем» на странице каталога ---- */
.recommendInfoBlock{
  --_rib-glow: var(--ribGlowColor, var(--accent));
  margin-top:32px;
  padding:22px 26px;
  border-radius:16px;
  background: color-mix(in srgb, var(--_rib-glow) 6%, var(--card));
  border:1px solid color-mix(in srgb, var(--_rib-glow) 22%, transparent);
  border-left:3px solid color-mix(in srgb, var(--_rib-glow) 72%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--_rib-glow) 8%, transparent),
    0 0 28px -6px color-mix(in srgb, var(--_rib-glow) 18%, transparent),
    inset 3px 0 18px -6px color-mix(in srgb, var(--_rib-glow) 12%, transparent);
  position:relative;
  overflow:hidden;
}
.recommendInfoBlock::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(ellipse 60% 100% at 0% 50%, color-mix(in srgb, var(--_rib-glow) 8%, transparent) 0%, transparent 70%);
  pointer-events:none;
}
.recommendInfoBlockTitle{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--_rib-glow) 94%, white);
  background: color-mix(in srgb, var(--_rib-glow) 8%, rgba(8,12,24,.28));
  border: 1px solid color-mix(in srgb, var(--_rib-glow) 30%, transparent);
  border-radius: 999px;
  padding: 6px 13px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-shadow: 0 0 10px color-mix(in srgb, var(--_rib-glow) 55%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--_rib-glow) 16%, transparent);
  margin-bottom: 12px;
}
.recommendInfoBlockBody{
  font-size:13px;
  line-height:1.65;
  color: var(--muted);
}
.recommendInfoBlockBody a{ color: color-mix(in srgb, var(--_rib-glow) 85%, white); text-decoration:underline; }
.recommendInfoBlockBody a:hover{ color: var(--_rib-glow); }

/* ---- Значок «Рекомендуем» (базовый класс) ---- */
.recommendBadge[hidden]{ display:none !important; }
.recStar{
  color: #f5c518;
  text-shadow: 0 0 8px rgba(245,197,24,.55);
  font-style: normal;
}
.recommendBadge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  --_rc: var(--recommendColor, var(--accent));
  background: color-mix(in srgb, var(--_rc) 12%, rgba(10,16,28,.55));
  border:1px solid color-mix(in srgb, var(--_rc) 38%, transparent);
  color: color-mix(in srgb, var(--_rc) 94%, white);
  font-family: var(--tileTitleFontStack);
  font-size:12px;
  font-weight:800;
  letter-spacing:-0.02em;
  padding:8px 12px;
  border-radius:999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-shadow: 0 0 10px color-mix(in srgb, var(--_rc) 55%, transparent);
  box-shadow:
    0 0 14px color-mix(in srgb, var(--_rc) 20%, transparent),
    inset 0 1px 0 rgba(255,255,255,.08);
  white-space:nowrap;
  user-select:none;
}
/* На странице товара — совпадает с базой, переопределений не нужно */
/* Вариант на карточке — абсолютное позиционирование */
.tileRecommendBadge{
  position:absolute;
  top:11px;
  left:11px;
  z-index:3;
  pointer-events:none;
  font-size:13.5px;
  padding:7px 16px;
  gap:6px;
  background: color-mix(in srgb, var(--_rc) 5%, rgba(8,12,24,.08));
  border-color: color-mix(in srgb, var(--_rc) 22%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/**
 * Нижняя часть карточки: слева плотнее (читаемость), справа заметно прозрачнее —
 * просвечивает фон каталога (как на референсе).
 */
.tileBody{
  position:relative;
  padding:14px 16px 16px;
  isolation:isolate;
  background: linear-gradient(
    105deg,
    rgba(14,21,32,.9) 0%,
    rgba(14,21,32,.78) 34%,
    rgba(14,21,32,.38) 68%,
    rgba(14,21,32,.08) 100%
  );
  transition: background .22s var(--ease);
}
.tileTop,
.tileFeatureChips,
.tileBottom{position:relative; z-index:1}
.tileBody{
  transition: background .30s var(--ease);
}
.productTile:hover .tileBody{
  background: linear-gradient(
    105deg,
    rgba(14,21,32,.94) 0%,
    rgba(14,21,32,.82) 34%,
    rgba(14,21,32,.48) 68%,
    rgba(14,21,32,.14) 100%
  );
}
.tileTop{display:flex;align-items:center;gap:12px}
.tileLogo{
  width:40px;height:40px;border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 45%),
              linear-gradient(135deg, rgba(39,211,255,.14), rgba(124,58,237,.12));
  display:flex;align-items:center;justify-content:center;
  font-weight:900;
  flex-shrink:0;
}
.tileLogo.isIcon{
  border-radius:999px;
  width:42px;
  height:42px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
  color: transparent;
}
.tileTitleWrap{min-width:0}
.tileTitle{
  font-family: var(--tileTitleFontStack);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 2px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tileSub{
  margin-top:2px;
  color:var(--muted);
  font-size:13px;
  display:flex;
  gap:10px;
  align-items:center;
  min-width:0;
}
.tileSub .dot{opacity:.6}
/* Статус + рейтинг одной строкой: рейтинг сразу справа от статуса */
.tileStatusRatingRow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
  min-width:0;
  max-width:100%;
}
/* Рейтинг на карточке каталога: одна звезда + число (DigiSeller по id_d из оплаты) */
.tileRatingBadge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  flex-shrink:0;
  margin-left:2px;
}
.tileRatingBadge__star{
  display:inline-block;
  font-size:13px;
  line-height:1;
  letter-spacing:0;
  color:#f0b429;
  transform: scale(var(--tileRatingScale, 1));
  transform-origin: center center;
  text-shadow:0 0 10px rgba(240,180,50,.35);
}
.tileRatingBadge__num{
  font-size:13px;
  font-weight:800;
  color:#f0b429;
  letter-spacing:0.01em;
  font-variant-numeric: tabular-nums;
  line-height:1;
}
.tileStatus{font-weight:800}
.stGood{color: rgba(25,195,125,.95)}
.stBad{color: rgba(239,68,68,.95)}
.stInfo{color: rgba(56,189,248,.98)}
.stWarn{color: rgba(251,191,36,.95)}
.stOrange{color: rgba(249,115,22,.98)}
.stViolet{color: rgba(167,139,250,.98)}
.stCyan{color: rgba(34,211,238,.98)}
.stMagenta{color: rgba(244,114,182,.98)}
.stGray{color: rgba(148,163,184,.98)}
.stRose{color: rgba(251,113,133,.98)}
/* Теги возможностей (поле badges у товара) */
.tileFeatureChips{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  align-items:center;
}
.productFeatureChips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  margin-top:10px;
}
.featureChip{
  display:inline-flex;
  align-items:center;
  font-size:11px;
  font-weight:650;
  letter-spacing:.02em;
  line-height:1.2;
  padding:5px 10px;
  border-radius:999px;
  background: rgba(26,29,33,.92);
  border:1px solid rgba(255,255,255,.1);
  color: rgba(235,238,245,.78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  max-width:100%;
}
.productTile .featureChip{
  font-size:10px;
  padding:4px 9px;
}
.featureChipMore{
  font-weight:800;
  color:var(--muted);
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.08);
}
/* На странице товара чипы возможностей скрыты (см. product.js); в каталоге .featureChip остаётся */
body.page-product #p-badges.productFeatureChips{
  display: none !important;
}
body.page-product #p-badges .featureChip{
  --_tag: var(--productTagColor, var(--accent));
  --_tagGlow: var(--productTagGlowColor, var(--_tag));
  color: color-mix(in srgb, var(--_tag) 42%, #f3f7ff);
  border-color: color-mix(in srgb, var(--_tag) 46%, rgba(255,255,255,.10));
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--_tag) 22%, rgba(19,28,42,.92)),
      color-mix(in srgb, var(--_tag) 10%, rgba(19,28,42,.90))
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 16px color-mix(in srgb, var(--_tagGlow) 24%, transparent);
}
.tileFeatureChips .featureChip{
  --_tag: var(--productTagColor, var(--accent));
  --_tagGlow: var(--productTagGlowColor, var(--_tag));
  color: color-mix(in srgb, var(--_tag) 42%, #f3f7ff);
  border-color: color-mix(in srgb, var(--_tag) 46%, rgba(255,255,255,.10));
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--_tag) 22%, rgba(19,28,42,.92)),
      color-mix(in srgb, var(--_tag) 10%, rgba(19,28,42,.90))
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 14px color-mix(in srgb, var(--_tagGlow) 22%, transparent);
}

.tileBottom{margin-top:16px;display:flex;align-items:center;gap:12px}
.tilePrice{
  display:flex;
  align-items:baseline;
  gap:6px;
  line-height:1;
}
.tilePrice .k{color:var(--muted);font-size:12px;margin:0}
.tilePrice .v{
  font-family: var(--tileTitleFontStack);
  font-weight:800;
  font-size:19px;
  letter-spacing:-0.02em;
  margin:0;
}
.tileBtn{
  margin-left:auto;
  padding:11px 20px;
  border-radius:14px;
  border:1px solid rgba(39,211,255,.18);
  background: rgba(39,211,255,.10);
  font-weight:800;
  transition:
    transform .28s var(--ease),
    background .28s var(--ease),
    border-color .28s var(--ease),
    box-shadow .28s var(--ease);
}
.productTile:hover .tileBtn{
  transform: translateY(-2px);
  border-color: rgba(39,211,255,.38);
  background: rgba(39,211,255,.18);
  box-shadow: 0 4px 16px rgba(39,211,255,.12);
}
/* ensure hover lift works even after fadeInUp animation resets transform */
.productTile.fadeInUp.isShown:hover{
  transform: translateY(-5px);
}
@media (prefers-reduced-motion: reduce){
  .productTile,
  .productTile .tileCover,
  .productTile .tileBody,
  .productTile .tileBtn{
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    will-change: auto;
  }
  .productTile:hover,
  .productTile.fadeInUp.isShown:hover{ transform: none; }
  .productTile:hover .tileCover{ transform: none; }
  .productTile::before{ transition: opacity .2s ease; }
  .product{ will-change: auto; transition: border-color .2s ease, box-shadow .2s ease; }
  .product:hover{ transform: none; }
  .product::before{ transition: opacity .2s ease; }
  .gameCard{ will-change: auto; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
  .gameCard .gameCover{ transition: filter .2s ease; }
  .gameCard:hover{ transform: none; }
  .gameCard:hover .gameCover{ transform: none; }
  .gameCard::before{ transition: opacity .2s ease; }
}
.thumb{
  height:108px;border-radius:14px;
  background: radial-gradient(120px 90px at 20% 20%, rgba(39,211,255,.26), transparent 70%),
              radial-gradient(120px 90px at 80% 30%, rgba(124,58,237,.24), transparent 70%),
              linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
}
.shotBtn{
  border: 1px solid rgba(255,255,255,.1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition:
    border-color .25s var(--ease),
    box-shadow .25s var(--ease),
    transform .25s var(--ease);
  will-change: transform;
}
.shotBg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  border-radius: inherit;
  transition: transform .38s var(--ease);
  pointer-events: none;
}
.shotBtn:hover{
  border-color: rgba(39,211,255,.42);
  box-shadow:
    0 0 0 1px rgba(39,211,255,.14),
    0 6px 22px rgba(0,0,0,.32),
    0 0 18px rgba(39,211,255,.1);
  transform: scale(1.02);
  z-index: 1;
}
.shotBtn:hover .shotBg{
  transform: scale(1.04);
}
.shotBtn:active{
  transform: scale(0.99);
  transition-duration: .1s;
}
.videoFrame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  background:#000;
}
.videoWrap{
  position:relative;
  width:100%;
  aspect-ratio: 16 / 9;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background:#000;
}

/* ── Video thumbnail card (click-to-open modal) ─────────────── */
.videoThumb{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.10);
  background: #0b1220;
  display: block;
  transition:
    border-color .25s var(--ease),
    box-shadow .25s var(--ease),
    transform .25s var(--ease);
  will-change: transform;
}
.videoThumb:hover{
  border-color: rgba(39,211,255,.48);
  box-shadow:
    0 0 0 1px rgba(39,211,255,.18),
    0 8px 28px rgba(0,0,0,.38),
    0 0 22px rgba(39,211,255,.13);
  transform: scale(1.04);
  z-index: 1;
}
.videoThumb:active{
  transform: scale(0.98);
  transition-duration: .1s;
}
.videoThumbBg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform .38s var(--ease);
  pointer-events: none;
}
.videoThumb:hover .videoThumbBg{
  transform: scale(1.08);
}
.videoThumbPlay{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.videoThumbPlayBtn{
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(0,0,0,.6);
  border: 2px solid rgba(255,255,255,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .22s var(--ease), transform .22s var(--ease), border-color .22s var(--ease);
  backdrop-filter: blur(6px);
}
.videoThumb:hover .videoThumbPlayBtn{
  background: rgba(39,211,255,.28);
  border-color: rgba(39,211,255,.7);
  transform: scale(1.12);
}
.videoThumbPlayIcon{
  width: 0;
  height: 0;
  margin-left: 4px;
  border-style: solid;
  border-width: 10px 0 10px 18px;
  border-color: transparent transparent transparent #fff;
}

/* ── Video modal ─────────────────────────────────────────────── */
#vid-modal .vidModalPanel{
  max-width: min(960px, calc(100% - 24px));
  /* Ниже шапки/крошек > общий .modalPanel (80px); чуть больше воздуха сверху */
  margin-top: 120px;
}
#shot-modal .shotModalPanel{
  max-width: min(1100px, calc(100% - 24px));
  /* Делаем такой же верхний отступ, как у видео-модалки. */
  margin-top: 120px;
}
.vidModalBody{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}
.vidModalFrame{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.catsGrid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:var(--cardGap);
  align-items: start;
}
@media (min-width: 1440px){
  .catsGrid{grid-template-columns: repeat(4,1fr)}
}

/* Плавная смена категорий при фильтре / поиске (без translate — меньше ощущения «дёрганья») */
.catsGrid.catsGrid--fade{
  background-color: var(--bg);
  transition: opacity 0.28s ease;
  will-change: opacity;
  backface-visibility: hidden;
}
.catsGrid.catsGrid--fade.is-grid-swapping{
  opacity: 0;
  transform: none;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce){
  .catsGrid.catsGrid--fade{
    transition: none;
    will-change: auto;
  }
  .catsGrid.catsGrid--fade.is-grid-swapping{
    opacity: 1;
    pointer-events: auto;
  }
}

/* Страница /catalog — тот же блок поиска/фильтров под шапкой секции */
.catalogPageToolbar{
  margin-top: 4px;
}

/* Anti-flash and smooth reveal for /catalog first paint. */
/* Base transitions are only for catalog root blocks; other pages are unaffected. */
#catalog-head,
#catalog-page-toolbar,
#catalog-categories,
#catalog-grid-title,
#catalog-grid {
  transition:
    opacity .34s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear;
}
html.catalog-preboot #catalog-head,
html.catalog-preboot #catalog-page-toolbar,
html.catalog-preboot #catalog-categories,
html.catalog-preboot #catalog-grid-title,
html.catalog-preboot #catalog-grid {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
html.catalog-preboot body {
  overflow: hidden;
}
html.catalog-preboot body > * {
  visibility: hidden;
}
/* Single preboot layer on <html> (catalog.html only keeps the fadeout hook + early hide rules in <head>). */
html.catalog-preboot::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 150;
  background:
    radial-gradient(900px 420px at 50% 35%, rgba(39, 211, 255, 0.1), transparent 62%),
    rgba(8, 12, 18, 0.62);
  backdrop-filter: blur(10px) saturate(1.05) brightness(0.99);
  -webkit-backdrop-filter: blur(10px) saturate(1.05) brightness(0.99);
  pointer-events: none;
}
html.catalog-preboot::after {
  content: "";
  position: fixed;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  z-index: 151;
  border-radius: 50%;
  box-sizing: border-box;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-top-color: rgba(39, 211, 255, 0.95);
  border-right-color: rgba(39, 211, 255, 0.28);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset, 0 0 30px rgba(39, 211, 255, 0.08);
  pointer-events: none;
  animation: spin 1.45s linear infinite;
}
html.catalog-preboot-fadeout::before,
html.catalog-preboot-fadeout::after {
  opacity: 0 !important;
  transition: opacity 0.38s cubic-bezier(0.2, 0.85, 0.3, 1) !important;
}

/* Home catalog: search + segment filters (ширина как у сетки плиток) */
.homeCatalogToolbar{
  width: 100%;
  max-width: none;
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
}
.homeCatalogSearchWrap{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px 0 12px;
  min-height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.homeCatalogSearchIcon{
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: rgba(203,215,234,.55);
}
.homeCatalogSearchInput{
  flex: 1;
  min-width: 0;
  height: 46px;
  border: 0;
  background: transparent;
  color: rgba(245,248,255,.95);
  font-size: 15px;
  outline: none;
}
.homeCatalogSearchInput::placeholder{
  color: rgba(203,215,234,.45);
}
/* Пустой результат поиска по категориям (на всю ширину сетки) */
.homeCatalogSearchEmpty{
  grid-column: 1 / -1;
  text-align: center;
  padding: 18px 6px 12px;
  font-size: 15px;
  color: var(--muted);
  border: 0;
  border-radius: 0;
  background: transparent;
}
.homeCatalogSearchEmpty--compact{
  padding: 8px 6px 6px;
  font-size: 14px;
  line-height: 1.3;
  opacity: .92;
}
.homeCatalogFilters{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.homeCatFilterBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(145deg, rgba(39, 211, 255, 0.12), rgba(124, 58, 237, 0.07)),
    rgba(255, 255, 255, 0.04);
  color: rgba(203, 215, 234, 0.82);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 22px -10px rgba(39, 211, 255, 0.14);
  /* Only paint properties — avoid "filter" here: it can break nested SVG + currentColor repaints in WebKit when toggling .--active. */
  transition:
    border-color 0.28s var(--ease),
    background 0.28s var(--ease),
    color 0.28s var(--ease),
    box-shadow 0.28s var(--ease);
}
.homeCatFilterBtn:hover{
  border-color: rgba(39, 211, 255, 0.28);
  color: rgba(245, 248, 255, 0.94);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 28px -8px rgba(39, 211, 255, 0.2);
}
.homeCatFilterBtn--active{
  border-color: rgba(39, 211, 255, 0.42);
  background:
    linear-gradient(135deg, rgba(39, 211, 255, 0.22), rgba(124, 58, 237, 0.14)),
    rgba(14, 21, 32, 0.55);
  color: rgba(245, 248, 255, 0.98);
  box-shadow:
    inset 0 0 0 1px rgba(39, 211, 255, 0.2),
    0 0 32px -8px rgba(39, 211, 255, 0.24);
}
.homeCatFilterBtn--active:hover{
  background:
    linear-gradient(135deg, rgba(39, 211, 255, 0.24), rgba(124, 58, 237, 0.15)),
    rgba(14, 21, 32, 0.55);
}
@media (prefers-reduced-motion: reduce){
  .homeCatFilterBtn,
  .homeCatFilterBtn:hover{
    transition: none;
    transform: none;
  }
}
.homeCatFilterIco{
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  opacity: 0.9;
}
.homeCatFilterIco svg{
  width: 22px;
  height: 22px;
  display: block;
  flex-shrink: 0;
  /* Keep glyph paint from the sprite paths; "color" is for currentColor where used. */
  color: inherit;
  pointer-events: none;
}
.homeCatFilterBtn--active .homeCatFilterIco{
  opacity: 1;
  color: rgba(39, 211, 255, 0.96);
}

/* Home “Popular games” cards */
.gameCard{
  display:block;
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--cardRadius);
  overflow:hidden;
  background: rgba(14,21,32,.30);
  box-shadow:
    0 0 0 1px rgba(39,211,255,.05),
    0 18px 45px rgba(0,0,0,.26);
  transition:
    transform .30s var(--ease),
    border-color .30s var(--ease),
    box-shadow .30s var(--ease),
    background .30s var(--ease);
  position:relative;
  will-change: transform;
}
/* top accent glow bar */
.gameCard::before{
  content:"";
  position:absolute;
  left:10%; right:10%; top:0;
  height:2px;
  border-radius:0 0 999px 999px;
  background: linear-gradient(90deg, transparent, rgba(39,211,255,.52), rgba(124,58,237,.38), transparent);
  opacity:.12;
  pointer-events:none;
  transition: opacity .30s var(--ease), filter .30s var(--ease);
  z-index:3;
}
.gameCard[type="button"]{
  width:100%;
  text-align:left;
  padding:0;
  color:inherit;
  cursor:pointer;
}
.gameCard:hover{
  transform: translateY(-5px);
  border-color: rgba(39,211,255,.24);
  box-shadow:
    0 0 0 1px rgba(39,211,255,.13),
    0 0 44px -10px rgba(39,211,255,.18),
    0 28px 68px rgba(0,0,0,.38);
  background: rgba(14,21,32,.45);
}
.gameCard:hover::before{
  opacity:1;
  filter: brightness(1.12);
}
.gameCover{
  height:var(--cardCoverH);
  background-size:cover;
  background-position: 50% 50% !important;
  background-repeat: no-repeat;
  position:relative;
  filter: brightness(1.06) contrast(1.03) saturate(1.02);
  transition: transform .44s var(--ease), filter .30s var(--ease);
}
.gameCard:hover .gameCover{
  transform: scale(1.04);
  filter: brightness(1.14) contrast(1.05) saturate(1.06);
}
.gameCoverShade{
  position:absolute;inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.62));
}
.gameBody{padding:12px}
.gameTitle{
  font-family: var(--tileTitleFontStack);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 2px 0 6px;
}
.gameMeta{
  color:var(--muted);
  font-size:13px;
  display:flex;
  align-items:center;
  gap:10px;
}
.gameMeta .dot{opacity:.6}
.gameMeta .ok{color: rgba(25,195,125,.95)}
.gameBottom{
  margin-top:14px;
  display:flex;
  align-items:center;
  gap:12px;
}
.gamePrice{
  display:flex;
  align-items:baseline;
  gap:6px;
  line-height:1;
}
.gamePrice .k{
  color:var(--muted);
  font-size:12px;
  margin:0;
}
.gamePrice .v{
  font-family: var(--tileTitleFontStack);
  font-weight:800;
  font-size:18px;
  letter-spacing:-0.02em;
  margin:0;
}
.gameBtn{
  margin-left:auto;
  padding:10px 18px;
  border-radius:14px;
  border:1px solid rgba(39,211,255,.18);
  background: rgba(39,211,255,.10);
  color:var(--text);
  font-weight:800;
  transition: transform .28s var(--ease), background .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.gameCard:hover .gameBtn{
  transform: translateY(-2px);
  border-color: rgba(39,211,255,.38);
  background: rgba(39,211,255,.18);
  box-shadow: 0 4px 16px rgba(39,211,255,.12);
}
.catCard{
  text-align:left;
  border:1px solid rgba(255,255,255,.07);
  background: rgba(18,27,42,.55);
  border-radius:var(--cardRadius);
  padding:0;
  color:var(--text);
  cursor:pointer;
  transition: transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease);
  position:relative;
  overflow:hidden;
  box-shadow:
    0 0 0 1px rgba(39,211,255,.05),
    0 18px 45px rgba(0,0,0,.26);
}
.catCard::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(240px 120px at 10% 0%, rgba(39,211,255,.18), transparent 55%),
              radial-gradient(240px 120px at 90% 20%, rgba(124,58,237,.16), transparent 55%);
  opacity:0;
  transition: opacity .22s var(--ease);
  pointer-events:none;
}
.catCard:hover{
  transform: translateY(-2px);
  border-color: rgba(39,211,255,.22);
  box-shadow:
    0 0 0 1px rgba(39,211,255,.11),
    0 0 32px -10px rgba(39,211,255,.12),
    0 18px 40px rgba(0,0,0,.28);
  background: rgba(18,27,42,.68);
}
.catCard:hover::before{opacity:1}
.catImg{
  height:var(--cardCoverH);
  border-radius:0;
  border:0;
  background: radial-gradient(120px 90px at 20% 20%, rgba(39,211,255,.26), transparent 70%),
              radial-gradient(120px 90px at 80% 30%, rgba(124,58,237,.24), transparent 70%),
              linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  background-size:cover;
  background-position: 50% 50% !important;
  background-repeat: no-repeat;
  position:relative;
}
.catImg::after{
  content:"";
  position:absolute;inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.62));
}
.catTitle{
  font-weight:900;
  font-size:18px;
  line-height:1.2;
  padding:12px 12px 0;
}
.catDesc{
  color:var(--muted);
  font-size:13px;
  padding:6px 12px 12px;
  line-height:1.35
}
.meta{display:flex;align-items:center;gap:8px;margin-top:10px;color:var(--muted);font-size:12px}
.product h3{margin:8px 0 8px;font-size:15px}
.priceRow{display:flex;align-items:center;gap:10px}
.price{font-weight:800}
.tag{
  font-size:12px;padding:4px 8px;border-radius:999px;
  border:1px solid var(--line);color:var(--muted);background:rgba(255,255,255,.03)
}

.catSeoText{
  margin-top:10px;
  color:var(--muted);
  line-height:1.6;
  font-size:13px;
  max-width: 820px;
}

/* Product title + status pill (near title) */
.pTitleRow{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.pStatusLabel{
  font-size:12px;
  font-weight:700;
  color: var(--muted);
  letter-spacing:.04em;
  text-transform:uppercase;
  opacity:.72;
}
.statusPill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  font-weight:900;
  font-size:12px;
  line-height:1;
  letter-spacing:.2px;
  text-transform:capitalize;
  user-select:none;
}
.statusPill::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(255,255,255,.06);
}
.statusPill.isGood{
  color: rgba(25,195,125,1);
  background: rgba(25,195,125,.14);
  border-color: rgba(25,195,125,.28);
}
.statusPill.isWarn{
  color: rgba(251,191,36,1);
  background: rgba(251,191,36,.14);
  border-color: rgba(251,191,36,.28);
}
.statusPill.isBad{
  color: rgba(239,68,68,1);
  background: rgba(239,68,68,.14);
  border-color: rgba(239,68,68,.28);
}
.statusPill.isInfo{
  color: rgba(56,189,248,1);
  background: rgba(56,189,248,.14);
  border-color: rgba(56,189,248,.28);
}
.statusPill.isOrange{
  color: rgba(249,115,22,1);
  background: rgba(249,115,22,.14);
  border-color: rgba(249,115,22,.28);
}
.statusPill.isViolet{
  color: rgba(167,139,250,1);
  background: rgba(124,58,237,.16);
  border-color: rgba(167,139,250,.32);
}
.statusPill.isCyan{
  color: rgba(34,211,238,1);
  background: rgba(34,211,238,.12);
  border-color: rgba(34,211,238,.3);
}
.statusPill.isMagenta{
  color: rgba(244,114,182,1);
  background: rgba(244,63,94,.12);
  border-color: rgba(244,114,182,.3);
}
.statusPill.isGray{
  color: rgba(203,213,225,1);
  background: rgba(148,163,184,.12);
  border-color: rgba(148,163,184,.28);
}
.statusPill.isRose{
  color: rgba(251,113,133,1);
  background: rgba(251,113,133,.12);
  border-color: rgba(251,113,133,.3);
}
.statusPill.isUnknown{
  color: rgba(251,191,36,1);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
}

/* Страница товара: статус и «Рекомендуем» — одна высота (Montserrat + emoji ⭐ давали разный line-box) */
body.page-product .pTitleRow .statusPill,
body.page-product .pTitleRow .recommendBadge{
  box-sizing: border-box;
  min-height: 36px;
  padding: 0 14px;
  line-height: 1;
  font-size: 12px;
  align-items: center;
}
body.page-product .pTitleRow .statusPill::before{
  flex-shrink: 0;
}
body.page-product .pTitleRow .recommendBadge{
  gap: 6px;
}
body.page-product .pTitleRow .recommendBadge .recStar{
  flex-shrink: 0;
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.page-product .pTitleRow .recommendBadge .recommendBadgeLabel{
  line-height: 1;
}

.fav{
  margin-left:auto;
  height:32px;min-width:32px;border-radius:12px;
  transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.fav--label{
  min-width:auto;
  padding:0 12px;
  gap:8px;
  border-color: rgba(39,211,255,.22);
  background: rgba(39,211,255,.06);
  box-shadow: 0 0 0 1px rgba(39,211,255,.08), 0 0 16px rgba(39,211,255,.06);
}
/* В sectionHead кнопка "В избранное" той же высоты, что .btn (40px) */
.sectionHead .fav--label{
  height:40px;
  border-radius:14px;
}
.fav--label:hover{
  border-color: rgba(39,211,255,.42);
  background: rgba(39,211,255,.12);
  box-shadow: 0 0 0 1px rgba(39,211,255,.16), 0 0 22px rgba(39,211,255,.14);
  transform: translateY(-1px);
}
.fav--label:active{
  transform: translateY(0px) scale(.97);
}
.favLabel{
  font-size:12px;
  font-weight:800;
  color: rgba(39,211,255,.78);
  letter-spacing:.01em;
  transition: color .2s var(--ease);
}
.fav--label:hover .favLabel{ color: var(--accent); }
/* Heart icon: accent stroke + glow even when not favourited */
.fav--label:not(.isOn) svg path{
  stroke: rgba(39,211,255,.62);
  filter: drop-shadow(0 0 3px rgba(39,211,255,.28));
}
.fav--label:hover:not(.isOn) svg path{
  stroke: var(--accent);
  filter: drop-shadow(0 0 6px rgba(39,211,255,.55));
}
.fav svg path{
  transition: fill .2s var(--ease), stroke .2s var(--ease), filter .2s var(--ease);
}
.fav:not(.isOn) svg path{
  fill: none;
}
.fav.isOn{
  border-color: rgba(39,211,255,.48);
  background: linear-gradient(145deg, rgba(39,211,255,.16), rgba(124,58,237,.12));
  color: var(--accent);
  box-shadow: 0 0 0 1px rgba(39,211,255,.12), 0 8px 24px rgba(39,211,255,.10);
}
.fav.isOn svg{
  opacity: 1;
}
.fav.isOn svg path{
  fill: rgba(39,211,255,.34);
  stroke: var(--accent);
  filter: drop-shadow(0 0 5px rgba(39,211,255,.45));
}

.licenseOpt{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  text-align:left;
  padding:13px 15px;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.035);
  color:var(--text);
  cursor:pointer;
  transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.licenseOpt:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.055);
}
.licenseOpt.isOn{
  border-color: rgba(39,211,255,.42);
  background: linear-gradient(135deg, rgba(39,211,255,.14), rgba(124,58,237,.1));
  box-shadow:
    0 0 0 1px rgba(39,211,255,.1),
    0 10px 32px rgba(39,211,255,.1);
}
.licenseOptRadio{
  flex:0 0 auto;
  width:20px;
  height:20px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.32);
  display:flex;
  align-items:center;
  justify-content:center;
  transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.licenseOptRadioDot{
  width:8px;
  height:8px;
  border-radius:999px;
  background: var(--accent);
  transform: scale(0);
  opacity:0;
  transition: transform .18s var(--ease), opacity .18s var(--ease);
  box-shadow: 0 0 10px rgba(39,211,255,.55);
}
.licenseOpt.isOn .licenseOptRadio{
  border-color: rgba(39,211,255,.75);
  background: rgba(39,211,255,.12);
  box-shadow: 0 0 0 3px rgba(39,211,255,.08);
}
.licenseOpt.isOn .licenseOptRadioDot{
  transform: scale(1);
  opacity:1;
}
.licenseOptTitle{
  flex:1 1 auto;
  min-width:0;
  font-weight:600;
  font-size:14px;
  letter-spacing:-0.02em;
  line-height:1.25;
  color: rgba(229,237,248,.92);
}
.licenseOpt.isOn .licenseOptTitle{
  color: #f4f8ff;
}
.licenseOptPrice{
  flex:0 0 auto;
  font-family: var(--siteFontStack);
  font-weight:800;
  font-size:15px;
  letter-spacing:-0.03em;
  font-variant-numeric: tabular-nums;
  color: rgba(245,250,255,.96);
  text-shadow: 0 0 20px rgba(39,211,255,.12);
}
.licenseOpt.isOn .licenseOptPrice{
  color: #b8f0ff;
  text-shadow: 0 0 18px rgba(39,211,255,.35);
}
.agreeRow{
  margin-top:12px;
  display:flex;
  align-items:center;
  gap:10px;
}
.purchaseBlockSep{
  margin: 22px 0 16px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(39,211,255,.5) 0%,
    rgba(124,58,237,.28) 45%,
    rgba(255,255,255,.06) 100%
  );
  box-shadow: 0 0 12px rgba(39,211,255,.16);
}
.agreeText{
  color:var(--muted);
  font-size:14px;
  line-height:1.35;
}
.agreeText a{color:var(--text);text-decoration:underline}
.switch{
  position:relative;
  display:inline-block;
  width:44px;
  height:24px;
}
.switch input{
  opacity:0;
  width:0;
  height:0;
}
.slider{
  position:absolute;
  cursor:pointer;
  inset:0;
  background:#3a4354;
  border:1px solid var(--line);
  border-radius:999px;
  transition:.2s;
}
.slider:before{
  content:"";
  position:absolute;
  height:18px;
  width:18px;
  left:2px;
  top:2px;
  background:#cfd8e6;
  border-radius:50%;
  transition:.2s;
}
.switch input:checked + .slider{
  background: rgba(39,211,255,.35);
}
.switch input:checked + .slider:before{
  transform: translateX(20px);
  background:#fff;
}
.btn.isDisabled,
.btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none !important;
}

.toolbar{
  display:flex;gap:10px;flex-wrap:wrap;
  padding:12px;
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(18,27,42,.45);
}
.catalogInfoStrip{
  margin: 2px auto 0;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid rgba(39,211,255,.28);
  background:
    linear-gradient(135deg, rgba(39,211,255,.14), rgba(124,58,237,.12)),
    rgba(14,22,34,.62);
  box-shadow:
    0 0 0 1px rgba(39,211,255,.10) inset,
    0 8px 26px rgba(0,0,0,.24),
    0 0 24px rgba(39,211,255,.12);
  text-align: center;
}
.catalogInfoStripTitle{
  font-weight: 900;
  letter-spacing: .02em;
  color: #dff7ff;
}
.catalogInfoStripLead{
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.45;
}
.input{
  flex:1;
  min-width: 220px;
  height:40px;
  padding:0 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  color:var(--text);
  outline:none;
}
.input:focus{border-color: rgba(39,211,255,.35); box-shadow: 0 0 0 3px rgba(39,211,255,.10)}
.select{
  height:40px;
  padding:0 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  color:var(--text);
  outline:none;
  color-scheme: dark;
}
.select:focus{
  border-color: rgba(39,211,255,.35);
  box-shadow: 0 0 0 3px rgba(39,211,255,.10);
}
.select option{
  background: var(--panel) !important;
  color: #dbe8ff !important;
}
.select option:checked{
  background: linear-gradient(180deg, rgba(39,211,255,.30), rgba(39,211,255,.20));
  color: #ffffff !important;
}
.select optgroup{
  background: var(--panel);
  color: #9fb0c8;
}

.footer{
  --footerFineBg: rgba(4,8,14,.55);
  --footerFineBlur: blur(24px) saturate(1.18);
  margin-top: 0;
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 36px;
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.038);
  /* Accent radials at the top echo the page gradient — footer feels like an extension of the page */
  background:
    radial-gradient(900px 280px at 18% 0%, rgba(39,211,255,.09), transparent 62%),
    radial-gradient(700px 200px at 84% 0%, rgba(124,58,237,.075), transparent 58%),
    linear-gradient(180deg, var(--bg2) 0%, var(--siteFooterFloor, #05080c) 100%);
}
/* Главная, корень каталога, статус: плоский низ — как визуальный зазор у корня /catalog, без «подсветки» над футером */
body:has(#main.page-home) .footer,
body:has(#catalog-page-toolbar):has(#catalog-head:not(.isCategory):not(.isFavorites)) .footer,
body:has(#status-head) .footer,
body.page-status .footer{
  background: linear-gradient(180deg, var(--bg2) 0%, var(--bg2) 100%);
  box-shadow: none;
}
/* Центральная полоска и мягкое свечение — только узкий акцент по центру */
.footer::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  transform:translate(-50%, -1px);
  width:min(540px, 85%);
  height:2px;
  border-radius:999px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(39,211,255,.45),
    rgba(124,58,237,.28),
    rgba(39,211,255,.45),
    transparent
  );
  box-shadow:
    0 0 10px rgba(39,211,255,.32),
    0 0 22px rgba(39,211,255,.1),
    0 1px 14px rgba(39,211,255,.08);
  pointer-events:none;
  opacity:.88;
}
.footerPayments{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:clamp(12px,2.8vw,26px);
  padding:18px 0 14px;
  margin-top:16px;
  border-top:1px solid rgba(255,255,255,.04);
}
/* У дисклеймера уже полная рамка — второй border-top у платежей даёт «двойную полоску» */
.footerDisclaimer + .footerPayments{
  border-top: none;
  margin-top: 12px;
}
.footerPaymentBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  opacity:.52;
  transition:opacity .2s var(--ease), color .2s var(--ease);
}
.footerPaymentBadge svg{
  display:block;
  height:22px;
  width:auto;
  max-width:min(104px,28vw);
}
.footerPaymentBadge:hover{
  opacity:.88;
  color:var(--text);
}
@media (max-width:520px){
  .footerPayments{
    gap:10px 14px;
    padding:16px 0 4px;
  }
  .footerPaymentBadge svg{
    height:19px;
  }
}
.footerTop{
  padding:22px 0 14px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.footerCol{
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
  background: rgba(255,255,255,.01);
  padding:12px 12px;
}
.footerCol h4{margin:0 0 8px;font-size:13px}
.footerCol a{font-size:12px}
.footerIconCard{
  box-shadow: 0 18px 45px rgba(0,0,0,.16);
}
.footerIconTitle{
  font-weight:900;
  letter-spacing:.2px;
}
.footerIconText{
  margin-top:8px;
  color:var(--muted);
  line-height:1.45;
  font-size:12px;
}
.footerIconBtns{
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:8px;
}
.footerChip{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 8px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  color:var(--text);
  transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.footerChip span{font-size:12px}
.footerChip:hover{
  transform: translateY(-1px);
  border-color: rgba(39,211,255,.22);
  background: rgba(39,211,255,.06);
}
.footerChipIcon{
  width:16px;height:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: var(--muted);
}
.footerChipIcon svg{width:14px;height:14px;opacity:.95}

@media (max-width: 980px){
  .footerIconBtns{grid-template-columns: repeat(2, minmax(0, 1fr))}
}
@media (max-width: 720px){
  .footerIconBtns{grid-template-columns: 1fr}
}
.footerLinksGrid{
  padding:0 0 22px;
  display:grid;
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  gap:12px;
}
.footer a{color:var(--muted)}
.footer a:hover{color:var(--text)}
.footerCol a.footerLinkPromo{
  color:var(--text);
  font-weight:800;
}
.footerCol a.footerLinkPromo:hover{
  color:var(--text);
}
.fineprint{
  border-top:1px solid rgba(255,255,255,.05);
  padding:14px 0 12px;
  color:var(--muted);
  font-size:12px;
  background: transparent;
}
.fineprint.fineprintBlur{
  background: transparent;
}
.fineprintLeftWrap{
  display:flex;
  align-items:center;
  gap:10px;
}
.fineprintRightWrap{
  display:flex;
  align-items:center;
  gap:12px;
  margin-right:16px; /* чуть левее от правого края, как на скрине */
}
.rssBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:28px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color:var(--text);
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  text-decoration:none;
}
.rssBtn:hover{
  border-color: rgba(39,211,255,.22);
  box-shadow: 0 0 0 3px rgba(39,211,255,.08);
}
.footerTextLinks{
  margin-top:8px;
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:8px 10px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width: thin;
  font-size:11px;
  line-height:1.35;
}
/* Вынесены из .fineprint: последняя строка подвала (как на главной), safe-area без пустой полосы */
.footerTextLinks--dock{
  margin-top: 0;
  padding-top: 10px;
  padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
}
/* На «Оплата и доставка» и «Политика cookie» — опускаем ссылки ниже, как попросил пользователь */
body:not(.adminPage):has(#page-head.isPaymentDelivery) .footerTextLinks--dock,
body:not(.adminPage)[data-legal-doc="cookies"] .footerTextLinks--dock{
  padding-top: 18px;
  padding-bottom: max(4px, env(safe-area-inset-bottom, 0px));
}
.footerTextLinks a{
  color:var(--muted);
  text-decoration:underline;
  text-underline-offset:2px;
  white-space:nowrap;
  flex:0 0 auto;
}
.footerTextLinks a:hover{
  color:var(--text);
}
.rtContent .rtGlow,
.rtEditor .rtGlow,
#legal-body .rtGlow,
#rev-info-text .rtGlow,
#rev-source-text .rtGlow,
#page-body .rtGlow{
  color: var(--rtGlowColor, inherit);
  text-shadow:
    0 0 12px color-mix(in srgb, var(--rtGlowColor, var(--accent)) 48%, transparent),
    0 0 28px color-mix(in srgb, var(--rtGlowColor, var(--accent)) 26%, transparent);
}
.rtContent ol.rteNumGlow li::marker,
.rtEditor ol.rteNumGlow li::marker,
#legal-body ol.rteNumGlow li::marker,
#rev-info-text ol.rteNumGlow li::marker,
#rev-source-text ol.rteNumGlow li::marker,
#page-body ol.rteNumGlow li::marker{
  color: var(--rteNumColor, var(--accent));
  font-weight: 800;
  text-shadow:
    0 0 10px color-mix(in srgb, var(--rteNumColor, var(--accent)) 52%, transparent),
    0 0 20px color-mix(in srgb, var(--rteNumColor, var(--accent)) 25%, transparent);
}
.rtContent ol.rteNumBadge,
.rtEditor ol.rteNumBadge,
#legal-body ol.rteNumBadge,
#rev-info-text ol.rteNumBadge,
#rev-source-text ol.rteNumBadge,
#page-body ol.rteNumBadge{
  list-style: none;
  counter-reset: rteNum;
  padding-left: 0;
}
.rtContent ol.rteNumBadge > li,
.rtEditor ol.rteNumBadge > li,
#legal-body ol.rteNumBadge > li,
#rev-info-text ol.rteNumBadge > li,
#rev-source-text ol.rteNumBadge > li,
#page-body ol.rteNumBadge > li{
  counter-increment: rteNum;
  position: relative;
  padding-left: 34px;
  margin-bottom: 8px;
}
.rtContent ol.rteNumBadge > li::before,
.rtEditor ol.rteNumBadge > li::before,
#legal-body ol.rteNumBadge > li::before,
#rev-info-text ol.rteNumBadge > li::before,
#rev-source-text ol.rteNumBadge > li::before,
#page-body ol.rteNumBadge > li::before{
  content: counter(rteNum);
  position: absolute;
  left: 0;
  top: .05em;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  color: var(--rteNumColor, var(--accent));
  border: 1px solid color-mix(in srgb, var(--rteNumColor, var(--accent)) 62%, transparent);
  background: color-mix(in srgb, var(--rteNumColor, var(--accent)) 16%, rgba(0,0,0,.15));
  box-shadow:
    0 0 10px color-mix(in srgb, var(--rteNumColor, var(--accent)) 40%, transparent),
    inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent);
}
.rtContent ol.rteNumCircle > li::before,
.rtEditor ol.rteNumCircle > li::before,
#legal-body ol.rteNumCircle > li::before,
#rev-info-text ol.rteNumCircle > li::before,
#rev-source-text ol.rteNumCircle > li::before,
#page-body ol.rteNumCircle > li::before{
  border-radius: 999px;
}
.rtContent ol.rteNumSquare > li::before,
.rtEditor ol.rteNumSquare > li::before,
#legal-body ol.rteNumSquare > li::before,
#rev-info-text ol.rteNumSquare > li::before,
#rev-source-text ol.rteNumSquare > li::before,
#page-body ol.rteNumSquare > li::before{
  border-radius: 6px;
}
.rtContent ul.rteBulletGlow li::marker,
.rtEditor ul.rteBulletGlow li::marker,
#legal-body ul.rteBulletGlow li::marker,
#rev-info-text ul.rteBulletGlow li::marker,
#rev-source-text ul.rteBulletGlow li::marker,
#page-body ul.rteBulletGlow li::marker{
  color: var(--rteBulletColor, var(--accent));
  text-shadow:
    0 0 10px color-mix(in srgb, var(--rteBulletColor, var(--accent)) 52%, transparent),
    0 0 18px color-mix(in srgb, var(--rteBulletColor, var(--accent)) 24%, transparent);
}
.rtContent ul.rteBulletDisc,
.rtEditor ul.rteBulletDisc,
#legal-body ul.rteBulletDisc,
#rev-info-text ul.rteBulletDisc,
#rev-source-text ul.rteBulletDisc,
#page-body ul.rteBulletDisc{ list-style-type: disc; }
.rtContent ul.rteBulletCircle,
.rtEditor ul.rteBulletCircle,
#legal-body ul.rteBulletCircle,
#rev-info-text ul.rteBulletCircle,
#rev-source-text ul.rteBulletCircle,
#page-body ul.rteBulletCircle{ list-style-type: circle; }
.rtContent ul.rteBulletSquare,
.rtEditor ul.rteBulletSquare,
#legal-body ul.rteBulletSquare,
#rev-info-text ul.rteBulletSquare,
#rev-source-text ul.rteBulletSquare,
#page-body ul.rteBulletSquare{ list-style-type: square; }
.footerDisclaimer{
  margin: 0 0 14px 0;
  padding: 12px 12px;
  border: 1px solid rgba(39,211,255,.18);
  background: rgba(39,211,255,.04);
  border-radius: 16px;
  color: var(--muted);
  line-height: 1.55;
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
}
.rtEditor{
  min-height: 180px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--text);
  outline: none;
  line-height: 1.6;
}
/* Описание категории в админке: после «Авто» цвет как на сайте (.catSeoText — var(--muted)), не «белый» */
[data-admin-rte-scope^="catSeoHtml_"] .rtEditor{
  color: var(--muted);
}
/* HR из RTE: без сброса appearance box-shadow на <hr> часто не рисуется в Chromium/WebKit */
.rtEditor hr.rteHr,
.rtContent hr.rteHr,
#article-body hr.rteHr,
#legal-body hr.rteHr,
#page-body hr.rteHr,
#catalog-lead hr.rteHr,
#catalog-seo hr.rteHr,
#status-lead hr.rteHr,
#purchaseLead hr.rteHr,
.footerDisclaimer hr.rteHr,
.productDetailRich hr.rteHr,
.productDetailBody hr.rteHr,
.pFeaturesText hr.rteHr,
.reviewInfoText hr.rteHr,
#rev-info-text hr.rteHr,
#rev-source-text hr.rteHr,
#rev-note-text hr.rteHr,
.reviewTopNote hr.rteHr,
.promoSitePopup__body hr.rteHr{
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
}
.rtEditor hr[style*="box-shadow"],
.rtContent hr[style*="box-shadow"],
#article-body hr[style*="box-shadow"],
#legal-body hr[style*="box-shadow"],
#page-body hr[style*="box-shadow"],
#catalog-lead hr[style*="box-shadow"],
#catalog-seo hr[style*="box-shadow"],
#status-lead hr[style*="box-shadow"],
#purchaseLead hr[style*="box-shadow"],
.footerDisclaimer hr[style*="box-shadow"],
.productDetailRich hr[style*="box-shadow"],
.productDetailBody hr[style*="box-shadow"],
.pFeaturesText hr[style*="box-shadow"],
.reviewInfoText hr[style*="box-shadow"],
#rev-info-text hr[style*="box-shadow"],
#rev-source-text hr[style*="box-shadow"],
#rev-note-text hr[style*="box-shadow"],
.reviewTopNote hr[style*="box-shadow"],
.promoSitePopup__body hr[style*="box-shadow"]{
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
}
/* Links in editor are highlighted so the author can see them clearly */
.rtEditor a{
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
  text-underline-offset: 3px;
  border-radius: 3px;
  outline: 1px dashed color-mix(in srgb, var(--accent) 35%, transparent);
  outline-offset: 1px;
  transition: outline-color .18s, text-decoration-color .18s;
}
.rtEditor a:hover{
  text-decoration-color: var(--accent);
  outline-color: color-mix(in srgb, var(--accent) 65%, transparent);
}
/* Links on the public site (article body, spoilers, rich content areas) */
#article-body a,
.rtContent a,
#legal-body a,
#page-body a,
#purchaseLead a,
.productDetailRich a,
.productDetailBody a,
.pFeaturesText a,
details.rte-spoiler .rte-spoiler__body a,
.promoSitePopup__body a{
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 50%, transparent);
  text-underline-offset: 3px;
}
#article-body a:hover,
.rtContent a:hover,
#legal-body a:hover,
#page-body a:hover,
#purchaseLead a:hover,
.productDetailRich a:hover,
.productDetailBody a:hover,
.pFeaturesText a:hover,
details.rte-spoiler .rte-spoiler__body a:hover,
.promoSitePopup__body a:hover{
  text-decoration-color: var(--accent);
}
.rtEditor img,
.rtContent img,
#article-body img,
#legal-body img,
#page-body img,
#catalog-lead img,
#status-lead img,
#purchaseLead img,
.productDetailRich img,
.productDetailBody img,
.pFeaturesText img,
.reviewInfoText img,
#rev-note-text img,
.reviewTopNote img,
.promoSitePopup__body img{
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  display: block;
  margin: 10px 0;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 44px rgba(0,0,0,.22);
}

/* Resizable images inside admin RTE */
.rtEditor .rteImgWrap{
  display:inline-block;
  max-width: 100%;
  overflow: hidden;
  border-radius: 14px;
  border: 0;
  box-shadow: none;
  margin: 10px 0;
  background: transparent;
  position: relative;
}
.rtEditor .rteImgWrap:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(39,211,255,.10);
}
.rtEditor .rteImgWrap > img{
  width:100%;
  height:auto;
  display:block;
  margin:0;
  border:0;
  border-radius: 14px;
  box-shadow:none;
}
.rtEditor .rteImgHandle{
  position:absolute;
  right: 8px;
  bottom: 8px;
  width: 18px;
  height: 18px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.16);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), rgba(0,0,0,.10));
  box-shadow: 0 10px 26px rgba(0,0,0,.32), 0 0 16px rgba(39,211,255,.12);
  cursor: nwse-resize;
}
.rtEditor .rteImgHandle::before{
  content:"";
  position:absolute;
  inset: 5px;
  border-right: 2px solid rgba(39,211,255,.65);
  border-bottom: 2px solid rgba(39,211,255,.65);
  transform: rotate(0deg);
  opacity: .9;
}

/* Вложение-файл (карточка) в RTE */
.rtEditor .rteFileCard,
.rtContent .rteFileCard,
#article-body .rteFileCard,
#legal-body .rteFileCard,
#page-body .rteFileCard,
#catalog-lead .rteFileCard,
#status-lead .rteFileCard,
#purchaseLead .rteFileCard,
.productDetailRich .rteFileCard,
.productDetailBody .rteFileCard,
.pFeaturesText .rteFileCard,
.reviewInfoText .rteFileCard,
#rev-note-text .rteFileCard,
.reviewTopNote .rteFileCard{
  display: inline-block;
  width: min(180px, 100%);
  max-width: 100%;
  margin: 12px 0;
  vertical-align: top;
  position: relative;
}
.rtEditor .rteFileCard__link,
.rtContent .rteFileCard__link,
#article-body .rteFileCard__link,
#legal-body .rteFileCard__link,
#page-body .rteFileCard__link,
#catalog-lead .rteFileCard__link,
#status-lead .rteFileCard__link,
#purchaseLead .rteFileCard__link,
.productDetailRich .rteFileCard__link,
.productDetailBody .rteFileCard__link,
.pFeaturesText .rteFileCard__link,
.reviewInfoText .rteFileCard__link,
#rev-note-text .rteFileCard__link,
.reviewTopNote .rteFileCard__link{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: none;
  padding: 16px 18px 14px;
  border-radius: 10px;
  text-decoration: none;
  color: #1a1a1a;
  background: #eceef2;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 1px 0 rgba(255,255,255,.75) inset, 0 6px 20px rgba(0,0,0,.08);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
  position: relative;
}
.rtEditor .rteFileCard__link:hover,
.rtContent .rteFileCard__link:hover,
#article-body .rteFileCard__link:hover,
#legal-body .rteFileCard__link:hover,
#page-body .rteFileCard__link:hover,
#catalog-lead .rteFileCard__link:hover,
#status-lead .rteFileCard__link:hover,
#purchaseLead .rteFileCard__link:hover,
.productDetailRich .rteFileCard__link:hover,
.productDetailBody .rteFileCard__link:hover,
.pFeaturesText .rteFileCard__link:hover,
.reviewInfoText .rteFileCard__link:hover,
#rev-note-text .rteFileCard__link:hover,
.reviewTopNote .rteFileCard__link:hover{
  background: #f4f5f8;
  border-color: rgba(39,211,255,.35);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 8px 24px rgba(0,0,0,.1);
}
.rtEditor .rteFileCard__icon,
.rtContent .rteFileCard__icon,
#article-body .rteFileCard__icon,
#legal-body .rteFileCard__icon,
#page-body .rteFileCard__icon,
#catalog-lead .rteFileCard__icon,
#status-lead .rteFileCard__icon,
#purchaseLead .rteFileCard__icon,
.productDetailRich .rteFileCard__icon,
.productDetailBody .rteFileCard__icon,
.pFeaturesText .rteFileCard__icon,
.reviewInfoText .rteFileCard__icon,
#rev-note-text .rteFileCard__icon,
.reviewTopNote .rteFileCard__icon{
  display: block;
  width: 36px;
  height: 42px;
  margin-bottom: 8px;
  flex-shrink: 0;
  background: no-repeat center / contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 48' fill='none'%3E%3Cpath stroke='%236d7588' stroke-width='1.75' stroke-linejoin='round' d='M9 3.5h15.5L31 10v33.5H9z'/%3E%3Cpath stroke='%236d7588' stroke-width='1.75' d='M24.5 3.5V11h7'/%3E%3Cpath fill='%236d7588' d='M12 34h16v2.2H12z'/%3E%3Cpath fill='%236d7588' opacity='.35' d='M14 38h12v2.2H14z'/%3E%3C/svg%3E");
}
.rtEditor .rteFileCard__name,
.rtContent .rteFileCard__name,
#article-body .rteFileCard__name,
#legal-body .rteFileCard__name,
#page-body .rteFileCard__name,
#catalog-lead .rteFileCard__name,
#status-lead .rteFileCard__name,
#purchaseLead .rteFileCard__name,
.productDetailRich .rteFileCard__name,
.productDetailBody .rteFileCard__name,
.pFeaturesText .rteFileCard__name,
.reviewInfoText .rteFileCard__name,
#rev-note-text .rteFileCard__name,
.reviewTopNote .rteFileCard__name{
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  word-break: break-word;
  color: #111;
}
.rtEditor .rteFileCard__meta,
.rtContent .rteFileCard__meta,
#article-body .rteFileCard__meta,
#legal-body .rteFileCard__meta,
#page-body .rteFileCard__meta,
#catalog-lead .rteFileCard__meta,
#status-lead .rteFileCard__meta,
#purchaseLead .rteFileCard__meta,
.productDetailRich .rteFileCard__meta,
.productDetailBody .rteFileCard__meta,
.pFeaturesText .rteFileCard__meta,
.reviewInfoText .rteFileCard__meta,
#rev-note-text .rteFileCard__meta,
.reviewTopNote .rteFileCard__meta{
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
  color: #666;
}

.rtEditor .rteFileHandle{
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 14px;
  height: 14px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.14);
  background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(220,228,238,.95));
  box-shadow: 0 2px 8px rgba(0,0,0,.14);
  cursor: nwse-resize;
}
.rtEditor .rteFileHandle::before{
  content: "";
  position: absolute;
  inset: 4px;
  border-right: 1px solid rgba(39,211,255,.85);
  border-bottom: 1px solid rgba(39,211,255,.85);
}
.rtEditor .rteFileCard.isResizing .rteFileCard__link{
  box-shadow: 0 0 0 2px rgba(39,211,255,.2), 0 8px 24px rgba(0,0,0,.12);
}
.rtContent .rteFileHandle,
#article-body .rteFileHandle,
#legal-body .rteFileHandle,
#page-body .rteFileHandle,
#catalog-lead .rteFileHandle,
#status-lead .rteFileHandle,
#purchaseLead .rteFileHandle,
.productDetailRich .rteFileHandle,
.productDetailBody .rteFileHandle,
.pFeaturesText .rteFileHandle,
.reviewInfoText .rteFileHandle,
#rev-note-text .rteFileHandle,
.reviewTopNote .rteFileHandle{
  display: none;
}

.rtEditor .rteImgWrap.isResizing{
  box-shadow: 0 0 0 3px rgba(39,211,255,.14), 0 0 34px rgba(39,211,255,.10);
}

/* Image alignment classes */
.rtEditor .rteImgWrap.imgLeft,
.rtContent .rteImgWrap.imgLeft,
#article-body .rteImgWrap.imgLeft,
#legal-body .rteImgWrap.imgLeft,
#page-body .rteImgWrap.imgLeft,
#catalog-lead .rteImgWrap.imgLeft,
#status-lead .rteImgWrap.imgLeft,
#purchaseLead .rteImgWrap.imgLeft{
  display:block;
  margin-left: 0 !important;
  margin-right: auto !important;
}
.rtEditor .rteImgWrap.imgCenter,
.rtContent .rteImgWrap.imgCenter,
#article-body .rteImgWrap.imgCenter,
#legal-body .rteImgWrap.imgCenter,
#page-body .rteImgWrap.imgCenter,
#catalog-lead .rteImgWrap.imgCenter,
#status-lead .rteImgWrap.imgCenter,
#purchaseLead .rteImgWrap.imgCenter{
  display:block;
  margin-left: auto !important;
  margin-right: auto !important;
}
.rtEditor .rteImgWrap.imgRight,
.rtContent .rteImgWrap.imgRight,
#article-body .rteImgWrap.imgRight,
#legal-body .rteImgWrap.imgRight,
#page-body .rteImgWrap.imgRight,
#catalog-lead .rteImgWrap.imgRight,
#status-lead .rteImgWrap.imgRight,
#purchaseLead .rteImgWrap.imgRight{
  display:block;
  margin-left: auto !important;
  margin-right: 0 !important;
}
/* On site: same wrapper but without resize handle */
.rtContent .rteImgWrap,
#article-body .rteImgWrap,
#legal-body .rteImgWrap,
#page-body .rteImgWrap,
#catalog-lead .rteImgWrap,
#status-lead .rteImgWrap,
#purchaseLead .rteImgWrap,
.productDetailRich .rteImgWrap,
.productDetailBody .rteImgWrap,
.pFeaturesText .rteImgWrap,
.reviewInfoText .rteImgWrap,
#rev-note-text .rteImgWrap,
.reviewTopNote .rteImgWrap{
  display:block;
  max-width: 100%;
  resize: none;
  overflow: visible;
  border-radius: 14px;
  border: 0;
  box-shadow: none;
  margin: 10px 0;
}
.rtContent .rteImgWrap > img,
#article-body .rteImgWrap > img,
#legal-body .rteImgWrap > img,
#page-body .rteImgWrap > img,
#catalog-lead .rteImgWrap > img,
#status-lead .rteImgWrap > img,
#purchaseLead .rteImgWrap > img,
.productDetailRich .rteImgWrap > img,
.productDetailBody .rteImgWrap > img,
.pFeaturesText .rteImgWrap > img,
.reviewInfoText .rteImgWrap > img,
#rev-note-text .rteImgWrap > img,
.reviewTopNote .rteImgWrap > img{
  width: 100%;
  height: auto;
  display: block;
  border: 0;
  box-shadow: none;
  border-radius: 14px;
}
.rtContent .rteImgHandle,
#legal-body .rteImgHandle,
#page-body .rteImgHandle,
#catalog-lead .rteImgHandle,
#status-lead .rteImgHandle,
#purchaseLead .rteImgHandle,
.productDetailRich .rteImgHandle,
.productDetailBody .rteImgHandle,
.pFeaturesText .rteImgHandle,
.reviewInfoText .rteImgHandle,
#rev-note-text .rteImgHandle,
.reviewTopNote .rteImgHandle{
  display:none;
}
.rtEditor:focus{
  border-color: rgba(39,211,255,.35);
  box-shadow: 0 0 0 3px rgba(39,211,255,.10);
}

/* ===================== RTE Toolbar — XenForo style ===================== */
[data-admin-rte-scope] .toolbar{
  background:linear-gradient(180deg,#1c2740 0%,#16202e 100%);
  border:1px solid rgba(39,211,255,.14);
  border-bottom:none;
  border-radius:12px 12px 0 0;
  padding:5px 8px;
  gap:2px;
  row-gap:4px;
}
[data-admin-rte-scope] .toolbar + * + .rtEditor,
[data-admin-rte-scope] .toolbar + .rtEditor,
[data-admin-rte-scope] > .rtEditor{
  border-radius:0 0 12px 12px;
  border-top:1px solid rgba(39,211,255,.10);
}
[data-admin-rte-scope] .toolbar .btn{
  height:28px;
  min-width:28px;
  padding:0 6px;
  border-radius:6px;
  border:1px solid transparent;
  background:transparent;
  color:rgba(185,210,245,.78);
  font-size:12px;
  font-weight:600;
  gap:3px;
  justify-content:center;
  transition:background .12s,border-color .12s,color .12s,box-shadow .12s;
  transform:none !important;
}
[data-admin-rte-scope] .toolbar .btn:hover{
  background:rgba(39,211,255,.13);
  border-color:rgba(39,211,255,.32);
  color:#fff;
  box-shadow:0 0 7px rgba(39,211,255,.18);
}
[data-admin-rte-scope] .toolbar .btn:active{
  background:rgba(39,211,255,.22);
  border-color:rgba(39,211,255,.55);
  color:#fff;
}
[data-admin-rte-scope] .toolbar .btn.rteActive{
  background:rgba(39,211,255,.18);
  border-color:rgba(39,211,255,.45);
  color:#27d3ff;
  box-shadow:0 0 8px rgba(39,211,255,.22);
}
[data-admin-rte-scope] .toolbar .badge[aria-hidden="true"]{
  color:rgba(255,255,255,.15);
  padding:0 2px;
  font-size:13px;
  font-weight:300;
  align-self:center;
  pointer-events:none;
  user-select:none;
}
[data-admin-rte-scope] .toolbar .badge:not([aria-hidden]){
  color:rgba(160,185,230,.65);
  font-size:11px;
  padding:0 2px;
  align-self:center;
  font-weight:700;
  user-select:none;
}
[data-admin-rte-scope] .toolbar .select{
  height:28px;
  border-radius:6px;
  font-size:11.5px;
  border-color:rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);
  padding:0 8px;
}
[data-admin-rte-scope] .toolbar input[type="color"]{
  border-radius:4px;
  border:1px solid rgba(255,255,255,.14);
  cursor:pointer;
}
/* Цветовые пикеры с классом .input не должны тянуться как поля ввода (flex:1; min-width:220px) */
[data-admin-rte-scope] .toolbar input.input[type="color"]{
  flex: 0 0 auto;
  min-width: 36px;
  max-width: 40px;
  width: 40px;
  height: 30px;
  padding: 0;
  border-radius: 6px;
}

/* Emoji picker panel */
.rteEmojiPicker{
  position:fixed;
  z-index:9999;
  background:linear-gradient(160deg,#1a2438 0%,#101826 100%);
  border:1px solid rgba(39,211,255,.22);
  border-radius:14px;
  box-shadow:0 16px 48px rgba(0,0,0,.55),0 0 24px rgba(39,211,255,.10);
  width:340px;
  max-height:340px;
  display:none;
  flex-direction:column;
  overflow:hidden;
}
.rteEmojiPicker.isOpen{ display:flex; }
.rteEmojiPickerTabs{
  display:flex;
  gap:2px;
  padding:8px 8px 0;
  flex-wrap:nowrap;
  overflow-x:auto;
  scrollbar-width:thin;
}
.rteEmojiTab{
  flex-shrink:0;
  height:28px;
  padding:0 9px;
  border-radius:7px 7px 0 0;
  border:1px solid transparent;
  border-bottom:none;
  background:transparent;
  color:rgba(160,190,240,.6);
  font-size:11.5px;
  font-weight:700;
  cursor:pointer;
  transition:background .12s,color .12s;
}
.rteEmojiTab:hover{ background:rgba(39,211,255,.1); color:#fff; }
.rteEmojiTab.isActive{
  background:rgba(39,211,255,.14);
  border-color:rgba(39,211,255,.25);
  color:#27d3ff;
}
.rteEmojiGrid{
  display:grid;
  grid-template-columns:repeat(10,1fr);
  gap:1px;
  padding:8px;
  overflow-y:auto;
  flex:1;
  scrollbar-width:thin;
}
.rteEmojiBtn{
  width:29px;
  height:29px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:17px;
  border-radius:6px;
  background:transparent;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .1s,transform .1s;
  line-height:1;
  font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
}
.rteEmojiBtn:hover{
  background:rgba(39,211,255,.16);
  border-color:rgba(39,211,255,.3);
  transform:scale(1.18);
}

/* HTML insert modal */
.rteHtmlModal{
  position:fixed;
  inset:0;
  z-index:10000;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(4px);
}
.rteHtmlModal.isOpen{ display:flex; }
.rteHtmlModalBox{
  background:linear-gradient(160deg,#1a2438 0%,#111824 100%);
  border:1px solid rgba(39,211,255,.22);
  border-radius:16px;
  padding:20px;
  width:520px;
  max-width:95vw;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.rteHtmlModalBox h3{
  margin:0 0 12px;
  font-size:14px;
  color:#fff;
}
.rteHtmlModalBox textarea{
  width:100%;
  height:180px;
  background:rgba(0,0,0,.3);
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  color:#d0e8ff;
  font-family:'Courier New',monospace;
  font-size:12.5px;
  padding:10px 12px;
  resize:vertical;
  outline:none;
  box-sizing:border-box;
}
.rteHtmlModalBox textarea:focus{ border-color:rgba(39,211,255,.4); }
/* Модалки HTML / блока кода — тёмная панель и «янтарный» моноширинный текст */
.rteHtmlModalBox textarea.rteModalCodeInput,
.rteModalCodeInput{
  background:#0a0e14;
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  color:#e8a04f;
  font-size:13px;
  line-height:1.45;
  min-height:200px;
}
.rteCodeBlockModalHint{
  font-size:12px;
  color:rgba(255,255,255,.48);
  margin:0 0 10px;
  line-height:1.4;
}
.rteHtmlModalBtns{
  display:flex;
  gap:8px;
  margin-top:12px;
  justify-content:flex-end;
}

/* Links in rich text (admin editors + rendered rich blocks on site) */
.rtEditor a,
.footerDisclaimer a,
#legal-body a,
#page-body a,
#catalog-lead a,
#catalog-seo a,
#status-lead a,
#purchaseLead a,
.productDetailRich a,
.productDetailBody a,
.pFeaturesText a,
.reviewInfoText a,
#rev-note-text a,
.reviewTopNote a,
#rev-source-note a{
  color: rgba(39,211,255,.92);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .18s var(--ease), text-decoration-color .18s var(--ease), filter .18s var(--ease);
}
.rtEditor a:hover,
.footerDisclaimer a:hover,
#legal-body a:hover,
#page-body a:hover,
#catalog-lead a:hover,
#catalog-seo a:hover,
#status-lead a:hover,
#purchaseLead a:hover,
.productDetailRich a:hover,
.productDetailBody a:hover,
.pFeaturesText a:hover,
.reviewInfoText a:hover,
#rev-note-text a:hover,
.reviewTopNote a:hover,
#rev-source-note a:hover{
  color: rgba(124,58,237,.92);
  text-decoration-color: rgba(124,58,237,.75);
  filter: drop-shadow(0 0 10px rgba(39,211,255,.10));
}

/* Контент из RTE админки: цитата и спойлер */
.rtEditor blockquote,
.footerDisclaimer blockquote,
#legal-body blockquote,
#catalog-lead blockquote,
#catalog-seo blockquote,
#status-lead blockquote,
#purchaseLead blockquote,
.productDetailRich blockquote,
.productDetailBody blockquote,
.pFeaturesText blockquote{
  margin: 0.75em 0;
  padding: 10px 14px 10px 16px;
  border-left: 3px solid rgba(39, 211, 255, .45);
  background: rgba(255, 255, 255, .035);
  border-radius: 0 12px 12px 0;
  color: var(--text);
  font-style: normal;
}
/* Цитата RTE: цвет акцента и опциональное свечение (админка + опубликованный контент) */
.rtEditor blockquote.rteStyledQuote,
.footerDisclaimer blockquote.rteStyledQuote,
#legal-body blockquote.rteStyledQuote,
#catalog-lead blockquote.rteStyledQuote,
#catalog-seo blockquote.rteStyledQuote,
#status-lead blockquote.rteStyledQuote,
#purchaseLead blockquote.rteStyledQuote,
.productDetailRich blockquote.rteStyledQuote,
.productDetailBody blockquote.rteStyledQuote,
.pFeaturesText blockquote.rteStyledQuote,
#article-body blockquote.rteStyledQuote,
.articlePageBody blockquote.rteStyledQuote,
#rev-note-text blockquote.rteStyledQuote,
.reviewInfoText blockquote.rteStyledQuote{
  border-left-color: var(--quoteAccent, rgba(39, 211, 255, .45));
}
.rtEditor blockquote.rteStyledQuote[data-rte-quote-glow="1"],
.footerDisclaimer blockquote.rteStyledQuote[data-rte-quote-glow="1"],
#legal-body blockquote.rteStyledQuote[data-rte-quote-glow="1"],
#catalog-lead blockquote.rteStyledQuote[data-rte-quote-glow="1"],
#catalog-seo blockquote.rteStyledQuote[data-rte-quote-glow="1"],
#status-lead blockquote.rteStyledQuote[data-rte-quote-glow="1"],
#purchaseLead blockquote.rteStyledQuote[data-rte-quote-glow="1"],
.productDetailRich blockquote.rteStyledQuote[data-rte-quote-glow="1"],
.productDetailBody blockquote.rteStyledQuote[data-rte-quote-glow="1"],
.pFeaturesText blockquote.rteStyledQuote[data-rte-quote-glow="1"],
#article-body blockquote.rteStyledQuote[data-rte-quote-glow="1"],
.articlePageBody blockquote.rteStyledQuote[data-rte-quote-glow="1"],
#rev-note-text blockquote.rteStyledQuote[data-rte-quote-glow="1"],
.reviewInfoText blockquote.rteStyledQuote[data-rte-quote-glow="1"]{
  box-shadow:
    0 0 28px color-mix(in srgb, var(--quoteAccent, #27d3ff) 26%, transparent),
    0 0 0 1px color-mix(in srgb, var(--quoteAccent, #27d3ff) 12%, rgba(255, 255, 255, .07));
}
/* Блок кода RTE: тёмная «карточка», моноширинный янтарный текст */
.rtEditor pre.rte-codeblock,
.footerDisclaimer pre.rte-codeblock,
#legal-body pre.rte-codeblock,
#catalog-lead pre.rte-codeblock,
#catalog-seo pre.rte-codeblock,
#status-lead pre.rte-codeblock,
#purchaseLead pre.rte-codeblock,
.productDetailRich pre.rte-codeblock,
.productDetailBody pre.rte-codeblock,
.pFeaturesText pre.rte-codeblock,
#article-body pre.rte-codeblock,
.articlePageBody pre.rte-codeblock,
#rev-note-text pre.rte-codeblock,
.reviewInfoText pre.rte-codeblock,
#page-body pre.rte-codeblock{
  background: #0d1118;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0.65em 0;
  overflow-x: auto;
  box-sizing: border-box;
}
.rtEditor pre.rte-codeblock code,
.footerDisclaimer pre.rte-codeblock code,
#legal-body pre.rte-codeblock code,
#catalog-lead pre.rte-codeblock code,
#catalog-seo pre.rte-codeblock code,
#status-lead pre.rte-codeblock code,
#purchaseLead pre.rte-codeblock code,
.productDetailRich pre.rte-codeblock code,
.productDetailBody pre.rte-codeblock code,
.pFeaturesText pre.rte-codeblock code,
#article-body pre.rte-codeblock code,
.articlePageBody pre.rte-codeblock code,
#rev-note-text pre.rte-codeblock code,
.reviewInfoText pre.rte-codeblock code,
#page-body pre.rte-codeblock code{
  font-family: Consolas, "Courier New", Courier, monospace;
  font-size: 13px;
  color: #e8a04f;
  white-space: pre-wrap;
  word-break: break-word;
  background: transparent;
  border: none;
  padding: 0;
  display: block;
}
details.rte-spoiler,
.rtEditor details.rte-spoiler,
#article-body details.rte-spoiler,
#catalog-lead details.rte-spoiler,
#catalog-seo details.rte-spoiler,
#status-lead details.rte-spoiler,
#purchaseLead details.rte-spoiler,
#legal-body details.rte-spoiler,
.footerDisclaimer details.rte-spoiler,
.productDetailRich details.rte-spoiler,
.productDetailBody details.rte-spoiler,
.pFeaturesText details.rte-spoiler{
  --spoilerColor: var(--accent);
  margin: 0.65em 0;
  border: 1px solid color-mix(in srgb, var(--spoilerColor) 28%, rgba(255,255,255,.08));
  border-radius: 12px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--spoilerColor) 10%, rgba(0,0,0,.12)), rgba(0, 0, 0, .18));
  overflow: hidden;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
/* Меньший зазор только между подряд идущими спойлерами (не между спойлером и абзацем) */
details.rte-spoiler:has(+ details.rte-spoiler),
.rtEditor details.rte-spoiler:has(+ details.rte-spoiler),
#article-body details.rte-spoiler:has(+ details.rte-spoiler),
#catalog-lead details.rte-spoiler:has(+ details.rte-spoiler),
#catalog-seo details.rte-spoiler:has(+ details.rte-spoiler),
#status-lead details.rte-spoiler:has(+ details.rte-spoiler),
#purchaseLead details.rte-spoiler:has(+ details.rte-spoiler),
#legal-body details.rte-spoiler:has(+ details.rte-spoiler),
.footerDisclaimer details.rte-spoiler:has(+ details.rte-spoiler),
.productDetailRich details.rte-spoiler:has(+ details.rte-spoiler),
.productDetailBody details.rte-spoiler:has(+ details.rte-spoiler),
.pFeaturesText details.rte-spoiler:has(+ details.rte-spoiler){
  margin-bottom: 0.4em;
}
details.rte-spoiler + details.rte-spoiler,
.rtEditor details.rte-spoiler + details.rte-spoiler,
#article-body details.rte-spoiler + details.rte-spoiler,
#catalog-lead details.rte-spoiler + details.rte-spoiler,
#catalog-seo details.rte-spoiler + details.rte-spoiler,
#status-lead details.rte-spoiler + details.rte-spoiler,
#purchaseLead details.rte-spoiler + details.rte-spoiler,
#legal-body details.rte-spoiler + details.rte-spoiler,
.footerDisclaimer details.rte-spoiler + details.rte-spoiler,
.productDetailRich details.rte-spoiler + details.rte-spoiler,
.productDetailBody details.rte-spoiler + details.rte-spoiler,
.pFeaturesText details.rte-spoiler + details.rte-spoiler{
  margin-top: 0.4em;
}
/* Наведение: свечение и лёгкий подъём в цвете спойлера (везде, включая .rtEditor и новые спойлеры) */
details.rte-spoiler:not([open]):hover{
  border-color: color-mix(in srgb, var(--spoilerColor) 40%, rgba(255, 255, 255, .1));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--spoilerColor) 14%, rgba(0, 0, 0, .12)), rgba(0, 0, 0, .2));
  box-shadow:
    0 8px 22px rgba(0, 0, 0, .2),
    inset 0 0 0 1px color-mix(in srgb, var(--spoilerColor) 45%, rgba(255, 255, 255, .09)),
    inset 0 0 22px color-mix(in srgb, var(--spoilerColor) 18%, transparent);
  transform: translateY(-1px);
}
details.rte-spoiler:not([open]):hover > summary.rte-spoiler__title{
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--spoilerColor) 30%, transparent), color-mix(in srgb, var(--spoilerColor) 12%, transparent));
}
details.rte-spoiler:not([open]):hover > summary.rte-spoiler__title .rte-spoiler__icon{
  border-color: color-mix(in srgb, var(--spoilerColor) 48%, rgba(255, 255, 255, .22));
  background: color-mix(in srgb, var(--spoilerColor) 16%, rgba(0, 0, 0, .15));
  box-shadow: 0 0 20px color-mix(in srgb, var(--spoilerColor) 20%, transparent);
}
details.rte-spoiler[open]:hover{
  border-color: color-mix(in srgb, var(--spoilerColor) 56%, rgba(255, 255, 255, .14));
  box-shadow:
    0 16px 38px rgba(0, 0, 0, .22),
    inset 0 0 0 1px color-mix(in srgb, var(--spoilerColor) 26%, rgba(255, 255, 255, .1)),
    inset 0 0 28px color-mix(in srgb, var(--spoilerColor) 24%, transparent);
}
details.rte-spoiler[open]:hover > summary.rte-spoiler__title .rte-spoiler__toggle{
  border-color: color-mix(in srgb, var(--spoilerColor) 52%, rgba(255, 255, 255, .16));
  box-shadow: 0 0 16px color-mix(in srgb, var(--spoilerColor) 22%, transparent);
}
details.rte-spoiler > summary.rte-spoiler__title,
.rtEditor details.rte-spoiler > summary.rte-spoiler__title,
#article-body details.rte-spoiler > summary.rte-spoiler__title{
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 13px;
  color: color-mix(in srgb, var(--spoilerColor) 78%, rgba(231,238,249,.94));
  user-select: none;
  line-height: 1.35;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--spoilerColor) 22%, transparent), color-mix(in srgb, var(--spoilerColor) 8%, transparent));
  transition: background .28s var(--ease), color .28s var(--ease);
}
details.rte-spoiler > summary.rte-spoiler__title::-webkit-details-marker,
.rtEditor details.rte-spoiler > summary.rte-spoiler__title::-webkit-details-marker,
#article-body details.rte-spoiler > summary.rte-spoiler__title::-webkit-details-marker{
  display: none;
}
details.rte-spoiler > summary.rte-spoiler__title .rte-spoiler__icon,
.rtEditor details.rte-spoiler > summary.rte-spoiler__title .rte-spoiler__icon,
#article-body details.rte-spoiler > summary.rte-spoiler__title .rte-spoiler__icon{
  --rte-spoiler-icon-size: 30px;
  width: var(--rte-spoiler-icon-size);
  height: var(--rte-spoiler-icon-size);
  flex: 0 0 var(--rte-spoiler-icon-size);
  border-radius: calc(var(--rte-spoiler-icon-size) * 0.32);
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* Чуть больший квадрат + grid — цветные эмодзи в Windows/macOS визуально ближе к центру */
  display: grid;
  place-items: center;
  line-height: 0;
  text-align: center;
  font-size: calc(var(--rte-spoiler-icon-size) * 0.56);
  overflow: hidden;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", emoji, sans-serif;
  background: rgba(39,211,255,.14);
  border: 1px solid rgba(39,211,255,.35);
  box-shadow: 0 0 18px rgba(39,211,255,.14);
  transition:
    border-color .28s var(--ease),
    box-shadow .28s var(--ease),
    background .28s var(--ease),
    transform .28s var(--ease);
}
/* Векторная шестерёнка вместо emoji — идеальный центр в квадрате .rte-spoiler__icon */
details.rte-spoiler > summary.rte-spoiler__title .rte-spoiler__icon .rte-spoiler__iconGlyph--gear,
.rtEditor details.rte-spoiler > summary.rte-spoiler__title .rte-spoiler__icon .rte-spoiler__iconGlyph--gear,
#article-body details.rte-spoiler > summary.rte-spoiler__title .rte-spoiler__icon .rte-spoiler__iconGlyph--gear{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
details.rte-spoiler > summary.rte-spoiler__title .rte-spoiler__icon .rte-spoiler__gearSvg,
.rtEditor details.rte-spoiler > summary.rte-spoiler__title .rte-spoiler__icon .rte-spoiler__gearSvg,
#article-body details.rte-spoiler > summary.rte-spoiler__title .rte-spoiler__icon .rte-spoiler__gearSvg{
  display: block;
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: color-mix(in srgb, var(--spoilerColor, #27d3ff) 52%, rgba(231, 238, 249, 0.94));
}
details.rte-spoiler > summary.rte-spoiler__title .rte-spoiler__icon:empty,
.rtEditor details.rte-spoiler > summary.rte-spoiler__title .rte-spoiler__icon:empty,
#article-body details.rte-spoiler > summary.rte-spoiler__title .rte-spoiler__icon:empty{
  display: none;
}
details.rte-spoiler > summary.rte-spoiler__title .rte-spoiler__label,
.rtEditor details.rte-spoiler > summary.rte-spoiler__title .rte-spoiler__label,
#article-body details.rte-spoiler > summary.rte-spoiler__title .rte-spoiler__label{
  flex: 1 1 auto;
  min-width: 0;
  color: #eaf4ff;
}
details.rte-spoiler > summary.rte-spoiler__title .rte-spoiler__labelEdit,
details.rte-spoiler > summary.rte-spoiler__title .rte-spoiler__iconPick{
  display: none;
}
details.rte-spoiler > summary.rte-spoiler__title .rte-spoiler__colorPick{
  display: none;
}
details.rte-spoiler > summary.rte-spoiler__title .rte-spoiler__delete{
  display: none;
}
.rtEditor details.rte-spoiler > summary.rte-spoiler__title .rte-spoiler__label{
  display: none;
}
.rtEditor details.rte-spoiler > summary.rte-spoiler__title .rte-spoiler__labelEdit{
  display: inline-block;
  flex: 1 1 auto;
  min-width: 160px;
  height: 30px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(8,15,26,.72);
  color: #eaf4ff;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 700;
}
.rtEditor details.rte-spoiler > summary.rte-spoiler__title .rte-spoiler__iconPick{
  display: inline-block;
  flex: 0 0 auto;
  height: 30px;
  max-width: 185px;
  border-radius: 9px;
  border: 1px solid rgba(39,211,255,.34);
  background: rgba(8,15,26,.74);
  color: #eaf4ff;
  padding: 0 8px;
  font-size: 12px;
}
.rtEditor details.rte-spoiler > summary.rte-spoiler__title .rte-spoiler__colorPick{
  display: inline-block;
  flex: 0 0 auto;
  width: 34px;
  height: 30px;
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--spoilerColor) 48%, rgba(255,255,255,.2));
  background: rgba(8,15,26,.74);
  padding: 3px;
  cursor: pointer;
}
.rtEditor details.rte-spoiler > summary.rte-spoiler__title .rte-spoiler__delete{
  display: inline-flex;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  border: 1px solid rgba(255,120,120,.34);
  background: rgba(90,14,20,.38);
  color: rgba(255,185,185,.95);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.rtEditor details.rte-spoiler > summary.rte-spoiler__title .rte-spoiler__delete:hover{
  border-color: rgba(255,120,120,.58);
  background: rgba(122,20,28,.44);
  color: #fff0f0;
  transform: translateY(-1px);
}
details.rte-spoiler > summary.rte-spoiler__title .rte-spoiler__toggle,
.rtEditor details.rte-spoiler > summary.rte-spoiler__title .rte-spoiler__toggle,
#article-body details.rte-spoiler > summary.rte-spoiler__title .rte-spoiler__toggle{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(197,221,250,.94);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  padding: 4px 9px;
  background: rgba(0,0,0,.22);
  transition:
    border-color .22s var(--ease),
    box-shadow .22s var(--ease),
    background .22s var(--ease),
    transform .22s var(--ease);
}
details.rte-spoiler > summary.rte-spoiler__title .rte-spoiler__toggle .when-open,
.rtEditor details.rte-spoiler > summary.rte-spoiler__title .rte-spoiler__toggle .when-open,
#article-body details.rte-spoiler > summary.rte-spoiler__title .rte-spoiler__toggle .when-open{
  display: none;
}
details.rte-spoiler[open] > summary.rte-spoiler__title .rte-spoiler__toggle .when-open,
.rtEditor details.rte-spoiler[open] > summary.rte-spoiler__title .rte-spoiler__toggle .when-open,
#article-body details.rte-spoiler[open] > summary.rte-spoiler__title .rte-spoiler__toggle .when-open{
  display: inline;
}
details.rte-spoiler[open] > summary.rte-spoiler__title .rte-spoiler__toggle .when-closed,
.rtEditor details.rte-spoiler[open] > summary.rte-spoiler__title .rte-spoiler__toggle .when-closed,
#article-body details.rte-spoiler[open] > summary.rte-spoiler__title .rte-spoiler__toggle .when-closed{
  display: none;
}
details.rte-spoiler .rte-spoiler__body,
.rtEditor details.rte-spoiler .rte-spoiler__body,
#article-body details.rte-spoiler .rte-spoiler__body{
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 14px;
  color: var(--muted);
  line-height: 1.6;
  border-top: 1px solid transparent;
  transition:
    opacity .24s var(--ease),
    padding .26s var(--ease),
    border-color .26s var(--ease);
}
details.rte-spoiler[open] > .rte-spoiler__body,
.rtEditor details.rte-spoiler[open] > .rte-spoiler__body,
#article-body details.rte-spoiler[open] > .rte-spoiler__body{
  max-height: none;
  opacity: 1;
  overflow: visible;
  padding: 10px 14px 12px;
  border-top-color: rgba(255, 255, 255, .06);
}
/* Nested .rte-spoiler__body divs (created by buggy editor) must be plain flow blocks */
details.rte-spoiler[open] > .rte-spoiler__body .rte-spoiler__body,
.rtEditor details.rte-spoiler[open] > .rte-spoiler__body .rte-spoiler__body,
#article-body details.rte-spoiler[open] > .rte-spoiler__body .rte-spoiler__body{
  max-height: none;
  overflow: visible;
  opacity: 1;
  padding: 0;
  border-top-color: transparent;
  transition: none;
  display: block;
  scrollbar-width: auto;
}
/* overflow:hidden on details keeps border-radius; body is full height when open (no inner scroll). */
details.rte-spoiler[open] > summary.rte-spoiler__title .rte-spoiler__toggle,
.rtEditor details.rte-spoiler[open] > summary.rte-spoiler__title .rte-spoiler__toggle,
#article-body details.rte-spoiler[open] > summary.rte-spoiler__title .rte-spoiler__toggle{
  border-color: color-mix(in srgb, var(--spoilerColor) 48%, rgba(255,255,255,.14));
  background: color-mix(in srgb, var(--spoilerColor) 16%, rgba(0,0,0,.18));
  box-shadow: 0 0 14px color-mix(in srgb, var(--spoilerColor) 30%, transparent);
  transform: translateY(-1px);
}
details.rte-spoiler[open],
.rtEditor details.rte-spoiler[open],
#article-body details.rte-spoiler[open]{
  border-color: color-mix(in srgb, var(--spoilerColor) 52%, rgba(255,255,255,.12));
  box-shadow:
    0 14px 34px rgba(0,0,0,.20),
    inset 0 0 0 1px color-mix(in srgb, var(--spoilerColor) 20%, transparent),
    inset 0 0 26px color-mix(in srgb, var(--spoilerColor) 18%, transparent);
  animation: spoilerOpenGlow .58s var(--ease);
}
@keyframes spoilerOpenGlow{
  0%{
    box-shadow:
      0 0 0 rgba(0,0,0,0),
      inset 0 0 0 0 color-mix(in srgb, var(--spoilerColor) 0%, transparent),
      inset 0 0 0 0 color-mix(in srgb, var(--spoilerColor) 0%, transparent);
  }
  100%{
    box-shadow:
      0 14px 34px rgba(0,0,0,.20),
      inset 0 0 0 1px color-mix(in srgb, var(--spoilerColor) 20%, transparent),
      inset 0 0 26px color-mix(in srgb, var(--spoilerColor) 18%, transparent);
  }
}
@media (prefers-reduced-motion: reduce){
  details.rte-spoiler .rte-spoiler__body,
  .rtEditor details.rte-spoiler .rte-spoiler__body,
  #article-body details.rte-spoiler .rte-spoiler__body,
  details.rte-spoiler > summary.rte-spoiler__title .rte-spoiler__toggle,
  .rtEditor details.rte-spoiler > summary.rte-spoiler__title .rte-spoiler__toggle,
  #article-body details.rte-spoiler > summary.rte-spoiler__title .rte-spoiler__toggle{
    transition: none;
  }
  details.rte-spoiler > summary.rte-spoiler__title,
  .rtEditor details.rte-spoiler > summary.rte-spoiler__title,
  #article-body details.rte-spoiler > summary.rte-spoiler__title{
    transition: none;
  }
  details.rte-spoiler > summary.rte-spoiler__title .rte-spoiler__icon,
  .rtEditor details.rte-spoiler > summary.rte-spoiler__title .rte-spoiler__icon,
  #article-body details.rte-spoiler > summary.rte-spoiler__title .rte-spoiler__icon{
    transition: none;
  }
  details.rte-spoiler,
  .rtEditor details.rte-spoiler,
  #article-body details.rte-spoiler{
    transition: none;
  }
  details.rte-spoiler:not([open]):hover{
    transform: none;
  }
}
/* Product page: spoilers in features should look exactly like articles/instructions */
body.page-product #p-features details.rte-spoiler{
  position: relative;
  margin: 0;
  /* keep default border/background/hover glow from details.rte-spoiler */
}
body.page-product #p-features details.rte-spoiler .productSpoilerHint{
  display: none;
  position: absolute;
  left: 14px;
  right: 14px;
  top: calc(100% + 5px);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: rgba(165, 186, 210, 0.88);
  pointer-events: none;
  line-height: 1.35;
}
body.page-product #p-features details.rte-spoiler:not([open]):hover .productSpoilerHint{
  display: block;
}
body.page-product #p-features details.rte-spoiler[open] .productSpoilerHint{
  display: none !important;
}
body.page-product #p-features{
  display: block;
  margin-bottom: 0;
  align-content: start;
}
/* Продолжение «Функционал программы» (доп. текст из админки), без отдельной секции */
body.page-product #p-features .productFeaturesExpandableWrap{
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
body.page-product #p-features .productFeaturesExpandableWrap.productFeaturesExpandableWrap--afterMain{
  margin-top: 14px;
}
/* Соседние спойлеры: без лишнего 10px у прямых детей #p-features (как внутри обёртки <div>) */
body.page-product #p-features details.rte-spoiler + details.rte-spoiler{
  margin-top: 0;
}
body.page-product #p-features details.rte-spoiler .rte-spoiler__body{
  border-top: none;
  margin: 0;
}
/* Product page: avoid subpixel seams/glitches on collapse */
body.page-product #p-features details.rte-spoiler:not([open]) .rte-spoiler__body{
  display: none;
}
body.page-product #p-features details.rte-spoiler[open] .rte-spoiler__body{
  display: block;
}
body.page-product #p-features details.rte-spoiler > summary.rte-spoiler__title{
  min-height: 50px;
  box-sizing: border-box;
  margin: 0;
  padding: 9px 14px;
  align-items: center;
}
body.page-product #p-features details.rte-spoiler:not([open]){
  height: 50px;
}
body.page-product #p-features details.rte-spoiler:not([open]) > summary.rte-spoiler__title{
  height: 50px;
}
body.page-product .productDetailSection[aria-labelledby="p-features-label"]{
  padding-bottom: 10px;
}

/* Product card containers use overflow:hidden; remove OUTER shadows on spoiler hover to avoid clipped side artifacts.
   Keep only inset glow so it looks like articles/instructions, but without hard edges inside product sections. */
body.page-product .productDetailSection details.rte-spoiler:not([open]):hover,
body.page-product .productDetailSection details.rte-spoiler[open]:hover,
body.page-product .productDetailSection details.rte-spoiler[open]{
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--spoilerColor) 26%, rgba(255, 255, 255, .1)),
    inset 0 0 28px color-mix(in srgb, var(--spoilerColor) 20%, transparent);
  transform: none;
}

/* Also keep the closed state strictly crisp inside product sections (no extra halo/seams). */
body.page-product .productDetailSection details.rte-spoiler:not([open]){
  box-shadow: none;
}

/* ===== RTE Callout / Info blocks ===== */
.rte-callout{
  display:block;
  padding:12px 16px;
  border-radius:10px;
  border-left:3px solid var(--callout-color, var(--accent));
  background:rgba(8,12,22,.55);
  backdrop-filter:blur(6px);
  box-shadow:
    0 0 28px color-mix(in srgb, var(--callout-color, var(--accent)) 34%, transparent),
    0 0 10px color-mix(in srgb, var(--callout-color, var(--accent)) 22%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--callout-color, var(--accent)) 18%, transparent);
  margin:10px 0;
}
.rte-callout-icon{
  display:inline-block;
  font-size:18px;
  line-height:1;
  vertical-align:text-top;
  margin-right:7px;
  text-shadow:0 0 8px color-mix(in srgb, var(--callout-color, var(--accent)) 60%, transparent);
}
.rte-callout-body{
  margin:0;
  line-height:1.65;
  color:rgba(215,230,255,.82);
  font-size:14px;
}
.rte-callout-body strong{
  color:var(--callout-color, var(--accent));
  margin-right:3px;
  text-shadow:0 0 10px color-mix(in srgb, var(--callout-color, var(--accent)) 45%, transparent);
}
/* Picker popup */
.rteCalloutPicker{
  background:rgba(10,15,26,.97);
  border:1px solid rgba(255,255,255,.11);
  border-radius:14px;
  padding:16px;
  min-width:300px;
  max-width:380px;
  box-shadow:0 12px 40px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.05);
  flex-direction:column;
  gap:12px;
}
.rteCalloutTypes{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.rteCalloutTypeBtn{
  display:flex;
  align-items:center;
  gap:5px;
  padding:6px 11px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.04);
  cursor:pointer;
  font-size:12px;
  color:rgba(255,255,255,.75);
  transition:all .15s var(--ease);
  line-height:1;
  white-space:nowrap;
}
.rteCalloutTypeBtn:hover,.rteCalloutTypeBtn.active{
  background:color-mix(in srgb, var(--btn-clr, var(--accent)) 15%, rgba(0,0,0,.1));
  border-color:color-mix(in srgb, var(--btn-clr, var(--accent)) 70%, transparent);
  color:#fff;
  box-shadow:0 0 10px color-mix(in srgb, var(--btn-clr, var(--accent)) 25%, transparent);
}

/* ===== RTE Table ===== */
/* ===================== RTE Video Embed ===================== */
.rte-video-wrap{
  position:relative;
  width:100%;
  max-width:720px;
  margin:16px auto;
  border-radius:14px;
  overflow:hidden;
  background:#0a0e17;
  border:1px solid rgba(39,211,255,.18);
  box-shadow:0 0 18px rgba(39,211,255,.10);
  aspect-ratio:16/9;
}
.rte-video-wrap iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:none;
  border-radius:14px;
}
/* ===================== RTE Table ===================== */
.rte-table-wrap{
  overflow-x:auto;
  margin:14px 0;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 0 18px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04);
}
.rte-table{
  width:100%;
  border-collapse:collapse;
  background:rgba(8,12,22,.55);
  font-size:14px;
}
.rte-table thead tr{
  background:rgba(255,255,255,.07);
}
.rte-table th{
  padding:11px 16px;
  text-align:left;
  font-weight:700;
  font-size:13px;
  color:rgba(220,235,255,.92);
  border-bottom:1px solid rgba(255,255,255,.11);
  white-space:nowrap;
}
.rte-table th:not(:last-child),
.rte-table td:not(:last-child){
  border-right:1px solid rgba(255,255,255,.06);
}
.rte-table td{
  padding:9px 16px;
  color:rgba(200,220,255,.78);
  border-bottom:1px solid rgba(255,255,255,.06);
  vertical-align:top;
}
.rte-table tbody tr:last-child td{border-bottom:none}
.rte-table tbody tr:hover td{background:rgba(255,255,255,.025)}

/* Table picker popup */
.rteTablePicker{
  position:fixed;
  z-index:99999;
  background:rgba(10,15,26,.97);
  border:1px solid rgba(255,255,255,.11);
  border-radius:14px;
  padding:16px;
  min-width:220px;
  box-shadow:0 12px 40px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.05);
  display:none;
  flex-direction:column;
  gap:10px;
}
.rteTablePickerGrid{
  display:grid;
  gap:3px;
}
.rteTablePickerCell{
  width:22px;
  height:22px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);
  border-radius:3px;
  cursor:pointer;
  transition:background .08s, border-color .08s;
}
.rteTablePickerCell:hover{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.22);
}
.rteTablePickerCell.active{
  background:color-mix(in srgb, var(--accent) 28%, transparent);
  border-color:color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow:0 0 4px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Table inline action bar */
/* ===================== Scroll-to-Top Button ===================== */
#scrollTopBtn{
  --stb-color: var(--accent);
  --stb-glow:  var(--accent);
  position:fixed;
  bottom:28px;
  right:24px;
  z-index:9990;
  width:44px;
  height:44px;
  border-radius:50%;
  border:1.5px solid color-mix(in srgb,var(--stb-color) 55%,rgba(255,255,255,.12));
  background:color-mix(in srgb,var(--stb-color) 18%,rgba(8,15,26,.82));
  color:var(--stb-color);
  font-size:20px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:
    0 0 14px color-mix(in srgb,var(--stb-glow) 40%,transparent),
    0 4px 18px rgba(0,0,0,.35);
  backdrop-filter:blur(8px);
  opacity:0;
  pointer-events:none;
  transform:translateY(14px) scale(.85);
  transition:
    opacity .28s cubic-bezier(.4,0,.2,1),
    transform .28s cubic-bezier(.4,0,.2,1),
    box-shadow .22s,
    border-color .22s,
    background .22s;
  user-select:none;
}
#scrollTopBtn.stb-visible{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0) scale(1);
}
#scrollTopBtn:hover{
  background:color-mix(in srgb,var(--stb-color) 28%,rgba(8,15,26,.88));
  border-color:color-mix(in srgb,var(--stb-color) 75%,rgba(255,255,255,.2));
  box-shadow:
    0 0 22px color-mix(in srgb,var(--stb-glow) 58%,transparent),
    0 6px 24px rgba(0,0,0,.40);
  transform:translateY(-2px) scale(1.06);
}
#scrollTopBtn:active{
  transform:translateY(0) scale(.96);
}

/* Jivo: свёрнут — у правого края; открыт — сдвиг влево, чтобы не перекрыть #scrollTopBtn (data-jivo-expanded — app.js) */
#jivo-iframe-container{
  left: auto !important;
  transition: right 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
body:not([data-jivo-expanded="1"]) #jivo-iframe-container{
  right: max(0px, env(safe-area-inset-right, 0px)) !important;
}
body[data-jivo-expanded="1"] #jivo-iframe-container{
  /* Зафиксировано: правый край чата левее кнопки «вверх» на ~72px (24+44 кнопка + 72 зазор) + safe-area */
  right: calc(24px + 44px + 72px + env(safe-area-inset-right, 0px)) !important;
}

/* ===================== Промо- и новости-всплывашки (колонка справа, друг под другом) ===================== */
.sitePopupDock{
  position:fixed;
  z-index:9988;
  top:calc(
    env(safe-area-inset-top, 0px)
    + var(--siteHeaderReserve)
    + var(--sitePopupDockBelowCrumbsGap)
    - var(--sitePopupDockLift)
  );
  right:max(16px, env(safe-area-inset-right));
  bottom:max(12px, env(safe-area-inset-bottom));
  left:auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
  max-width:min(360px, calc(100vw - 32px));
  /* Внутренний запас под scale при hover */
  padding:6px 12px 14px;
  box-sizing:border-box;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  pointer-events:auto;
}
/* Оболочка: отступ под scale+свечение, карточка не клипится родителем и не наезжает на соседа */
.sitePopupDock .promoSitePopupShell{
  position:relative;
  width:100%;
  max-width:min(360px, calc(100vw - 32px));
  flex-shrink:0;
  padding:8px 11px;
  margin-block:1px;
  box-sizing:border-box;
  overflow:visible;
}
.sitePopupDock .promoSitePopup{
  position:relative;
  top:auto;
  right:auto;
  left:auto;
  width:100%;
  max-width:none;
  margin-block:0;
}
.promoSitePopup{
  touch-action:manipulation;
  transform-origin:center center;
  --pp-accent: var(--accent, #39d3ff);
  --pp-accent2: color-mix(in srgb, var(--pp-accent) 72%, #7c3aed 28%);
  padding:16px 16px 14px;
  border-radius:16px;
  /* Как у body: база --bg + тот же лёгкий радиал, без стекла и без другого цвета по краям */
  border:1px solid var(--pp-popup-border, var(--line));
  background:
    radial-gradient(1000px 560px at 72% -15%, rgba(39,211,255,.07), transparent 56%),
    var(--bg);
  background-attachment:fixed, fixed;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  color:var(--text);
  opacity:0;
  transform:translateY(calc(-100% - 24px));
  transition:
    opacity .38s cubic-bezier(.4,0,.2,1),
    transform .42s cubic-bezier(.34,1.02,.32,1),
    border-color .4s var(--ease),
    filter .4s var(--ease);
  pointer-events:none;
}
.promoSitePopup--in{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
@media (hover:hover) and (pointer:fine){
  .promoSitePopup.promoSitePopup--in:hover{
    border-color:rgba(255,255,255,.14);
    box-shadow:none;
    filter:brightness(1.05) saturate(1.08);
  }
  @media (prefers-reduced-motion: no-preference){
    .promoSitePopup.promoSitePopup--in:hover{
      transform:translateY(0) scale(1.022);
    }
  }
}
.promoSitePopup--out{
  opacity:0;
  transform:translateY(calc(-100% - 24px));
}
.promoSitePopup__close{
  position:absolute;
  top:10px;
  right:10px;
  z-index:2;
  width:36px;
  height:36px;
  padding:0;
  margin:0;
  border:1px solid rgba(255,255,255,.1);
  border-radius:11px;
  background:rgba(0,0,0,.35);
  color:rgba(231,238,249,.85);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:0;
  flex-shrink:0;
  transition:background .2s, color .2s, border-color .2s, box-shadow .2s, transform .12s ease;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset;
  -webkit-tap-highlight-color:transparent;
}
.promoSitePopup__closeIcon{
  display:block;
  pointer-events:none;
}
.promoSitePopup__close:hover{
  background:color-mix(in srgb, var(--pp-accent) 14%, rgba(0,0,0,.4));
  color:var(--pp-accent);
  border-color:color-mix(in srgb, var(--pp-accent) 38%, rgba(255,255,255,.12));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--pp-accent) 20%, transparent),
    0 1px 0 rgba(255,255,255,.08) inset;
}
.promoSitePopup__close:active{
  transform:scale(.94);
}
.promoSitePopup__badge{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  color:var(--pp-accent);
  border:1px solid color-mix(in srgb, var(--pp-accent) 45%, transparent);
  background:rgba(0,0,0,.25);
  margin-bottom:10px;
}
.promoSitePopup__title{
  font-size:17px;
  font-weight:900;
  line-height:1.25;
  margin:0 44px 10px 0;
  padding-right:2px;
  background:linear-gradient(90deg, var(--pp-accent), var(--pp-accent2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.promoSitePopup__desc{
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
  margin:0 0 12px;
}
.promoSitePopup__row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}
.promoSitePopup__code{
  flex:1;
  min-width:0;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:13px;
  font-weight:700;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(0,0,0,.35);
  color:var(--text);
  word-break:break-all;
}
.promoSitePopup__copy{
  flex:0;
  white-space:nowrap;
  padding:10px 14px;
  border-radius:12px;
  font-weight:800;
  font-size:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:var(--text);
}
.promoSitePopup__copy:hover{
  border-color:color-mix(in srgb, var(--pp-accent) 50%, rgba(255,255,255,.2));
  background:color-mix(in srgb, var(--pp-accent) 14%, rgba(255,255,255,.04));
}
.promoSitePopup__countdown{
  font-size:12px;
  font-weight:800;
  color:var(--pp-accent);
  letter-spacing:.02em;
}
.promoSitePopup__countdown[hidden]{
  display:none;
}
.promoSitePopup__body{
  font-size:13px;
  line-height:1.55;
  color:var(--muted);
  margin:0 0 12px;
  max-height:min(50vh, 320px);
  overflow:auto;
  padding-right:2px;
}
.promoSitePopup__body:last-of-type{
  margin-bottom:0;
}
.promoSitePopup__body blockquote{
  margin:8px 0;
}
@media (max-width:520px){
  .sitePopupDock{
    left:max(12px, env(safe-area-inset-left));
    right:max(12px, env(safe-area-inset-right));
    max-width:none;
    align-items:stretch;
  }
  .sitePopupDock .promoSitePopupShell{
    max-width:none;
  }
}
@media (prefers-reduced-motion:reduce){
  .promoSitePopup{
    transition:opacity .2s ease, filter .35s ease, border-color .35s ease;
    transform:none;
  }
  .promoSitePopup--in,
  .promoSitePopup--out{
    transform:none;
  }
  @media (hover:hover) and (pointer:fine){
    .promoSitePopup.promoSitePopup--in:hover{
      filter:brightness(1.03) saturate(1.04);
    }
  }
}

/* ===================== RTE Table Action Bar ===================== */
.rteTableActionBar{
  position:fixed;
  z-index:99998;
  display:none;
  align-items:center;
  gap:4px;
  padding:5px 8px;
  background:rgba(10,15,26,.97);
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  box-shadow:0 6px 24px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04);
  flex-wrap:wrap;
}
.rteTableActionBar .btn{
  padding:4px 9px;
  font-size:11px;
  border-radius:6px;
  white-space:nowrap;
}
.rteTableActionBar .rteTabDanger{
  color:#ff7070;
  border-color:rgba(255,90,90,.22);
}
.rteTableActionBar .rteTabDanger:hover{
  background:rgba(255,70,70,.15);
  border-color:rgba(255,90,90,.5);
  color:#ff9090;
}

/* Modals */
.modal{
  position:fixed;inset:0;z-index:80;
  display:none;
}
.modal.isOpen{display:block}
.modalBackdrop{
  position:absolute;inset:0;
  background: rgba(0,0,0,.55);
  animation: fadeIn .2s var(--ease);
}
.modalPanel{
  position:relative;
  margin: 80px auto 0;
  max-width: min(880px, calc(100% - 24px));
  background: rgba(18,27,42,.92);
  border:1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
  overflow:hidden;
  animation: popIn .25s var(--ease);
}
/* Search modal: keep visual breathing room under fixed crumbs/header. */
#search-modal .modalPanel{
  margin-top: max(98px, calc(var(--siteHeaderReserve, 64px) + 10px));
}
.modalHead{
  padding:14px 14px;
  display:flex;align-items:center;gap:10px;
  border-bottom:1px solid var(--line);
}
.modalBody{padding:14px}
.results{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:10px;
}
.result{
  padding:12px;
  border:1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  transition: transform .2s var(--ease), border-color .2s var(--ease);
}
.result:hover{transform: translateY(-2px); border-color: rgba(39,211,255,.22)}
.result .t{font-weight:800}
.result .d{color:var(--muted);font-size:12px;margin-top:4px;line-height:1.35}

/* Page transitions */
.fadeInUp{opacity:0;transform: translateY(14px)}
.fadeInUp.isShown{opacity:1;transform:none;transition: opacity .6s var(--ease), transform .6s var(--ease)}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform: translateY(10px) scale(.98)}to{opacity:1;transform: none}}

/* Product page */
.productPage{
  display:grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 18px;
}

/* Страница товара: чуть светлее холст и панели, в тех же бирюзово-синих тонах.
   Шрифт плиток только в #main — на body шапка обрезала пункты (.navlinks overflow:hidden). */
body.page-product #main{
  position: relative;
  font-family: var(--tileTitleFontStack);
  background:
    radial-gradient(1100px 520px at 22% -6%, rgba(39,211,255,.15), transparent 58%),
    radial-gradient(920px 460px at 96% 14%, rgba(124,58,237,.12), transparent 56%),
    linear-gradient(180deg, #162436 0%, #131f2e 40%, #101a28 100%);
}
/* Лёгкая «HUD»-сетка + виньетка — тренд цифровых витрин, не перекрывает клики */
body.page-product #main::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(255, 255, 255, 0.028) 47px 48px),
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(255, 255, 255, 0.022) 47px 48px);
  mask-image: radial-gradient(ellipse 92% 65% at 50% 22%, #000 0%, transparent 72%);
}
@media (prefers-reduced-motion: reduce){
  body.page-product #main::before{
    opacity: 0.22;
  }
}
body.page-product #main > .section{
  position: relative;
  z-index: 1;
}

/* Product page: full-width top band under breadcrumbs.
   Force a 100vw background behind the first centered .container (same visual idea as category pages),
   without changing layout width of the content itself. */
body.page-product #main > section.section:first-child > .container{
  position: relative;
  z-index: 1;
}
body.page-product #main > section.section:first-child > .container::before{
  content:"";
  position:absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1200px 420px at 50% -10%, rgba(0,0,0,.26), transparent 62%),
    linear-gradient(180deg, rgba(10,16,26,.62) 0%, rgba(10,16,26,.34) 46%, rgba(10,16,26,0) 100%);
}

/*
  Похожие товары: ширина как у всего блока .productPage (обе колонки + gap),
  вертикальные поля сверху ≈ снизу до подвала.
*/
body.page-product #main:has(#p-similar-section:not([hidden])) > section.section:first-child{
  padding-bottom: 14px;
}
/* Похожие товары — та же категория */
body.page-product .productSimilarSection{
  padding-top: 18px;
  padding-bottom: 19px;
  margin-top: 0;
  border-top: none;
  background: transparent;
}
body.page-product .productSimilarSection[hidden]{
  display: none !important;
}
/* Карточка-блок: на всю ширину контента как .productPage, в тон панелям товара */
body.page-product .productSimilarFrame{
  position: relative;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  min-width: 0;
  padding: 22px 22px 24px;
  border-radius: 20px;
  font-family: var(--siteFontStack);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(820px 280px at 12% -6%, rgba(39, 211, 255, 0.12), transparent 55%),
    radial-gradient(720px 240px at 96% 6%, rgba(124, 58, 237, 0.1), transparent 52%),
    rgba(12, 20, 34, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 0 1px rgba(39, 211, 255, 0.07),
    0 0 48px -18px rgba(39, 211, 255, 0.1),
    0 20px 50px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(14px) saturate(1.06);
  -webkit-backdrop-filter: blur(14px) saturate(1.06);
}
body.page-product .productSimilarFrame::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -0.5px);
  width: min(480px, 78%);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(39, 211, 255, 0.42),
    rgba(124, 58, 237, 0.26),
    rgba(39, 211, 255, 0.42),
    transparent
  );
  box-shadow:
    0 0 12px rgba(39, 211, 255, 0.28),
    0 0 24px rgba(39, 211, 255, 0.08);
  pointer-events: none;
  opacity: 0.9;
}
@media (max-width: 520px){
  body.page-product .productSimilarFrame{
    padding: 16px 14px 18px;
    border-radius: 18px;
  }
}
body.page-product .productSimilarHead{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* .page-home .sectionHead */
  margin-bottom: 10px;
}
body.page-product .productSimilarHeadText{
  width: 100%;
  max-width: 56rem;
  margin: 0 auto;
}
body.page-product .productSimilarTitle{
  margin: 0;
  /* Как .page-home > section.section .sectionHead h2 (блок каталога на главной) */
  font-size: clamp(23px, 2.65vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
}
body.page-product .productSimilarLead{
  margin: 0;
  /* Как .page-home > section.section .sectionHead p + .sectionHead p */
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--muted);
}
/* Похожие товары: сетка как .products на странице категории; плитки — общие .productTile, --cardCoverH */
body.page-product .productSimilarGrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--cardGap);
  min-width: 0;
}
@media (min-width: 1440px){
  body.page-product .productSimilarGrid{
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 980px){
  body.page-product .productSimilarGrid{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 720px){
  body.page-product .productSimilarGrid{
    grid-template-columns: 1fr;
  }
}

/* Товар: кнопки «Назад» / «В избранное» — padding-top = margin-bottom у .sectionHead (14px), симметрия сверху/снизу */
body.page-product #main > section.section:first-child > .container{
  padding-top: 14px;
}

/* Страница товара: те же чёткие границы и центральная полоска, что у глобальной шапки */
body.page-product .topbar{
  background:
    radial-gradient(1000px 440px at 22% 130%, rgba(39,211,255,.14), transparent 56%),
    radial-gradient(860px 400px at 96% 35%, rgba(124,58,237,.11), transparent 54%),
    linear-gradient(180deg, #152231 0%, #121e2c 50%, #101b28 100%);
  border-top: 1px solid rgba(39,211,255,.22);
  border-bottom: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 14px 36px rgba(0,0,0,.22);
  backdrop-filter: blur(16px) saturate(1.05);
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
}

body.page-product .productPage > .panel{
  background: rgba(26,38,56,.64);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    0 0 0 1px rgba(39,211,255,.06),
    0 0 48px -16px rgba(39,211,255,.08),
    0 18px 48px rgba(0,0,0,.2);
}
/* Левая колонка: без внешней рамки — только лёгкая глубина; внутренние блоки (видео, техинфо) со своими заливками не трогаем */
body.page-product .productPage > .panel:first-of-type{
  border-radius: 22px;
  border: none;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.22);
}
/* Правая колонка — контрастный «пульт» покупки */
body.page-product .productPage > .panel + .panel{
  border-radius: 20px;
  background: rgba(12, 20, 34, 0.88);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 0 1px rgba(39, 211, 255, 0.07),
    0 20px 50px rgba(0, 0, 0, 0.35);
}
body.page-product .panel.productDetailInfoPanel,
body.page-product .panel.productSubPanel{
  background: rgba(18, 28, 44, 0.48);
  border-color: rgba(255, 255, 255, 0.07);
}
body.page-product .productDetailSection{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.016));
  border: 1px solid rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
body.page-product .pTitleRow{
  margin-top: 2px;
  margin-bottom: 6px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(118deg, rgba(39, 211, 255, 0.1), rgba(124, 58, 237, 0.07) 55%, rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 28px -12px rgba(39, 211, 255, 0.12);
}
body.page-product .bigThumb:not(.hasImage){
  background:
    radial-gradient(240px 170px at 22% 32%, rgba(39,211,255,.20), transparent 72%),
    radial-gradient(220px 160px at 82% 22%, rgba(124,58,237,.18), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
}
body.page-product .bigThumb.hasImage::after{
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.48));
}
body.page-product .bigThumb{
  border-radius: 18px 18px 0 0;
  height: clamp(224px, 28vw, 288px);
}

/* Карточка товара: тот же стек, что у названий плиток (seo.tileTitleFont) */
body.page-product .productPage{
  font-family: var(--tileTitleFontStack);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.page-product .productPage h1{
  font-weight: 700;
  font-size: clamp(22px, 2.85vw, 28px);
  letter-spacing: -0.022em;
  line-height: 1.22;
  margin-top: 6px;
  margin-bottom: 8px;
}
body.page-product .productPage #p-title{
  font-weight: 800;
  font-size: clamp(24px, 3vw, 30px);
  letter-spacing: -0.02em;
  line-height: 1.14;
}
/* Заголовки секций и блок покупки — чуть ярче, с лёгким «неоновым» акцентом */
body.page-product .productPage .productDetailHeading,
body.page-product .productPage .productPurchaseHead,
body.page-product .productPage .productSubPanel .k{
  position: relative;
  color: #f2f6fc;
  text-shadow:
    0 0 32px rgba(39, 211, 255, .12),
    0 1px 0 rgba(0, 0, 0, .25);
}
body.page-product .productPage .productDetailHeading{
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .09em;
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: none;
}
body.page-product .productPage .productDetailHeading::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(39, 211, 255, .55) 0%,
    rgba(124, 58, 237, .32) 38%,
    rgba(255, 255, 255, .07) 78%,
    transparent 100%
  );
  opacity: 0.92;
  box-shadow: 0 0 14px rgba(39, 211, 255, .2);
}
body.page-product .productPage .productTechSection .productDetailHeading{
  margin-bottom: 14px;
  padding-bottom: 12px;
}
body.page-product .productPage .productPurchaseHead{
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.03em;
  text-transform: none;
  margin: 0 0 2px;
  padding-bottom: 11px;
  border-bottom: none;
}
body.page-product .productPage .productPurchaseHead::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(39, 211, 255, .5) 0%,
    rgba(124, 58, 237, .28) 45%,
    rgba(255, 255, 255, .06) 100%
  );
  opacity: 0.9;
  box-shadow: 0 0 12px rgba(39, 211, 255, .16);
}
body.page-product .productPage .productSubPanel .k{
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0 0 2px;
  padding-bottom: 11px;
  border-bottom: none;
}
body.page-product .productPage .productSubPanel .k::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(39, 211, 255, .5) 0%,
    rgba(124, 58, 237, .28) 45%,
    rgba(255, 255, 255, .06) 100%
  );
  opacity: 0.9;
  box-shadow: 0 0 12px rgba(39, 211, 255, .16);
}
body.page-product .productPage .productDetailBody,
body.page-product .productPage .pFeaturesText,
body.page-product .productPage .lead,
body.page-product .productPage .productPurchaseLead,
body.page-product .productPage .agreeText{
  font-size: 15px;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: #d1d5db;
}

/* Описание товара: свёрнутый превью + «Читать полностью» (секция = тот же стиль, что .productDetailSection) */
body.page-product .productDescClamp{
  position: relative;
  /* ~3.5–4 строки описания; больше текста под «Читать полностью» */
  --product-desc-collapsed: 118px;
  /* Затемнение свёртки — тот же тон, что фон интерфейса (#1a2433), без ухода в «чистый» чёрный */
  --product-desc-fade-rgb: 26, 36, 51;
}
body.page-product .productDescClamp__viewport{
  position: relative;
  overflow: hidden;
  contain: paint;
  transition: max-height 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
}
body.page-product .productDescClamp__viewport > .productDetailBody{
  position: relative;
  z-index: 0;
}
body.page-product .productDescClamp.is-short .productDescClamp__viewport{
  max-height: none !important;
}
/* Затемнение внутри viewport — всегда по нижнему краю превью, без «щели» над кнопкой */
body.page-product .productDescClamp__fade{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 96px;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.32s ease;
  /* Сход к фону сайта / карточки (гармония с #1a2433), плотный низ */
  background: linear-gradient(
    to bottom,
    rgba(var(--product-desc-fade-rgb), 0) 0%,
    rgba(var(--product-desc-fade-rgb), 0.04) 14%,
    rgba(var(--product-desc-fade-rgb), 0.18) 32%,
    rgba(var(--product-desc-fade-rgb), 0.48) 54%,
    rgba(var(--product-desc-fade-rgb), 0.78) 74%,
    rgba(var(--product-desc-fade-rgb), 0.94) 88%,
    rgb(var(--product-desc-fade-rgb)) 100%
  );
}
body.page-product .productDescClamp.needs-toggle:not(.is-expanded) .productDescClamp__fade{
  opacity: 1;
}
body.page-product .productDescClamp__toggle{
  display: block;
  width: 100%;
  margin: 4px auto 0;
  padding: 10px 12px 4px;
  border: 0;
  background: transparent;
  color: rgba(39, 211, 255, 0.95);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  cursor: pointer;
  transition: color 0.18s ease, text-shadow 0.18s ease;
}
body.page-product .productDescClamp__toggle:hover{
  color: #7ce9ff;
  text-shadow: 0 0 18px rgba(39, 211, 255, 0.25);
}
body.page-product .productDescClamp__toggle:focus-visible{
  outline: 2px solid rgba(39, 211, 255, 0.45);
  outline-offset: 3px;
  border-radius: 8px;
}
body.page-product .productPage .productPurchaseLead{
  margin-top: 6px;
}
body.page-product .productPage .agreeText a{
  color: #e5e7eb;
  font-weight: 500;
}
body.page-product .productPage .productSupportCardTitle{
  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: #e5e7eb;
  white-space: normal;
}
body.page-product .productPage .productSupportCardTitle.shareTitle{
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

/* ── Info Card (custom product info block) ───────────────────── */
.productInfoCard {
  --pic-color: #27d3ff;
  border-color: color-mix(in srgb, var(--pic-color) 28%, transparent) !important;
  background: color-mix(in srgb, var(--pic-color) 6%, rgba(14, 22, 36, 0.55)) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--pic-color) 16%, transparent),
    0 0 24px color-mix(in srgb, var(--pic-color) 12%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--pic-color) 10%, transparent) !important;
  transition: box-shadow .25s var(--ease), border-color .25s var(--ease) !important;
}
.productInfoCardIcon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--pic-color) 30%, transparent);
  background: color-mix(in srgb, var(--pic-color) 10%, rgba(255,255,255,.03));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 0 12px color-mix(in srgb, var(--pic-color) 20%, transparent);
}
.productInfoCardBtn.btn.primary {
  height: 40px;
  justify-content: center;
  min-width: 160px;
}
body.page-product .productPage #p-support-card-title,
body.page-product .productPage #p-info-card-text{
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
body.page-product .productPage .shareBtns{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap:10px;
}
body.page-product .productPage .shareBtn{
  height:42px;
  justify-content:center;
  align-items:center;
  gap:10px;
  padding: 0 14px;
  border-radius: 999px;
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(231,238,249,.80);
  font-weight: 700;
  letter-spacing: .01em;
  width: 100%;
  transition:
    border-color .22s var(--ease),
    background .22s var(--ease),
    box-shadow .22s var(--ease),
    color .22s var(--ease),
    transform .18s var(--ease);
}
body.page-product .productPage .shareBtn:hover{
  border-color: rgba(39,211,255,.38);
  background: rgba(39,211,255,.10);
  color: var(--accent);
  box-shadow:
    0 0 0 1px rgba(39,211,255,.14),
    0 0 18px rgba(39,211,255,.12),
    inset 0 1px 0 rgba(39,211,255,.08);
  transform: translateY(-2px);
}
body.page-product .productPage .shareBtn:active{
  transform: translateY(0) scale(.96);
  box-shadow: 0 0 0 1px rgba(39,211,255,.20), 0 0 10px rgba(39,211,255,.18);
}
body.page-product .productPage .shareBtn svg,
body.page-product .productPage .shareBtn .shareIcon{
  transition: filter .22s var(--ease), opacity .22s var(--ease);
}
body.page-product .productPage .shareBtn:hover svg,
body.page-product .productPage .shareBtn:hover .shareIcon{
  filter: drop-shadow(0 0 4px rgba(39,211,255,.5));
  opacity: 1;
}
body.page-product .productPage .shareIcon{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: rgba(39,211,255,.95);
  flex: 0 0 auto;
}
body.page-product .productPage .shareIcon svg{
  width:18px;
  height:18px;
  display:block;
}
body.page-product .productPage #p-share-copy{
  grid-column: 1 / -1;
  justify-self: center;
  width: min(260px, 100%);
}
/* Тарифы: список как на референсе, цвета — бирюза/фиолет сайта */
body.page-product .productPage .tariffPanelInner{
  padding-bottom: 14px;
}
body.page-product .productPage .tariffPickList{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
body.page-product .productPage .licenseOpt{
  font-family: inherit;
}
body.page-product .productPage .licenseOptTitle{
  font-family: inherit;
}
body.page-product .productPage .licenseOptPrice{
  font-size: 16px;
  font-weight: 900;
}
body.page-product .productPage .tariffTotalRow{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
body.page-product .productPage .tariffTotalValue{
  display: block;
  font-family: var(--tileTitleFontStack);
  font-weight: 900;
  font-size: clamp(21px, 3.8vw, 27px);
  line-height: 1.12;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
  text-shadow:
    0 0 28px rgba(39, 211, 255, .18),
    0 1px 0 rgba(0, 0, 0, .3);
}
body.page-product .productPage .productPagePromoWrap{
  position: relative;
  margin-top: 20px;
  padding-top: 18px;
}
body.page-product .productPage .productPagePromoWrap[hidden]{
  display: none !important;
}
/* Полоска как у .productPurchaseHead::after / заголовков деталей */
body.page-product .productPage .productPagePromoWrap::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(39, 211, 255, 0.5) 0%,
    rgba(124, 58, 237, 0.28) 45%,
    rgba(255, 255, 255, 0.06) 100%
  );
  opacity: 0.92;
  box-shadow: 0 0 12px rgba(39, 211, 255, 0.16);
  pointer-events: none;
}
body.page-product .productPage .productPagePromoCard{
  position: relative;
  padding: 16px 16px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.045), rgba(4, 10, 20, 0.42)),
    rgba(18, 28, 44, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 0 1px rgba(39, 211, 255, 0.06),
    0 12px 32px rgba(0, 0, 0, 0.24);
}
body.page-product .productPage .productPagePromoKicker{
  /* Как «ТАРИФЫ» (.productSubPanel .k): тот же кегль и ритм */
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(39, 211, 255, 0.88);
  margin-bottom: 6px;
}
body.page-product .productPage .productPagePromoTitle{
  font-family: var(--tileTitleFontStack);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 6px;
  line-height: 1.25;
}
body.page-product .productPage .productPagePromoNote{
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}
body.page-product .productPage .productPagePromoCodeRow{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
body.page-product .productPage .productPagePromoCodeShell{
  position: relative;
  flex: 1;
  min-width: 0;
}
body.page-product .productPage .productPagePromoCode{
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.28);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(39, 211, 255, 0.95);
  word-break: break-all;
}
/* «Промокод скопирован» — поверх поля кода */
body.page-product .productPage .productPagePromoCopyFlash{
  pointer-events: none;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  text-align: center;
  border-radius: 12px;
  font-family: var(--siteFontStack);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(245, 248, 255, 0.96);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  background: linear-gradient(165deg, rgba(39, 211, 255, 0.22), rgba(12, 22, 38, 0.94));
  border: 1px solid rgba(39, 211, 255, 0.38);
  box-shadow:
    0 0 0 1px rgba(39, 211, 255, 0.12),
    0 10px 28px rgba(0, 0, 0, 0.35);
  opacity: 0;
  z-index: 2;
}
body.page-product .productPage .productPagePromoCopyFlash.is-anim{
  animation: productPromoCopyFlash 2.15s var(--ease) forwards;
}
@media (prefers-reduced-motion: reduce){
  body.page-product .productPage .productPagePromoCopyFlash.is-anim{
    animation: productPromoCopyFlashReduced 1.35s ease forwards;
  }
}
@keyframes productPromoCopyFlash{
  0%{
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  12%{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  70%{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100%{
    opacity: 0;
    transform: translateY(-8px) scale(0.99);
  }
}
@keyframes productPromoCopyFlashReduced{
  0%,
  100%{ opacity: 0; }
  12%,
  78%{ opacity: 1; }
}
body.page-product .productPage .productPagePromoCopy{
  flex-shrink: 0;
  height: 40px;
  padding: 0 18px;
  border-radius: 12px;
}
body.page-product .productPage .tariffPayStack{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.page-product .productPage .productPopularTariffRibbon{
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(39, 211, 255, 0.35);
  background: linear-gradient(90deg, rgba(39, 211, 255, 0.18), rgba(124, 58, 237, 0.2));
  box-shadow: 0 0 24px -8px rgba(39, 211, 255, 0.35);
}
body.page-product .productPage .productPopularTariffRibbon[hidden]{
  display: none !important;
}
body.page-product .productPage .tariffPayBtn{
  width: 100%;
  justify-content: center;
  height: auto;
  min-height: 50px;
  padding: 0 18px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.02em;
  border-color: rgba(39, 211, 255, .42);
  background: linear-gradient(135deg, rgba(39, 211, 255, .38), rgba(124, 58, 237, .28));
  color: var(--text);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
  box-shadow:
    0 0 0 1px rgba(39, 211, 255, .2),
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 10px 32px rgba(39, 211, 255, .22);
}
body.page-product .productPage .tariffPayBtn:hover{
  border-color: rgba(39, 211, 255, .58);
  background: linear-gradient(135deg, rgba(39, 211, 255, .48), rgba(124, 58, 237, .34));
  color: #ffffff;
}
body.page-product .productPage .tariffPayBtn:disabled,
body.page-product .productPage .tariffPayBtn.isDisabled{
  opacity: 0.45;
  transform: none;
  cursor: not-allowed;
  box-shadow: none;
}
body.page-product .productPage .techSpecTexts{
  font-family: var(--tileTitleFontStack);
}
body.page-product .productPage .techSpecLabel{
  font-family: var(--tileTitleFontStack);
  font-weight: 650;
  letter-spacing: -0.003em;
  color: rgba(196, 212, 231, .86);
  text-shadow: 0 1px 0 rgba(0,0,0,.22);
}
body.page-product .productPage .techSpecValue{
  font-family: var(--tileTitleFontStack);
  font-weight: 400;
  letter-spacing: -0.004em;
  color: rgba(151, 175, 200, .84);
  text-shadow: 0 1px 0 rgba(0,0,0,.16);
}
body.page-product .productPage .tag{
  font-weight: 500;
  font-size: 12px;
  letter-spacing: -0.01em;
}

.panel{
  border:1px solid var(--line);
  border-radius: var(--radius2);
  background: rgba(18,27,42,.55);
  box-shadow: 0 18px 50px rgba(0,0,0,.30);
  overflow:hidden;
}
/* Вложенные панели: такое же скругление как у карточек каталога + явная обрезка */
.panel.productDetailInfoPanel,
.panel.productSubPanel{
  border-radius: var(--cardRadius);
  overflow: hidden;
  isolation: isolate;
}
.panelInner{padding:16px}
.bigThumb{height:220px;border-bottom:1px solid var(--line);background:
  radial-gradient(220px 160px at 20% 30%, rgba(39,211,255,.25), transparent 70%),
  radial-gradient(220px 160px at 80% 20%, rgba(124,58,237,.24), transparent 70%),
  linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  background-size: cover;
  background-position: center;
  position:relative;
}
.bigThumb.hasImage::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.62));
}
.kv{display:grid;grid-template-columns: 1fr 1fr;gap:10px}
.kv .k{color:var(--muted);font-size:12px}
.kv .v{font-weight:700}
.list{margin:0;padding-left:18px;color:var(--muted);line-height:1.6}
.pFeaturesText{
  color:var(--muted);
  line-height:1.65;
}
.pFeaturesText ul,
.pFeaturesText ol{
  margin: 0;
  padding-left: 18px;
}
.pFeaturesText li{margin:6px 0}

/* Страница товара: отдельные «поля» под блоки текста/списков */
.productDetailInfoInner{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:14px 14px 16px;
}
.productDetailSection{
  border:0;
  border-radius:16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
  padding:14px 16px 16px;
  box-shadow:none;
  overflow:hidden;
}
.productDetailHeading{
  font-weight:900;
  font-size:13px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color: var(--text);
  margin:0 0 11px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.productDetailBody{
  color:var(--muted);
  line-height:1.65;
  font-size:14px;
  margin:0;
}
.productDetailRich{
  margin:0;
}

/* Блок «Техническая информация» — как на референсе: 2 колонки, иконка в квадрате, подпись + значение */
.productTechSection .productDetailHeading{
  margin-bottom:14px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  letter-spacing:.06em;
}
.productTechBody.techSpecGrid{
  padding-top:2px;
}

.techSpecGrid{
  columns: 2;
  column-gap: 24px;
  column-fill: balance;
  margin: 0;
}
@media (max-width:720px){
  .techSpecGrid{
    columns: 1;
  }
}
.techSpecItem{
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
  break-inside: avoid;
  margin-bottom: 14px;
}
.techSpecItem:last-child{
  margin-bottom: 0;
}
/* Иконки тех. инфо: спокойный «премиум», без неона — цвет из палитры сайта */
.techSpecIconWrap{
  flex:0 0 auto;
  width:56px;
  height:56px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, rgba(255,255,255,.05)), rgba(255,255,255,.02)),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border:1px solid color-mix(in srgb, var(--accent) 14%, rgba(255,255,255,.09));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 4px 16px rgba(0,0,0,.22);
  color: color-mix(in srgb, var(--accent) 38%, var(--muted) 62%);
  transition:
    border-color .22s var(--ease),
    box-shadow .22s var(--ease),
    transform .22s var(--ease),
    background .22s var(--ease),
    color .22s var(--ease);
}
.techSpecSvg{
  display:block;
  flex-shrink:0;
  opacity:1;
  filter: none;
  shape-rendering: geometricPrecision;
}
/* Мини-иконки внутри «Дополнительные требования» — тот же спокойный тон */
.techSpecInlineIcon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  margin-top:1px;
  color: color-mix(in srgb, var(--accent) 38%, var(--muted) 62%);
  opacity:1;
}
.techSpecInlineIcon .techSpecSvg{
  width:26px;
  height:26px;
}
/* Список внутри «Дополнительные требования» — компактнее основной сетки */
.techSpecAdditionalList{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.techSpecAdditionalRow{
  margin: 0;
}
body.page-product .productPage .techSpecAdditionalText{
  font-size: 12px;
  line-height: 1.38;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: rgba(151, 175, 200, 0.88);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.14);
}
body.page-product .productPage .techSpecAdditionalLabel{
  font-weight: 650;
  color: rgba(188, 206, 226, 0.92);
}
.techSpecAdditionalIcon .techSpecSvg{
  width: 22px;
  height: 22px;
}
.techSpecItem:hover .techSpecIconWrap{
  border-color: color-mix(in srgb, var(--accent) 22%, rgba(255,255,255,.11));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 11%, rgba(255,255,255,.05)), rgba(255,255,255,.02)),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 6px 20px rgba(0,0,0,.26);
  color: color-mix(in srgb, var(--accent) 52%, var(--muted) 48%);
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce){
  .techSpecItem:hover .techSpecIconWrap{
    transform: none;
  }
}
.techSpecTexts{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
  font-family: "Inter", var(--siteFontStack);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
.techSpecLabel{
  font-size:13px;
  line-height:1.34;
  font-weight:650;
  letter-spacing:.005em;
  color: rgba(223, 234, 248, .92);
  text-shadow: 0 1px 0 rgba(0,0,0,.22);
}
.techSpecValue{
  font-size:14px;
  line-height:1.44;
  font-weight:500;
  letter-spacing:-0.004em;
  color: rgba(165, 186, 210, .90);
  text-shadow: 0 1px 0 rgba(0,0,0,.16);
}

/* Карточка товара: скриншоты — горизонтальная карусель
   Размер превью = одна ячейка сетки «Видео» (2 колонки, gap 8px): (100% − 8px) / 2 и 16:9 */
.productShotsCarousel{
  container-type: inline-size;
  container-name: product-shots;
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-top: 4px;
}
body.page-product .productShotsCarousel{
  margin-top: 8px;
  padding: 8px 6px;
  border-radius: 16px;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.05), rgba(4, 10, 20, 0.55));
  border: 1px solid rgba(39, 211, 255, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 44px -18px rgba(39, 211, 255, 0.14);
}
body.page-product .productShotsViewport{
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.28);
}
.productShotsViewport{
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
}
.productShotsViewport::-webkit-scrollbar{
  display: none;
  width: 0;
  height: 0;
}
.productShotsTrack{
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 3px 0;
  width: max-content;
  min-height: 0;
}
.productShotsTrack .shotBtn{
  position: relative;
  scroll-snap-align: start;
  border-radius: 14px;
  padding: 0;
  margin: 0;
  display: block;
  box-sizing: border-box;
  flex: 0 0 calc((100cqi - 8px) / 2);
  width: calc((100cqi - 8px) / 2);
  height: auto;
  aspect-ratio: 16 / 9;
  flex-shrink: 0;
}
.productShotsTrack .thumb{
  height: auto;
}
/* Старые движки без cqi: фиксированная ширина + 16:9 из основного блока выше */
@supports not (width: 1cqi){
  .productShotsTrack .shotBtn{
    flex: 0 0 260px;
    width: 260px;
  }
}
.productShotsTrack .shotBtn::before{
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  pointer-events: none;
  background:
    rgba(0, 0, 0, .42)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dfe8f8' stroke-opacity='.88' stroke-width='1.5'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='8.5' cy='10.5' r='1.5' fill='%23dfe8f8' fill-opacity='.85' stroke='none'/%3E%3Cpath d='M21 17l-5-5-4 4-2-2-4 4'/%3E%3C/svg%3E")
    center / 15px 15px no-repeat;
  border: 1px solid rgba(255, 255, 255, .12);
}
.productShotsNav{
  flex: 0 0 40px;
  width: 40px;
  min-width: 40px;
  align-self: stretch;
  min-height: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(10, 18, 32, .58);
  color: rgba(223, 234, 248, .52);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background .2s var(--ease),
    border-color .2s var(--ease),
    color .2s var(--ease),
    opacity .2s var(--ease);
}
.productShotsNav:hover:not(:disabled){
  background: rgba(39, 211, 255, .1);
  border-color: rgba(39, 211, 255, .28);
  color: rgba(231, 238, 249, .92);
}
.productShotsNav:disabled{
  opacity: .26;
  cursor: default;
}
.productShotsNav::after{
  content: "";
  width: 9px;
  height: 9px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}
.productShotsNav--prev::after{
  transform: rotate(45deg);
  margin-left: 3px;
}
.productShotsNav--next::after{
  transform: rotate(-135deg);
  margin-right: 3px;
}
.productShotsEmptyNote{
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 650;
}
/* Ряд «назад | картинка | вперёд» — узкие боковые колонки, капсула по центру */
.shotModalBody{
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 8px;
  padding: 16px 14px;
  min-height: 120px;
  position: relative;
}
.shotModalNavShell{
  flex: 0 0 clamp(46px, 4vmin, 52px);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.shotModalNavShell--prev{
  order: 0;
}
.shotModalNavShell--next{
  order: 2;
}
.shotModalNavShell:has(> .shotModalNav[hidden]){
  flex: 0 0 0;
  width: 0;
  min-width: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  pointer-events: none;
}
.shotModalImgWrap{
  flex: 1;
  min-width: 0;
  order: 1;
  max-height: min(78vh, 880px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.shotModalImgWrap img{
  max-width: 100%;
  max-height: min(78vh, 880px);
  width: auto;
  height: auto;
  border-radius: 14px;
  display: block;
}
.shotModalNav{
  flex: 0 0 auto;
  width: 44px;
  min-width: 44px;
  align-self: center;
  height: min(220px, 55vh);
  min-height: 140px;
  max-height: min(55vh, 360px);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(10, 18, 32, .62);
  color: rgba(223, 234, 248, .55);
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background .2s var(--ease),
    border-color .2s var(--ease),
    color .2s var(--ease),
    opacity .2s var(--ease);
}
.shotModalNav:hover:not(:disabled){
  background: rgba(39, 211, 255, .12);
  border-color: rgba(39, 211, 255, .3);
  color: rgba(231, 238, 249, .95);
}
.shotModalNav:disabled{
  opacity: .22;
  cursor: default;
}
/* SVG-маска: стрелка ровно по центру капсулы (без сдвига от rotate + border) */
.shotModalNav::after{
  content: "";
  display: block;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 13px 13px;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 13px 13px;
}
.shotModalNav--prev::after{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z'/%3E%3C/svg%3E");
}
.shotModalNav--next::after{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z'/%3E%3C/svg%3E");
}
@media (max-width: 520px){
  .shotModalBody{
    gap: 8px;
    padding: 12px 10px;
  }
  .shotModalNavShell{
    flex: 0 0 clamp(40px, 7vw, 46px);
  }
  .shotModalNav{
    width: 36px;
    min-width: 36px;
    height: min(200px, 48vh);
    min-height: 100px;
    max-height: min(48vh, 300px);
  }
}
@media (prefers-reduced-motion: reduce){
  .productShotsViewport{
    scroll-behavior: auto;
  }
}

.productDetailVideos{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
/* Та же «лунка», что у карусели скриншотов (.productShotsCarousel + лёгкий inset как у .productShotsViewport) */
body.page-product #p-videos.productDetailVideos{
  margin-top: 8px;
  padding: 8px 6px;
  min-width: 0;
  border-radius: 16px;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.05), rgba(4, 10, 20, 0.55));
  border: 1px solid rgba(39, 211, 255, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 0 1px rgba(0, 0, 0, 0.28),
    0 0 44px -18px rgba(39, 211, 255, 0.14);
}
.productEmptyNote{
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

/* Maintenance overlay */
.maintOverlay{
  position:fixed;
  inset:0;
  z-index:9999;
  background:
    radial-gradient(900px 420px at 20% 10%, rgba(39,211,255,.18), transparent 60%),
    radial-gradient(900px 420px at 90% 20%, rgba(124,58,237,.16), transparent 60%),
    rgba(10,16,24,.88);
  backdrop-filter: blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.maintCard{
  width:min(720px, 100%);
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  background: rgba(18,27,42,.70);
  box-shadow: 0 30px 90px rgba(0,0,0,.45);
  padding:22px 22px;
  text-align:center;
}
.maintHeart{
  width:70px;height:70px;
  margin:0 auto 12px;
  border-radius:999px;
  display:grid;place-items:center;
  border:1px solid rgba(239,68,68,.25);
  background:
    radial-gradient(circle at 30% 30%, rgba(239,68,68,.28), transparent 55%),
    rgba(239,68,68,.08);
  color: rgba(255,120,120,.98);
  font-size:28px;
}
.maintTitle{
  font-weight:900;
  font-size:22px;
  letter-spacing:.2px;
}
.maintText{
  margin-top:10px;
  color: rgba(214,226,255,.85);
  line-height:1.65;
}

/* FAQ */
.accordion{display:grid;gap:10px}
.accItem{
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(18,27,42,.55);
  overflow:hidden;
}
.accBtn{
  width:100%;
  text-align:left;
  padding:14px;
  background:transparent;
  border:0;
  color:var(--text);
  display:flex;align-items:center;gap:10px;
  cursor:pointer;
}
.accBtn span{font-weight:800}
.accBody{
  padding:0 14px 14px;
  color:var(--muted);
  display:none;
  line-height:1.55;
}
.accItem.isOpen .accBody{display:block;animation: fadeIn .2s var(--ease)}
.chev{margin-left:auto;opacity:.8;transition: transform .2s var(--ease)}
.accItem.isOpen .chev{transform: rotate(180deg)}

/* Responsive */
@media (max-width: 1100px){
  .nav{gap:6px}
  .navlinks{gap:1px}
  .navlinks a{font-size:11.5px;padding:3px 5px}
  .nav .btn{padding:0 9px;font-size:11.5px}
}
@media (min-width: 981px){
  body.page-product .productPage > .panel + .panel{
    position: sticky;
    top: max(12px, calc(var(--siteHeaderReserve, 64px) + 10px));
    align-self: start;
  }
}
@media (max-width: 980px){
  .heroGrid{grid-template-columns: 1fr}
  .products{grid-template-columns: repeat(2, 1fr)}
  .grid{grid-template-columns: repeat(2, 1fr)}
  .guar-feature-grid{grid-template-columns: repeat(2, minmax(0, 1fr))}
  .footerLinksGrid{grid-template-columns: repeat(2, minmax(0, 1fr));gap:16px}
  .productPage{grid-template-columns: 1fr}
  .catsGrid{grid-template-columns: repeat(2,1fr)}
}
@media (max-width: 860px){
  .navlinks{display:none}
  .hamburger{display:inline-flex}
}
@media (max-width: 720px){
  h1{font-size:34px}
  .langTriggerRow{gap:5px}
  .langCodeChip{font-size:9px;padding:4px 6px;letter-spacing:.05em}
  .results{grid-template-columns: 1fr}
  .products{grid-template-columns: 1fr}
  .grid{grid-template-columns: 1fr}
  .guar-feature-grid{grid-template-columns: 1fr}
  .catsGrid{grid-template-columns: 1fr}
  .footerLinksGrid{grid-template-columns: 1fr}
}

/* Mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:70;
  display:none;
}
.drawer.isOpen{display:block}
.drawerPanel{
  position:absolute;top:0;right:0;height:100%;
  width:min(360px, calc(100% - 40px));
  background: rgba(18,27,42,.96);
  border-left:1px solid var(--line);
  box-shadow: var(--shadow);
  padding:14px;
  animation: slideIn .25s var(--ease);
}
@keyframes slideIn{from{transform: translateX(12px);opacity:0}to{transform:none;opacity:1}}
.drawer a{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid transparent;
  color:var(--muted);
  font-size:14px;
  transition:
    background .18s var(--ease),
    color .18s var(--ease),
    border-color .18s var(--ease),
    box-shadow .18s var(--ease);
}
.drawer a:hover{
  background:color-mix(in srgb, var(--accent) 10%, transparent);
  color:color-mix(in srgb, var(--accent) 85%, var(--text));
  border-color:color-mix(in srgb, var(--accent) 30%, transparent);
  box-shadow:0 0 10px color-mix(in srgb, var(--accent) 18%, transparent);
}
.drawer a[aria-current="page"]{
  background:color-mix(in srgb, var(--accent) 16%, transparent);
  color:color-mix(in srgb, var(--accent) 95%, var(--text));
  border-color:color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow:0 0 14px color-mix(in srgb, var(--accent) 28%, transparent);
}
.drawer a.navlink--promo{
  background: rgba(39, 211, 255, 0.1);
  color: var(--accent);
  border-color: rgba(39, 211, 255, 0.28);
  font-weight: 700;
}
.drawer a.navlink--promo:hover{
  background: rgba(39, 211, 255, 0.16);
  color: #7fe8ff;
}

/* Promotions / news / not-working: низ секции — var(--siteTextPageSectionPadBottom) через #main > section:first-child… */
.section--promo{
  padding-top:8px;
}
/* Новости: карточки + цветные разделители как у FAQ */
.section--news{
  padding-top: 12px;
}
.newsHero{
  max-width: 1040px;
  margin: 0 auto;
  text-align: center;
}
.newsPageTitle{
  margin: 0;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 800;
}
.newsLead{
  margin: 14px auto 0;
  max-width: 62ch;
  color: var(--muted);
  line-height: 1.65;
  font-size: 15px;
}
.newsLeadLine{
  margin: 0 0 10px;
}
.newsLeadLine:last-child{
  margin-bottom: 0;
}
.newsHeroGrid{
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  text-align: center;
}
@media (max-width: 760px){
  .newsHeroGrid{
    grid-template-columns: 1fr;
  }
}
.newsHeroCard{
  --newsGlow: var(--accent);
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--newsGlow) 32%, rgba(255, 255, 255, .08));
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--newsGlow) 12%, rgba(12, 18, 30, .72)), rgba(8, 12, 22, .55));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--newsGlow) 8%, transparent),
    0 14px 40px rgba(0, 0, 0, .22);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.newsHeroCard:hover{
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--newsGlow) 48%, rgba(255, 255, 255, .12));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--newsGlow) 18%, transparent),
    0 20px 50px rgba(0, 0, 0, .28),
    0 0 36px color-mix(in srgb, var(--newsGlow) 14%, transparent);
}
.newsHeroCardInner{
  padding: 22px 18px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.newsIconRing{
  --newsIconGlow: var(--accent);
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: color-mix(in srgb, var(--newsIconGlow) 22%, rgba(0, 0, 0, .2));
  border: 1px solid color-mix(in srgb, var(--newsIconGlow) 45%, rgba(255, 255, 255, .12));
  box-shadow: 0 0 22px color-mix(in srgb, var(--newsIconGlow) 25%, transparent);
}
.newsSvgIco{
  width: 28px;
  height: 28px;
  display: block;
}
.newsIconEmoji{
  font-size: 26px;
  line-height: 1;
}
.newsHeroCardTitle{
  margin: 4px 0 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.newsHeroCardAccent{
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: color-mix(in srgb, var(--newsGlow) 72%, rgba(231, 238, 249, .95));
}
.newsHeroCardText{
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 36ch;
}
.newsHeroBtn{
  margin-top: 6px;
  min-width: 200px;
  justify-content: center;
}
.newsBlock{
  position: relative;
  max-width: 1040px;
  margin: 36px auto 0;
  padding-top: 26px;
}
.newsBlock::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, .1),
      color-mix(in srgb, var(--newsGlow, var(--accent)) 65%, transparent),
      rgba(255, 255, 255, .1),
      transparent
    );
  box-shadow: 0 0 18px color-mix(in srgb, var(--newsGlow, var(--accent)) 18%, transparent);
  opacity: 0.9;
}
.newsBlockTitle{
  margin: 0 0 6px;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-align: center;
}
.newsBlockSub{
  margin: 0 0 18px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  font-weight: 650;
}
.newsTileGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 720px){
  .newsTileGrid{
    grid-template-columns: 1fr;
  }
}
.newsTile{
  --newsGlow: var(--accent);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--newsGlow) 22%, rgba(255, 255, 255, .08));
  background: rgba(10, 16, 28, .42);
  text-align: left;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.newsTile:hover{
  border-color: color-mix(in srgb, var(--newsGlow) 42%, rgba(255, 255, 255, .1));
  box-shadow: 0 0 20px color-mix(in srgb, var(--newsGlow) 12%, transparent);
}
.newsTileIcon{
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: color-mix(in srgb, var(--newsGlow) 14%, rgba(0, 0, 0, .2));
  border: 1px solid color-mix(in srgb, var(--newsGlow) 28%, rgba(255, 255, 255, .08));
}
.newsTileTitle{
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 4px;
}
.newsTileText{
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.newsBrowserCtaWrap{
  max-width: 1040px;
  margin: 28px auto 0;
  display: flex;
  justify-content: center;
}
.newsBrowserCta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, #f4c057 55%, rgba(255, 255, 255, .12));
  color: #f4d78a;
  font-weight: 750;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-decoration: none;
  background: rgba(244, 192, 87, .06);
  transition: background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease);
}
.newsBrowserCta:hover{
  color: #fff6d4;
  border-color: color-mix(in srgb, #f4c057 75%, rgba(255, 255, 255, .2));
  background: rgba(244, 192, 87, .12);
  box-shadow: 0 0 22px rgba(244, 192, 87, .15);
}
.newsChannelGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 720px){
  .newsChannelGrid{
    grid-template-columns: 1fr;
  }
}
.newsChannelCard{
  --newsGlow: var(--accent2, #7c3aed);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--newsGlow) 24%, rgba(255, 255, 255, .08));
  background: rgba(10, 16, 28, .4);
  text-decoration: none;
  color: inherit;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.newsChannelCard:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--newsGlow) 45%, rgba(255, 255, 255, .12));
  box-shadow: 0 0 22px color-mix(in srgb, var(--newsGlow) 14%, transparent);
}
.newsChannelBody{
  flex: 1;
  min-width: 0;
  text-align: left;
}
.newsChannelTitle{
  font-weight: 800;
  font-size: 14px;
}
.newsChannelDesc{
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}
.newsChannelChev{
  flex: 0 0 auto;
  opacity: 0.45;
  font-size: 16px;
}
.newsChannelCard .newsIconRing{
  width: 44px;
  height: 44px;
}
.newsChannelCard .newsSvgIco{
  width: 22px;
  height: 22px;
}
.newsChannelCard .newsIconEmoji{
  font-size: 22px;
}
.section--faq{
  padding-top:10px;
  padding-bottom:46px;
}
.faqHero{
  text-align:center;
  max-width: 980px;
  margin: 0 auto;
}
.faqHero #faq-badge{
  display:inline-flex;
  width:auto;
  max-width: 220px;
  margin-left:auto;
  margin-right:auto;
}
.faqTitle{
  margin: 14px 0 0;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.faqLead{
  margin: 12px auto 0;
  max-width: 72ch;
  color: var(--muted);
  line-height: 1.6;
}
.faqStats{
  margin: 18px auto 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 18px;
}
.faqStatN{
  font-weight: 950;
  font-size: 22px;
  color: #f4c057;
  letter-spacing: .02em;
}
.faqStatL{
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.faqStatSep{
  width:1px;
  height:28px;
  background: rgba(255,255,255,.10);
}
.faqSearchWrap{
  margin: 18px auto 0;
  max-width: 540px;
}
.faqSearch{
  width:100%;
  max-width: 100%;
  height: 44px;
  border-radius: 14px;
  background: rgba(0,0,0,.16);
}
.faqCats{
  margin: 16px auto 0;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content:center;
  max-width: 980px;
}
.faqCatPill{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  color: var(--text);
  cursor:pointer;
  user-select:none;
  transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.faqCatPill:hover{
  border-color: rgba(39,211,255,.22);
  background: rgba(39,211,255,.06);
  transform: translateY(-1px);
}
.faqCatPill.isActive{
  border-color: rgba(39,211,255,.22);
  background: linear-gradient(135deg, rgba(39,211,255,.16), rgba(124,58,237,.12));
  box-shadow: 0 0 0 1px rgba(39,211,255,.10);
}
.faqCatIcon{
  width:22px;
  height:22px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 14px;
}
.faqCatTitle{
  font-weight: 800;
  font-size: 13px;
  line-height:1.2;
}
.faqCatCount{
  margin-left: 2px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: rgba(231,238,249,.85);
  font-size: 12px;
  font-weight: 800;
}
.faqSections{
  max-width: 980px;
  margin: 0 auto;
  display:grid;
  gap: 20px;
}
.faqSection{
  position: relative;
  padding-top: 18px;
}
.faqSection:first-child{
  padding-top: 0;
}
.faqSection + .faqSection::before{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background:
    linear-gradient(90deg,
      transparent,
      rgba(255,255,255,.10),
      color-mix(in srgb, var(--faqGlow, var(--accent)) 65%, transparent),
      rgba(255,255,255,.10),
      transparent
    );
  box-shadow: 0 0 18px color-mix(in srgb, var(--faqGlow, var(--accent)) 18%, transparent);
  opacity: .85;
}
.faqSectionHead{
  display:flex;
  align-items:center;
  gap: 12px;
  margin: 10px 0 8px;
}
.faqSectionIcon{
  width:32px;
  height:32px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 15px;
}
.faqSectionTitle{
  font-size: 18px;
  font-weight: 950;
  margin: 0;
}
.faqSectionCount{
  margin-left:auto;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: rgba(231,238,249,.85);
  font-size: 12px;
  font-weight: 800;
}
.faqAcc{
  display:grid;
  gap: 10px;
}
.faqItem{
  border:1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(18,27,42,.55);
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
  overflow:hidden;
  transition:
    border-color .22s var(--ease),
    box-shadow .22s var(--ease),
    transform .18s var(--ease),
    background .18s var(--ease);
}
/* Как карточка статьи (.articleCard): лёгкий подъём и акцентное свечение */
.faqItem:hover:not(.isOpen){
  background: color-mix(in srgb, rgba(255,255,255,.09) 16%, rgba(18,27,42,.55));
  border-color: color-mix(in srgb, var(--faqGlow, var(--accent)) 45%, transparent);
  transform: translateY(-2px);
  box-shadow:
    0 22px 56px rgba(0,0,0,.26),
    0 8px 28px rgba(0,0,0,.2),
    0 0 20px color-mix(in srgb, var(--faqGlow, var(--accent)) 16%, transparent);
}
.faqItem.isOpen{
  border-color: color-mix(in srgb, var(--faqGlow, var(--accent)) 55%, transparent);
  box-shadow:
    0 18px 50px rgba(0,0,0,.24),
    0 0 0 1px color-mix(in srgb, var(--faqGlow, var(--accent)) 26%, transparent),
    0 0 28px color-mix(in srgb, var(--faqGlow, var(--accent)) 22%, transparent),
    0 0 56px color-mix(in srgb, var(--faqGlow, var(--accent2)) 12%, transparent);
}
.faqItem.isOpen:hover{
  transform: translateY(-2px);
  box-shadow:
    0 22px 58px rgba(0,0,0,.28),
    0 0 0 1px color-mix(in srgb, var(--faqGlow, var(--accent)) 32%, transparent),
    0 0 34px color-mix(in srgb, var(--faqGlow, var(--accent)) 26%, transparent),
    0 0 62px color-mix(in srgb, var(--faqGlow, var(--accent2)) 14%, transparent);
}
.faqQ{
  width:100%;
  text-align:left;
  padding: 13px 15px;
  border:0;
  background: transparent;
  color: var(--text);
  cursor:pointer;
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 900;
  font-size: 14px;
  line-height: 1.35;
  transition: color .22s var(--ease);
}
.faqItem.isOpen .faqQ{
  color: color-mix(in srgb, var(--faqGlow, var(--accent)) 78%, rgba(231,238,249,.96));
}
.faqChev{
  margin-left:auto;
  width: 28px;
  height: 28px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(231,238,249,.65);
  transition:
    transform .22s var(--ease),
    border-color .22s var(--ease),
    background .18s var(--ease),
    box-shadow .18s var(--ease);
}
.faqItem:hover:not(.isOpen) .faqQ{
  color: color-mix(in srgb, var(--faqGlow, var(--accent)) 22%, var(--text));
}
.faqItem:hover:not(.isOpen) .faqChev{
  background: color-mix(in srgb, var(--faqGlow, var(--accent)) 18%, rgba(0,0,0,.16));
  border-color: color-mix(in srgb, var(--faqGlow, var(--accent)) 38%, rgba(255,255,255,.10));
  box-shadow: 0 0 14px color-mix(in srgb, var(--faqGlow, var(--accent)) 12%, transparent);
}
.faqItem:hover:not(.isOpen) .faqChev::before{
  border-right-color: color-mix(in srgb, var(--faqGlow, var(--accent)) 55%, rgba(231,238,249,.65));
  border-bottom-color: color-mix(in srgb, var(--faqGlow, var(--accent)) 55%, rgba(231,238,249,.65));
}
.faqChev::before{
  content:"";
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(231,238,249,.65);
  border-bottom: 2px solid rgba(231,238,249,.65);
  transform: translateY(-1px) rotate(45deg);
  transition: transform .22s var(--ease), border-color .22s var(--ease);
}
.faqItem.isOpen .faqChev{
  transform: rotate(180deg);
  border-color: color-mix(in srgb, var(--faqGlow, var(--accent)) 30%, rgba(255,255,255,.10));
}
.faqItem.isOpen .faqChev::before{
  border-right-color: color-mix(in srgb, var(--faqGlow, var(--accent)) 82%, rgba(231,238,249,.65));
  border-bottom-color: color-mix(in srgb, var(--faqGlow, var(--accent)) 82%, rgba(231,238,249,.65));
}
.faqA{
  display:none;
  margin: 0 16px 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(39,211,255,.14);
  background: linear-gradient(135deg, rgba(39,211,255,.08), rgba(124,58,237,.06));
  color: rgba(231,238,249,.86);
  font-size: 14px;
  line-height: 1.6;
  box-shadow: 0 0 0 rgba(39,211,255,0);
  transition: box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.faqA a{
  color: rgba(39,211,255,.92);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .18s var(--ease), text-decoration-color .18s var(--ease);
}
.faqA a:hover{
  color: rgba(124,58,237,.92);
  text-decoration-color: rgba(124,58,237,.75);
}
.faqA a:focus-visible{
  outline: 2px solid rgba(39,211,255,.35);
  outline-offset: 2px;
}
.faqItem.isOpen .faqA{
  display:block;
  animation: faqAnswerGlow .62s var(--ease);
  border-color: color-mix(in srgb, var(--faqGlow, var(--accent)) 38%, transparent);
  box-shadow:
    0 22px 58px rgba(0,0,0,.26),
    0 0 42px color-mix(in srgb, var(--faqGlow, var(--accent)) 18%, transparent);
}
@keyframes faqAnswerGlow{
  from{opacity:0; transform: translateY(-3px); box-shadow: 0 0 0 rgba(0,0,0,0)}
  to{opacity:1; transform:none; box-shadow: 0 22px 58px rgba(0,0,0,.26), 0 0 42px color-mix(in srgb, var(--faqGlow, var(--accent)) 18%, transparent)}
}
.faqMore{
  margin-top:10px;
  display:inline-flex;
  gap: 8px;
  align-items:center;
  color: #f4c057;
  text-decoration:none;
  font-weight: 800;
}
.faqMore:hover{text-decoration: underline}

.faqBottomCta{
  max-width: 980px;
  margin: 26px auto 0;
  padding: 0 0 4px;
}
.faqBottomInner{
  text-align:center;
  border-radius: var(--radius2);
  border: 1px solid var(--line);
  background: rgba(18, 27, 42, 0.45);
  box-shadow: 0 16px 48px rgba(0,0,0,.18);
  padding: 28px 18px;
}
.faqBottomIcon{
  width: 44px;
  height: 44px;
  margin: 0 auto 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 20px;
}
.faqBottomTitle{
  margin: 0;
  font-size: 22px;
  font-weight: 950;
}
.faqBottomText{
  margin: 10px auto 0;
  max-width: 70ch;
  color: var(--muted);
  line-height: 1.6;
}
.faqBottomBtns{
  margin-top: 16px;
  display:flex;
  justify-content:center;
  gap: 10px;
  flex-wrap: wrap;
}
/* ===================== GLOSSARY PAGE ===================== */
.section--glossary{
  padding-top:10px;
  padding-bottom:46px;
}
.glossaryHero{
  text-align:center;
  max-width:980px;
  margin:0 auto;
}
.glossaryHero #glossary-badge{
  display:inline-flex;
  width:auto;
  max-width:220px;
  margin-left:auto;
  margin-right:auto;
}
.glossaryTitle{
  margin:14px 0 0;
  font-size:clamp(30px,4vw,44px);
  line-height:1.1;
  letter-spacing:-0.02em;
}
.glossaryLead{
  margin:12px auto 0;
  max-width:72ch;
  color:var(--muted);
  line-height:1.6;
}
/* Sections container — same grid + separator as FAQ */
.glossarySections{
  max-width:980px;
  margin:0 auto;
  display:grid;
  gap:22px;
}
.glossarySection{
  position:relative;
  padding-top:18px;
}
.glossarySection:first-child{
  padding-top:0;
}
/* Coloured divider line that takes current category's glow colour */
.glossarySection + .glossarySection::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:1px;
  background:
    linear-gradient(90deg,
      transparent,
      rgba(255,255,255,.10),
      color-mix(in srgb, var(--glossaryGlow, var(--accent)) 65%, transparent),
      rgba(255,255,255,.10),
      transparent
    );
  box-shadow: 0 0 18px color-mix(in srgb, var(--glossaryGlow, var(--accent)) 18%, transparent);
  opacity:.85;
}
/* Card grid */
.glossaryGrid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 440px), 1fr));
  gap:12px;
  margin-top:12px;
}
.glossaryCard{
  position:relative;
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
  background:rgba(18,27,42,.55);
  box-shadow:0 14px 40px rgba(0,0,0,.20);
  padding:18px 20px;
  transition:
    border-color .22s var(--ease),
    box-shadow .22s var(--ease),
    transform .18s var(--ease),
    background .18s var(--ease);
}
.glossaryCard:hover{
  background:color-mix(in srgb, rgba(255,255,255,.09) 14%, rgba(18,27,42,.55));
  border-color:color-mix(in srgb, var(--glossaryGlow, var(--accent)) 40%, transparent);
  transform:translateY(-2px);
  box-shadow:
    0 20px 52px rgba(0,0,0,.24),
    0 0 18px color-mix(in srgb, var(--glossaryGlow, var(--accent)) 14%, transparent);
}
.glossaryCard.isHighlighted{
  border-color:color-mix(in srgb, var(--glossaryGlow, var(--accent)) 55%, transparent);
  box-shadow:
    0 14px 40px rgba(0,0,0,.20),
    0 0 0 1px color-mix(in srgb, var(--glossaryGlow, var(--accent)) 22%, transparent),
    0 0 24px color-mix(in srgb, var(--glossaryGlow, var(--accent)) 18%, transparent);
}
.glossaryCardHead{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.glossaryTermIcon{
  width:34px;
  height:34px;
  flex-shrink:0;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:17px;
}
.glossaryCardTitle{
  margin:0;
  font-size:15px;
  font-weight:950;
  line-height:1.25;
  color:color-mix(in srgb, var(--glossaryGlow, var(--accent)) 75%, var(--text));
}
.glossaryCardBody{
  font-size:13.5px;
  line-height:1.65;
  color:var(--muted);
}
.glossaryCardBody a{ color:var(--accent); text-decoration:underline; }
.glossaryCardBody strong, .glossaryCardBody b{ color:var(--text); }
/* "See also" badges row */
.glossaryTermSeeAlso{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.06);
}
.glossarySeeAlsoLabel{
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(231,238,249,.45);
  flex-shrink:0;
  margin-right:2px;
}
.glossarySeeAlsoTag{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--glossaryGlow, var(--accent)) 28%, rgba(255,255,255,.08));
  background:color-mix(in srgb, var(--glossaryGlow, var(--accent)) 8%, rgba(0,0,0,.16));
  color:color-mix(in srgb, var(--glossaryGlow, var(--accent)) 80%, var(--text));
  font-size:12px;
  font-weight:700;
  text-decoration:none;
  transition:background .18s var(--ease), border-color .18s var(--ease), transform .16s var(--ease);
}
.glossarySeeAlsoTag:hover{
  background:color-mix(in srgb, var(--glossaryGlow, var(--accent)) 18%, rgba(0,0,0,.20));
  border-color:color-mix(in srgb, var(--glossaryGlow, var(--accent)) 55%, transparent);
  transform:translateY(-1px);
}
@media(max-width:640px){
  .glossaryGrid{
    grid-template-columns:1fr;
  }
  .glossaryTitle{ font-size:clamp(26px,7vw,36px); }
}

/* ===================== ARTICLES PAGE ===================== */
.section--articles{
  padding-top:10px;
  padding-bottom:46px;
}
.section--article{
  padding-top:16px;
  padding-bottom:46px;
}
.articlesHero{
  text-align:center;
  max-width:980px;
  margin:0 auto;
}
.articlesHero #articles-badge{
  display:inline-flex;
  width:auto;
  max-width:220px;
  margin-left:auto;
  margin-right:auto;
}
.articlesHeroTitle{
  font-size:clamp(30px,4vw,44px);
  font-weight:950;
  margin:14px 0 0;
  background:linear-gradient(135deg,#fff 30%,color-mix(in srgb,var(--accent) 60%,#fff));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  letter-spacing:-.02em;
  line-height:1.1;
}
.articlesHeroLead{
  color:var(--muted);
  font-size:16px;
  line-height:1.6;
  max-width:72ch;
  margin:12px auto 0;
}
.articlesHeroStats{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  margin:18px auto 0;
}
.articlesHeroStat{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:0 28px;
}
.articlesHeroStatN{
  font-size:22px;
  font-weight:950;
  color:#f4c057;
  line-height:1.1;
  letter-spacing:.02em;
}
.articlesHeroStatL{
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-top:2px;
}

/* Sections */
.articlesSections{
  max-width:980px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:0;
}
.articlesSection{
  position:relative;
  padding-top:16px;
}
.articlesSection:first-child{
  padding-top:0;
}
.articlesSectionSep{
  height:2px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--faqGlow,var(--accent)) 55%,transparent),transparent);
  border-radius:2px;
  margin:0 0 0;
  opacity:.7;
}
.articlesSectionHead{
  display:flex;
  align-items:center;
  gap:11px;
  margin:0 0 10px;
  padding:10px 16px;
  border-radius:var(--radius);
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
  border-left:3px solid color-mix(in srgb,var(--faqGlow,var(--accent)) 80%,transparent);
  box-shadow:0 2px 12px rgba(0,0,0,.12);
}
.articlesSectionIcon{
  width:38px;
  height:38px;
  min-width:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:color-mix(in srgb,var(--faqGlow,var(--accent)) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--faqGlow,var(--accent)) 30%,transparent);
  font-size:18px;
  line-height:1;
  flex-shrink:0;
  font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
  font-style:normal;
  letter-spacing:0;
}
.articlesSectionInfo{
  flex:1;
  min-width:0;
}
.articlesSectionTitle{
  font-size:16px;
  font-weight:700;
  margin:0;
  color:#fff;
}
.articlesSectionDesc{
  font-size:13px;
  color:var(--muted);
  margin:2px 0 0;
  line-height:1.45;
}

/* Article cards grid */
.articlesGrid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
  margin-bottom:12px;
}
@media(max-width:600px){
  .articlesGrid{ grid-template-columns:1fr; }
}
.articleCard{
  display:flex;
  align-items:center;
  gap:11px;
  padding:10px 14px;
  border-radius:var(--radius);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  text-decoration:none;
  color:inherit;
  cursor:pointer;
  transition:background .18s,border-color .18s,transform .18s,box-shadow .18s;
  will-change:transform;
}
.articleCard:hover{
  background:rgba(255,255,255,.08);
  border-color:color-mix(in srgb,var(--faqGlow,var(--accent)) 45%,transparent);
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(0,0,0,.18),0 0 18px color-mix(in srgb,var(--faqGlow,var(--accent)) 16%,transparent);
  text-decoration:none;
}
.articleCardIcon{
  width:36px;
  height:36px;
  min-width:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:color-mix(in srgb,var(--faqGlow,var(--accent)) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--faqGlow,var(--accent)) 28%,transparent);
  font-size:16px;
  line-height:1;
  flex-shrink:0;
  font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
  font-style:normal;
  letter-spacing:0;
  transition:background .18s,border-color .18s;
}
.articleCard:hover .articleCardIcon{
  background:color-mix(in srgb,var(--faqGlow,var(--accent)) 25%,transparent);
  border-color:color-mix(in srgb,var(--faqGlow,var(--accent)) 50%,transparent);
}
.articleCardBody{
  flex:1;
  min-width:0;
}
.articleCardTitle{
  font-size:14px;
  font-weight:700;
  color:#e8f4ff;
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.articleCardLead{
  font-size:12px;
  color:var(--muted);
  margin-top:3px;
  line-height:1.4;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.articleCardArrow{
  font-size:16px;
  color:var(--muted);
  opacity:.6;
  transition:opacity .18s,transform .18s,color .18s;
  flex-shrink:0;
}
.articleCard:hover .articleCardArrow{
  color:var(--faqGlow,var(--accent));
  opacity:1;
  transform:translateX(3px);
}

/* Individual article page */
.articlePageBack{
  margin-bottom:18px;
}
.articlePageHero{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:22px;
  max-width:1080px;
  margin-left:auto;
  margin-right:auto;
}
@media(max-width:540px){
  .articlePageHero{ flex-direction:column; gap:10px; align-items:flex-start; }
}
.articlePageIconWrap{
  width:44px;
  height:44px;
  min-width:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:11px;
  background:color-mix(in srgb,var(--faqGlow,var(--accent)) 18%,transparent);
  border:1.5px solid color-mix(in srgb,var(--faqGlow,var(--accent)) 35%,transparent);
  box-shadow:0 0 14px color-mix(in srgb,var(--faqGlow,var(--accent)) 22%,transparent);
  flex-shrink:0;
}
.articlePageIconWrap>span{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  line-height:1;
  font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
  font-style:normal;
  letter-spacing:0;
  width:100%;
  height:100%;
}
.articlePageMeta{
  flex:1;
  min-width:0;
}
.articlePageCatBadge{
  margin:0 0 5px;
  display:inline-flex;
}
.articlePageTitle{
  font-size:clamp(18px,2.4vw,24px);
  font-weight:900;
  margin:0 0 6px;
  line-height:1.15;
  letter-spacing:-.02em;
  color:#fff;
}
.articlePageLead{
  font-size:13px;
  color:var(--muted);
  margin:0;
  line-height:1.6;
}
.articlePagePanel{
  max-width:1080px;
  margin-left:auto;
  margin-right:auto;
}
.articlePageBody{
  line-height:1.72;
  font-size:15px;
  color:rgba(220,235,255,.88);
}
.articlePageBody h2{ font-size:20px; font-weight:900; margin:24px 0 10px; color:#fff; }
.articlePageBody h3{ font-size:17px; font-weight:800; margin:18px 0 8px; color:rgba(255,255,255,.9); }
.articlePageBody p{ margin:0 0 12px; }
.articlePageBody ul,.articlePageBody ol{ padding-left:24px; margin:0 0 12px; }
.articlePageBody li{ margin-bottom:4px; }
.articlePageBody code{
  font-family:"Courier New",monospace;
  background:rgba(39,211,255,.12);
  border:1px solid rgba(39,211,255,.2);
  border-radius:5px;
  padding:1px 6px;
  font-size:13px;
  color:#aef;
}
.articlePageBody pre{
  background:rgba(6,12,22,.7);
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  padding:14px 16px;
  overflow-x:auto;
  margin:0 0 14px;
  font-size:13px;
}
.articlePageBody blockquote{
  border-left:3px solid var(--accent);
  margin:0 0 14px 0;
  padding:10px 16px;
  background:rgba(39,211,255,.07);
  border-radius:0 10px 10px 0;
  color:rgba(200,230,255,.8);
  font-style:italic;
}
.articlePageRelated{
  max-width:860px;
  margin-top:28px;
}
.articlePageRelatedTitle{
  font-size:18px;
  font-weight:900;
  margin:0 0 14px;
}
@media(prefers-reduced-motion:reduce){
  .articleCard{ transition:none; }
  .articleCardArrow{ transition:none; }
  .faqItem,
  .faqQ,
  .faqChev,
  .faqChev::before{ transition:none; }
  .faqItem:hover:not(.isOpen),
  .faqItem.isOpen:hover{ transform:none; }
}

.promoSectionPrimary{
  max-width:920px;
  margin:0 auto;
  padding:22px 20px 26px;
  border-radius:var(--radius2);
  border:1px solid var(--line);
  background: rgba(18, 27, 42, 0.45);
  box-shadow: 0 16px 48px rgba(0,0,0,.18);
}
.promoPageHead{
  text-align:center;
  max-width:640px;
  margin:0 auto 18px;
}
.promoKicker{margin-bottom:8px}
.promoKickerInner{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 11px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--accent);
  border:1px solid rgba(39,211,255,.32);
  background: rgba(39,211,255,.08);
}
.promoTitle{
  margin:0 0 8px;
  font-size:clamp(22px, 3.2vw, 30px);
  font-weight:900;
  color:var(--text);
  letter-spacing:-0.02em;
  background: linear-gradient(135deg, var(--accent) 0%, rgba(124,58,237,.95) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
@supports not (background-clip:text){
  .promoTitle{color:var(--accent);-webkit-text-fill-color:unset}
}
.promoLead{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
}
.promoBlocks{display:grid;gap:20px;max-width:100%;margin:0 auto}
.promoCard{
  display:grid;
  grid-template-columns: auto 1fr;
  gap:14px;
  align-items:start;
  padding:14px 16px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background: rgba(18, 27, 42, 0.72);
  box-shadow: 0 12px 36px rgba(0,0,0,.22);
}
.promoCardBadge{
  min-width:58px;
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  font-size:15px;
  font-weight:900;
  color:var(--accent);
  background: rgba(39,211,255,.08);
  border:1px solid rgba(39,211,255,.22);
}
.promoCardBody{min-width:0}
.promoCardTitle{
  margin:0 0 6px;
  font-size:17px;
  font-weight:800;
  color:var(--accent);
  line-height:1.35;
}
.promoCardInstr{
  margin:0 0 10px;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}
.promoCodeRow{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 10px;
  margin-bottom:8px;
}
.promoCodeLabel{
  font-size:12px;
  color:var(--muted);
  font-weight:600;
}
.promoCodeValue{
  flex:1 1 160px;
  min-width:0;
  padding:7px 10px;
  border-radius:10px;
  font-size:12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color:var(--text);
  background: rgba(0,0,0,.32);
  border:1px solid rgba(255,255,255,.07);
  word-break:break-all;
}
.promoCopyBtn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
  font-size:12px;
  height:34px;
  padding:0 10px;
  border-radius:10px;
}
.promoCopyIcon{
  display:inline-flex;
  opacity:.9;
}
.promoCopyIcon svg{width:14px;height:14px}
.promoCardValid{
  margin:0;
  font-size:11px;
  color:var(--muted);
  opacity:.88;
}
@media (max-width: 560px){
  .promoCard{grid-template-columns:1fr;text-align:center}
  .promoCardBadge{margin:0 auto}
  .promoCodeRow{justify-content:center}
}

/* Блок «кампания» под промо-карточками (редактор в админке) */
.promoCampaignWrap{
  max-width:920px;
  margin:20px auto 0;
  padding:28px 22px 26px;
  border-radius:var(--radius2);
  border:1px solid rgba(39,211,255,.14);
  background: rgba(10, 14, 22, 0.72);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.25) inset,
    0 20px 56px rgba(0,0,0,.28);
  position:relative;
}
/* Разделитель как у секций на главной (.page-home > section > .container::before), без узкой «неоновой» полосы */
.promoCampaignWrap::before,
.promoSavingsWrap::before{
  content:"";
  position:absolute;
  left:22px;
  right:22px;
  top:0;
  height:1px;
  pointer-events:none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    color-mix(in srgb, var(--accent) 65%, transparent),
    rgba(255, 255, 255, 0.1),
    transparent
  );
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 18%, transparent));
  opacity:0.85;
}
.promoCampaign{
  text-align:center;
}
.promoCampaignSectionTitle{
  margin:0 0 18px;
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.promoCampaignEyebrow{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:10px 14px;
  margin-bottom:14px;
}
.promoCampaignEyebrowBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  color:var(--accent);
  background: rgba(39,211,255,.12);
  border:1px solid rgba(39,211,255,.35);
}
.promoCampaignEyebrowText{
  font-size:14px;
  font-weight:700;
  color:var(--text);
  line-height:1.4;
  text-align:center;
  max-width:560px;
}
.promoCampaignHead{margin-bottom:12px}
.promoCampaignTitle{
  margin:0 0 8px;
  font-size:clamp(22px, 3.4vw, 32px);
  font-weight:900;
  color:var(--text);
  line-height:1.15;
  letter-spacing:-0.02em;
}
.promoCampaignSubtitle{
  margin:0;
  font-size:15px;
  font-weight:800;
  color:var(--accent);
  line-height:1.35;
}
.promoCampaignIntro{
  margin:0 auto 22px;
  max-width:640px;
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
}
.promoCampaignSteps{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:12px;
  margin:0 auto 20px;
  text-align:left;
}
.promoCampaignStep{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:16px 12px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background: rgba(18, 27, 42, 0.65);
  min-height:100%;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease);
  will-change: transform;
}
.promoCampaignStep:hover{
  transform: translateY(-4px);
  border-color: rgba(39,211,255,.34);
  background: rgba(18, 28, 42, 0.92);
  box-shadow:
    0 16px 40px rgba(0,0,0,.38),
    0 0 0 1px rgba(39,211,255,.14),
    0 0 28px rgba(39,211,255,.12);
}
.promoCampaignStepNum{
  width:36px;
  height:36px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:900;
  color:var(--text);
  background: rgba(39,211,255,.18);
  border:1px solid rgba(39,211,255,.38);
  box-shadow: 0 0 0 1px rgba(39,211,255,.08);
  transition: transform .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.promoCampaignStep:hover .promoCampaignStepNum{
  transform: scale(1.06);
  background: rgba(39,211,255,.28);
  border-color: rgba(39,211,255,.52);
  box-shadow: 0 0 20px rgba(39,211,255,.2);
}
@media (prefers-reduced-motion: reduce){
  .promoCampaignStep{
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
    will-change:auto;
  }
  .promoCampaignStep:hover{transform:none}
  .promoCampaignStepNum{transition: background .2s ease, border-color .2s ease, box-shadow .2s ease}
  .promoCampaignStep:hover .promoCampaignStepNum{transform:none}
}
.promoCampaignStepBody{width:100%;min-width:0;text-align:center}
.promoCampaignStepTitle{
  margin:0 0 6px;
  font-size:14px;
  font-weight:800;
  color:var(--text);
  line-height:1.3;
}
.promoCampaignStepText{
  margin:0;
  font-size:12px;
  line-height:1.5;
  color:var(--muted);
}
.promoCampaignNotice{
  display:flex;
  gap:12px;
  align-items:flex-start;
  text-align:left;
  max-width:720px;
  margin:0 auto 22px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(39,211,255,.28);
  background: rgba(39,211,255,.05);
}
.promoCampaignNoticeIcon{
  flex:0 0 auto;
  color:var(--accent);
  margin-top:1px;
}
.promoCampaignNoticeIcon svg{display:block}
.promoCampaignNoticeText{
  font-size:12px;
  line-height:1.55;
  color:var(--muted);
  min-width:0;
}
.promoEmptyBanner{
  margin-top:14px;
  margin-bottom:14px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(39,211,255,.22);
  background:
    radial-gradient(700px 160px at 20% 0%, rgba(39,211,255,.12), transparent 70%),
    radial-gradient(680px 150px at 80% 0%, rgba(124,58,237,.10), transparent 72%),
    rgba(18,27,42,.55);
  box-shadow: 0 18px 50px rgba(0,0,0,.30);
  display:none; /* avoid empty spacer; toggled by JS */
  gap:12px;
  align-items:flex-start;
  color: rgba(231,238,249,.78);
}
.promoEmptyBanner.isOn{display:flex}
.promoEmptyIcon{
  width:22px;
  height:22px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: var(--accent);
}
.promoEmptyIcon svg{display:block}
.promoEmptyText{
  min-width:0;
  font-size:12px;
  line-height:1.55;
  color: rgba(231,238,249,.75);
}
.promoEmptyText b{color:var(--text)}
.promoEmptyBanner a{
  color: rgba(39,211,255,.92);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(39,211,255,.55);
  transition: color .18s var(--ease), text-decoration-color .18s var(--ease), filter .18s var(--ease);
}
@keyframes promoLinkPulse {
  0%{ color: rgba(39,211,255,.92); text-decoration-color: rgba(39,211,255,.55); filter: drop-shadow(0 0 8px rgba(39,211,255,.12)); }
  50%{ color: rgba(124,58,237,.94); text-decoration-color: rgba(124,58,237,.75); filter: drop-shadow(0 0 14px rgba(124,58,237,.16)); }
  100%{ color: rgba(39,211,255,.92); text-decoration-color: rgba(39,211,255,.55); filter: drop-shadow(0 0 10px rgba(39,211,255,.12)); }
}
.promoEmptyBanner a:hover{
  animation: promoLinkPulse 1.1s ease-in-out infinite;
}
.promoCampaignCta{
  display:flex;
  justify-content:center;
}
.promoCampaignCtaBtn{
  min-height:44px;
  padding:0 22px;
  font-size:14px;
  font-weight:800;
}
.promoCampaignCtaIcon{
  display:inline-flex;
  opacity:.95;
}
.promoCampaignCtaIcon svg{display:block}
@media (max-width: 900px){
  .promoCampaignSteps{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width: 520px){
  .promoCampaignSteps{grid-template-columns:1fr}
  .promoCampaignWrap{
    margin-top:20px;
    padding:22px 14px 20px;
  }
  .promoCampaignWrap::before,
  .promoSavingsWrap::before{
    left:14px;
    right:14px;
  }
  .promoSectionPrimary{padding:18px 14px 22px}
}

/* «Как сэкономить» — сетка карточек + баннер CTA */
.promoSavingsWrap{
  max-width:920px;
  margin:20px auto 0;
  padding:28px 22px 26px;
  border-radius:var(--radius2);
  border:1px solid rgba(39,211,255,.14);
  background: rgba(10, 14, 22, 0.72);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.25) inset,
    0 20px 56px rgba(0,0,0,.28);
  position:relative;
}
.promoSavingsHead{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin:0 0 20px;
  text-align:left;
}
.promoSavingsHeadIcon{
  width:40px;
  height:40px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  color:var(--accent);
  background: rgba(39,211,255,.14);
  border:1px solid rgba(39,211,255,.32);
  box-shadow: 0 0 20px rgba(39,211,255,.1);
}
.promoSavingsHeadIcon svg{width:22px;height:22px;display:block}
.promoSavingsTitle{
  margin:0;
  font-size:clamp(18px, 2.4vw, 22px);
  font-weight:900;
  color:var(--text);
  letter-spacing:-0.02em;
}
.promoSavingsGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:20px;
  margin-bottom:18px;
}
.promoSavingsCard{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  gap:12px;
  padding:18px 16px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background: rgba(18, 27, 42, 0.72);
  min-height:100%;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease);
  will-change: transform;
}
.promoSavingsCard:hover{
  transform: translateY(-4px);
  border-color: rgba(39,211,255,.3);
  background: rgba(18, 28, 42, 0.88);
  box-shadow:
    0 14px 36px rgba(0,0,0,.35),
    0 0 0 1px rgba(39,211,255,.12),
    0 0 24px rgba(39,211,255,.1);
}
.promoSavingsCardIcon{
  width:44px;
  height:44px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.promoSavingsCardIcon svg{width:22px;height:22px;display:block}
.promoSavingsCardIcon--cyan{
  color:#8ee9ff;
  background: rgba(39,211,255,.14);
  border:1px solid rgba(39,211,255,.32);
}
.promoSavingsCardIcon--green{
  color:#5ee9b5;
  background: rgba(25,195,125,.12);
  border:1px solid rgba(25,195,125,.35);
}
.promoSavingsCardIcon--amber{
  color:#fcd34d;
  background: rgba(251,191,36,.1);
  border:1px solid rgba(251,191,36,.32);
}
.promoSavingsCardIcon--violet{
  color:#c4b5fd;
  background: rgba(124,58,237,.16);
  border:1px solid rgba(124,58,237,.35);
}
.promoSavingsCardTitle{
  margin:0;
  font-size:15px;
  font-weight:800;
  color:var(--text);
  line-height:1.3;
}
.promoSavingsCardText{
  margin:0;
  font-size:12px;
  line-height:1.55;
  color:var(--muted);
}
.promoSavingsCardLink{
  margin-top:auto;
  padding-top:4px;
  font-size:13px;
  font-weight:700;
  color:var(--accent);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.promoSavingsCardLink:hover{
  color:#9eedff;
  border-bottom-color: rgba(39,211,255,.45);
}
.promoSavingsBanner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:18px 20px;
  border-radius:var(--radius);
  border:1px solid rgba(39,211,255,.2);
  background: rgba(39,211,255,.06);
}
.promoSavingsBannerMain{
  flex:1 1 260px;
  min-width:0;
  text-align:left;
}
.promoSavingsBannerTitle{
  margin:0 0 6px;
  font-size:16px;
  font-weight:900;
  color:var(--text);
}
.promoSavingsBannerDesc{
  margin:0;
  font-size:13px;
  line-height:1.55;
  color:var(--muted);
}
.promoSavingsBannerBtn{
  flex:0 0 auto;
  min-height:44px;
  padding:0 20px;
  font-size:14px;
  font-weight:800;
}
.promoSavingsBannerBtnIcon{
  display:inline-flex;
  margin-right:2px;
}
.promoSavingsBannerBtnIcon svg{width:18px;height:18px;display:block}
@media (prefers-reduced-motion: reduce){
  .promoSavingsCard{
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
    will-change:auto;
  }
  .promoSavingsCard:hover{transform:none}
}
@media (max-width: 640px){
  .promoSavingsGrid{grid-template-columns:1fr}
  .promoSavingsBanner{flex-direction:column;align-items:stretch}
  .promoSavingsBannerBtn{width:100%;justify-content:center}
}
@media (max-width: 520px){
  .promoSavingsWrap{
    margin-top:20px;
    padding:22px 14px 20px;
  }
}

/* Admin layout (XenForo-like: sidebar + content) */
.adminLayout{
  display:grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap:12px;
  align-items:start;
}
.adminSide{min-width:0}
.adminMain{min-width:0}
.adminSingleSection .adminMain .grid{gap:0}
.adminSidePanel{position:sticky; top:88px}

/* Make sidebar always visible on scroll (desktop) */
@media (min-width: 981px){
  .adminLayout{grid-template-columns: 1fr} /* we handle layout via fixed sidebar */
  .adminSide{
    position:fixed;
    top:244px; /* ниже заголовка админки, чтобы не перекрывать верх */
    left: calc((100vw - var(--max)) / 2 + 18px);
    width:280px;
    z-index:40;
    max-height: calc(100vh - 256px);
    overflow:auto;
  }
  /* When sidebar is fixed, inner sticky creates scroll/overlap glitches */
  .adminSidePanel{position:static; top:auto}
  .adminMain{
    margin-left: calc(280px + 12px);
  }
}
.adminNav{
  display:grid;
  gap:6px;
  margin-top:6px;
}
.adminNav a{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  color:var(--muted);
  transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.adminNav a:hover{
  color:var(--text);
  border-color: rgba(39,211,255,.22);
  background: rgba(39,211,255,.06);
  transform: translateY(-1px);
}
.adminNav a.is-active{
  color:var(--text);
  border-color: rgba(39,211,255,.22);
  background: linear-gradient(135deg, rgba(39,211,255,.18), rgba(124,58,237,.14));
  box-shadow: 0 0 0 1px rgba(39,211,255,.12);
}
.adminNav a.is-active:hover{
  border-color: rgba(39,211,255,.35);
  transform: translateY(-1px);
}

/* Sticky save bar inside long product editor (admin) */
.adminProdStickySave{
  position: sticky;
  top: 10px;
  z-index: 25;
  margin: 0 0 14px 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(8, 12, 20, 0.94);
  border: 1px solid rgba(39, 211, 255, 0.22);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(10px);
}

@media (max-width: 980px){
  .adminLayout{grid-template-columns: 1fr}
  .adminSide{position:static !important; width:auto !important; left:auto !important; top:auto !important}
  .adminMain{margin-left:0 !important}
}

/* Страница «Не работает?» — панели как у акций; низ секции: --siteTextPageSectionPadBottom */
.section--nw{
  padding-top:8px;
}
#nw-page{
  max-width:920px;
  margin:0 auto;
  display:grid;
  gap:20px;
}
.nwHeroPanel{
  text-align:center;
  padding:20px 20px 22px;
  border-radius:var(--radius2);
  border:1px solid var(--line);
  background: rgba(18, 27, 42, 0.45);
  box-shadow: 0 16px 48px rgba(0,0,0,.18);
  position:relative;
}
/* Разделитель как под #status-head — тот же градиент по ширине, без неонового свечения */
.nwHeroPanel::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  top:auto;
  transform:none;
  width:auto;
  height:1px;
  border-radius:999px;
  background: linear-gradient(
    90deg,
    rgba(30,90,130,0) 0%,
    rgba(34,111,162,.52) 20%,
    rgba(42,128,184,.62) 50%,
    rgba(34,111,162,.52) 80%,
    rgba(30,90,130,0) 100%
  );
  box-shadow:none;
  pointer-events:none;
}
.nwHeroIconWrap{
  display:flex;
  justify-content:center;
  margin:0 0 14px;
}
.nwHeroSvg{
  width:72px;
  height:72px;
  display:block;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.35));
}
.nwPageTitle{
  margin:0 0 10px;
  font-size:clamp(20px, 3vw, 28px);
  font-weight:900;
  letter-spacing:-0.02em;
  line-height:1.2;
  background: linear-gradient(135deg, var(--accent) 0%, rgba(124,58,237,.95) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
@supports not (background-clip:text){
  .nwPageTitle{color:var(--accent);-webkit-text-fill-color:unset}
}
.nwPageLead{
  margin:0 auto;
  max-width:560px;
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
}
.nwPanel{
  padding:22px 18px 20px;
  border-radius:var(--radius2);
  border:1px solid rgba(39,211,255,.12);
  background: rgba(10, 14, 22, 0.72);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.22) inset,
    0 18px 48px rgba(0,0,0,.22);
  position:relative;
}
.nwPanel::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:auto;
  transform:none;
  width:auto;
  height:1px;
  border-radius:999px;
  background: linear-gradient(
    90deg,
    rgba(30,90,130,0) 0%,
    rgba(34,111,162,.52) 20%,
    rgba(42,128,184,.62) 50%,
    rgba(34,111,162,.52) 80%,
    rgba(30,90,130,0) 100%
  );
  box-shadow:none;
  pointer-events:none;
}
/* Линия уже у нижнего края героя — не дублировать сверху первого блока */
#nw-page > .nwHeroPanel + .nwPanel::before{
  display:none;
}
.nwPanelHeading{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin:0 0 18px;
  font-size:clamp(17px, 2.2vw, 20px);
  font-weight:900;
  line-height:1.25;
}
.nwPanelHeadingIcon{
  width:40px;
  height:40px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  color:var(--accent);
  background: rgba(39,211,255,.1);
  border:1px solid rgba(39,211,255,.22);
}
.nwPanelHeadingIcon svg{width:22px;height:22px;display:block}
.nwPanelHeadingLead{
  color:var(--accent);
}
.nwPanelHeadingRest{
  color:var(--text);
}
.nwCardGrid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
}
@media (max-width: 980px){
  .nwCardGrid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width: 520px){
  .nwCardGrid{grid-template-columns:1fr}
}
.nwCard{
  display:flex;
  flex-direction:column;
  min-height:100%;
  padding:14px 14px 12px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background: rgba(18, 27, 42, 0.75);
  box-shadow: 0 10px 32px rgba(0,0,0,.2);
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}
.nwCard:hover{
  border-color: rgba(39,211,255,.22);
  box-shadow: 0 14px 40px rgba(0,0,0,.28);
  transform: translateY(-2px);
}
.nwCardTop{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  align-items:start;
  flex:1;
  min-width:0;
}
.nwCardIcon{
  width:52px;
  height:52px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(39,211,255,.08);
  border:1px solid rgba(39,211,255,.2);
  flex-shrink:0;
}
.nwCardIconBadge{
  font-size:13px;
  font-weight:900;
  letter-spacing:.02em;
  color:var(--accent);
}
.nwCardIconBadge--nvidia{color:#76b900}
.nwCardIconBadge--amd{color:#ed1c24}
.nwCardIconBadge--directx{color:#7cb7ff}
.nwCardIconBadge--vcpp{color:#c4b5fd}
.nwCardIconBadge--windows{color:#38bdf8}
.nwCardIconBadge--defender{color:#60a5fa}
.nwCardIconBadge--uac{color:#fbbf24}
.nwCardIconBadge--bios{color:#94a3b8}
.nwCardIconBadge--winrar{color:#c084fc}
.nwCardIconBadge--screenshot{color:#a78bfa}
.nwCardIconBadge--teamviewer{color:#0e8ee9}
.nwCardIconBadge--anydesk{color:#ef4444}
.nwCardKicker{
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:6px;
  line-height:1.35;
}
.nwCardName{
  margin:0;
  font-size:14px;
  font-weight:800;
  color:var(--text);
  line-height:1.35;
}
.nwCardFoot{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.06);
  text-align:center;
}
.nwCardRecommend{
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:4px 8px;
  border-radius:8px;
  color:var(--accent);
  background: rgba(39,211,255,.1);
  border:1px solid rgba(39,211,255,.22);
  max-width:100%;
}
.nwCardRecommend--empty{
  display:none;
}
.nwCardBtn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  font-size:12px;
  font-weight:800;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.25);
  color:var(--text);
  text-decoration:none;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.nwCardBtn:hover{
  border-color: rgba(39,211,255,.28);
  background: rgba(39,211,255,.1);
  color:#e8f7ff;
  transform: translateY(-1px);
}
.nwCardBtnIcon{display:inline-flex;opacity:.9}
.nwCardBtnIcon svg{display:block}
.nwNoticePanel{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:14px 16px;
  border-radius:var(--radius2);
  border:1px solid rgba(39,211,255,.22);
  background: linear-gradient(120deg, rgba(39,211,255,.16) 0%, rgba(39,211,255,.06) 40%, rgba(124,58,237,.14) 100%);
  box-shadow: 0 12px 40px rgba(0,0,0,.2);
}
.nwNoticeIcon{
  flex:0 0 auto;
  color:var(--accent);
  opacity:.95;
  margin-top:1px;
}
.nwNoticeIcon svg{display:block}
.nwNoticeText{
  margin:0;
  font-size:13px;
  line-height:1.55;
  color:var(--text);
  min-width:0;
}
.nwBottomRow{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}
@media (max-width: 720px){
  .nwBottomRow{grid-template-columns:1fr}
}
.nwBottomCard{
  padding:22px 20px 20px;
  border-radius:var(--radius2);
  border:1px solid var(--line);
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  min-height:200px;
  box-shadow: 0 16px 44px rgba(0,0,0,.22);
}
.nwBottomCard--support{
  background: linear-gradient(145deg, rgba(39,211,255,.24) 0%, rgba(124,58,237,.12) 42%, rgba(18,27,42,.58) 100%);
  border-color: rgba(39,211,255,.28);
}
.nwBottomCard--contacts{
  background: rgba(10, 14, 22, 0.88);
  border-color: rgba(124,58,237,.18);
}
.nwBottomTitle{
  margin:0;
  font-size:18px;
  font-weight:900;
  color:var(--text);
  line-height:1.25;
}
.nwBottomTitleGrad{
  background: linear-gradient(135deg, var(--accent) 0%, rgba(167,139,250,.95) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
@supports not (background-clip:text){
  .nwBottomTitleGrad{color:var(--accent);-webkit-text-fill-color:unset}
}
.nwBottomText{
  margin:0;
  font-size:13px;
  line-height:1.55;
  color:rgba(255,255,255,.88);
  max-width:420px;
}
.nwSupportBtn{
  margin-top:auto;
  min-height:44px;
  padding:0 26px;
  font-size:14px;
  font-weight:900;
  letter-spacing:.02em;
  text-decoration:none;
  box-shadow:
    0 0 0 1px rgba(39,211,255,.12) inset,
    0 10px 28px rgba(0,0,0,.22);
}
.nwSupportBtn:hover{
  box-shadow:
    0 0 0 1px rgba(39,211,255,.22) inset,
    0 14px 36px rgba(39,211,255,.12);
}
.nwContactRow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin-top:auto;
}
.nwContactChip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  font-size:13px;
  font-weight:800;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  color:var(--text);
  text-decoration:none;
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.nwContactChip:hover{
  border-color: rgba(39,211,255,.3);
  background: rgba(39,211,255,.08);
  transform: translateY(-1px);
}
.nwContactChipIcon{display:inline-flex;opacity:.95}
.nwContactChipIcon svg{display:block}