/* ============================================================
   ЕДИНЫЙ ХРОМ САЙТА: шапка + подвал с ГЛАВНОЙ на всех страницах.
   Разметка: /local/iflow_anim/chrome_header.php, chrome_footer.php
   Скрипты:  /local/iflow_anim/chrome.js
   Правишь главную (эти файлы) → меняется весь сайт.
   Правила ниже перенесены из home.css (#iflow-home → .iflow-chrome).
   ============================================================ */
.iflow-chrome{display:contents}
.iflow-chrome{--navy:#081a34;--navy-2:#0b213f;--panel:#0f2848;--line:rgba(120,170,225,.16);
  --ink:#eef4fb;--muted:#9fbbd8;--sky:#4c9be8;--blue:#2e75b6;--blue-d:#1b5cb0;--blue-l:#6ba4de;
  --paper:#eef3f9;--paper-2:#ffffff;--ink-d:#0e2340;--muted-d:#5a7392;--line-d:rgba(31,78,121,.12);
  --light:#6E93D1;--dark:#1450b4;--seam:#0a1c38;--r:16px;--maxw:1200px;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased}
.iflow-chrome *,.iflow-chrome *::before,.iflow-chrome *::after{box-sizing:border-box}
.iflow-chrome a{color:inherit;text-decoration:none}
.iflow-chrome a:hover{text-decoration:none}
.iflow-chrome img{max-width:100%;display:block;border:0}
.iflow-chrome ul{list-style:none;margin:0;padding:0}
.iflow-chrome .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.iflow-chrome input,.iflow-chrome button{font-family:inherit}

/* Штатный хром Aspro скрыт на ВСЕХ страницах — его заменяет общий хром */
.header_wrap{display:none!important}
.header-wrapper{display:none!important}
#headerfixed{display:none!important}
footer:not(.foot){display:none!important}
.iflow-tri-band--top,.iflow-tri-band--footer{display:none!important}
.drag-block{display:none!important}
.inline-search-block{display:none!important}
#iflow-progress{display:none!important}
html #content{border-top:0!important}

.iflow-chrome .header{margin-top:-2px}
.iflow-chrome .iflow-pbar{position:fixed;top:0;left:0;height:3px;width:0;z-index:100;background:linear-gradient(90deg,var(--sky),var(--blue));pointer-events:none;transition:width .1s linear}
.iflow-chrome .iflow-pbar.on{box-shadow:0 0 12px rgba(76,155,232,.7)}
.iflow-chrome .topbar{background:#050f22;color:#b9cee6;font-size:13px}
.iflow-chrome .topbar .wrap{display:flex;gap:22px;align-items:center;height:40px}
.iflow-chrome .topbar .addr{color:#7f9bbd}
.iflow-chrome .topbar .sp{margin-left:auto;display:flex;gap:20px;align-items:center}
.iflow-chrome .topbar a{transition:color .2s}
.iflow-chrome .topbar a:hover{color:#fff}
@media(max-width:760px){
.iflow-chrome .topbar .addr,.iflow-chrome .topbar .hidem{display:none}
}
.iflow-chrome .header{position:sticky;top:0;z-index:50;background:rgba(8,26,52,.82);backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid rgba(120,170,225,.12);color:var(--ink);transition:height .25s}
.iflow-chrome .header .wrap{display:flex;align-items:center;gap:30px;height:76px;transition:height .25s}
.iflow-chrome .header.small .wrap{height:62px}
.iflow-chrome .brand{display:flex;align-items:center;gap:13px}
.iflow-chrome .brand .mk{width:38px;height:auto;filter:drop-shadow(0 4px 12px rgba(76,155,232,.5));transition:width .25s}
.iflow-chrome .header.small .brand .mk{width:32px}
.iflow-chrome .brand .wd{height:16px;width:auto;filter:brightness(0) invert(1);opacity:.96}
.iflow-chrome .nav{display:flex;gap:24px;margin-left:6px}
.iflow-chrome .nav a{color:#cfe0f4;font-weight:600;font-size:15px;padding:6px 0;position:relative}
.iflow-chrome .nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--sky);transition:right .25s}
.iflow-chrome .nav a:hover{color:#fff}
.iflow-chrome .nav a:hover::after{right:0}
.iflow-chrome .hcta{margin-left:auto;display:flex;gap:12px;align-items:center}
.iflow-chrome .btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15px;border-radius:12px;padding:13px 22px;cursor:pointer;border:1px solid transparent;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s;white-space:nowrap}
.iflow-chrome .btn:active{transform:translateY(1px) scale(.97)}
.iflow-chrome .btn svg{width:17px;height:17px;flex:none}
.iflow-chrome .hsearch{display:flex;align-items:center;height:44px;border-radius:12px;
  background:rgba(120,170,225,.10);border:1px solid rgba(120,170,225,.28);
  padding:0 4px 0 12px;transition:border-color .2s,background .2s}
.iflow-chrome .hsearch:focus-within{border-color:var(--sky);background:rgba(120,170,225,.16)}
.iflow-chrome .hsearch__in{width:150px;background:transparent;border:0;outline:0;color:#eaf2fb;font:600 14px system-ui;transition:width .25s}
.iflow-chrome .hsearch__in::placeholder{color:#8fabca}
.iflow-chrome .hsearch:focus-within .hsearch__in{width:210px}
.iflow-chrome .hsearch__btn{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:9px;background:transparent;color:#cfe0f4;cursor:pointer;transition:background .2s,color .2s}
.iflow-chrome .hsearch__btn:hover{background:rgba(76,155,232,.18);color:#fff}
.iflow-chrome .hsearch__btn svg{width:17px;height:17px}
@media(max-width:1100px){
.iflow-chrome .hsearch__in{width:110px}
.iflow-chrome .hsearch:focus-within .hsearch__in{width:150px}
}
@media(max-width:760px){
.iflow-chrome .hsearch{display:none}
}
.iflow-chrome .hft{position:absolute;pointer-events:none;width:0;height:0;border-style:solid;opacity:.12;
  animation:hfloat var(--fd,17s) ease-in-out var(--fdel,0s) infinite alternate}
.iflow-chrome .foot{background:#050f22;color:#8ea9c7;font-size:14px;padding:52px 0 30px}
.iflow-chrome .foot .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;margin-bottom:34px}
.iflow-chrome .foot h5{color:#dbe8f7;font-size:14px;margin:0 0 14px;letter-spacing:.02em}
.iflow-chrome .foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.iflow-chrome .foot a{color:#93aecb;transition:color .2s}
.iflow-chrome .foot a:hover{color:#eaf2fb}
.iflow-chrome .foot .fbrand{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.iflow-chrome .foot .fbrand .mk2{width:34px;height:auto;filter:none}
.iflow-chrome .foot .fbrand img{height:15px;filter:brightness(0) invert(1);opacity:.9}
.iflow-chrome .foot .copy{border-top:1px solid rgba(120,170,225,.12);padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:#6f8caa}
@media(max-width:760px){
.iflow-chrome .foot .cols{grid-template-columns:1fr 1fr}
}
@media(max-width:960px){
.iflow-chrome .nav{display:none}
}
.iflow-chrome .btn{text-transform:none;letter-spacing:normal}
.iflow-chrome .header{background:rgba(8,26,52,.82)!important;background-image:none!important;
  padding:0!important;margin:-2px 0 0!important;
  position:sticky!important;top:0!important;z-index:50!important}
.iflow-chrome .btn{line-height:1.5!important}
/* 2026-07-14 v9: счётчики сравнение/избранное/корзина в стиле превью */
.iflow-chrome .hicons{display:flex;gap:10px;align-items:center}
.iflow-chrome .hic{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;
  background:rgba(120,170,225,.10);border:1px solid rgba(120,170,225,.18);color:#cfe0f4;
  transition:transform .2s,background .2s,border-color .2s,color .2s}
.iflow-chrome .hic:hover{background:rgba(76,155,232,.20);border-color:var(--sky);color:#fff;transform:translateY(-2px)}
.iflow-chrome .hic svg{width:19px;height:19px}
.iflow-chrome .hic__n{position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;
  display:grid;place-items:center;font:800 10.5px/1 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:#dbe8f7;background:rgba(90,130,180,.45);border:1px solid rgba(8,26,52,.6);
  transition:background .2s,color .2s,box-shadow .2s}
.iflow-chrome .hic.has .hic__n{background:linear-gradient(180deg,var(--sky),var(--blue));color:#fff;box-shadow:0 4px 10px rgba(76,155,232,.45)}
.iflow-chrome .hic__n.pop{animation:iflowPop .35s cubic-bezier(.16,1,.3,1)}

@keyframes iflowPop{0%{transform:scale(.4)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
/* Выравнивание шапки: ничего не переносится, поиск гибко ужимается */
.iflow-chrome .header .wrap{flex-wrap:nowrap}
.iflow-chrome .nav{flex-wrap:nowrap;gap:clamp(13px,1.3vw,24px)}
.iflow-chrome .nav a{white-space:nowrap}
.iflow-chrome .hcta{flex-shrink:0;gap:clamp(8px,.8vw,12px)}
.iflow-chrome .hsearch{flex:0 1 auto;min-width:120px}
@media(max-width:1620px){
.iflow-chrome .hsearch__in{width:110px}
.iflow-chrome .hsearch:focus-within .hsearch__in{width:160px}
.iflow-chrome .header .wrap{gap:20px}
}
@media(max-width:1400px){
.iflow-chrome .nav a{font-size:14px}
.iflow-chrome .hsearch__in{width:84px}
.iflow-chrome .hic{width:40px;height:40px}
.iflow-chrome .header .wrap{gap:16px}
}
@media(max-width:1220px){
.iflow-chrome .hsearch__in{width:0;padding:0}
.iflow-chrome .hsearch{min-width:44px;border-color:transparent;background:rgba(120,170,225,.10)}
.iflow-chrome .hsearch:focus-within{min-width:170px}
.iflow-chrome .hsearch:focus-within .hsearch__in{width:130px;padding:0 4px}
}
@media(max-width:760px){
.iflow-chrome .hicons{display:none}
}
/* v10: с иконками контенту шапки нужен воздух — рамка топбара и шапки шире контентной
   сетки (1440 против 1200 у секций); логотип и меню не сжимаются, гибкий только поиск */
.iflow-chrome .topbar .wrap,.iflow-chrome .header .wrap{max-width:1440px}
.iflow-chrome .brand,.iflow-chrome .nav,.iflow-chrome .hicons,.iflow-chrome .hcta .btn-primary{flex-shrink:0}
.iflow-chrome .hcta{min-width:0}
.iflow-chrome .hsearch{overflow:hidden}
/* ================= v13: больше жизни у фигур и элементов ================= */
/* треугольники заметнее и разнообразнее */
.iflow-chrome .hft{opacity:.22}
.iflow-chrome .hft--b{animation-name:hfloatB}
/* контент секций поверх фигур */
.iflow-chrome .foot{position:relative;overflow:hidden}
.iflow-chrome .hero .wrap,.iflow-chrome .why .wrap,.iflow-chrome .cta .wrap,.iflow-chrome .foot .wrap,
.iflow-chrome .cats .wrap,.iflow-chrome .services .wrap{position:relative;z-index:1}
/* дрейфующие световые пятна в тёмных секциях */
.iflow-chrome .glb{position:absolute;border-radius:50%;pointer-events:none;will-change:transform;
  background:radial-gradient(circle,rgba(76,155,232,.26),rgba(46,117,182,.09) 45%,transparent 70%);
  animation:iflowDriftA var(--gd,26s) ease-in-out var(--gdel,0s) infinite}
.iflow-chrome .glb--b{animation-name:iflowDriftB}
.iflow-chrome .glb--warm{background:radial-gradient(circle,rgba(142,194,255,.16),rgba(76,155,232,.06) 45%,transparent 70%)}

@keyframes iflowDriftA{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(70px,-46px) scale(1.12)}66%{transform:translate(-52px,38px) scale(.94)}}

@keyframes iflowDriftB{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-64px,42px) scale(1.08)}66%{transform:translate(48px,-34px) scale(.92)}}
/* v17: анимация входа шапки убрана — на светлом body давала белую вспышку при перезагрузке */

/* мягкая тень прилипшей шапки */
.iflow-chrome .header{transition:box-shadow .5s ease}
.iflow-chrome .header.small{box-shadow:0 12px 34px -18px rgba(3,10,24,.55)}
.iflow-chrome .hft{animation:hswayA var(--fd,18s) ease-in-out var(--fdel,0s) infinite}
.iflow-chrome .hft--b{animation-name:hswayB}
/* ================= v16: ещё плавнее ================= */
.iflow-chrome .hft{animation-duration:calc(var(--fd,18s)*1.7)}
.iflow-chrome .glb{animation-duration:calc(var(--gd,26s)*1.4)}
/* ================= v17: стыки без щелей при любом зуме + живее треугольники ================= */
/* «подтёки» цвета топбара вверх и вниз + перекрытия -4px (1px даже при 25% зума) */
.iflow-chrome .topbar{box-shadow:0 -4px 0 0 #050f22,0 4px 0 0 #050f22}
.iflow-chrome .header{margin:-4px 0 0!important}

@keyframes hswayB2{0%{transform:translate(0,0)}25%{transform:translate(-26px,11px)}50%{transform:translate(2px,22px)}75%{transform:translate(28px,10px)}100%{transform:translate(0,0)}}

@keyframes iflowTwirl{to{rotate:360deg}}

@keyframes iflowTwirlR{to{rotate:-360deg}}
.iflow-chrome .hft{animation:hswayA2 calc(var(--fd,18s)*1.15) ease-in-out var(--fdel,0s) infinite,
  iflowTwirl calc(var(--fd,18s)*1.5) linear infinite}
.iflow-chrome .hft--b{animation-name:hswayB2,iflowTwirlR}

/* ===== поверх перенесённого: приоритеты и подвал ===== */
.iflow-chrome .header{z-index:200}
.iflow-chrome .iflow-pbar{z-index:220}
/* Aspro даёт margin ~20px всем img в footer — глушим */
.iflow-chrome .foot img{margin:0}
/* логотип ближе к названию, аккуратный бренд */
.iflow-chrome .foot .fbrand{gap:10px;align-items:center}
.iflow-chrome .foot .fbrand img:not(.mk2){height:16px;opacity:.95}
/* живые ссылки подвала */
.iflow-chrome .foot ul a{display:inline-block;transition:color .2s,transform .25s cubic-bezier(.22,.61,.36,1)}
.iflow-chrome .foot ul a:hover{transform:translateX(4px)}

/* ===== кнопки хрома (btn-primary не попал в перенос из-за границы токена) ===== */
.iflow-chrome .btn-primary{background:linear-gradient(180deg,var(--sky),var(--blue));color:#fff;
  box-shadow:0 12px 26px -12px rgba(46,117,182,.9),0 0 34px rgba(76,155,232,.28);
  border:1px solid transparent!important;text-transform:none!important}
.iflow-chrome .btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(46,117,182,1);
  background:linear-gradient(180deg,var(--sky),var(--blue));color:#fff}
.iflow-chrome .btn{text-transform:none;letter-spacing:normal;line-height:1.5!important}

/* ===== v3: чистый белый фон, заметные контакты, новая анимация нажатия ===== */
/* декор-фигуры скина на белом фоне — убраны по требованию владельца */
.iflow-geo{display:none!important}
/* почта и телефон в подвале выглядят как ссылки */
.iflow-chrome .foot .cols p a{color:#b9cee6;border-bottom:1px dashed rgba(147,174,203,.45);transition:color .2s,border-color .2s}
.iflow-chrome .foot .cols p a:hover{color:#fff;border-color:#fff}
.iflow-chrome .foot h5 a{color:inherit;transition:color .2s}
.iflow-chrome .foot h5 a:hover{color:#fff}
/* нажатие: расходящаяся волна (создаёт chrome.js) + мягкое сжатие */
.iflow-rippleband{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.iflow-ripple{position:absolute;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);
  width:0;height:0;background:radial-gradient(circle,rgba(255,255,255,.5),rgba(255,255,255,0) 65%);
  animation:iflowRipple .55s ease-out forwards}
.iflow-ripple--dark{background:radial-gradient(circle,rgba(76,155,232,.4),rgba(76,155,232,0) 65%)}
@keyframes iflowRipple{to{width:230px;height:230px;opacity:0}}
.iflow-chrome .btn:active,.iflow-chrome .hic:active{transform:translateY(1px) scale(.95);transition-duration:.08s}

/* ===== v4: фиксы по аудиту ===== */
/* потерянный при переносе keyframe: без него половина треугольников подвала не плавала */
@keyframes hswayA2{0%{transform:translate(0,0)}25%{transform:translate(30px,-14px)}50%{transform:translate(3px,-24px)}75%{transform:translate(-28px,-11px)}100%{transform:translate(0,0)}}
/* кнопка «наверх» скина не должна перекрывать адрес в нижней строке подвала */
.iflow-chrome .foot .copy{padding-right:76px}

/* ===== v5: подвал без колонки категорий + анимации подвала ===== */
.iflow-chrome .foot .cols{grid-template-columns:1.6fr 1fr 1fr}
@media(max-width:760px){.iflow-chrome .foot .cols{grid-template-columns:1fr 1fr}}
/* колонки подвала мягко поднимаются при появлении (chrome.js вешает .inview; страховки в JS) */
.iflow-chrome .foot .cols>div{opacity:0;transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.iflow-chrome .foot .cols>div:nth-child(2){transition-delay:.12s}
.iflow-chrome .foot .cols>div:nth-child(3){transition-delay:.24s}
.iflow-chrome .foot .copy{opacity:0;transition:opacity .8s ease .35s}
.iflow-chrome .foot.inview .cols>div{opacity:1;transform:none}
.iflow-chrome .foot.inview .copy{opacity:1}
/* логотип подвала оживает при наведении */
.iflow-chrome .fbrand img{transition:transform .35s cubic-bezier(.3,1.4,.4,1)}
.iflow-chrome .fbrand:hover .mk2{transform:rotate(-8deg) scale(1.08)}
/* хром, случайно попавший внутрь модалок — скрыт мгновенно (JS удалит) */
.jqmWindow .iflow-chrome,.popup .iflow-chrome{display:none!important}

/* ===== v6: прилипшая панель вкладок карточки товара =====
   Была на всю ширину окна с зазором сверху и поверх сайдбара.
   Геометрию (left/width по колонке вкладок) ведёт chrome.js. */
.product-item-detail-tabs-container-fixed.fixed{
  top:62px!important;               /* вплотную под компактной шапкой */
  z-index:40!important;             /* ниже шапки (50) и боковых панелей (390) */
  border-radius:0 0 12px 12px;
  box-shadow:0 14px 30px -18px rgba(14,35,64,.3);
  border-top:1px solid rgba(31,78,121,.08)}