/* ─────────────────────────────────────────────────────────────────────────────
   СВЕТЛАЯ ВИТРИНА — общая тема всех публичных страниц (решение владельца 28.09.2026:
   «так же примени такой стиль и такие же иконки и баннеры для всех страниц»).
   Эталон — список услуг /uslugi (коммит 7ce322cc): реалистичное оборудование на светлом
   студийном фоне, короткие HTML-подписи, светлые поверхности #f4f6f8, графит, красные кнопки.

   🔴 Всё — только под body.sc-showroom: класс ставит общий слой страницы (lib/site-visual.js,
   applySeo). Админка его не получает, и эти правила её не касаются.
   🔴 Файл подключается ПОСЛЕДНИМ в <head> — после встроенных <style> страниц. Поэтому
   !important здесь не нужен: при равной точности побеждает этот файл.
   🔴 Размеры шрифта — из существующей шкалы (12/13/14/15/16/17/18/22/24/28), новых не заводим.
   ───────────────────────────────────────────────────────────────────────────── */

.sc-showroom{
  --sv-bg:#f4f6f8;          /* светлая поверхность: баннеры, подложки фото */
  --sv-line:#e6eaee;        /* граница карточек витрины */
  --sv-ink:#14181f;         /* графит — заголовки */
  --sv-text:#4b5563;        /* основной текст подписей */
  --sv-r:16px;              /* скругление карточек */
  --sv-btn-r:12px;          /* скругление кнопок */
  --sv-shadow:0 8px 24px rgba(20,24,31,.08);
}

/* ── Фокус клавиатуры: одинаковый и заметный везде ─────────────────────────── */
.sc-showroom a:focus-visible,.sc-showroom button:focus-visible,.sc-showroom summary:focus-visible,
.sc-showroom [tabindex]:focus-visible{outline:3px solid var(--focus,#2563EB);outline-offset:2px}

/* ── Иконки набора: не сжимаются во flex-строках, стоят по базовой линии текста ── */
.sc-showroom svg.ic{flex:none;vertical-align:-.15em}

/* ── Заголовки страниц: 28 на компьютере, 24 на телефоне (главная — отдельно ниже) ── */
.sc-showroom .container h1{font-size:28px;line-height:1.2;letter-spacing:-.025em;color:var(--sv-ink)}
@media(max-width:640px){.sc-showroom .container h1{font-size:24px}}

/* ── Карточки: радиус 16, мягкая тень при наведении ──────────────────────────── */
.sc-showroom :is(.pcard,.catcard,.hart,.bundle,.artc,.acard,.seg-card,.rev,.calc-box,.calc-card,.ord,.pd-main,.bnd-cta,.srv-cta,.art-cta,.srv-nap){border-radius:var(--sv-r)}
.sc-showroom :is(.pcard,.catcard,.hart,.artc,.acard,.seg-card):hover{box-shadow:var(--sv-shadow)}

/* ── Фото товаров на светлой студийной подложке. multiply «растворяет» белый фон
   фотографии поставщика в подложке — карточки выглядят одной витриной, а не набором
   белых прямоугольников. Сама фотография настоящая и не подменяется. ──────── */
.sc-showroom :is(.pcard .pimg,.acard a.im,.pd-main){background:var(--sv-bg)}
.sc-showroom :is(.pcard .pimg img,.acard a.im img,.pd-main img){mix-blend-mode:multiply}

/* ── Кнопки действий: не меньше 44 px по высоте (попадание пальцем), радиус 12.
   Иконки в таблицах и шапке не трогаем — только кнопки-действия. ────────────── */
.sc-showroom :is(.bbtn,.bnd-add,.calc-btn,.b-go,.b-wa,.qo-btn,.sol-btn,.as-btn,.cfg-btn,.cfg-add,.fav-empty-go,.nf-cta a,.nf-search button,.cart-foot .send,.mega-all,.hbtn,.rz-go){
  min-height:44px;border-radius:var(--sv-btn-r)}
.sc-showroom :is(.bbtn,.bnd-add,.b-go,.b-wa,.fav-empty-go,.nf-cta a,.mega-all){display:inline-flex;align-items:center;justify-content:center;gap:8px}
/* кабинет: кнопки со значком спрайта — значок и текст в одну строку, высота пальца */
.sc-showroom .cab .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;border-radius:var(--sv-btn-r)}
.sc-showroom .pcta .add{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:var(--sv-btn-r)}
.sc-showroom .pcta .wa{width:44px;min-height:44px;border-radius:var(--sv-btn-r)}
/* основная кнопка — красная; тёмные «прибор/каталог» кнопки остаются графитовыми по смыслу */
.sc-showroom :is(.bbtn,.bnd-add,.b-go,.cart-foot .send){background:var(--red,#E02128);color:#fff}
.sc-showroom :is(.bbtn,.bnd-add,.b-go,.cart-foot .send):hover{background:var(--red-d,#A9131A)}

/* ── Компактный баннер темы (.sv-ban): текст слева, изображение справа ──────── */
.sv-ban{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);align-items:center;gap:8px 24px;
  margin:6px 0 20px;padding:18px 22px;background:var(--sv-bg,#f4f6f8);border:1px solid var(--sv-line,#e6eaee);
  border-radius:var(--sv-r,16px);min-width:0;overflow:hidden;max-width:1120px}
.sv-ban-t{display:flex;flex-direction:column;gap:8px;min-width:0}
.sv-k{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--rz,#273744)}
.sv-s{font-size:22px;font-weight:800;line-height:1.25;letter-spacing:-.02em;color:var(--sv-ink,#14181f)}
.sv-p{display:flex;flex-wrap:wrap;gap:6px}
.sv-p span{background:#fff;border:1px solid var(--sv-line,#e6eaee);border-radius:999px;padding:4px 12px;font-size:14px;font-weight:600;color:#2f3a43}
.sv-n{margin:0;font-size:12px;line-height:1.4;color:#5F6672}
.sv-ban-i{height:190px;min-width:0}
.sv-ban-i img{display:block;width:100%;height:100%;max-width:100%;object-fit:contain;
  mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent),linear-gradient(to bottom,transparent,#000 5%,#000 95%,transparent);
  mask-composite:intersect;-webkit-mask-composite:source-in}
/* файл изображения не загрузился (обработчик спрятал обёртку) — баннер в одну колонку */
.sv-ban:has(>.sv-ban-i[style*="none"]){grid-template-columns:minmax(0,1fr)}
/* цвет раздела — только надзаголовок и тонкая полоса слева (страница раздела) */
.sv-ban.rz-ban{border-left:3px solid var(--rz)}
@media(max-width:900px){.sv-ban{grid-template-columns:minmax(0,1fr) minmax(0,260px)}.sv-ban-i{height:160px}.sv-s{font-size:18px}}
/* телефон: изображение сверху 3:2, ниже подписи. Высота ограничена, чтобы не съедать экран. */
@media(max-width:640px){
  .sv-ban{grid-template-columns:minmax(0,1fr);padding:14px 14px 16px;margin:4px 0 16px;gap:10px}
  .sv-ban-i{order:-1;height:auto;aspect-ratio:3/2;max-height:200px;justify-self:center;width:100%}
  .sv-s{font-size:17px}.sv-p span{font-size:13px;padding:3px 10px}
}

/* Баннер владельца у раздела/категории/комплекта — тот же радиус витрины */
.sc-showroom :is(.cat-banner,.bnd-banner){border-radius:var(--sv-r)}

/* ── Главная: первый экран с изображением объекта справа ─────────────────── */
.sc-showroom .hero{background:linear-gradient(180deg,#fff,var(--sv-bg))}
.sc-showroom .hero h1{font-size:36px;line-height:1.1}
.hero-art{display:none}
@media(min-width:768px){
  .sc-showroom .hero:not(.hero-noart) .container{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);column-gap:28px;align-items:start}
  .sc-showroom .hero:not(.hero-noart) .container>*{grid-column:1;min-width:0}
  .sc-showroom .hero:not(.hero-noart) .hero-art{display:block;grid-column:2;grid-row:1/span 6;align-self:center;
    background:var(--sv-bg);border:1px solid var(--sv-line);border-radius:var(--sv-r);overflow:hidden;aspect-ratio:3/2}
  .sc-showroom .hero:not(.hero-noart) .segs{grid-column:1/-1}
  .hero-art img{display:block;width:100%;height:100%;object-fit:cover}
}
@media(min-width:1024px){.sc-showroom .hero:not(.hero-noart) .container{grid-template-columns:minmax(0,1fr) minmax(0,440px);column-gap:40px}}
@media(max-width:820px){.sc-showroom .hero h1{font-size:28px}}
@media(max-width:560px){.sc-showroom .hero h1{font-size:24px}}

/* Мини-баннеры разделов на главной: изображение на светлой подложке, подписи — HTML */
.sc-showroom .catcard.rz{background:var(--sv-bg);border-color:var(--sv-line)}
.sc-showroom .catcard.rz .rz-art{display:block;margin:4px 0 0;position:relative}
.sc-showroom .catcard.rz .rz-art img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;
  mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent),linear-gradient(to bottom,transparent,#000 4%,#000 96%,transparent);
  mask-composite:intersect;-webkit-mask-composite:source-in}
.rz-p{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 2px}
.rz-p span{background:#fff;border:1px solid var(--sv-line,#e6eaee);border-radius:999px;padding:3px 10px;font-size:13px;font-weight:600;color:#2f3a43}
.sc-showroom .catcard.rz .rz-go{display:inline-flex;align-items:center;padding:0 16px;background:var(--red,#E02128);color:#fff}
.sc-showroom .catcard.rz:hover .rz-go{background:var(--red-d,#A9131A)}
@media(min-width:1024px){.sc-showroom .catcard.rz .rz-art img{max-height:260px}}

/* 🔴 28.09.2026: по замечанию владельца популярные категории слишком крупные.
   Компактные мини-баннеры: 4 на компьютере, 3 на планшете, 2 на телефоне. */
.sc-showroom #homeCats.rz-on{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.sc-showroom #homeCats .catcard.rz{padding:14px;gap:6px}
.sc-showroom #homeCats .rz-k,.sc-showroom #homeCats .rz-s{display:none}
.sc-showroom #homeCats .catcard .nm{font-size:16px;line-height:1.3;min-height:42px;overflow-wrap:anywhere}
.sc-showroom #homeCats .rz-art{margin:0}
.sc-showroom #homeCats .rz-art img{height:128px;max-height:128px;aspect-ratio:auto;object-fit:contain}
.sc-showroom #homeCats .rz-p{margin:4px 0 0;gap:4px}
.sc-showroom #homeCats .rz-p span{font-size:12px;padding:2px 7px}
.sc-showroom #homeCats .rz-f{padding-top:8px;gap:6px;align-items:center}
.sc-showroom #homeCats .rz-go{font-size:12px;padding:0 10px}
@media(max-width:1080px){.sc-showroom #homeCats.rz-on{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){
  .sc-showroom #homeCats.rz-on{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .sc-showroom #homeCats .catcard.rz{padding:10px;gap:4px}
  .sc-showroom #homeCats .catcard .nm{font-size:14px;min-height:55px}
  .sc-showroom #homeCats .rz-art img{height:90px;max-height:90px}
  .sc-showroom #homeCats .rz-p{display:none}
  .sc-showroom #homeCats .rz-f{flex-direction:column;align-items:stretch;gap:6px}
  .sc-showroom #homeCats .rz-go{justify-content:center}
}

/* Готовые решения: изображение комплекта вместо схемы (главная и /bundle/:id) */
.sc-showroom .bsch.bph{background:var(--sv-bg);padding:12px 12px 10px}
.bph-purpose{display:block;margin-bottom:6px;color:var(--sv-ink);font-size:14px;font-weight:700}
.bph-i{display:block}
.bph-i img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:12px}
.sc-showroom .bundle .bsch.bph img{max-height:210px;object-fit:contain}

/* Обложки статей — изображения витрины */
.sc-showroom :is(.hart .hcov,.artc .im,.art-cover){background:var(--sv-bg)}

/* ── Списки подборок, преимуществ, сегментов: светлые поверхности ─────────── */
.sc-showroom :is(.seg-card,.usp .u){background:var(--sv-bg);border-color:var(--sv-line)}
.sc-showroom .seg-card .e,.sc-showroom .usp .u .e{color:var(--red,#E02128)}

/* ── Тип страницы: правовые, кабинет, избранное, сравнение, 404 — без рекламных
   баннеров, только общая тема (класс sv-legal/sv-account/sv-notfound). ───── */
.sc-showroom.sv-legal .legal-wrap{background:#fff}
.sc-showroom.sv-notfound .nf-grid a{border-radius:12px;background:var(--sv-bg);border-color:var(--sv-line);min-height:44px;display:flex;align-items:center;gap:8px}

/* ── Движение: только для тех, кто его не отключал ────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .sc-showroom *,.sc-showroom *::before,.sc-showroom *::after{transition-duration:.01ms;animation-duration:.01ms;animation-iteration-count:1;scroll-behavior:auto}
  .sc-showroom :is(.pcard,.catcard,.hart,.artc,.acard,.seg-card,.tile):hover{transform:none}
}

/* Оптовый прайс — компактное действие внутри существующего преимущества. */
.sc-showroom #homeUsp .wholesale-link{display:inline-flex;align-items:center;min-height:44px;margin-top:8px;color:var(--red-d,#A9131A);font-size:14px;font-weight:700;text-decoration:none}
.sc-showroom #homeUsp .wholesale-link:hover{text-decoration:underline}

/* 28.09.2026: услуги — мини-баннеры того же масштаба, что категории главной. */
.sc-showroom .srv-list .srvs{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;max-width:none;margin:18px 0 24px}
.sc-showroom .srv-list .srvc{padding:14px;gap:10px;min-height:0;grid-column:auto}
.sc-showroom .srv-list .srvc-img{grid-template-columns:minmax(0,1fr);grid-template-areas:"t" "g" "b";grid-template-rows:auto 1fr auto}
.sc-showroom .srv-list .srvt{gap:6px}
.sc-showroom .srv-list .srvc h2{font-size:16px;line-height:1.3}
.sc-showroom .srv-list .srvc p{font-size:13px;line-height:1.4}
.sc-showroom .srv-list .srvg{height:128px;aspect-ratio:auto;align-self:end}
.sc-showroom .srv-list .srvc .go{font-size:13px;min-height:44px;padding:0 14px;justify-self:stretch;align-self:stretch}
.sc-showroom .srv-list .srvm{font-size:12px;padding:2px 8px}
@media(max-width:1080px){.sc-showroom .srv-list .srvs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){
 .sc-showroom .srv-list .srvs{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .sc-showroom .srv-list .srvc{padding:10px;gap:8px}
 .sc-showroom .srv-list .srvc h2{font-size:14px}
 .sc-showroom .srv-list .srvc p{font-size:12px}
 .sc-showroom .srv-list .srvg{height:90px}
}

/* Сегменты аудитории — предметные мини-баннеры в масштабе компактных категорий. */
.sc-showroom .segs{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:24px}
.sc-showroom .seg-card.seg-visual{display:flex;flex-direction:column;gap:8px;padding:14px;min-width:0;overflow:hidden;text-decoration:none}
.sc-showroom .seg-visual h2{font-size:16px;line-height:1.3;min-height:42px;margin:0;overflow-wrap:anywhere}
.sc-showroom .seg-art{display:block;height:112px;min-width:0}
.sc-showroom .seg-art img{display:block;width:100%;height:100%;object-fit:contain;mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent),linear-gradient(to bottom,transparent,#000 4%,#000 96%,transparent);mask-composite:intersect}
.sc-showroom .seg-visual p{font-size:13px;line-height:1.45;margin:0 0 4px}
.sc-showroom .seg-action{display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px 10px;margin-top:auto;border-radius:12px;background:var(--red,#E02128);color:white;font-size:13px;font-weight:700;text-align:center}
.sc-showroom .seg-visual:hover .seg-action{background:var(--red-d,#A9131A)}
@media(max-width:1080px){.sc-showroom .segs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
 .sc-showroom .segs{gap:10px;margin-top:20px}
 .sc-showroom .seg-card.seg-visual{padding:10px;gap:6px}
 .sc-showroom .seg-visual h2{font-size:14px;min-height:37px}
 .sc-showroom .seg-art{height:88px}
 .sc-showroom .seg-visual p{font-size:12px}
 .sc-showroom .seg-action{font-size:12px;padding:8px 6px}
}

/* 🔴 28.09.2026: компактные хиты главной — фото не растягивается до квадрата карточки.
   30.09.2026 (владелец: «Хиты и Новинки разные по размеру, сделать одинаковыми, можно ещё чуть
   уменьшить»): то же правило и для «Новинок» — раньше у них фото оставалось квадратным и карточка
   выходила в полтора раза выше (448 против 310 px на телефоне). Фото ниже: 140→124, 118→104, 104→92. */
.sc-showroom :is(#homeHits,#homeNew){gap:12px}
.sc-showroom :is(#homeHits,#homeNew) .pcard{min-width:0}
.sc-showroom :is(#homeHits,#homeNew) .pimg{height:124px;aspect-ratio:auto;flex-shrink:0}
.sc-showroom :is(#homeHits,#homeNew) .pimg img{padding:12px;min-height:0}
.sc-showroom :is(#homeHits,#homeNew) .pbody{padding:11px;gap:5px;min-width:0}
.sc-showroom :is(#homeHits,#homeNew) .pb-name{overflow-wrap:anywhere}
.sc-showroom :is(#homeHits,#homeNew) .pb-price{padding-top:5px;flex-wrap:wrap}
.sc-showroom :is(#homeHits,#homeNew) .pb-price b{font-size:17px}
.sc-showroom :is(#homeHits,#homeNew) .pb-spec{gap:4px}
.sc-showroom :is(#homeHits,#homeNew) .pb-spec span{padding:2px 5px}
/* Одинаковая высота карточек в обоих блоках: название — ровно 3 строки (длинное — с многоточием,
   короткое держит место), метки — один ряд. Без этого соседние карточки выходили 287–356 px. */
.sc-showroom :is(#homeHits,#homeNew) .pb-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;line-height:1.25;min-height:3.75em}
.sc-showroom :is(#homeHits,#homeNew) .pb-spec{flex-wrap:wrap;overflow:hidden;max-height:22px;align-content:flex-start}
/* Строка цены: у хитов бывает старая цена рядом — место держим одинаковое, иначе блоки расходятся на 4–5 px. */
.sc-showroom :is(#homeHits,#homeNew) .pb-price{min-height:31px;align-items:center}
.sc-showroom :is(#homeHits,#homeNew) .pb-spec span{line-height:1.35}
@media(max-width:820px){
  .sc-showroom :is(#homeHits,#homeNew) .pimg{height:104px}
}
@media(max-width:560px){
  .sc-showroom :is(#homeHits,#homeNew){gap:10px}
  .sc-showroom :is(#homeHits,#homeNew) .pimg{height:92px}
  .sc-showroom :is(#homeHits,#homeNew) .pbody{padding:9px}
  .sc-showroom :is(#homeHits,#homeNew) .pb-name{font-size:13px}
  .sc-showroom :is(#homeHits,#homeNew) .badge{top:6px;left:6px;font-size:11px;padding:3px 6px;max-width:calc(100% - 12px)}
  .sc-showroom :is(#homeHits,#homeNew) .pcta{gap:5px}
  .sc-showroom :is(#homeHits,#homeNew) .pcta .add{padding:8px 5px;font-size:12px;min-width:0}
  .sc-showroom :is(#homeHits,#homeNew) .pcta .wa{flex:0 0 44px}
}

/* 🔴 28.09.2026: крупная яркая графика первого макета; бренды — четвёртый слайд. */
.sc-showroom .hero.hero-slider{padding:24px 0 30px}
.sc-showroom .hero.hero-slider .container{display:block}
.sc-showroom .hero.hero-slider h1.hero-location{font-size:14px;line-height:1.4;font-weight:500;color:#666e7b;margin:0 0 12px;max-width:none}
.hero-carousel{position:relative;border:1px solid var(--sv-line);border-radius:22px;background:#f3f5f7;overflow:hidden;touch-action:pan-y;margin-bottom:20px}
.hero-slide{position:relative;display:flex;align-items:center;min-height:410px;padding:32px 44px 58px;isolation:isolate}
.hero-slide[hidden],.hero-controls[hidden]{display:none}
.hero-copy{position:relative;z-index:1;width:46%;min-width:0}
.hero-eyebrow{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#58616d;margin:0 0 14px}
.hero-copy h2{font-size:38px;line-height:1.08;letter-spacing:-.035em;margin:0 0 16px;font-weight:800;max-width:480px}
.hero-desc{font-size:16px;line-height:1.5;color:#58616d;margin:0 0 22px;max-width:400px}
.hero-copy .hbtn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;font-size:15px}
.hero-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:-1}
.hero-controls{position:absolute;bottom:8px;left:26px;right:26px;display:flex;align-items:center;justify-content:space-between}
.hero-controls button{border:0;background:#ffffffd9;min-width:44px;height:44px;cursor:pointer;border-radius:50%;color:#4c5663;font-size:22px}
.hero-controls button:hover{background:#e5e9ee}
.hero-dots{display:flex;gap:0}
.hero-dots button{display:grid;place-items:center;background:transparent}
.hero-dots span{display:block;width:9px;height:9px;border-radius:50%;background:#bfc5cd}
.hero-dots [aria-pressed=true] span{background:var(--red);width:22px;border-radius:8px}
.hero-brands{display:flex;align-items:center;justify-content:flex-start;gap:22px;margin:0 0 15px;flex-wrap:wrap}
.hero-brands a{display:flex;align-items:center;min-height:44px;font-size:25px;font-weight:800;letter-spacing:-.05em}
.hero-brands .brand-dahua{color:#e6202a;font-style:italic}
.hero-brands .brand-hikvision{color:#d71920;font-size:22px;font-style:italic}
.hero-brands .brand-imou{color:#ee7623;font-size:30px}
.hero-brand-slide .hero-desc{margin-bottom:5px}
.sc-showroom .hero-slider .hbox{max-width:none;width:100%;margin:0 0 18px}
.sc-showroom .hero-slider .hq{margin-top:10px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:1080px){.hero-copy h2{font-size:32px}.hero-slide{padding:25px 30px 58px}.hero-brands{gap:14px}}
@media(max-width:640px){
 .sc-showroom .hero.hero-slider{padding-top:16px}
 .hero-slide{display:block;padding:24px 22px 52px;min-height:570px}
 .hero-copy{width:100%}
 .hero-copy h2{font-size:29px;max-width:360px;min-height:63px;margin-bottom:10px}
 .hero-eyebrow{font-size:10px;margin-bottom:10px}
 .hero-desc{font-size:14px;margin-bottom:14px;min-height:42px}
 .hero-copy .hbtn{font-size:14px;min-height:44px;padding:10px 18px}
 .hero-scene{top:auto;bottom:48px;height:210px;object-fit:cover;object-position:right;width:100%;z-index:0}
 .hero-controls{left:14px;right:14px;bottom:4px}
 .hero-brands{gap:18px;margin-bottom:8px}.hero-brands a{font-size:22px}.hero-brands .brand-hikvision{font-size:20px}.hero-brands .brand-imou{font-size:27px}
}

/* 🔴 29.09.2026: утверждённые реальные камеры и четыре логотипа. */
.hero-copy{width:44%}.hero-copy h2{font-size:36px}.hero-brand-slide h2{font-size:34px}
#hero-slide-0{background:linear-gradient(110deg,#f6f9fc,#fff 60%,#edf2f7)}
.real-camera-scene{position:absolute;right:12px;top:24px;width:56%;height:335px;mix-blend-mode:multiply;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:10px}
.real-camera{position:relative;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;grid-column:span 2;min-height:0;min-width:0}
.real-camera-4{grid-column:2/span 2}.real-camera-5{grid-column:4/span 2}
.real-camera-trigger{position:relative;display:flex;flex:1 1 auto;align-items:center;justify-content:center;width:100%;min-width:0;min-height:0;height:0;margin:0;padding:0;border:0;border-radius:12px;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.real-camera-frame{position:relative;display:block;flex:0 1 auto;width:auto;height:100%;max-width:100%;aspect-ratio:1/1}
.real-camera-trigger img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .22s ease,filter .22s ease}
.real-camera-led{position:absolute;left:var(--led-x);top:var(--led-y);width:var(--led-size,7px);height:var(--led-size,7px);border-radius:50%;background:var(--led-color,#f7fcff);opacity:0;transform:translate(-50%,-50%) scale(.55);box-shadow:0 0 0 0 color-mix(in srgb,var(--led-color,#f7fcff) 72%,transparent);pointer-events:none;transition:opacity .16s ease,transform .2s ease,box-shadow .2s ease}
.real-camera-trigger:hover img,.real-camera-trigger:focus-visible img,.real-camera-trigger[aria-pressed="true"] img{transform:translateY(-2px) scale(1.025);filter:drop-shadow(0 5px 5px #23344a24)}
.real-camera-trigger:hover .real-camera-led,.real-camera-trigger:focus-visible .real-camera-led,.real-camera-trigger[aria-pressed="true"] .real-camera-led{opacity:1;transform:translate(-50%,-50%) scale(1);box-shadow:0 0 5px 4px color-mix(in srgb,var(--led-color,#f7fcff) 78%,transparent),0 0 18px 10px color-mix(in srgb,var(--led-color,#f7fcff) 48%,transparent);animation:hero-camera-led-pulse 1.3s ease-in-out infinite alternate}
.real-camera-trigger:focus-visible{outline:2px solid #e31e24;outline-offset:2px}
@keyframes hero-camera-led-pulse{from{filter:brightness(.85)}to{filter:brightness(1.3)}}
.real-camera-ptz-mask,.real-camera-ptz-head{position:absolute;inset:0;opacity:0;pointer-events:none;visibility:hidden}
.real-camera-ptz-mask{left:31%;top:54%;width:44%;height:33%;inset:auto;background:#fff;border-radius:12%}
.real-camera-ptz-head{background:url('/graphics/hero/camera-real-2.jpg') center/100% 100% no-repeat;clip-path:polygon(38% 56%,62% 56%,68% 58%,70% 62%,69% 68%,70% 72%,68% 78%,63% 82%,57% 84%,50% 85%,43% 83%,37% 81%,34% 77%,32% 72%,33% 67%,34% 62%);transform-origin:51% 58%;}
.real-camera-2 .real-camera-trigger:hover img,.real-camera-2 .real-camera-trigger:focus-visible img,.real-camera-2 .real-camera-trigger[aria-pressed="true"] img{transform:none;filter:none}
.real-camera-2 .real-camera-trigger:hover .real-camera-ptz-mask,.real-camera-2 .real-camera-trigger:focus-visible .real-camera-ptz-mask,.real-camera-2 .real-camera-trigger[aria-pressed="true"] .real-camera-ptz-mask,.real-camera-2 .real-camera-trigger:hover .real-camera-ptz-head,.real-camera-2 .real-camera-trigger:focus-visible .real-camera-ptz-head,.real-camera-2 .real-camera-trigger[aria-pressed="true"] .real-camera-ptz-head{opacity:1;visibility:visible}
.real-camera-2 .real-camera-trigger:hover .real-camera-ptz-head,.real-camera-2 .real-camera-trigger:focus-visible .real-camera-ptz-head,.real-camera-2 .real-camera-trigger[aria-pressed="true"] .real-camera-ptz-head{animation:hero-ptz-scan 2s ease-in-out infinite alternate}
@keyframes hero-ptz-scan{from{transform:perspective(520px) rotateY(-12deg)}to{transform:perspective(520px) rotateY(12deg)}}
.real-camera figcaption{position:static;flex:0 0 16px;line-height:12px;max-height:16px;font-size:10px;letter-spacing:.08em;color:#66717f;background:#ffffffc7;padding:2px 6px;border-radius:4px}
.hero-brands{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%;margin-top:12px}
.hero-brands a{background:#fff;border-radius:5px;min-width:0;padding:7px;height:48px;min-height:48px;justify-content:center}
.hero-brands img{display:block;width:100%;height:auto;max-height:32px;object-fit:contain}
.hero-brand-slide .hero-copy{width:45%}
@media(max-width:640px){
 .hero-copy,.hero-brand-slide .hero-copy{width:100%}.hero-copy h2{font-size:28px}.hero-brand-slide h2{font-size:27px}
 .real-camera-scene{top:auto;bottom:50px;right:6px;width:calc(100% - 12px);height:270px;gap:6px}
 .real-camera figcaption{font-size:9px}
 .hero-brands{gap:5px;margin-bottom:8px}.hero-brands a{padding:6px;min-height:44px;height:44px}
}
@media(prefers-reduced-motion:reduce){.real-camera-trigger img,.real-camera-led{transition:none!important}.real-camera-trigger:hover .real-camera-led,.real-camera-trigger:focus-visible .real-camera-led,.real-camera-trigger[aria-pressed="true"] .real-camera-led{animation:none!important}.real-camera-2 .real-camera-trigger:hover .real-camera-ptz-head,.real-camera-2 .real-camera-trigger:focus-visible .real-camera-ptz-head,.real-camera-2 .real-camera-trigger[aria-pressed="true"] .real-camera-ptz-head{animation:none!important}}

@media(min-width:641px) and (max-width:1080px){
 .hero-slide{min-height:460px}
 .hero-copy h2,.hero-brand-slide h2{font-size:30px}
 .hero-desc{font-size:14px}
}

/* 🔴 02.10.2026: световой цикл короче 5 секунд; после него нет непрерывного мигания. */
#hero-slide-1 .catalog-motion-scene{position:absolute;inset:0;z-index:-1;pointer-events:none;transform:translate3d(var(--catalog-x,0px),var(--catalog-y,0px),0) scale(1.012);transition:transform .35s ease-out}
#hero-slide-1 .catalog-motion-scene .hero-scene{z-index:0}
.catalog-equipment-light{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.catalog-monitor,.catalog-port-lights{opacity:0}
#hero-slide-1.catalog-motion-active .catalog-monitor{animation:catalog-screen-on 4.6s ease-out both}
#hero-slide-1.catalog-motion-active .catalog-port-lights circle{animation:catalog-port-on 1.1s ease-in-out 3 both;animation-delay:.6s}
#hero-slide-1.catalog-motion-active .catalog-port-lights{opacity:1}
#hero-slide-1.catalog-motion-active .catalog-port-lights circle:nth-child(2){animation-delay:.85s}
#hero-slide-1.catalog-motion-active .catalog-port-lights circle:nth-child(3){animation-delay:1.05s}
#hero-slide-1.catalog-motion-active .catalog-port-lights circle:nth-child(4){animation-delay:1.25s}
#hero-slide-1.catalog-motion-active .hero-copy{animation:catalog-copy-in .65s ease-out both}
#hero-slide-1.catalog-motion-paused *{animation-play-state:paused!important}
@keyframes catalog-screen-on{0%,8%{opacity:0}25%,100%{opacity:.8}}
@keyframes catalog-port-on{0%,100%{opacity:0}35%,60%{opacity:.8}}
@keyframes catalog-copy-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:640px){
 #hero-slide-1 .catalog-motion-scene{top:auto;bottom:48px;height:210px;z-index:0;transform:none;transition:none}
 #hero-slide-1 .catalog-motion-scene .hero-scene{top:0;bottom:auto;height:100%;object-position:right}
 #hero-slide-1 .catalog-equipment-light{inset:0}
}
@media(prefers-reduced-motion:reduce){
 #hero-slide-1 .catalog-motion-scene{transform:none;transition:none}
 #hero-slide-1.catalog-motion-active .hero-copy,#hero-slide-1.catalog-motion-active .catalog-monitor,#hero-slide-1.catalog-motion-active .catalog-port-lights circle{animation:none}
 #hero-slide-1 .catalog-monitor,#hero-slide-1 .catalog-port-lights{opacity:0}
}

/* 🔴 02.10.2026: дополнение владельца — объектив, порты и кнопка вызывной панели. */
.catalog-camera-glint,.catalog-switch-flow,.catalog-panel-light{opacity:0}
#hero-slide-1.catalog-motion-active .catalog-camera-glint{animation:catalog-lens-glint 4.6s ease-in-out both}
#hero-slide-1.catalog-motion-active .catalog-panel-light{animation:catalog-panel-on 4.6s ease-in-out both}
#hero-slide-1.catalog-motion-active .catalog-switch-flow{stroke-dasharray:26 220;animation:catalog-switch-traffic 4.6s ease-in-out both}
@keyframes catalog-lens-glint{0%,15%,65%,100%{opacity:0}30%,45%{opacity:.5}}
@keyframes catalog-panel-on{0%,25%,100%{opacity:0}45%,65%{opacity:.8}}
@keyframes catalog-switch-traffic{0%,15%,85%,100%{opacity:0;stroke-dashoffset:32}30%{opacity:.65;stroke-dashoffset:0}75%{opacity:.65;stroke-dashoffset:-180}}
@media(prefers-reduced-motion:reduce){
 #hero-slide-1.catalog-motion-active .catalog-camera-glint,#hero-slide-1.catalog-motion-active .catalog-panel-light,#hero-slide-1.catalog-motion-active .catalog-switch-flow{animation:none;opacity:0}
}