/* Свои правки нового сайта поверх стилей боевой темы (public/iq/css/*.css — копия боя, её не трогаем:
   scripts/theme/sync.py перезаписывает). Подключается последним.

   Мобильное меню (24.09.2026, решение Артемия). На бою оно осталось от старой темы: фиолетовые плашки,
   Open Sans, розовые подложки разделов — единственное место, где вариант techspec не доехал.
   Перекрашено в язык остального сайта: тёмная поверхность, линии-разделители, Manrope капсом
   с разрядкой, акцент — голубой сигнальный цвет кнопок. Касание — не меньше 52 px. */
/* ───────────── Техспека IQ — токены (дизайн-система rev 01, 28.09.2026) ─────────────
   Единственный источник значений: цвет, шаг отступов, контейнер, углы, движение. Новые значения —
   сначала сюда. Цвета тем — в iq-theme.css (techspec) и iq-p-light.css (светлая); здесь — то, чего там нет. */
:root {
  --iq-s-1: 4px; --iq-s-2: 8px; --iq-s-3: 12px; --iq-s-4: 16px; --iq-s-5: 24px;
  --iq-s-6: 32px; --iq-s-7: 48px; --iq-s-8: 64px; --iq-s-9: 96px;
  --iq-page: 1230px; --iq-page-wide: 1440px; --iq-page-gutter: clamp(16px, 4vw, 40px);
  --iq-radius-pill: 999px; /* углы — максимум 3px (docs/design/TECHSPEC.md § 04) */
  --iq-ease-out: cubic-bezier(.23, 1, .32, 1);
  --iq-ease-move: cubic-bezier(.65, 0, .35, 1);
  --iq-dur-fast: 160ms; --iq-dur-base: 240ms; --iq-dur-slow: 400ms; --iq-dur-show: 650ms;
  --iq-label: 500 11px/1.3 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}
/* Студийная подложка фото физтовара и сцена вырезки (TECHSPEC § 01, 30.09.2026): подложка светлая в обеих
   темах — это «студия» под снимком на белом, не поверхность интерфейса. */
:root {
  --iq-plate-hi: #ffffff; --iq-plate: #f5f6f8; --iq-plate-lo: #e6e9ee; --iq-plate-ink: rgb(35 36 41 / 38%);
  --iq-plate-shadow: 0 24px 48px -28px rgb(0 0 0 / 85%); --iq-contact-shadow: rgb(0 0 0 / 70%);
}
html[data-iq-theme='light'] { --iq-plate-shadow: 0 24px 48px -28px rgb(35 36 41 / 12%); --iq-contact-shadow: rgb(35 36 41 / 22%); }
body.iq-variant-techspec { --iq-cutout-light: color-mix(in srgb, var(--iq-fg-primary) 7%, transparent); }
html[data-iq-theme='light'] body.iq-variant-techspec { --iq-cutout-light: rgb(255 255 255 / 35%); }
/* Третий уровень текста (засечки, номера, неактивное) — в тёмной теме его не было; светлая задаёт свой. */
/* Производные от акцента объявлять на body, не на :root: var() вычисляется там, где объявлен, а на :root
   --iq-action-primary ещё лаймовый (корень старой темы) — лайм уедет вниз по дереву (28.09.2026, кнопка корзины). */
body.iq-variant-techspec { --iq-fg-faint: #4d5561; --iqp-accent: var(--iq-action-primary); }

body.iq-variant-techspec .help-block {
  background: #0b0c0e;
  background-image: none;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  border-bottom: 1px solid rgba(232, 236, 240, 0.18);
}

body.iq-variant-techspec .help-block .mobile-menu > li > a,
body.iq-variant-techspec .help-block .mobile-menu > li:nth-of-type(n) > a {
  height: auto;
  min-height: 60px;
  padding: 0 20px;
  background: transparent;
  border-bottom: 1px solid rgba(232, 236, 240, 0.12);
  font: 700 15px/1.2 var(--iq-font);
  letter-spacing: 0.16em;
  color: #e8ecf0;
}

body.iq-variant-techspec .mobile-menu > li > a[aria-current='page'],
body.iq-variant-techspec .mobile-menu > li.current-menu-item > a {
  color: var(--iq-action-primary, #6ee7ff);
}

body.iq-variant-techspec .mobile-menu__catalog {
  background: #131519;
}

body.iq-variant-techspec .mobile-menu__catalog > li,
body.iq-variant-techspec .mobile-menu__catalog > li.menu-music {
  background: transparent;
  border-bottom: 1px solid rgba(232, 236, 240, 0.1);
}

body.iq-variant-techspec .mobile-menu__catalog > li > a {
  min-height: 52px;
  height: auto;
  padding: 12px 56px 12px 20px;
  font: 600 13px/1.3 var(--iq-font);
  letter-spacing: 0.12em;
  color: #e8ecf0;
}

/* Спрайт-иконки старой темы (catalog-icons.png) — фиолетовые, в тёмном меню не читаются. */
body.iq-variant-techspec .mobile-menu__catalog > li::before {
  display: none;
}

body.iq-variant-techspec .mobile-menu__more-btn {
  width: 52px;
  background: none;
}

body.iq-variant-techspec .mobile-menu__more-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--iq-action-primary, #6ee7ff);
  border-right: 2px solid var(--iq-action-primary, #6ee7ff);
  transform: translate(-70%, -50%) rotate(45deg);
}

body.iq-variant-techspec .mobile-menu__catalog .sub-menu {
  background: #0b0c0e;
}

body.iq-variant-techspec .mobile-menu__back,
body.iq-variant-techspec .mobile-menu__catalog .sub-menu li {
  list-style: none;
  border-bottom: 1px solid rgba(232, 236, 240, 0.1);
}

body.iq-variant-techspec .mobile-menu__back-btn {
  min-height: 60px;
  height: auto;
  width: 100%;
  padding-left: 48px;
  background: #131519;
  font: 700 13px/1.2 var(--iq-font);
  letter-spacing: 0.16em;
  color: var(--iq-action-primary, #6ee7ff);
}

body.iq-variant-techspec .mobile-menu__back-btn::before {
  left: 20px;
  width: 9px;
  height: 9px;
  margin-top: -5px;
  background: none;
  border-top: 2px solid var(--iq-action-primary, #6ee7ff);
  border-left: 2px solid var(--iq-action-primary, #6ee7ff);
  transform: rotate(-45deg);
}

body.iq-variant-techspec .mobile-menu__catalog .sub-menu a {
  min-height: 52px;
  height: auto;
  padding: 12px 20px;
  font: 600 13px/1.3 var(--iq-font);
  letter-spacing: 0.12em;
  color: #e8ecf0;
}

/* Без брейкпоинта эти два правила включали display:flex и на десктопе тоже: там .help-block__question
   и .help-block__favorites по умолчанию display:none (см. iq-parts.css, блок 31) — над постоянной
   верхней полосой (поиск) вылезала «Написать в поддержку» со стрелкой из style.min.css и «Избранное»,
   которых на бою в этом месте нет. Тот же 991px, что и у остального мобильного меню в этом файле. */
@media (max-width: 991px) {
  body.iq-variant-techspec .help-block__question,
  body.iq-variant-techspec .help-block__favorites {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 20px;
    border-bottom: 1px solid rgba(232, 236, 240, 0.12);
    background: transparent;
    font: 700 13px/1.2 var(--iq-font);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #e8ecf0;
  }

  body.iq-variant-techspec .help-block__question {
    color: var(--iq-action-primary, #6ee7ff);
  }
}

/* Поиск в мобильном меню: на бою — виджет плагина Ajax Search Lite, здесь — обычная форма в каталог. */
body.iq-variant-techspec .help-block__search-wrap {
  padding: 16px 20px 20px;
}

body.iq-variant-techspec .iq-search input {
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid rgba(232, 236, 240, 0.18);
  border-radius: 0;
  background: #131519;
  font: 500 15px/1.2 var(--iq-font);
  color: #e8ecf0;
}

body.iq-variant-techspec .iq-search input::placeholder {
  color: rgba(232, 236, 240, 0.5);
}

body.iq-variant-techspec .iq-search input:focus-visible {
  outline: 2px solid var(--iq-action-primary, #6ee7ff);
  outline-offset: 2px;
}

/* Формы магазина: вход, регистрация, корзина, оформление, кабинет (дизайн-проход 25.09.2026).
   Эти страницы собраны на shadcn из шаблона Payload и шли в его языке: белые скруглённые кнопки строчными,
   моноширинные подписи — на фоне остального сайта читались как чужой сервис. Приведено к языку темы:
   заголовок — Unbounded капсом (как «Новости»), кнопки — как .main-banner__cta и .btn шапки,
   поля — как поиск в шапке. Файл не в слоях, поэтому бьёт утилиты Tailwind без !important. */
.iq-page-title {
  font: 700 28px/1.05 'IQ Unbounded', 'Gotham Pro', Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: #e8ecf0;
  overflow-wrap: anywhere;
}
@media (min-width: 768px) {
  .iq-page-title { font-size: 44px; }
}

[data-slot='button'].bg-primary,
[data-slot='button'].border-input,
[data-slot='button'].bg-secondary {
  min-height: 46px;
  height: auto;
  padding: 12px 20px;
  border-radius: 2px;
  font: 700 12px/1.2 var(--iq-font, 'IQ Manrope', 'Open Sans', Arial, sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  box-shadow: none;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
[data-slot='button'].bg-primary {
  background: var(--iq-action-primary, #6ee7ff);
  color: #0b0c0e;
  border: 1px solid var(--iq-action-primary, #6ee7ff);
}
[data-slot='button'].bg-primary:hover { background: #a5f0ff; border-color: #a5f0ff; }
[data-slot='button'].border-input,
[data-slot='button'].bg-secondary {
  background: transparent;
  color: #e8ecf0;
  border: 1px solid rgba(232, 236, 240, 0.18);
}
[data-slot='button'].border-input:hover,
[data-slot='button'].bg-secondary:hover { border-color: var(--iq-action-primary, #6ee7ff); color: var(--iq-action-primary, #6ee7ff); background: transparent; }
[data-slot='button']:focus-visible { outline: 2px solid var(--iq-action-primary, #6ee7ff); outline-offset: 2px; }
/* Выключенная кнопка («Зарегистрироваться» до галочки согласия): серый вместо полупрозрачного голубого —
   иначе похожа на нажимаемую. */
[data-slot='button'].bg-primary:disabled {
  opacity: 1;
  background: rgba(232, 236, 240, 0.08);
  border-color: rgba(232, 236, 240, 0.12);
  color: rgba(232, 236, 240, 0.45);
}

[data-slot='input'],
[data-slot='textarea'],
[data-slot='select-trigger'] {
  min-height: 48px;
  border-radius: 2px;
  background: #131519;
  border: 1px solid rgba(232, 236, 240, 0.18);
  color: #e8ecf0;
  font: 500 16px/1.3 var(--iq-font, 'IQ Manrope', 'Open Sans', Arial, sans-serif); /* 16 px — iOS не зумит поле */
  box-shadow: none;
}
[data-slot='input']::placeholder,
[data-slot='textarea']::placeholder { color: rgba(232, 236, 240, 0.35); }
[data-slot='input']:focus-visible,
[data-slot='textarea']:focus-visible,
[data-slot='select-trigger']:focus-visible { border-color: var(--iq-action-primary, #6ee7ff); box-shadow: 0 0 0 1px var(--iq-action-primary, #6ee7ff); outline: none; }
[data-slot='input'][aria-invalid='true'] { border-color: #ff6b6b; }

[data-slot='label'] {
  font: 600 11px/1.3 var(--iq-font, 'IQ Manrope', 'Open Sans', Arial, sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(232, 236, 240, 0.62);
}
[data-slot='checkbox'] {
  width: 20px;
  height: 20px;
  border-radius: 2px;
  border-color: rgba(232, 236, 240, 0.35);
}
[data-slot='checkbox'][data-state='checked'] { background: var(--iq-action-primary, #6ee7ff); border-color: var(--iq-action-primary, #6ee7ff); color: #0b0c0e; }
/* Подпись к галочке — фраза, а не ярлык поля: обычный регистр, иначе «СОГЛАСЕН НА ОБРАБОТКУ…» капсом. */
[data-slot='checkbox'] ~ [data-slot='label'] {
  font: 400 14px/1.45 var(--iq-font, 'IQ Manrope', 'Open Sans', Arial, sans-serif);
  text-transform: none;
  letter-spacing: normal;
  color: rgba(232, 236, 240, 0.78);
}

/* Шапка вошедшего клиента (дизайн-проход 25.09.2026). В теме у «Выйти» не выключен блик .btn::after (у входа,
   регистрации и кабинета выключен) — слева от кнопки висело светлое пятно. «Личный кабинет» на ПК был блоком
   без отступов и центровки: текст прилипал к верху рамки и наезжал на «Выйти». Обе кнопки — как «Вход»/«Регистрация». */
body.iq-variant-techspec .header__logout-btn::after { content: none; }
body.iq-variant-techspec .header__login .header__logout-btn,
body.iq-variant-techspec .header__login .header__lk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  margin: 0;
  padding: 0 22px;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.16em;
  white-space: nowrap;
}
body.iq-variant-techspec .header__login { gap: 8px; }
@media (max-width: 1023px) {
  body.iq-variant-techspec .header__login .header__logout-btn { display: none; }
  body.iq-variant-techspec .header__login .header__lk-btn { min-height: 44px; padding: 0 12px; font-size: 11px; letter-spacing: 0.1em; }
}

/* Меню кабинета (components/AccountNav): язык ярлыков темы — Manrope капсом с разрядкой, активный пункт голубой.
   Телефон — ячейки с рамкой (сетка 3×2), ПК — колонка без рамок. */
.iq-account-nav a {
  font: 700 11px/1.2 var(--iq-font, 'IQ Manrope', 'Open Sans', Arial, sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(232, 236, 240, 0.62);
  border: 1px solid rgba(232, 236, 240, 0.14);
  border-radius: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.iq-account-nav a:hover { color: #e8ecf0; }
.iq-account-nav a[aria-current='page'] { color: var(--iq-action-primary, #6ee7ff); border-color: var(--iq-action-primary, #6ee7ff); }
@media (min-width: 768px) {
  .iq-account-nav a { border: 0; font-size: 12px; }
}

/* Выпадающее меню «Каталог» в шапке (дизайн-проход 26.09.2026, прототип owner-approved
   scratchpad/iq-wow/menu/index.html — CatalogMegaMenu.tsx). Разметка, тайминги и палитра — блоком из
   прототипа; классы получили namespace `iq-mega-*` (у прототипа были общие `.mega/.sec/.pane/.dir/...` —
   рисковали столкнуться с остальной вёрсткой сайта). Открытие/закрытие всей панели по наведению/фокусу
   на пункт «каталог» — по-прежнему CSS выше (.main-nav>li:hover .main-nav__column-submenu) и позиционирование
   этого же правила (position:fixed, top/right, ширина) не тронуты; здесь — только содержимое панели.
   Прежний спрайт-набор иконок по id пункта меню WordPress (menu-item-64238 и т.п.) остался нужен
   сайдбару и подвалу (iq-parts.css) — здесь заменён инлайновыми SVG самого прототипа. */
.iq-mega {
  --iq-mega-void: #07080a; --iq-mega-raised: #151920; --iq-mega-line: rgba(232, 236, 240, .08);
  --iq-mega-line-hi: color-mix(in srgb, var(--iq-action-primary, #6ee7ff) 28%, transparent); --iq-mega-text: #e8ecf0; --iq-mega-muted: #8a929c;
  --iq-mega-dim: #5b626b; --iq-mega-cyan: var(--iq-action-primary, #6ee7ff); --iq-mega-cyan-dim: color-mix(in srgb, var(--iq-action-primary, #6ee7ff) 12%, transparent);
  --iq-mega-gold: #c9a15a; --iq-mega-ease: var(--iq-ease-out);
  display: grid;
  grid-template-columns: 292px 1fr;
  color: var(--iq-mega-text);
  font-family: var(--iq-font, 'IQ Manrope', 'Open Sans', Arial, sans-serif);
  backdrop-filter: blur(18px);
}
.iq-mega a { color: inherit; text-decoration: none; }

/* Тема вешает на ссылки шапки (.main-nav>li a, body .main-nav a, варианты techspec/editorial) капс, разрядку,
   display:block, цвет и подчёркивание :after — внутри мега-меню всё это снимаем, специфичностью выше темы. */
html body .main-nav .iq-mega a { text-transform: none; letter-spacing: normal; font: inherit; color: inherit; position: relative; }
html body .main-nav .iq-mega a::after { content: none; }
html body .main-nav .iq-mega a:is(.iq-mega__tile, .iq-mega__dir, .iq-mega__pick, .iq-mega__big, .iq-mega__hot, .iq-mega__bpm) { display: flex; }
html body .main-nav .iq-mega a.iq-mega__variable { display: inline-flex; }
html body .main-nav .iq-mega a.iq-mega__bpm { height: 100%; }
html body .main-nav .iq-mega .iq-mega__covers a { display: block; }
/* Тарифная строка карточки подписки (26.09.2026) — тот же приём, что у соседей выше: своя строка в
   :is()-список лида не добавляем, чтобы не трогать чужую правку, но той же специфичностью восстанавливаем flex. */
html body .main-nav .iq-mega a.iq-mega__sub-variant-link { display: flex; }

/* левая колонка — разделы */
.iq-mega__rail { display: flex; flex-direction: column; gap: 2px; padding: 18px 12px; border-right: 1px solid var(--iq-mega-line); background: rgba(7, 8, 10, .35); }
.iq-mega__rail-h { padding: 6px 14px 12px; font-size: 10px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--iq-mega-dim); }
.iq-mega__sec {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 10px;
  position: relative;
  padding: 12px 14px;
  border: 0;
  border-radius: 3px;
  background: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  transition: background .18s var(--iq-mega-ease), color .18s;
}
.iq-mega__sec-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 3px; background: var(--iq-mega-raised); border: 1px solid var(--iq-mega-line); color: var(--iq-mega-muted); transition: .18s var(--iq-mega-ease); }
.iq-mega__sec-ic svg { width: 17px; height: 17px; }
.iq-mega__sec b { font-weight: 600; font-size: 15px; color: #cfd5db; }
.iq-mega__sec i { font-style: normal; font-size: 12px; color: var(--iq-mega-dim); font-variant-numeric: tabular-nums; }
.iq-mega__sec:hover { background: rgba(232, 236, 240, .03); }
.iq-mega__sec--on { background: linear-gradient(90deg, var(--iq-mega-cyan-dim), color-mix(in srgb, var(--iq-action-primary, #6ee7ff) 2%, transparent)); }
.iq-mega__sec--on::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--iq-mega-cyan); box-shadow: 0 0 12px var(--iq-mega-cyan); }
.iq-mega__sec--on .iq-mega__sec-ic { color: var(--iq-mega-cyan); border-color: var(--iq-mega-line-hi); background: color-mix(in srgb, var(--iq-action-primary, #6ee7ff) 8%, transparent); }
.iq-mega__sec--on b { color: #fff; }
.iq-mega__sec--on i { color: var(--iq-mega-cyan); }
.iq-mega__sec--new b::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 8px; vertical-align: middle; border-radius: 50%; background: var(--iq-mega-cyan); animation: iq-mega-pulse 1.8s infinite; }
@keyframes iq-mega-pulse { 50% { opacity: .25; } }
.iq-mega__rail-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--iq-mega-line); }

/* правая часть — сцена раздела */
.iq-mega__stage { position: relative; min-height: 470px; padding: 28px 32px 26px; }
.iq-mega__pane { display: none; }
.iq-mega__pane--on { display: block; animation: iq-mega-pane .26s var(--iq-mega-ease) both; }
@keyframes iq-mega-pane { from { opacity: 0; transform: translateX(8px); } }
.iq-mega__pane-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; }
.iq-mega__pane-head h3 { font-family: var(--iq-display, 'IQ Unbounded', 'Gotham Pro', Arial, sans-serif); font-weight: 600; font-size: 26px; letter-spacing: -.01em; margin: 0; }
.iq-mega__pane-head h3 span { color: var(--iq-mega-cyan); }
.iq-mega__pane-head a { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--iq-mega-muted); transition: color .15s; }
.iq-mega__pane-head a:hover { color: var(--iq-mega-cyan); }
.iq-mega__lbl { margin: 0 0 12px; font-size: 10px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--iq-mega-dim); }

.iq-mega__music { display: grid; grid-template-columns: 1fr 300px; gap: 28px; }

/* направления */
.iq-mega__dirs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 26px; }
.iq-mega__dir {
  --iq-mega-c: var(--iq-mega-cyan);
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  min-height: 84px;
  padding: 14px 16px;
  overflow: hidden;
  border-radius: 3px;
  border: 1px solid var(--iq-mega-line);
  background: var(--iq-mega-raised);
  transition: border-color .2s, transform .2s var(--iq-mega-ease);
}
.iq-mega__dir:hover { border-color: var(--iq-mega-line-hi); transform: translateY(-2px); }
.iq-mega__dir:active { transform: scale(.98); }
.iq-mega__dir-t { font-weight: 600; font-size: 15px; line-height: 1.25; }
.iq-mega__dir-t small { display: block; margin-top: 4px; font-weight: 500; font-size: 12px; color: var(--iq-mega-muted); font-variant-numeric: tabular-nums; }
.iq-mega__dir::before { content: ''; position: absolute; inset: auto -30% -60% auto; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(closest-side, var(--iq-mega-c), transparent); opacity: .08; transition: opacity .25s; }
@media (hover: hover) {
  .iq-mega__dir:hover::before { opacity: .18; }
}

/* темп */
.iq-mega__tempo { padding: 16px 16px 12px; border-radius: 3px; border: 1px solid var(--iq-mega-line); background: var(--iq-mega-void); }
.iq-mega__bpm-row { display: flex; align-items: flex-end; gap: 4px; height: 92px; }
.iq-mega__bpm { display: flex; flex: 1; flex-direction: column; justify-content: flex-end; gap: 8px; min-width: 0; cursor: pointer; }
.iq-mega__bpm-bar { height: var(--iq-mega-h); transform-origin: bottom; border-radius: 3px 3px 2px 2px; background: linear-gradient(180deg, color-mix(in srgb, var(--iq-action-primary, #6ee7ff) 55%, transparent), color-mix(in srgb, var(--iq-action-primary, #6ee7ff) 12%, transparent)); transition: filter .15s, transform .2s var(--iq-mega-ease); }
.iq-mega__bpm:hover .iq-mega__bpm-bar { filter: brightness(1.6); transform: scaleY(1.06); }
.iq-mega__bpm-n { font-size: 11px; color: var(--iq-mega-muted); text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.iq-mega__bpm:hover .iq-mega__bpm-n { color: var(--iq-mega-cyan); }
.iq-mega__tempo-cap { display: flex; justify-content: space-between; margin-top: 10px; font-size: 11px; letter-spacing: .06em; color: var(--iq-mega-dim); }
.iq-mega__variable { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 6px 12px; font-size: 13px; color: var(--iq-mega-muted); border: 1px dashed rgba(232, 236, 240, .14); border-radius: 999px; }
.iq-mega__variable:hover { color: var(--iq-mega-cyan); border-color: var(--iq-mega-line-hi); }

/* подборки справа */
.iq-mega__picks { display: flex; flex-direction: column; gap: 10px; }
.iq-mega__pick {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 112px;
  padding: 16px;
  overflow: hidden;
  border-radius: 3px;
  border: 1px solid var(--iq-mega-line);
  background: var(--iq-mega-raised);
  transition: border-color .2s, transform .2s var(--iq-mega-ease);
}
.iq-mega__pick:hover { border-color: var(--iq-mega-line-hi); transform: translateY(-2px); }
.iq-mega__pick-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .3; transition: opacity .3s, transform .6s var(--iq-mega-ease); }
.iq-mega__pick:hover .iq-mega__pick-bg { opacity: .6; transform: scale(1.04); }
.iq-mega__pick::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 20%, rgba(7, 8, 10, .92)); }
.iq-mega__pick > *:not(.iq-mega__pick-bg) { position: relative; z-index: 1; }
.iq-mega__pick-k { display: block; margin-bottom: 6px; font-size: 10px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--iq-mega-cyan); }
.iq-mega__pick b { font-family: var(--iq-display, 'IQ Unbounded', 'Gotham Pro', Arial, sans-serif); font-weight: 600; font-size: 17px; line-height: 1.15; }
.iq-mega__pick small { display: block; margin-top: 4px; font-size: 12px; color: var(--iq-mega-muted); }
.iq-mega__pick--gold .iq-mega__pick-k { color: var(--iq-mega-gold); }
.iq-mega__pick--one b { font-size: 30px; }

/* оборудование */
.iq-mega__eqp { display: grid; grid-template-columns: 1fr 330px; gap: 28px; }
.iq-mega__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.iq-mega__tile { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-height: 78px; padding: 14px; border-radius: 3px; border: 1px solid var(--iq-mega-line); background: var(--iq-mega-raised); transition: border-color .2s, transform .2s var(--iq-mega-ease); }
.iq-mega__tile:hover { border-color: var(--iq-mega-line-hi); transform: translateY(-2px); }
.iq-mega__tile b { font-weight: 600; font-size: 14px; line-height: 1.3; }
.iq-mega__tile i { font-style: normal; font-size: 12px; color: var(--iq-mega-dim); font-variant-numeric: tabular-nums; }
.iq-mega__tile:hover i { color: var(--iq-mega-cyan); }
.iq-mega__hot { display: flex; flex-direction: column; overflow: hidden; border-radius: 3px; border: 1px solid rgba(201, 161, 90, .35); background: #0d0b08; }
.iq-mega__hot-photo { position: relative; height: 210px; background-size: cover; background-position: center; }
.iq-mega__hot-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, #0d0b08); }
.iq-mega__hot-body { padding: 4px 18px 18px; }
.iq-mega__hot-k { font-size: 10px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--iq-mega-gold); }
.iq-mega__hot-body b { display: block; margin: 8px 0 6px; font-family: var(--iq-display, 'IQ Unbounded', 'Gotham Pro', Arial, sans-serif); font-weight: 600; font-size: 19px; }
.iq-mega__hot-body p { font-size: 13px; line-height: 1.5; color: #a39a86; }
.iq-mega__hot-price { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; }
.iq-mega__hot-price strong { font-family: var(--iq-display, 'IQ Unbounded', 'Gotham Pro', Arial, sans-serif); font-size: 22px; color: var(--iq-mega-gold); }
.iq-mega__hot-price > span { font-size: 12px; color: #a39a86; }
.iq-mega__thumbs { display: flex; gap: 8px; margin-top: 14px; }
.iq-mega__thumbs span { flex: 1; height: 54px; border-radius: 3px; background-size: cover; background-position: center; border: 1px solid rgba(201, 161, 90, .2); }

.iq-mega__simple { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.iq-mega__big { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 180px; padding: 20px; overflow: hidden; border-radius: 3px; border: 1px solid var(--iq-mega-line); background: var(--iq-mega-raised); transition: border-color .2s, transform .2s var(--iq-mega-ease); }
.iq-mega__big:hover { border-color: var(--iq-mega-line-hi); transform: translateY(-2px); }
.iq-mega__big b { font-family: var(--iq-display, 'IQ Unbounded', 'Gotham Pro', Arial, sans-serif); font-weight: 600; font-size: 20px; }
.iq-mega__big small { display: block; margin-top: 6px; font-size: 13px; color: var(--iq-mega-muted); }
.iq-mega__big--wide { grid-column: span 2; }

/* Подписки (26.09.2026, вместо «Одежды») — те же .iq-mega__simple/.iq-mega__big, что у остальных панелей,
   без новых шрифтов и цветов: две карточки на всю ширину и список тарифных строк внутри вместо одной ссылки. */
.iq-mega__simple--sub { grid-template-columns: repeat(2, 1fr); }
.iq-mega__sub { justify-content: flex-start; }
.iq-mega__sub-variants { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.iq-mega__sub-variant-link { justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 12px; border-radius: 3px; border: 1px solid var(--iq-mega-line); font-size: 13px; color: var(--iq-mega-text); transition: border-color .2s, background .2s; }
.iq-mega__sub-variant-link:hover { border-color: var(--iq-mega-line-hi); background: rgba(232, 236, 240, .03); }
.iq-mega__sub-permonth { font-size: 11px; color: var(--iq-mega-muted); white-space: nowrap; }

.iq-mega__covers { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 14px; }
.iq-mega__covers a { min-width: 0; transition: transform .2s var(--iq-mega-ease); }
/* Обложка + название под ней, две строки (владелец 26.09.2026: панель «Новинок» была пустой, 6 немых квадратов). */
.iq-mega__cover-img { display: block; aspect-ratio: 1; border-radius: 3px; background-size: cover; background-position: center; border: 1px solid var(--iq-mega-line); transition: border-color .2s; }
.iq-mega__cover-t { display: -webkit-box; margin-top: 7px; overflow: hidden; font-size: 11.5px; line-height: 1.3; color: var(--iq-mega-dim); -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.iq-mega__covers a:hover { transform: translateY(-3px); }
.iq-mega__covers a:hover .iq-mega__cover-img { border-color: var(--iq-mega-line-hi); }
.iq-mega__covers a:hover .iq-mega__cover-t { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .iq-mega__sec--new b::after { animation: none; }
}
/* Ширина панели (min(1250px, 100vw - 32px)) под сетку 292px + правую колонку — планшет уже не влезает
   в грид прототипа построчно: разделы и обложки складываются в один столбец. */
@media (width <= 900px) {
  .iq-mega { grid-template-columns: 1fr; }
  .iq-mega__music, .iq-mega__eqp { grid-template-columns: 1fr; }
  .iq-mega__tiles, .iq-mega__simple { grid-template-columns: repeat(2, 1fr); }
  .iq-mega__covers { grid-template-columns: repeat(3, 1fr); }
}
/* Клавиатура: `:hover` не срабатывает при Tab — тот же набор свойств, что и для наведения мышью
   (правило темы .main-nav>li:hover .main-nav__column-submenu). */
.main-nav > li:focus-within .main-nav__column-submenu { visibility: visible; opacity: 1; z-index: 10; }

/* Движение (дизайн-проход 26.09.2026, отбор по частоте и смыслу — см. find-animation-opportunities).
   Только transform и opacity; при prefers-reduced-motion — без сдвигов и масштаба. */

/* Отклик на нажатие: на телефоне у кнопок не было никакого :active — нажатие не ощущалось. */
[data-slot='button']:active:not(:disabled),
.btn:active {
  transform: scale(0.97);
}
.btn { transition: transform 160ms var(--iq-ease-out); }
/* У .catalog-item__cart в теме transform:none!important — сжимаем содержимое кнопки. */
.catalog-item__cart:active > * { transform: scale(0.94); transition: transform 120ms var(--iq-ease-out); }
.catalog-item__like:active::before { transform: scale(0.85); }

/* Мобильное меню открывается состоянием React (inline display:block) — раньше появлялось рывком. Закрытие мгновенное. */
@keyframes iq-menu-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
.help-block.js--mobile-menu[style*='block'] { animation: iq-menu-in 200ms var(--iq-ease-out) both; }

/* Ошибка формы (FormError): мягкое появление вместо скачка текста. */
@keyframes iq-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
.text-error { animation: iq-fade-in 180ms var(--iq-ease-out) both; }

/* Сердечко избранного: короткий «толчок», когда товар добавлен. */
@keyframes iq-heart-pop {
  0% { transform: scale(0.85); }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
button[aria-pressed='true'] > svg.fill-current { animation: iq-heart-pop 260ms var(--iq-ease-out); }

@media (prefers-reduced-motion: reduce) {
  [data-slot='button']:active:not(:disabled),
  .btn:active,
  .catalog-item__cart:active > *,
  .catalog-item__like:active::before { transform: none; }
  .help-block.js--mobile-menu[style*='block'],
  .text-error { animation: iq-fade-in-plain 150ms linear both; }
  button[aria-pressed='true'] > svg.fill-current { animation: none; }
}
@keyframes iq-fade-in-plain { from { opacity: 0; } to { opacity: 1; } }

/* ── Плашка администратора (src/components/AdminBar) ─────────────────────────────────────────────
   Видна только админу. С 27.09.2026 — в палитре A админки «Приборная панель» (графит + оранжевый #ff5a1f,
   custom.scss --lx-*), а не прежние лак и золото «люкс» (владелец: «коричневые, не в нашей гамме»).
   Имена переменных --iq-gold* оставлены — на них завязаны правила ниже. Липкая сверху. */
:root {
  --iq-adminbar-h: 40px;
  --iq-gold: #ff5a1f;
  --iq-gold-hi: #ff7a45;
  --iq-ivory: #e5e4df;
  --iq-ivory-muted: #8f8e87;
}
.iq-adminbar {
  position: sticky;
  top: 0;
  z-index: 1001;
  height: var(--iq-adminbar-h);
  color: var(--iq-ivory);
  background: #161615;
  font: 500 13px/1 Manrope, system-ui, sans-serif;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 24px #00000059;
  animation: iq-adminbar-in 260ms var(--iq-ease-out) both;
}
.iq-adminbar::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--iq-gold);
  opacity: 0.8;
}
.iq-adminbar__in {
  display: flex;
  align-items: center;
  gap: 22px;
  height: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
}
.iq-adminbar a { color: inherit; text-decoration: none; }
.iq-adminbar__brand { display: flex; align-items: center; gap: 9px; color: var(--iq-gold) !important; }
.iq-adminbar__mark { width: 16px; height: 16px; flex: none; color: var(--iq-gold); }
.iq-adminbar__title { font-weight: 800; font-size: 14px; letter-spacing: 0.14em; }
.iq-adminbar__sub {
  padding-left: 10px;
  border-left: 1px solid #ff5a1f4d;
  color: var(--iq-ivory-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.iq-adminbar__nav { display: flex; gap: 18px; }
.iq-adminbar__nav a { position: relative; color: var(--iq-ivory-muted); transition: color 160ms var(--iq-ease-out); }
.iq-adminbar__nav a::after {
  content: '';
  position: absolute;
  inset: auto 0 -6px;
  height: 1px;
  background: var(--iq-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms var(--iq-ease-out);
}
.iq-adminbar__stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-left: auto;
  white-space: nowrap;
}
.iq-adminbar__stat-label { color: var(--iq-ivory-muted); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
.iq-adminbar__stat-num { color: var(--iq-gold-hi); font-weight: 700; font-variant-numeric: tabular-nums; }
.iq-adminbar__stat-meta { color: var(--iq-ivory-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.iq-adminbar__edit {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 14px;
  border: 1px solid #ff5a1f99;
  border-radius: 999px;
  color: var(--iq-gold-hi) !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: background-color 160ms var(--iq-ease-out), color 160ms var(--iq-ease-out), transform 160ms var(--iq-ease-out);
}
.iq-adminbar__close {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-right: -6px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--iq-ivory-muted);
  cursor: pointer;
  transition: color 160ms var(--iq-ease-out), transform 160ms var(--iq-ease-out);
}
.iq-adminbar__close svg { width: 14px; height: 14px; }
.iq-adminbar__edit:active, .iq-adminbar__close:active, .iq-adminpill:active { transform: scale(0.96); }
.iq-adminbar a:focus-visible, .iq-adminbar button:focus-visible, .iq-adminpill:focus-visible {
  outline: 1px solid var(--iq-gold-hi);
  outline-offset: 3px;
  border-radius: 3px;
}
@media (hover: hover) and (pointer: fine) {
  .iq-adminbar__nav a:hover { color: var(--iq-ivory); }
  .iq-adminbar__nav a:hover::after { transform: scaleX(1); }
  .iq-adminbar__edit:hover { background: var(--iq-gold); color: #1b150b !important; }
  .iq-adminbar__close:hover { color: var(--iq-gold-hi); }
  .iq-adminpill:hover { border-color: var(--iq-gold-hi); }
}
.iq-adminpill {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 1001;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #ff5a1f80;
  border-radius: 50%;
  background: #0d0b08e6;
  color: var(--iq-gold);
  box-shadow: 0 6px 18px #00000073;
  cursor: pointer;
  transition: border-color 160ms var(--iq-ease-out), transform 160ms var(--iq-ease-out);
}
.iq-adminpill .iq-adminbar__mark { width: 16px; height: 16px; }
body.iq-header-sticky:has(.iq-adminbar) .header { top: var(--iq-adminbar-h); }
@keyframes iq-adminbar-in { from { opacity: 0; transform: translateY(-100%); } }
@media (max-width: 760px) {
  :root { --iq-adminbar-h: 44px; }
  .iq-adminbar__in { gap: 14px; padding: 0 16px; }
  .iq-adminbar__sub, .iq-adminbar__wide, .iq-adminbar__stat-label { display: none; }
  .iq-adminbar__stat-meta { font-size: 11px; }
  .iq-adminbar__close { width: 36px; height: 36px; }
  .iq-adminbar__edit { height: 30px; padding: 0 12px; }
}
@media (max-width: 400px) {
  .iq-adminbar__stat-meta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .iq-adminbar { animation-name: iq-fade-in-plain; }
}

/* ── Вход через VK ID / Яндекс ID (src/components/iq/auth/OAuthButtons) ─────────────────────── */
.iq-oauth { margin-top: 28px; }
.iq-oauth__sep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  color: #ffffff80;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.iq-oauth__sep::before, .iq-oauth__sep::after { content: ''; flex: 1; height: 1px; background: #ffffff1f; }
.iq-oauth__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.iq-oauth__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid #ffffff24;
  border-radius: 2px;
  background: linear-gradient(180deg, #ffffff0f, #ffffff05);
  color: #fff !important;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none !important;
  overflow: hidden;
  transition: border-color 200ms var(--iq-ease-out), transform 160ms var(--iq-ease-out), box-shadow 200ms var(--iq-ease-out);
}
.iq-oauth__btn svg { width: 24px; height: 24px; flex: none; }
.iq-oauth__btn::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 200ms var(--iq-ease-out);
  pointer-events: none;
}
.iq-oauth__btn--vk::before { background: radial-gradient(120% 140% at 0% 50%, #0077ff33, transparent 60%); }
.iq-oauth__btn--yandex::before { background: radial-gradient(120% 140% at 0% 50%, #fc3f1d33, transparent 60%); }
.iq-oauth__btn:active { transform: scale(0.97); }
.iq-oauth__btn:focus-visible { outline: 2px solid var(--iq-action-primary, #6ee7ff); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .iq-oauth__btn:hover::before { opacity: 1; }
  .iq-oauth__btn--vk:hover { border-color: #0077ff99; box-shadow: 0 8px 24px #0077ff26; }
  .iq-oauth__btn--yandex:hover { border-color: #fc3f1d99; box-shadow: 0 8px 24px #fc3f1d26; }
}
@media (max-width: 360px) { .iq-oauth__row { grid-template-columns: 1fr; } }

/* ── Живая обложка: эквалайзер играющего трека (src/components/iq/player/LiveEqualizer, CatalogItem) ──
   .catalog-item__image уже position:relative и overflow:hidden в базовой теме — просто ложимся поверх.
   Без --live (анализатор недоступен: CORS/трек ещё не начался) столбики раскачивает keyframe ниже;
   с --live transform на каждый столбик пишет JS покадрово (equalizerBus). Только transform/opacity. */
.iq-cover-eq {
  position: absolute;
  inset: auto 10px 10px;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 32px;
  padding: 6px 6px 4px;
  border-radius: 3px;
  background: rgba(6, 6, 14, 0.55);
  pointer-events: none;
}
.iq-cover-eq span {
  flex: 1;
  min-width: 2px;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--iq-action-signal), var(--iq-action-primary));
  transform: scaleY(0.15);
  transform-origin: bottom;
  transition: transform 90ms linear;
}
.iq-cover-eq:not(.iq-cover-eq--live) span { animation: iq-cover-eq-fallback 1.1s ease-in-out infinite; transition: none; }
.iq-cover-eq:not(.iq-cover-eq--live) span:nth-child(1) { animation-delay: -1.05s; }
.iq-cover-eq:not(.iq-cover-eq--live) span:nth-child(2) { animation-delay: -0.35s; }
.iq-cover-eq:not(.iq-cover-eq--live) span:nth-child(3) { animation-delay: -0.9s; }
.iq-cover-eq:not(.iq-cover-eq--live) span:nth-child(4) { animation-delay: -0.2s; }
.iq-cover-eq:not(.iq-cover-eq--live) span:nth-child(5) { animation-delay: -0.7s; }
.iq-cover-eq:not(.iq-cover-eq--live) span:nth-child(6) { animation-delay: -1.15s; }
.iq-cover-eq:not(.iq-cover-eq--live) span:nth-child(7) { animation-delay: -0.5s; }
.iq-cover-eq:not(.iq-cover-eq--live) span:nth-child(8) { animation-delay: -0.05s; }
.iq-cover-eq:not(.iq-cover-eq--live) span:nth-child(9) { animation-delay: -0.8s; }
.iq-cover-eq:not(.iq-cover-eq--live) span:nth-child(10) { animation-delay: -0.4s; }
@keyframes iq-cover-eq-fallback {
  0%, 100% { transform: scaleY(0.18); }
  50% { transform: scaleY(1); }
}
/* prefers-reduced-motion: LiveEqualizer рендерит --static вместо --live/фолбэка — неподвижный силуэт. */
.iq-cover-eq--static span { animation: none; transition: none; }
.iq-cover-eq--static span:nth-child(odd) { transform: scaleY(0.6); }
.iq-cover-eq--static span:nth-child(even) { transform: scaleY(0.32); }

/* ── «Отбей темп» рядом с BPM-фасетами (src/components/iq/catalog/TapTempo) ─────────────────────── */
.iq-tap-tempo__pad {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 92px;
  height: 92px;
  margin: 6px 0 14px;
  border: 1px solid var(--iq-line);
  border-radius: 50%;
  background: radial-gradient(120% 120% at 50% 20%, color-mix(in srgb, var(--iq-action-signal) 18%, transparent), transparent 70%);
  color: var(--iq-ink);
  font-family: var(--iq-font);
  cursor: pointer;
  transition: transform 120ms var(--iq-ease-out), border-color 200ms var(--iq-ease-out), box-shadow 200ms var(--iq-ease-out);
}
.iq-tap-tempo__pad b { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.iq-tap-tempo__pad span { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--iq-muted); }
.iq-tap-tempo__pad:active,
.iq-tap-tempo__pad.is-pulsing {
  transform: scale(0.94);
  border-color: var(--iq-action-signal);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--iq-action-signal) 22%, transparent);
}
.iq-tap-tempo__pad:focus-visible { outline: 2px solid var(--iq-action-signal); outline-offset: 4px; }
.iq-tap-tempo__result { margin: 0 0 10px; color: var(--iq-muted); font: 600 13px/1.4 var(--iq-font); }
.iq-tap-tempo__result .iq-filter-chip { margin-left: 8px; }
@media (prefers-reduced-motion: reduce) {
  .iq-cover-eq span { transition: none; }
  .iq-tap-tempo__pad, .iq-tap-tempo__pad.is-pulsing { transition: none; transform: none; }
}

/* ── Пустые «Избранное» и «Мои загрузки» (favorites/downloads page.tsx) ──────────────────────────── */
.iq-empty-state__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 3px;
  background: radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--iq-action-signal) 24%, transparent), transparent 70%);
  color: var(--iq-action-signal);
  animation: iq-empty-in 420ms var(--iq-ease-out) both;
}
.iq-empty-state__icon svg { width: 24px; height: 24px; }
@keyframes iq-empty-in {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .iq-empty-state__icon { animation-name: iq-fade-in-plain; }
}

/* ── Шире колонка сайта на больших экранах (26.09.2026, Артемий: «чёрных полей слева и справа меньше») ──────
   Тема держала всё в 1200 px. От 1280 px экрана — до 1520 px, края шапки, крошек, каталога, текста и подвала
   совпадают. Текст SEO-блока остаётся читаемой ширины. */
@media (min-width: 1280px) {
  :root { --iq-shell: min(1520px, calc(100vw - 80px)); }
  .help-block__inner,
  .header__inner,
  .breadcrumbs__inner,
  .main-catalog__inner,
  .simple-text__inner,
  .footer__inner {
    width: var(--iq-shell) !important;
    max-width: var(--iq-shell) !important;
    margin-inline: auto !important;
    box-sizing: border-box;
  }
  .simple-text__inner > * { max-width: 78ch; }
  /* Обёртка крошек у темы — 1320 px по центру: шире неё колонка вылезала вправо (прокрутка на 60 px при 1600). */
  .breadcrumbs { width: 100% !important; max-width: none !important; margin-inline: 0 !important; }
}
@media (min-width: 1560px) {
  body.post-type-archive-product .main-catalog__list,
  body.tax-product_cat .main-catalog__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Сетка «spec sheet»: линии между карточками — тенью самих карточек, а не заливкой сетки. Раньше фон сетки был
   цветом линий, и пустые клетки последнего ряда светились серым прямоугольником. */
body.iq-variant-techspec.post-type-archive-product .main-catalog__list,
body.iq-variant-techspec.tax-product_cat .main-catalog__list,
body.iq-variant-techspec.home .main-catalog__list { background: transparent; }
body.iq-variant-techspec.post-type-archive-product .main-catalog__list > .catalog-item,
body.iq-variant-techspec.tax-product_cat .main-catalog__list > .catalog-item,
body.iq-variant-techspec.home .main-catalog__list > .catalog-item { box-shadow: 0 0 0 1px var(--iq-border-subtle); }
/* С 768 px у сетки рамка 1px и нулевой отступ: заголовок, «Каталог», плашка подписки и подбор стояли вплотную
   к левой линии (26.09.2026, снимок Артемия). Отступ — только у служебных строк; карточки остаются в сетке линий. */
@media (min-width: 768px) {
  body.iq-variant-techspec:is(.post-type-archive-product, .tax-product_cat) .main-catalog__list > :not(.catalog-item) {
    width: auto;
    margin-inline: clamp(20px, 2.4vw, 32px);
  }
}
/* Колонка разделов короче сетки: на длинной странице слева оставалась чёрная пустота (26.09.2026, снимок Артемия) —
   меню едет вместе с прокруткой, пока сетка не кончится. Липнет колонка целиком: sticky у каждого ребёнка
   (`> *`) на /catalog/ склеивал меню и фильтры «Жанр»/«Темп» в одной точке (26.09.2026, второй снимок).
   С фильтрами колонка выше экрана — там не липнет, иначе низ фильтров не долистать. */
@media (min-width: 1024px) {
  .main-catalog__sidebar-wrapper:not(:has(.iq-discovery)) { position: sticky; top: calc(var(--iq-adminbar-h, 0px) + 96px); }
}

/* ── «Подбор под занятие» (idea #4, iq-wow/index.html §04; src/app/(app)/podbor, PodborClient) ──────────────
   Своя разметка (bodyClass: 'page'), не main-catalog — телефон первым, поэтому .iq-podbor__layout одна
   колонка ниже 860px, чипы и кнопка «Слушать» переиспользуют .iq-filter-chip/.iq-tap-tempo__pad темы. */
.iq-podbor { padding: 32px 0 64px; }
.iq-podbor__inner { width: min(1200px, 100% - 32px); margin-inline: auto; }
.iq-podbor__eyebrow { display: block; margin-bottom: 8px; color: var(--iq-action-signal); font: 700 11px/1 var(--iq-font); letter-spacing: .16em; text-transform: uppercase; }
.iq-podbor__lead { max-width: 62ch; margin: 14px 0 0; color: var(--iq-fg-muted); font: 500 15px/1.5 var(--iq-font); }
.iq-podbor__layout { display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 28px; }
.iq-podbor__controls { display: grid; align-content: start; gap: 22px; padding: 20px; border: 1px solid var(--iq-border-subtle); border-radius: var(--iq-radius-panel); background: var(--iq-card-bg); }
.iq-podbor__field { display: grid; gap: 10px; }
.iq-podbor__label { color: var(--iq-fg-muted); font: 600 12px/1.3 var(--iq-font); letter-spacing: .04em; }
.iq-podbor__label b { color: var(--iq-fg-primary); font-weight: 700; }
.iq-podbor__chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* Ползунки длительности и темпа: сама дорожка — цель касания (44px), не только ползунок. */
.iq-podbor__range { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; }
.iq-podbor__range::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: var(--iq-border-subtle); }
.iq-podbor__range::-moz-range-track { height: 6px; border-radius: 999px; background: var(--iq-border-subtle); }
.iq-podbor__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -9px;
  border: 3px solid var(--iq-bg-canvas);
  border-radius: 50%;
  background: var(--iq-action-signal);
  box-shadow: 0 0 0 1px var(--iq-action-signal);
  transition: transform 160ms var(--iq-ease-out);
}
.iq-podbor__range::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: 3px solid var(--iq-bg-canvas);
  border-radius: 50%;
  background: var(--iq-action-signal);
  box-shadow: 0 0 0 1px var(--iq-action-signal);
}
.iq-podbor__range:active::-webkit-slider-thumb { transform: scale(1.12); }
.iq-podbor__range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--iq-action-signal); outline-offset: 3px; }

.iq-podbor__results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-content: start; }
.iq-podbor__card { display: flex; gap: 12px; padding: 10px; border: 1px solid var(--iq-border-subtle); border-radius: var(--iq-radius-media); background: var(--iq-card-bg); }
.iq-podbor__cover { position: relative; flex: none; width: 64px; height: 64px; overflow: hidden; border-radius: 3px; background: var(--iq-bg-surface-raised); }
.iq-podbor__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.iq-podbor__cover-fallback { display: block; width: 100%; height: 100%; }
.iq-podbor__play {
  position: absolute;
  inset: auto 6px 6px auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(6, 6, 14, .68);
  color: var(--iq-fg-primary);
  cursor: pointer;
}
.iq-podbor__play svg { fill: currentColor; }
.iq-podbor__play.is-playing { background: var(--iq-action-signal); color: var(--iq-bg-canvas); }
/* Вся колонка — одна ссылка (PodborClient), не только название: цель касания карточки на телефоне ≥44px. */
.iq-podbor__info { display: grid; min-width: 0; align-content: center; gap: 4px; text-decoration: none; }
.iq-podbor__name { overflow: hidden; color: var(--iq-fg-primary); font: 700 13px/1.25 var(--iq-font); text-overflow: ellipsis; white-space: nowrap; }
.iq-podbor__info:hover .iq-podbor__name { color: var(--iq-action-signal); }
.iq-podbor__specs { color: var(--iq-fg-muted); font: 600 11px/1.3 var(--iq-font); }
.iq-podbor__match { color: var(--iq-action-primary); font: 900 12px/1 var(--iq-display); }
.iq-podbor__empty { grid-column: 1 / -1; margin: 0; padding: 24px; border: 1px dashed var(--iq-border-subtle); border-radius: var(--iq-radius-panel); color: var(--iq-fg-muted); font: 500 14px/1.5 var(--iq-font); }

.iq-podbor-cta { margin-top: 16px; }

@media (min-width: 860px) {
  .iq-podbor__layout { grid-template-columns: 340px 1fr; align-items: start; }
  .iq-podbor__results { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .iq-podbor__results { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .iq-podbor__range::-webkit-slider-thumb { transition: none; }
}

/* ── «В сторис» на карточке каталога (CardActions/StoryShareButton, идея №5, 26.09.2026) ────────────────
   Тонкая кнопка-строка под парой избранное/корзина — только у music/video. Своего разворота на два столбца
   не требует (в отличие от .catalog-item__buttons-wrap), поэтому не встроена в тот блок. */
.catalog-item__story {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 8px 0;
  border: 1px solid var(--iq-hair-strong, #ffffff26);
  border-radius: 3px;
  background: none;
  color: var(--iq-fg-muted, #8b93a3);
  font: 600 11px/1 var(--iq-font, inherit);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
}
.catalog-item__story:disabled { opacity: 0.5; cursor: default; }
.catalog-item__story:hover:not(:disabled) { color: var(--iq-fg-primary, #eef1f6); border-color: var(--iq-action-signal, var(--iq-cyan, var(--iq-action-primary, #6ee7ff))); }

/* ── Полоска темпа в липком плеере (PlayerProvider/StickyPlayer, идея №6 «Живой темп», 26.09.2026) ──────
   16 шагов по 1/4 такта, шаг подсвечивается в реальном времени по audio.currentTime (компонент TempoStrip),
   не отдельный decor-«пульс» рядом (.iq-sticky-player__pulse). Высота предельно тонкая: полоска — новый
   третий элемент колонки .iq-sticky-player__track, добавляет её строке ~10 px (свой gap:6px колонки + 4 px
   высоты), в min-height плеера (66–74 px) укладывается без роста блока. Не рендерится, пока bpm не определён
   (переменный темп в названии) — trackSpecs(mix.title).bpm тогда 0. */
.iq-tempo-strip { display: flex; align-items: center; gap: 2px; height: 4px; }
.iq-tempo-strip i { flex: 1 1 0; height: 100%; border-radius: 2px; background: #ffffff1f; transition: background-color 60ms linear; }
.iq-tempo-strip i.iq-tempo-strip__accent { background: #ffffff33; }
.iq-tempo-strip i.is-on { background: var(--iq-cyan); }
.iq-tempo-strip i.iq-tempo-strip__accent.is-on { background: var(--iq-color-magenta, #ff2e97); }
@media (prefers-reduced-motion: reduce) {
  /* Точки остаются статичными по смыслу задачи: подсветка переключается мгновенно, без анимации перехода. */
  .iq-tempo-strip i { transition: none; }
}

/* Главная: 16 товаров в 4 колонки ровно (в 5 последний оставался один в ряду), карточки ряда одной высоты. */
@media (min-width: 1280px) {
  body.iq-variant-techspec.home .main-catalog__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
body.iq-variant-techspec.home .main-catalog__list,
body.iq-variant-techspec.post-type-archive-product .main-catalog__list,
body.iq-variant-techspec.tax-product_cat .main-catalog__list { align-items: stretch; }

/* Дизайн-проход 26.09.2026 (замеры на бою pageshot: 404 — Manrope 28.8px без капса; подзаголовки описания
   товара — 14px как текст; h2 страницы товара — 22/26/38px; SEO-текст каталога — Open Sans 15px, lh 1.4;
   подписи 9–11px на телефоне). */

/* 404 (not-found.tsx): заголовок как h1 остальных страниц — Unbounded капсом. */
body.iq-variant-techspec .container.py-28 > h1:first-of-type {
  font: 700 clamp(28px, 4vw, 40px) / 1.1 var(--iq-display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/* Заголовки разделов страницы товара — одна шкала вместо 22/26/38px. */
body.iq-variant-techspec.single-product :is(.woocommerce-Reviews-title, .iq-copurchase__title, .simple-text__title),
body.iq-variant-techspec.single-product .product__reviews .woocommerce-Reviews .woocommerce-Reviews-title {
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.1;
}

/* Основной текст каталога, категорий и новостей — Manrope, межстрочный 1.6. */
body.iq-variant-techspec :is(.simple-text__inner, .main-catalog__intro, .iq-music-guide, .single-news__text) :is(p, li),
body.iq-variant-techspec .news-preview__text {
  font-family: var(--iq-font);
  line-height: 1.6;
}

/* Телефон: подписи не мельче 12px (было 9–11px). Значок логотипа, знак ₽ и номер трека в плеере — часть
   рисунка, не трогаем. Класс повторён трижды ради веса: правила темы здесь до (0,4,1), например
   body.iq-variant-techspec.home .iq-feature-rail__copy small. Межстрочный — в долях: у части подписей в теме
   он в px (12px), и 12px шрифта вылезал из строки на 2px (аудит pageshot, даты новостей, время плеера). */
@media (width <= 767px) {
  body.iq-variant-techspec.iq-variant-techspec.iq-variant-techspec :is(
    .breadcrumb__list a, .breadcrumb__list li,
    .catalog-item__meta, .catalog-item__label,
    .main-catalog__secondary-label, .main-catalog__secondary-link, .main-catalog__filters-toggle,
    .main-catalog__quick-group-label, .main-catalog__quick-category-kicker, .main-catalog__category-hero-label span,
    .main-catalog__promo-eyebrow, .main-banner__eyebrow, .main-banner__delivery-note, .main-banner__tempo-button,
    .iq-feature-rail__copy small, .equipment-installment__chip, .home-news__inner .btn,
    .iq-discovery__eyebrow, .iq-filter-chip, .iq-library-intro__eyebrow, .iq-tap-tempo__pad span,
    .news-preview__date, .single-news__date, .news-crosslinks__kicker, .news-crosslinks__index, .news-related h2,
    .iq-copurchase__eyebrow, .iq-copurchase-card__link, .woocommerce-verification-required, .woocommerce-verification-required a,
    .player__current, .player__total, .footer__eyebrow, .iq-cc__btn, .header__lk-btn
  ) {
    font-size: 12px;
    line-height: 1.3;
  }
}

/* HOT IRON: «разборка» из трёх PNG старой темы (hotiron-exploded-layer1..3) — выноски без подписей, непонятно, что
   нарисовано (Артемий, 26.09.2026). Скрыта до настоящей разборки из Blender; разметку не трогаем. */
body.iq-variant-techspec .iq-hotiron-parallax { display: none; }

/* ═══════════ Волна 1 дизайн-прохода (П1-токены + П2), docs/spec/2026-09-26-design-elite.md — сведено из прототипа iq-p-dark.css 26.09.2026 ═══════════ */
/* Прототип волны 1 (П1 токены + П2 порядок в тёмной теме), docs/spec/2026-09-26-design-elite.md. Сводится в iq-next.css перед выкладкой.
   Правки TSX, которых требовал этот проход (комментарии — на месте правки, стиль соседнего кода):
   - CatalogItem.tsx: кнопка «глаз» убрана, NEW/TOP/SALE перенесены внутрь фото;
   - CardActions.tsx — не трогали;
   - UrgencyPopup.tsx / InstallmentPopup.tsx / PromoLauncher.tsx (новый) — «1₽» и гантель слиты в одну кнопку «Акции»;
   - QuickMatch.tsx, SecondaryNav.tsx — английские подписи (QUICK MATCH, Pilates/Cardio/Strength, Browse) → русский;
   - cart/page.tsx, CartView.tsx — блок «Может понравиться» в пустой корзине.
   Файл грузится последним из THEME_CSS (после iq-next.css) — специфичность ниже той, что нужна для победы над
   легаси (`style.min.css`, `.sidebar__menu>li>a` и т.п.), беру не через !important, а либо той же силой
   (и тогда порядок в каскаде решает в мою пользу), либо чуть точнее исходного правила. */

/* ───────────────────────── П1. Токены (техspec, тёмная тема) ─────────────────────────
   Своё пространство имён `--iqp-*`, а не переопределение `--iq-action-primary`/`--iq-bg-surface` и т.п.:
   те переменные завязаны на весь остальной сайт (кнопки, hover, декор), а волна 1 правит только
   перечисленные в спеке места. Полная замена пяти палитр на одну — отдельный шаг П1 (второй, с PurgeCSS). */
:root {
  /* Фон — 3 уровня */
  --iqp-canvas: #0b0c0e;
  --iqp-surface: #131519;
  --iqp-raised: #171b21;
  /* Текст — 3 уровня (третий, приглушённый до неразличимости, здесь не нужен) */
  --iqp-fg: #e8ecf0;
  --iqp-muted: #7d8794;
  /* Акцент — один на экран; лайм — только «успех / новинка», не общий CTA */
  --iqp-accent: #6ee7ff; /* на body.techspec — токен темы (ниже в блоке токенов): на :root акцент ещё лаймовый */
  --iqp-lime: #b9ff3c;
  /* Волосяные линии — 2 силы */
  --iqp-line: rgba(232, 236, 240, .14);
  --iqp-line-strong: rgba(232, 236, 240, .28);
  /* Радиусы — 2 */
  --iqp-r-sm: 3px;
  --iqp-r-lg: 3px;
  /* Отступы — шаг 4/8 */
  --iqp-sp-1: 4px;
  --iqp-sp-2: 8px;
  --iqp-sp-3: 12px;
  --iqp-sp-4: 16px;
  --iqp-sp-5: 24px;
  --iqp-sp-6: 32px;
  --iqp-sp-7: 48px;
  /* Шкала шрифта — 7 ролей (display/h1/h2/h3/body/caption/label); Unbounded — var(--iq-display),
     Manrope — var(--iq-font), уже объявлены в scripts/theme/css-src/iq-visual.css, здесь не дублирую. */
  --iqp-fs-display: clamp(2rem, 1.4rem + 2.6vw, 2.75rem);
  --iqp-fs-h1: 1.75rem;
  --iqp-fs-h2: 1.375rem;
  --iqp-fs-h3: 1.0625rem;
  --iqp-fs-body: .9375rem;
  --iqp-fs-caption: .8125rem;
  --iqp-fs-label: .6875rem;
}

/* ───────────────────────── П2. Боковое меню каталога ─────────────────────────
   Факты аудита (dpass2/catalog): текст пункта прижат к верху строки (line-height 14.3px при высоте li 40–44px,
   вертикального центрирования не было ни у одного правила в каскаде); разделитель на `a` обрывался на 178px,
   а подсветка текущего пункта (та же `a`, box-shadow inset) — на 228px: разница ровно margin-right:50px из
   легаси (style.min.css), которого не отменяет ни один вариант; шеврон открывающегося пункта рисуется
   `.opened::after{rotate(-45deg)}` из легаси же, но border-color родом из style.min.css #252525 — почти чёрный
   на тёмном фоне, то есть невидим; `.main-catalog__sidebar-wrapper` — flex-item в ряду `.main-catalog__inner`
   (display:flex, align-items по умолчанию stretch) и тянется на высоту соседа (сетки карточек, до 6945px),
   хотя меню внутри — 324px: правка 26.09.2026 сделала sticky только содержимое (`> *`), не саму колонну с
   рамкой/фоном — отсюда пустая панель на всю страницу и наезжающий на неё декоративный фон каталога. */

/* Пункт меню: центр строки по вертикали, разделитель на всю ширину подсветки (margin-right:0 отменяет легаси). */
body.iq-variant-techspec .main-catalog__sidebar-wrapper .sidebar__menu > li > a {
  display: flex;
  align-items: center;
  gap: var(--iqp-sp-2);
  min-height: 44px;
  margin-right: 0;
  padding: 0 var(--iqp-sp-5) 0 var(--iqp-sp-4);
}
/* Иконка раздела (::before, mask, iq-parts.css «Иконки разделов») стояла в потоке абсолютным top:0/left:0
   относительно `a` — при flex-центрировании текста она не должна прыгать, поэтому явно вкладываю её в ряд. */
body.iq-variant-techspec .main-catalog__sidebar-wrapper .sidebar__menu > li > a::before {
  position: static;
  flex: 0 0 auto;
  opacity: .85;
}
body.iq-variant-techspec .main-catalog__sidebar-wrapper .sidebar__menu > li > a:hover::before {
  opacity: 1;
}

/* Шеврон разворачиваемого пункта: видимый цвет вместо #252525 из легаси, позиция — под новый flex-ряд `a`
   (было top:2px/right:10px от style.min.css, рассчитано под старый inline-block без вертикального центра). */
body.iq-variant-techspec .main-catalog__sidebar-wrapper .sidebar__menu > li.menu-item-has-children::after {
  position: absolute;
  top: 50%;
  right: var(--iqp-sp-3);
  width: 7px;
  height: 7px;
  margin: 0;
  border-top: 2px solid var(--iqp-muted);
  border-right: 2px solid var(--iqp-muted);
  transform: translateY(-70%) rotate(135deg);
  transition: transform .2s ease, border-color .2s ease;
}
body.iq-variant-techspec .main-catalog__sidebar-wrapper .sidebar__menu > li.menu-item-has-children:hover::after,
body.iq-variant-techspec .main-catalog__sidebar-wrapper .sidebar__menu > li.opened.menu-item-has-children::after {
  border-color: var(--iqp-fg);
}
/* .opened::after{rotate(-45deg)} — легаси, специфичность ниже (0,1,0 против моих 0,4,1) и мой поворот
   победил бы даже на открытом пункте; переигрываю сама, чтобы разворот («открыто» → «закрыто») не потерялся. */
body.iq-variant-techspec .main-catalog__sidebar-wrapper .sidebar__menu > li.opened.menu-item-has-children::after {
  transform: translateY(-70%) rotate(-45deg);
}

/* Колонна не тянется на высоту сетки карточек (align-self перебивает stretch родителя-flex) — весь декор
   (рамка, фон панели) сжимается обратно к реальной высоте меню; sticky у содержимого (iq-next.css) остаётся. */
@media (min-width: 1024px) {
  body.post-type-archive-product .main-catalog__sidebar-wrapper,
  body.tax-product_cat .main-catalog__sidebar-wrapper,
  body.home #main-catalog .main-catalog__sidebar-wrapper {
    align-self: flex-start;
  }
}

/* ───────────────────────── П2. Фиолетовый блок подписки → палитра сайта ─────────────────────────
   `.iq-library-intro` (только /catalog/category/music/) ни разу не перекрыт под техspec — грузится голое
   правило iq-visual.css: radial-gradient(rgba(116,82,255,.22)) на #141025 (rgb(20,16,37), факт аудита). */
body.iq-variant-techspec .iq-library-intro {
  border-color: var(--iqp-line-strong);
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--iqp-accent) 14%, transparent), transparent 48%),
    var(--iqp-surface);
}

/* ───────────────────────── П2. Лавандовая утечка #e6deff → нейтральная линия ─────────────────────────
   Три места из аудита делят один незакрытый вариантом источник — .main-banner__tempo-track (уже есть
   правило под body.iq-variant-techspec.home той же силы, но моё грузится позже и решает исход),
   .iq-music-guide__table td/th (вообще без варианта), .catalog-item__buttons-wrap (закрыт только для
   home/tax-product_cat — на /cart/ и прочих страницах вне этих двух body-классов утечка живая, это
   как раз и задевает новый блок «Может понравиться» в пустой корзине). */
body.iq-variant-techspec.home .main-banner__tempo-track { stroke: color-mix(in srgb, var(--iqp-fg) 20%, transparent); }
body.iq-variant-techspec .iq-music-guide__table td,
body.iq-variant-techspec .iq-music-guide__table th { border-bottom-color: var(--iqp-line); }
body.iq-variant-techspec .iq-music-guide__table tbody th a { border-bottom-color: var(--iqp-line-strong); }
body.iq-variant-techspec .iq-music-guide__table tbody th a:hover { border-bottom-color: var(--iqp-accent); }
body.iq-variant-techspec .catalog-item__buttons-wrap { border-top-color: var(--iqp-line-strong); }

/* ───────────────────────── П2. Карточка каталога — три зоны, цена ярче, ₽ не мельче цифр ─────────────────────────
   Факт аудита: .catalog-item__real-price местами наследует var(--iq-fg-muted)/приглушённый тон
   (computed rgb(184,192,204) — тон .iq-border-tint варианта orbit, не техspec, но так дошло на экран),
   .iq-currency — font-size:.62em без line-height (11.78px при lh 12.96 у карточки 22px, глиф ₽ обрезан
   и мельче цифр). Держу это одним правилом на весь техspec, а не по вариантам страницы — переживает
   и архив, и категорию, и «Может понравиться» в корзине. */
body.iq-variant-techspec .catalog-item__real-price {
  color: var(--iqp-fg);
  font-weight: 700;
}
body.iq-variant-techspec .iq-currency {
  margin-left: .15em;
  font-size: 1em;
  line-height: 1;
  color: currentColor;
  font-weight: inherit;
  vertical-align: baseline;
}

/* NEW/TOP/SALE — на фото (перенесено в TSX внутрь <figure>, см. CatalogItem.tsx): раньше `.catalog-item__label-wrap`
   стоял статичной строкой ПОД фото на архиве/категории (iq-parts.css: order:3; position:static!important;
   height:auto!important). Первая попытка (просто добавить !important своей стороне) не сработала: при двух
   !important спор решает не порядок подключения файла, а СПЕЦИФИЧНОСТЬ — а у чужого правила она выше
   (body.iq-variant-techspec.post-type-archive-product .catalog-item__label-wrap — 3 класса + тег, 0-4-1
   против моих исходных 0-2-0). Повторяю тот же селектор один в один, чтобы специфичность совпала —
   тогда решает уже порядок подключения (мой файл последний). Проверено на живом рендере archive/tax-product_cat. */
.catalog-item__image .catalog-item__label-wrap,
body.iq-variant-techspec.post-type-archive-product .catalog-item__image .catalog-item__label-wrap,
body.iq-variant-techspec.tax-product_cat .catalog-item__image .catalog-item__label-wrap,
body.iq-variant-techspec.home .catalog-item__image .catalog-item__label-wrap {
  position: absolute !important;
  top: var(--iqp-sp-2);
  right: var(--iqp-sp-2);
  z-index: 3;
  margin: 0 !important;
  height: auto;
}

/* Кнопка «глаз» убрана из разметки (CatalogItem.tsx) — вместо неё вся карточка-без-превью кликабельна
   через новую обёртку .catalog-item__image-link (см. TSX): здесь только её раскладка. */
.catalog-item__image-link {
  position: relative; /* якорь растра DitherCover */
  display: block;
  width: 100%;
  height: 100%;
}

/* ───────────────────────── П2. Карточка оборудования на телефоне — цена своей строкой ─────────────────────────
   На ≤520px обе цены (real/old) ужимались до 12px наравне с музыкой, а .catalog-item__cart/like сжимались
   в квадрат 32px без права расти — подпись кнопки («В корзину» и т.п.) резалась по границе квадрата.
   Единый вид цены у музыки и оборудования: не мельче 16px, отдельной строкой перед кнопками (order уже
   расставлен в iq-parts.css — .catalog-item__buttons-wrap идёт order:4, цене оставляю order:3 явным).*/
/* Полная/короткая подпись кнопки «В корзину» (CardActions.tsx) — по умолчанию (десктоп, широкая карточка)
   показана полная, короткая («Купить») скрыта; в узкой сетке ниже — наоборот. Доступное имя кнопки не
   меняется (aria-label на самой button), это только видимый текст. */
.catalog-item__cart-label-short { display: none; }

@media (max-width: 520px) {
  body.iq-variant-techspec.post-type-archive-product .catalog-item__real-price,
  body.iq-variant-techspec.post-type-archive-product .catalog-item__old-price,
  body.iq-variant-techspec.tax-product_cat .catalog-item__real-price,
  body.iq-variant-techspec.tax-product_cat .catalog-item__old-price {
    order: 3;
    flex-basis: 100%;
    font-size: 17px;
  }
  /* Ревью лида (26.09.2026): «В корзину» с иконкой (18px) и зазором (6px) не оставляла ≥10px отступа справа
     в узкой кнопке — контент (10+18+6+~78+10≈122px) не помещался в ~85px, которые давал ряд карточки, текст
     упирался в правый край. Замер и решение: иконка меньше (16px), зазор меньше (4px), справа гарантированный
     padding 10px явным правилом (не paddingInline вперемешку с чужим `padding:0 12px` — сюда), а главное —
     короткая подпись «Купить» вместо «В корзину»: 10+16+4+«Купить»(~48px)+10≈88px, вписывается без обрезки. */
  body.iq-variant-techspec.post-type-archive-product .catalog-item__cart,
  body.iq-variant-techspec.tax-product_cat .catalog-item__cart {
    min-width: 0;
    width: auto;
    gap: 4px;
    padding-left: var(--iqp-sp-2);
    padding-right: 10px;
  }
  body.iq-variant-techspec.post-type-archive-product .catalog-item__cart svg,
  body.iq-variant-techspec.tax-product_cat .catalog-item__cart svg {
    width: 16px;
    height: 16px;
  }
  body.iq-variant-techspec.post-type-archive-product .catalog-item__cart-label,
  body.iq-variant-techspec.tax-product_cat .catalog-item__cart-label {
    overflow: visible;
    white-space: nowrap;
    font-size: 12px; /* правило проекта: подписи ≥ 12px — легаси ужимал до 11 вместе со всей кнопкой */
    line-height: 1.3;
  }
  body.iq-variant-techspec.post-type-archive-product .catalog-item__cart-label-full,
  body.iq-variant-techspec.tax-product_cat .catalog-item__cart-label-full { display: none; }
  body.iq-variant-techspec.post-type-archive-product .catalog-item__cart-label-short,
  body.iq-variant-techspec.tax-product_cat .catalog-item__cart-label-short { display: inline; }
}

/* ───────────────────────── П2. Обрезка глифов — счётчики и чипы ─────────────────────────
   .iq-stat-counters__value (главная, «каталог в цифрах») и .iq-filter-chip__count («Найди свой ритм») —
   line-height:1/inherit без запаса под аскендеры/десцендеры цифр в клэмп-кегле; на части устройств
   верх/низ цифры визуально подрезан рамкой родителя. */
body.iq-variant-techspec .iq-stat-counters__value {
  padding-block: .06em;
  line-height: 1.08;
  overflow: visible;
}
body.iq-variant-techspec .iq-filter-chip__count {
  line-height: 1.3;
  overflow: visible;
}

/* Надзаголовок «Найди свой ритм» строчными смотрелся как опечатка после перевода QUICK MATCH → «Подбор по
   темпу» (П2, английские подписи → русский): у класса не было своего text-transform, капс раньше держался
   только тем, что исходная строка сама была прописной по-английски. У остальных надзаголовков сайта капс —
   свойство CSS, а не текста (образец — body.iq-variant-techspec .main-catalog__secondary-label в iq-visual.css,
   тот же приём для «Каталог», бывший Browse). Повторяю его здесь. */
body.iq-variant-techspec .iq-discovery__eyebrow {
  text-transform: uppercase;
}

/* ───────────────────────── П2. Углы экрана: «Горячая линия» не под баннером cookie ─────────────────────────
   .header-link (fixed, bottom:20px/left:20px) и .iq-cc (баннер cookie, fixed, bottom:16px, left/right:16px —
   ConsentBanner.tsx, свой встроенный <style>, сюда лезть нельзя) занимают один и тот же угол, пока баннер
   не закрыт. Баннер временный (живёт до первого выбора) — на время его показа прячу кнопку линии, а не
   подбираю точный отступ под плавающую высоту двухстрочного текста баннера на разных экранах. */
body:has(.iq-cc) .header-link {
  display: none;
}

/* ───────────────────────── П2. Кнопка «Акции» — слияние «1₽» + рассрочки ─────────────────────────
   Разметка и события — PromoLauncher.tsx (новый) + правки в UrgencyPopup.tsx/InstallmentPopup.tsx
   (свои кнопки-триггеры убраны оттуда, слушают custom event). Здесь — единственное появившееся визуальное место.
   Ревью лида (26.09.2026): пилюля с подписью перекрывала «Подобрать под занятие» и заголовок карточки на
   телефоне — ужата до круглой 44×44 иконки (подпись только для скринридера, PromoLauncher.tsx aria-label),
   отступ от края 12px + safe-area, плюс скрытие при скролле вниз/возврат при скролле вверх (класс
   .iq-promo-launcher--hidden добавляет сам компонент — обоснование решения там же, в комментарии TSX). */
.iq-promo-launcher {
  position: fixed;
  right: max(12px, env(safe-area-inset-right, 0px));
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  z-index: 21;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--iqp-sp-2);
  transition: transform .22s ease, opacity .22s ease;
}
/* Плеер превью (.iq-sticky-player, z 40) встаёт в тот же угол и закрывал «Акции» — как у старой «1₽»
   (iq-parts.css), поднимаемся над ним, пока он открыт (ревью 26.09.2026). */
body:has(.iq-sticky-player:not([hidden])) .iq-promo-launcher {
  bottom: calc(112px + env(safe-area-inset-bottom, 0px));
}
.iq-promo-launcher--hidden {
  transform: translateY(calc(100% + 12px));
  opacity: 0;
  pointer-events: none;
}
.iq-promo-launcher__btn {
  /* Квадрат 3px по TECHSPEC § 04 вместо круга — очередь п.10: было border-radius:999px, --iqp-raised/-line-strong
     (фикс. hex, без светлой темы) — заменены на --iq-bg-surface/--iq-hair-strong, у них есть обе темы. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--iq-hair-strong, var(--iqp-line-strong));
  border-radius: var(--iq-radius-panel, 3px);
  background: var(--iq-bg-surface, var(--iqp-raised));
  color: var(--iqp-fg);
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}
.iq-promo-launcher__btn:hover,
.iq-promo-launcher__btn:focus-visible,
.iq-promo-launcher__btn[aria-expanded='true'] {
  border-color: var(--iqp-accent);
  color: var(--iqp-accent);
}
.iq-promo-launcher__menu {
  display: flex;
  flex-direction: column;
  gap: var(--iqp-sp-1);
  min-width: 220px;
  padding: var(--iqp-sp-2);
  border: 1px solid var(--iqp-line-strong);
  border-radius: var(--iqp-r-lg);
  background: var(--iqp-raised);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
}
.iq-promo-launcher__item {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--iqp-sp-3);
  border-radius: var(--iqp-r-sm);
  background: none;
  color: var(--iqp-fg);
  font: 600 13px/1.3 var(--iq-font, sans-serif);
  text-align: left;
  cursor: pointer;
}
.iq-promo-launcher__item:hover,
.iq-promo-launcher__item:focus-visible {
  background: color-mix(in srgb, var(--iqp-accent) 12%, transparent);
  color: var(--iqp-accent);
}
@media (prefers-reduced-motion: reduce) {
  .iq-promo-launcher,
  .iq-promo-launcher__btn { transition: none; }
  /* Без анимации скрытие при скролле само по себе стало бы дёрганым морганием — выключаю его целиком,
     не только транзишен, оставляя кнопку всегда на месте (12px + safe-area и так не перекрывают многое). */
  .iq-promo-launcher--hidden { transform: none; opacity: 1; pointer-events: auto; }
}

/* ───────────────────────── Очередь п.7. Билет «1 ₽» вместо автопопапа ─────────────────────────
   UrgencyPopup.tsx: раньше окно .js--promo-popup открывалось само через 2с и закрывало первый экран.
   Теперь вместо него — билет у нижнего края (после 50% прокрутки или 30с, что раньше), лист-чертёж:
   тонкая рамка --iq-hair-strong, фон --iq-bg-surface, угол ≤3px, подпись моно «SHEET · ПРОМО». Кнопка
   «Получить» открывает то же окно (openManually), крестик прячет билет до конца сессии (JS). Мобильный
   `.mobile-product-cta` не в счёт: он выключен на карточке товара насовсем (iq-theme.css,
   body.single-product .mobile-product-cta{display:none!important}) — перекрывать там нечего. */
.iq-urgency-ticket {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border: 1px solid var(--iq-hair-strong);
  border-radius: var(--iq-radius-panel, 3px);
  background: var(--iq-bg-surface);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .3);
  animation: iq-urgency-ticket-in 240ms var(--iq-ease-out, ease-out) both;
}
.iq-urgency-ticket__body { flex: 1 1 auto; min-width: 0; }
.iq-urgency-ticket__cap {
  margin: 0 0 2px;
  font: 500 11px/1.3 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--iq-fg-faint);
}
.iq-urgency-ticket__text {
  margin: 0;
  color: var(--iq-fg-primary);
  font: 500 13px/1.35 var(--iq-font, sans-serif);
}
.iq-urgency-ticket__cta {
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--iq-hair-strong);
  border-radius: var(--iq-radius-panel, 3px);
  background: var(--iq-action-primary);
  color: var(--iq-bg-canvas, #0b0c0e);
  font: 700 13px/1 var(--iq-font, sans-serif);
  cursor: pointer;
  transition: opacity .18s ease;
}
.iq-urgency-ticket__cta:hover,
.iq-urgency-ticket__cta:focus-visible { opacity: .85; }
.iq-urgency-ticket__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--iq-hair-strong);
  border-radius: var(--iq-radius-panel, 3px);
  background: transparent;
  color: var(--iq-fg-muted);
  cursor: pointer;
  transition: border-color .18s, color .18s;
}
.iq-urgency-ticket__close:hover,
.iq-urgency-ticket__close:focus-visible { border-color: var(--iq-action-primary); color: var(--iq-action-primary); }
.iq-urgency-ticket__close svg { display: block; }
.iq-urgency-ticket__cta:focus-visible,
.iq-urgency-ticket__close:focus-visible {
  outline: 2px solid var(--iq-action-primary);
  outline-offset: 2px;
}
@keyframes iq-urgency-ticket-in {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .iq-urgency-ticket { animation: none; }
}
/* ПК — карточка ~380px в правом нижнем углу (тот же угол, что у «Акции»), не полоса на всю ширину. */
@media (min-width: 760px) {
  .iq-urgency-ticket {
    left: auto;
    right: max(24px, env(safe-area-inset-right, 0px));
    bottom: max(24px, env(safe-area-inset-bottom, 0px));
    width: 380px;
    flex-wrap: wrap;
    padding: 16px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .35);
  }
  .iq-urgency-ticket__body { flex: 1 1 100%; }
  .iq-urgency-ticket__cta { flex: 1 1 auto; margin-top: 4px; }
  .iq-urgency-ticket__close { position: absolute; top: 12px; right: 12px; }
}
/* Билет и кнопка «Акции» — один и тот же угол экрана: пока билет показан, поднимаю «Акции» выше него
   (тот же приём, что уже поднимает «Акции» над плеером превью — .iq-sticky-player, строка выше). */
body:has(.iq-urgency-ticket) .iq-promo-launcher {
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 760px) {
  body:has(.iq-urgency-ticket) .iq-promo-launcher {
    bottom: calc(24px + 210px + env(safe-area-inset-bottom, 0px));
  }
}

/* ───────────────────────── П2. Пустая корзина — «Может понравиться» ─────────────────────────
   Разметка — CartView.tsx (новая ветка), карточки — те же CatalogItem/variant="home". Здесь — заголовок блока. */
.iq-cart-empty__suggestions-title {
  margin: var(--iqp-sp-6) 0 var(--iqp-sp-3);
  color: var(--iqp-fg);
  font-family: var(--iq-display, sans-serif);
  font-size: var(--iqp-fs-h3);
  font-weight: 700;
}
.iq-cart-empty__suggestions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--iqp-sp-3);
}
@media (min-width: 760px) {
  .iq-cart-empty__suggestions-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ═══════════════════════ бренд П6 — раскатка фирменных деталей ═══════════════════════
   Лист стиля — /lab/brand/ (BrandSheet.tsx), спека — docs/spec/2026-09-26-design-elite.md.
   Иконки — src/components/iq/brand/Icon.tsx (спрайт public/iq/brand/icons.svg, currentColor,
   sizes 16/20/24 по листу), мотивы/пустые состояния — motifs.tsx / EmptyStates.tsx. */

/* --- 1. Инлайновая иконка раздела рядом с текстом (сайдбар, мобильное меню, подвал, чипы,
   шапка) — общий приём: класс ставит компонент сам (CatalogTree.tsx, Footer/index.tsx,
   SecondaryNav.tsx, Header/index.client.tsx), только когда для раздела есть иконка в спрайте
   (wpMenuIcon, Header/wpMenuClass.ts). Одежда (menu-item-49945) иконки не получает и остаётся
   на старом фоне ::before — в спрайте П6 своего значка для неё нет. */
.iq-icon-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.iq-menu-icon {
  flex: none;
  color: var(--iq-muted);
  opacity: .85;
  transition: opacity .2s ease, color .2s ease;
}
.iq-icon-inline:hover .iq-menu-icon,
.iq-icon-inline:focus-visible .iq-menu-icon,
li.current-menu-item > a.iq-icon-inline .iq-menu-icon,
.main-catalog__secondary-link.is-active .iq-menu-icon {
  opacity: 1;
  color: var(--iq-action-signal);
}

/* Сайдбар и подвал: старая ::before-иконка (data-URI маска по id пункта, iq-parts.css) гасится
   только там, где раздел получил свой инлайн-SVG (.iq-icon-inline на той же ссылке). Разметка и
   класс WP (menu-item-NNNNN) не убираются — только фон в своём слое, который грузится последним
   и потому побеждает при равной специфичности (см. заголовок файла). Одежда без .iq-icon-inline
   продолжает показывать старую иконку как есть. */
.main-catalog__sidebar-wrapper .sidebar__menu > li > a.iq-icon-inline::before,
.sidebar__menu > li > a.iq-icon-inline::before,
.footer-nav__column-submenu > li > a.iq-icon-inline::before {
  content: none;
}
/* Подвал: иконка в строку с текстом (ссылка подвала — блок, без этого иконка вставала над текстом). */
.footer-nav__column-submenu > li > a.iq-icon-inline {
  display: inline-flex !important;
  flex-direction: row;
  align-items: center;
}

/* Сброс зарезервированного под старую иконку отступа — своя иконка не абсолютным ::before, а в
   потоке перед текстом. */
.main-catalog__sidebar-wrapper .sidebar__menu > li > a.iq-icon-inline {
  padding-left: 0;
}

/* Мобильное меню (.mobile-menu__catalog, Header/index.client.tsx CatalogTree mobile) — своих
   иконок разделов на бою не было вовсе (старый спрайт-фон там же выключен, iq-next.css выше:
   «Спрайт-иконки старой темы... в тёмном меню не читаются»); здесь чистое добавление. */
body.iq-variant-techspec .mobile-menu__catalog > li > a.iq-icon-inline {
  gap: 10px;
}
body.iq-variant-techspec .mobile-menu__catalog > li > a.iq-icon-inline .iq-menu-icon {
  color: rgba(232, 236, 240, .6);
}
body.iq-variant-techspec .mobile-menu__catalog > li > a.iq-icon-inline[aria-current='page'] .iq-menu-icon,
body.iq-variant-techspec .mobile-menu__catalog > li.current-menu-item > a.iq-icon-inline .iq-menu-icon {
  color: var(--iq-action-primary, #6ee7ff);
}

/* Чипы каталога (SecondaryNav) — .main-catalog__secondary-link уже inline-flex, иконка входит
   в существующий gap ряда без переразметки. */
.main-catalog__secondary-link .iq-menu-icon {
  color: currentColor;
  opacity: .8;
}

/* --- 3. Пустые состояния (EmptyStates.tsx) — корзина/избранное/поиск/загрузки/заказы/404.
   Обёртка одна на все места применения (CartView, CartModal, favorites/downloads/orders,
   ShopArchivePage, not-found) — только размер и отступ, цвет уже задаёт сам SVG (currentColor +
   --bs-* с запасным вариантом на --iq-*, EmptyStates.module.css). */
.iq-empty-illustration {
  display: block;
  width: 168px;
  max-width: 60vw;
  margin-bottom: 4px;
  color: var(--iq-muted);
}
.iq-empty-illustration--compact {
  width: 112px;
}
.iq-catalog-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 24px 0;
}

/* --- 4. Мотив «ЭКГ-пульс» — разделитель секций подвала, один на страницу, без бегущего фронта
   (только дорожка — движение на каждой странице сайта было бы избыточным, П6: «умеренно»).
   PulseDivider — из листа стиля, живёт на --bs-*: здесь у него нет обёртки .panel[data-theme]
   (BrandSheet.module.css), поэтому мостим те же переменные на боевые токены темы. */
.iq-footer-pulse {
  --bs-border-strong: var(--iq-border-tint, currentColor);
  --bs-muted: var(--iq-muted);
  --bs-accent: var(--iq-action-signal);
  --bs-font: var(--iq-font);
  padding: 4px var(--iqp-sp-4, 16px) 0;
  /* монитор FooterPulse гасит след сам — общая полупрозрачность убрала бы свечение головки */
}

/* ── Карточки: наклон (Atropos, 26.09.2026) ─────────────────────────────────────────────────────────────
   Обложка наклоняется к курсору (TiltCover.tsx), слои на разной глубине; обёртки Atropos занимают всю
   фигуру, чтобы ссылка и бейджи остались на своих местах. Нажатие — пружина всей карточки. */
.catalog-item__image .iq-tilt,
.catalog-item__image .iq-tilt .atropos-scale,
.catalog-item__image .iq-tilt .atropos-rotate,
.catalog-item__image .iq-tilt .atropos-inner { width: 100%; height: 100%; }
.catalog-item__image .iq-tilt .atropos-inner { border-radius: inherit; }
.catalog-item__image { overflow: visible; transform-style: preserve-3d; }
.catalog-item__image .iq-tilt .atropos-highlight {
  background-image: radial-gradient(circle at 50%, rgba(255, 255, 255, 0.32), transparent 55%);
}
.catalog-item {
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.catalog-item:has(.catalog-item__image-link:active) { transform: scale(0.965); transition-duration: 0.12s; }
@media (prefers-reduced-motion: reduce) {
  .catalog-item, .catalog-item:has(.catalog-item__image-link:active) { transition: none; transform: none; }
}

/* ═══════════════ Карточка музыки: винил (В) ═══════════════════════════════════════
   Вариант В из /lab/cards (лид/владелец 26.09.2026) — перенесён в бой для товаров kind=music
   (CatalogItem.tsx: ветка `if (music)`). Оборудование и остальные kind — старая карточка ниже,
   без изменений.
   Наклон и клип — правка 26.09.2026 (жалоба владельца с прода): конверт держал overflow:hidden
   ровно по границе .iq-tilt (Atropos), поэтому rotateX/Y реально применялся (проверено JS —
   el.__atropos__ и style.transform на бою не пустые), но обрезался вплотную к своей же коробке —
   визуально наклона не было (диф пикселей hover/rest — меньше 1%). Рабочая (не-винил) карточка
   выше даёт .catalog-item__image {overflow:visible} — оттуда и берётся заметный наклон/блик.
   Тут так же visible вернуть нельзя не глядя: диск (bleed right:-18%) и «окно» обложки должны
   остаться в рамке конверта. Разводим клип по слоям вместо одного общего overflow:hidden:
   — .catalog-item__vinyl-disc-mask — свой overflow:hidden только для диска (не входит в дерево
     Atropos, наклон не трогает);
   — .catalog-item__vinyl-window — больше НЕ меняет свою ширину (это и резало/зумило саму
     обложку через object-fit:cover при сжатии рамки — «съехала влево», жалоба владельца) и не
     клипует overflow:hidden; вместо этого clip-path на нём же с запасом в -24px на 3 стороны
     (наклону/блику Atropos есть где рисоваться) и жёстким клипом только справа (там прячется
     обложка, открывая диск). */
.catalog-item__vinyl-sleeve.catalog-item__image {
  aspect-ratio: 1;
  overflow: visible;
  border-radius: var(--iqp-r-lg, 3px);
  background: var(--iqp-surface, #131519);
}
.catalog-item__vinyl-disc-mask {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: inherit;
}
.catalog-item__vinyl-disc {
  position: absolute;
  top: 50%;
  right: -18%;
  width: 62%;
  aspect-ratio: 1;
  /* Пластинка из конверта (CardVinyl.tsx, 30.09.2026, TECHSPEC § 07): в покое диск в конверте — из-под обложки
     виден только край; играет превью — выезжает вправо, обложка открывает его до 65 %. */
  transform: translate(-29%, -50%);
  transition: transform var(--iq-dur-show) var(--iq-ease-out);
}
.catalog-item__vinyl-disc-mask[data-out] .catalog-item__vinyl-disc { transform: translate(0, -50%); }
.catalog-item--vinyl:has(.catalog-item__vinyl-disc-mask[data-out]) .catalog-item__vinyl-window {
  clip-path: inset(-24px 35% -24px -24px);
  transition-duration: var(--iq-dur-show);
}
/* Статичный кадр (SVG): покой, без WebGL, reduced-motion. Пока крутится 3D — под холстом не нужен. */
.catalog-item__vinyl-still { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.catalog-item__vinyl-disc-mask[data-live] .catalog-item__vinyl-still { visibility: hidden; }
/* Холст сцены шире диска на 10 % с каждой стороны — место под мягкую тень на конверт (cardEngine.ts: FIT 1.2). */
.catalog-item__vinyl-gl { position: absolute; inset: -10%; }
/* Холст переезжает между карточками с наклейкой прежней — виден только после того, как легла своя (data-live). */
.catalog-item__vinyl-disc-mask:not([data-live]) .catalog-item__vinyl-gl { visibility: hidden; }
html[data-iq-theme='light'] .catalog-item--vinyl {
  --iqp-accent: #0000ff;
}
.catalog-item__vinyl-window {
  position: absolute;
  inset: 0;
  z-index: 2;
  clip-path: inset(-24px 0 -24px -24px);
  transition: clip-path 380ms cubic-bezier(0.23, 1, 0.32, 1);
}
/* Наведение обложку не сдвигает (30.09.2026, Артемий: «при наведении не видно полного фото») — диск выезжает
   только во время игры превью (data-out выше). Наведение подсвечивает ▶ акцентом: «нажми — заиграет». */
@media (hover: hover) {
  body.iq-variant-techspec .catalog-item--vinyl:hover .catalog-item__vinyl-actions .catalog-item__play:not(.is-playing) {
    border-color: var(--iqp-accent, var(--iq-action-primary, #6ee7ff));
    color: var(--iqp-accent, var(--iq-action-primary, #6ee7ff));
  }
}
@media (prefers-reduced-motion: reduce) {
  .catalog-item--vinyl .catalog-item__vinyl-window,
  .catalog-item--vinyl .catalog-item__vinyl-disc { transition: none; }
}
/* Эквалайзер — якорь на конверт целиком (сиблинг окна в TSX, вне дерева Atropos): не должен ни
   зумиться object-fit’ом окна, ни резаться клипом окна на 65% при одновременных hover+play
   (жалоба владельца 26.09.2026). Тонкие столбики без «таблетки»-подложки — техно, не чат-баблик. */
.catalog-item--vinyl .iq-cover-eq {
  z-index: 3;
  inset: auto var(--iqp-sp-2, 8px) var(--iqp-sp-2, 8px) auto;
  width: 46px;
  height: 20px;
  padding: 0;
  border-radius: 0;
  background: none;
  gap: 2px;
}
.catalog-item--vinyl .iq-cover-eq span {
  min-width: 1.5px;
  border-radius: 0;
  background: var(--iqp-accent, var(--iq-action-primary, #6ee7ff));
  filter: drop-shadow(0 0 2px rgba(11, 12, 14, 0.6));
}

.catalog-item__vinyl-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: var(--iqp-sp-3, 12px);
  color: var(--iq-ink, #14181e);
  font: 700 14px/1.3 var(--iq-font, Manrope, sans-serif);
  text-decoration: none;
}
.catalog-item__vinyl-title:hover { text-decoration: underline; }

.catalog-item__vinyl-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--iqp-sp-2, 8px);
  margin-top: var(--iqp-sp-1, 4px);
  /* Явно без border-top: у Б/В в /lab/cards была лишняя тонкая линия над кнопками (ревью 26.09.2026) —
     здесь её никогда не было, а не вырезана. */
}
.catalog-item__vinyl-specs {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 600 12px/1.3 var(--iq-font, Manrope, sans-serif);
  color: var(--iq-fg-muted, #7d8794);
}
.catalog-item__vinyl-specs s { margin-right: 4px; font-weight: 500; opacity: 0.6; text-decoration: line-through; }
.catalog-item__vinyl-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
/* Единый ряд «▶ · ♡ · корзина» (жалоба владельца 26.09.2026: круг / квадрат / высокий голубой
   прямоугольник — три разные формы и высоты). Одна плитка 36×36 (мобильный ≥40 — тач-цель), одна
   рамка 1px, радиус как у темы (--iqp-r-sm, «почти прямой»), иконки-маски 18px по центру; корзина —
   та же плитка, но залита акцентом. Доступные имена и обработчики — в CardActions.tsx/PreviewButton,
   здесь только вид. Специфичность-префикс body.iq-variant-techspec — база темы держит play/like/cart
   на 44×44 своим (0,3,1) (см. историю ревью 26.09.2026), поднимаю вес явно, не полагаясь на порядок. */
.catalog-item--vinyl .catalog-item__cart-label { display: none; }
body.iq-variant-techspec .catalog-item--vinyl .catalog-item__vinyl-actions .catalog-item__play,
body.iq-variant-techspec .catalog-item--vinyl .catalog-item__like,
body.iq-variant-techspec .catalog-item--vinyl .catalog-item__cart {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  flex: 0 0 36px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--iq-border-subtle, rgba(232, 236, 240, 0.16));
  border-radius: var(--iqp-r-sm, 3px);
  background: transparent;
  color: inherit;
  font-size: 0;
  cursor: pointer;
  transition: border-color 160ms ease, transform 120ms ease;
}
body.iq-variant-techspec .catalog-item--vinyl .catalog-item__cart {
  border-color: transparent;
  background: var(--iqp-accent, var(--iq-action-primary, #6ee7ff));
  color: var(--iqp-canvas, #0b0c0e);
}
html[data-iq-theme='light'] .catalog-item--vinyl .catalog-item__cart { color: #fff; }
@media (hover: hover) {
  body.iq-variant-techspec .catalog-item--vinyl .catalog-item__vinyl-actions .catalog-item__play:hover,
  body.iq-variant-techspec .catalog-item--vinyl .catalog-item__like:hover {
    border-color: var(--iqp-line-strong, rgba(232, 236, 240, 0.28));
  }
}
body.iq-variant-techspec .catalog-item--vinyl .catalog-item__vinyl-actions .catalog-item__play:active,
body.iq-variant-techspec .catalog-item--vinyl .catalog-item__like:active,
body.iq-variant-techspec .catalog-item--vinyl .catalog-item__cart:active {
  transform: scale(0.96);
}
@media (max-width: 480px) {
  body.iq-variant-techspec .catalog-item--vinyl .catalog-item__vinyl-actions .catalog-item__play,
  body.iq-variant-techspec .catalog-item--vinyl .catalog-item__like,
  body.iq-variant-techspec .catalog-item--vinyl .catalog-item__cart {
    width: 40px; height: 40px; min-width: 40px; min-height: 40px; flex-basis: 40px;
  }
  /* 40px×3 + цена рядом не помещаются в узкую колонку архива (2 карточки в ряд на 390px, ~160px
     каждая — переполнение было и раньше на 14px, «В корзину»/«Купить» тому свидетель, здесь стало
     заметнее с более крупными кнопками). Перенос ряда кнопок на свою строку, а не сжатие кнопок
     обратно — тач-цель важнее. */
  .catalog-item--vinyl .catalog-item__vinyl-meta { flex-wrap: wrap; row-gap: var(--iqp-sp-1, 4px); }
  .catalog-item--vinyl .catalog-item__vinyl-actions { flex-basis: 100%; justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
  body.iq-variant-techspec .catalog-item--vinyl .catalog-item__vinyl-actions .catalog-item__play,
  body.iq-variant-techspec .catalog-item--vinyl .catalog-item__like,
  body.iq-variant-techspec .catalog-item--vinyl .catalog-item__cart { transition: none; }
}

/* Play/pause — своя моно-маска 18px вместо залитого треугольника спрайта (та же толщина линии
   1.7, что у ♡ ниже, — «иконки одной толщины», жалоба владельца 26.09.2026). Паузу показывает
   класс is-playing — его уже ставит сам PreviewButton по своему состоянию, здесь не трогаю. */
.catalog-item--vinyl .catalog-item__vinyl-actions .catalog-item__play svg { display: none; }
body.iq-variant-techspec .catalog-item--vinyl .catalog-item__vinyl-actions .catalog-item__play::before {
  content: '';
  width: 18px;
  height: 18px;
  background-color: currentColor;
  --iq-vinyl-play-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E");
  -webkit-mask: var(--iq-vinyl-play-mask) center / contain no-repeat;
  mask: var(--iq-vinyl-play-mask) center / contain no-repeat;
}
body.iq-variant-techspec .catalog-item--vinyl .catalog-item__vinyl-actions .catalog-item__play.is-playing::before {
  --iq-vinyl-play-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M8 5v14'/%3E%3Cpath d='M16 5v14'/%3E%3C/svg%3E");
}

/* Корзина — контур сумки той же толщины 1.7 вместо залитого icon-bag.svg базовой темы (заметно
   толще ♡ на глаз — та же жалоба). Свой mask только в рамках винил-карточки, .catalog-item__cart
   вне неё (оборудование) не трогаю. */
body.iq-variant-techspec .catalog-item--vinyl .catalog-item__cart:not(.catalog-item__cart--disabled)::before {
  --iq-get-mask: url(../img/iq-brand/icon-bag-line.svg);
}
.catalog-item--vinyl .catalog-item__cart svg { display: none; }

/* «Скоро» вместо корзины (availableFrom, CardActions, 30.09.2026): плашка той же высоты, что плитки ряда (36, телефон 40),
   роль label, рамка --iq-hair-strong, без заливки — купить пока нельзя, акцент не нужен. */
.catalog-item__soon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 36px;
  padding: 0 var(--iq-s-2, 8px);
  border: 1px solid var(--iq-hair-strong, rgba(232, 236, 240, 0.18));
  border-radius: var(--iq-radius-input, 3px);
  font: var(--iq-label, 500 11px/1.3 'IBM Plex Mono', ui-monospace, Menlo, monospace);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--iq-fg-muted, #7d8794);
  white-space: nowrap;
  cursor: default;
}
@media (max-width: 480px) {
  .catalog-item__soon { min-height: 40px; }
}

@media (max-width: 480px) {
  .catalog-item__vinyl-title { font-size: 13px; }
}

/* Главная (body.iq-variant-techspec.home): своя специфичная перебивка .catalog-item__image
   (aspect-ratio:auto; height:auto; width:calc(100% + 34px); фон в клетку заглушки) — она рассчитана
   на то, что высоту даёт ПРЯМОЙ <img> внутри (у неё же есть парная перебивка `img{aspect-ratio:1;
   height:auto}`). У винила прямых img-детей нет — диск и окно с обложкой оба position:absolute
   (вне потока), поэтому height:auto схлопывался в ~2px и обложка/диск не были видны на главной
   (найдено скриншотом /:, ревью 26.09.2026). Возвращаю квадрат явно и глушу бленд/поля home-варианта,
   не трогая .catalog-item__image в остальных контекстах (там уже верно — aspect-ratio:1). */
body.iq-variant-techspec.home .catalog-item__vinyl-sleeve.catalog-item__image {
  aspect-ratio: 1;
  width: 100%;
  height: auto;
  margin: 0;
  background-image: none;
}
/* Обложка внутри — инлайн-стиль width/height:100% из Image (CatalogItem.tsx), домашняя
   img{filter:saturate(.9)...} перебивка ей не мешает по специфичности инлайна, но глушу явно —
   винил не должен terять цвет обложки, как показывалось в остальных карточках home. */
body.iq-variant-techspec.home .catalog-item__vinyl-sleeve.catalog-item__image img {
  filter: none;
}

/* .catalog-item — flex column, порядок детей держат order на СТАРЫХ именах классов
   (.catalog-item__image order:2 и т.п., iq-parts.css) — у новых .catalog-item__vinyl-* его нет
   (order:0 по умолчанию), поэтому заголовок и мета всплывали ВЫШЕ обложки. Расставляю order явно,
   не полагаясь на легаси-систему. */
.catalog-item--vinyl > .catalog-item__discount { order: 1; }
.catalog-item--vinyl > .catalog-item__vinyl-sleeve { order: 2; }
.catalog-item--vinyl > .catalog-item__vinyl-title { order: 3; }
.catalog-item--vinyl > .catalog-item__vinyl-meta { order: 4; }

/* ── Боковое меню каталога: ритм и качество (лид, 26.09.2026, по снимкам владельца) ─────────────────
   Замер на бою (1440): у пункта `li` margin-bottom 25px из легаси, разделитель висит на `a` — текст
   прижимался к нижней линии, а над ним пустая полоса 25px; шеврон «IQ Music» стоял на top:50% всего
   `li` вместе с раскрытым подменю (230px вниз — посреди списка, у «Интервального тренинга»); подменю —
   рамка внутри рамки (border + inset + отступ 14px + свои 20px), маркеры rgb(67,36,127) на тёмном почти
   невидимы; текущий пункт — border-radius 20px + inset-тень 2px = обрезанный «полумесяц» слева. */
body.iq-variant-techspec .main-catalog__sidebar-wrapper {
  --sb-line: color-mix(in srgb, currentColor 12%, transparent);
  --sb-muted: color-mix(in srgb, currentColor 62%, transparent);
  --sb-accent: var(--iqp-accent);
  --sb-active-bg: color-mix(in srgb, var(--iqp-accent) 9%, transparent);
}
html[data-iq-theme='light'] body.iq-variant-techspec .main-catalog__sidebar-wrapper {
  --sb-accent: #0000ff;
  --sb-active-bg: color-mix(in srgb, #0000ff 7%, transparent);
}
body.iq-variant-techspec .main-catalog__sidebar-wrapper .sidebar__menu > li {
  margin: 0;
}
body.iq-variant-techspec .main-catalog__sidebar-wrapper .sidebar__menu > li > a {
  min-height: 52px;
  padding-block: var(--iqp-sp-3);
  border-bottom: 1px solid var(--sb-line);
  letter-spacing: .07em;
  line-height: 1.3;
}
/* Шеврон — по центру строки заголовка (52px), а не всего пункта с подменю. */
body.iq-variant-techspec .main-catalog__sidebar-wrapper .sidebar__menu > li.menu-item-has-children::after {
  top: 26px;
  transform: translateY(-70%) rotate(135deg);
}
body.iq-variant-techspec .main-catalog__sidebar-wrapper .sidebar__menu > li.opened.menu-item-has-children::after {
  transform: translateY(-30%) rotate(-45deg);
}
/* Подменю — без второй рамки: одна тонкая направляющая под колонкой иконок, пункты ровно по ней. */
body.iq-variant-techspec .main-catalog__sidebar-wrapper .sidebar__menu .sub-menu {
  margin: 0;
  padding: var(--iqp-sp-2) 0 var(--iqp-sp-3);
  border: 0;
  border-bottom: 1px solid var(--sb-line);
  box-shadow: none;
  background: none;
  position: relative;
}
body.iq-variant-techspec .main-catalog__sidebar-wrapper .sidebar__menu .sub-menu::before {
  content: '';
  position: absolute;
  left: 27px;
  top: var(--iqp-sp-2);
  bottom: var(--iqp-sp-3);
  width: 1px;
  background: var(--sb-line);
}
body.iq-variant-techspec .main-catalog__sidebar-wrapper .sidebar__menu .sub-menu > li > a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 34px;
  margin: 0;
  padding: 6px var(--iqp-sp-4) 6px 44px;
  border-radius: 0;
  box-shadow: none;
  color: var(--sb-muted);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.25;
  transition: color .15s ease, background-color .15s ease;
}
/* Маркер — не фиолетовая точка, а засечка на направляющей: видна только у текущего и под курсором. */
body.iq-variant-techspec .main-catalog__sidebar-wrapper .sidebar__menu .sub-menu > li > a::before {
  content: '';
  position: absolute;
  left: 27px;
  top: 50%;
  width: 9px;
  height: 1px;
  margin: 0;
  border-radius: 0;
  background: transparent;
  transition: background-color .15s ease, width .15s ease;
}
body.iq-variant-techspec .main-catalog__sidebar-wrapper .sidebar__menu .sub-menu > li > a:hover {
  color: inherit;
}
body.iq-variant-techspec .main-catalog__sidebar-wrapper .sidebar__menu .sub-menu > li > a:hover::before {
  background: currentColor;
}
body.iq-variant-techspec .main-catalog__sidebar-wrapper .sidebar__menu .sub-menu > li.current-menu-item > a {
  color: var(--sb-accent);
  background: linear-gradient(90deg, var(--sb-active-bg), transparent 85%);
  font-weight: 600;
}
body.iq-variant-techspec .main-catalog__sidebar-wrapper .sidebar__menu .sub-menu > li.current-menu-item > a::before {
  left: 26px;
  top: 50%;
  width: 3px;
  height: 18px;
  transform: translateY(-50%);
  background: var(--sb-accent);
}
@media (prefers-reduced-motion: reduce) {
  body.iq-variant-techspec .main-catalog__sidebar-wrapper .sidebar__menu .sub-menu > li > a,
  body.iq-variant-techspec .main-catalog__sidebar-wrapper .sidebar__menu .sub-menu > li > a::before {
    transition: none;
  }
}

/* Кнопки-иконки шапки — один стандарт techspec (26.09.2026, снимок Артемия: у темы рамка, у сердца и сумки нет,
   иконки двух поколений — заливка 2048×2048 против линии 1.5). Квадрат 44 (касание), рамка 1px, угол 0, глиф 20, линия 1.5
   (icon-*-line.svg — из бренд-набора /iq/brand/icons.svg). Счётчик — квадрат в углу рамки. */
body.iq-variant-techspec .iq-theme-toggle,
body.iq-variant-techspec .header__search-btn,
body.iq-variant-techspec .header__like,
body.iq-variant-techspec .header__cart {
  position: relative;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--iq-hair, rgb(232 236 240 / 16%));
  border-radius: 0;
  background: transparent;
  color: var(--iq-fg-primary);
  transition: border-color .18s, color .18s, background-color .18s;
}
body.iq-variant-techspec .iq-theme-toggle svg { width: 20px; height: 20px; }
body.iq-variant-techspec .header__search-btn {
  display: inline-flex; align-items: center; justify-content: center;
}
body.iq-variant-techspec .header__like::before,
body.iq-variant-techspec .header__cart::before { width: 20px; height: 20px; }
body.iq-variant-techspec .header__like::before { --iq-ui-mask: url(../img/iq-brand/icon-heart-line.svg); }
body.iq-variant-techspec .header__cart::before { --iq-ui-mask: url(../img/iq-brand/icon-bag-line.svg); }
body.iq-variant-techspec :is(.iq-theme-toggle, .header__search-btn, .header__like, .header__cart):is(:hover, :focus-visible) {
  border-color: var(--iq-action-primary);
  color: var(--iq-action-primary);
}
body.iq-variant-techspec :is(.header__like, .header__cart) .header__count {
  top: -7px;
  right: -7px;
  left: auto;
  min-width: 16px;
  padding: 3px 4px;
  border: 0;
  border-radius: 0;
  font: 700 9px/1 var(--iq-font);
  font-variant-numeric: tabular-nums;
}
body.iq-variant-techspec .header__indicators { gap: 8px; }
body.iq-variant-techspec .header__indicators > .header__cart-wrap { margin-left: 0; }

/* ───────────────────────── Очередь п.10: поиск иконкой, не полем над шапкой ─────────────────────────
   Раньше «Введите запрос» жило отдельной строкой .help-block над навигацией (виднелось всегда на ПК,
   пункты меню/избранное в ней и так были скрыты — фактически полоса существовала ради одного поля).
   Поле переехало сюда, в общий ряд иконок; сама .help-block ниже прячется на ПК, там от неё больше
   нечего показывать (на телефоне она остаётся — это выезжающее меню гамбургера). */
body.iq-variant-techspec .header__inner { position: relative; }
body.iq-variant-techspec .header__search-bar {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 60;
  padding: 16px var(--iq-page-gutter, 16px) calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--iq-hair-strong);
  background: var(--iq-bg-surface);
  box-shadow: 0 16px 32px rgba(0, 0, 0, .35);
  animation: iq-search-bar-in 200ms var(--iq-ease-out, ease-out) both;
}
@keyframes iq-search-bar-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  body.iq-variant-techspec .header__search-bar { animation: none; }
}
@media (min-width: 992px) {
  body.iq-variant-techspec .help-block { display: none; }
}

/* Акцентные шрифты бренда (26.09.2026, решение Артемия): Blackcraft — рваная готика (OFL), TagType — граффити
   (разрешён Артемием письменно, см. «_кандидаты-ofont/ЛИЦЕНЗИИ.md»), Zeitmax — техно-гротеск для штампов (OFL).
   Только акценты: 404, «Спасибо», HOT IRON, тег над заголовком раздела, бейджи. Основной текст — шрифты темы. */
@font-face { font-family: 'IQ Blackcraft'; src: url(../fonts/accent/blackcraft.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'IQ TagType'; src: url(../fonts/accent/tagtype.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'IQ Zeitmax'; src: url(../fonts/accent/zeitmax.woff2) format('woff2'); font-display: swap; }

body.iq-variant-techspec .main-catalog__list > .main-catalog__title { position: relative; }
body.iq-variant-techspec .main-catalog__tag {
  position: absolute;
  top: -.62em;
  right: 3%;
  z-index: 0;
  font: 400 clamp(44px, 7vw, 104px)/1 'IQ TagType', var(--iq-display);
  letter-spacing: 0;
  text-transform: none;
  color: var(--iq-action-primary);
  opacity: .22;
  transform: rotate(-7deg);
  pointer-events: none;
  user-select: none;
}
body.iq-variant-techspec:is(.tax-product_cat, .post-type-archive-product) .main-catalog__list > .main-catalog__title.main-catalog__title--goth {
  font-family: 'IQ Blackcraft', var(--iq-display);
  font-weight: 400;
  letter-spacing: .01em;
  text-transform: none;
}
body.iq-variant-techspec .main-catalog__promo-eyebrow {
  font-family: 'IQ Zeitmax', var(--iq-font);
  letter-spacing: .12em;
}
@media (max-width: 767px) {
  body.iq-variant-techspec .main-catalog__tag { top: -.2em; right: 2%; font-size: 48px; }
}

/* Мега-меню «Каталог» в стиле spec-sheet (обещано 26.09.2026, вариант 1 + 2 «по рекомендации»): жёсткие углы,
   линии 1px, моно-подписи, BPM как осциллограф; сетка-чертёж фоном, выноски-уголки на hover. Только кожа —
   разметка и тайминги CatalogMegaMenu.tsx не тронуты. Переопределения — здесь, одним блоком. */
html body .main-nav .main-nav__column-submenu.iq-mega { border-radius: 0 !important; }
.iq-mega {
  --iq-mega-raised: rgba(21, 25, 32, .72);
  --iq-mega-line: rgba(232, 236, 240, .12);
  --iq-mega-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  background:
    linear-gradient(color-mix(in srgb, var(--iq-action-primary, #6ee7ff) 4.5%, transparent) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, color-mix(in srgb, var(--iq-action-primary, #6ee7ff) 4.5%, transparent) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(color-mix(in srgb, var(--iq-action-primary, #6ee7ff) 8%, transparent) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(90deg, color-mix(in srgb, var(--iq-action-primary, #6ee7ff) 8%, transparent) 1px, transparent 1px) 0 0 / 120px 120px;
}
.iq-mega :is(.iq-mega__sec, .iq-mega__sec-ic, .iq-mega__dir, .iq-mega__tempo, .iq-mega__tile, .iq-mega__hot,
  .iq-mega__thumbs span, .iq-mega__big, .iq-mega__sub-variant-link, .iq-mega__cover-img, .iq-mega__pick, .iq-mega__variable) {
  border-radius: 0;
}
.iq-mega__sec--on::before { border-radius: 0; box-shadow: none; }
.iq-mega :is(.iq-mega__rail-h, .iq-mega__lbl, .iq-mega__tempo-cap, .iq-mega__bpm-n, .iq-mega__pick-k, .iq-mega__hot-k) {
  font-family: var(--iq-mega-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.iq-mega__lbl::before { content: '// '; color: var(--iq-mega-cyan); opacity: .7; }
/* Карточки направлений: без свечения-пятна, выноска-уголки на hover. */
.iq-mega__dir::before { content: none; }
.iq-mega :is(.iq-mega__dir, .iq-mega__big, .iq-mega__tile, .iq-mega__cover) { position: relative; }
.iq-mega :is(.iq-mega__dir, .iq-mega__big, .iq-mega__tile)::after {
  content: '';
  position: absolute;
  inset: 3px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s;
  background:
    linear-gradient(var(--iq-mega-cyan), var(--iq-mega-cyan)) 0 0 / 12px 1px,
    linear-gradient(var(--iq-mega-cyan), var(--iq-mega-cyan)) 0 0 / 1px 12px,
    linear-gradient(var(--iq-mega-cyan), var(--iq-mega-cyan)) 100% 0 / 12px 1px,
    linear-gradient(var(--iq-mega-cyan), var(--iq-mega-cyan)) 100% 0 / 1px 12px,
    linear-gradient(var(--iq-mega-cyan), var(--iq-mega-cyan)) 0 100% / 12px 1px,
    linear-gradient(var(--iq-mega-cyan), var(--iq-mega-cyan)) 0 100% / 1px 12px,
    linear-gradient(var(--iq-mega-cyan), var(--iq-mega-cyan)) 100% 100% / 12px 1px,
    linear-gradient(var(--iq-mega-cyan), var(--iq-mega-cyan)) 100% 100% / 1px 12px;
  background-repeat: no-repeat;
}
html body .main-nav .iq-mega a:is(.iq-mega__dir, .iq-mega__big, .iq-mega__tile)::after { content: ''; }
.iq-mega :is(.iq-mega__dir, .iq-mega__big, .iq-mega__tile):is(:hover, :focus-visible)::after { opacity: 1; }
.iq-mega__dir:hover { transform: none; }
/* Темп: осциллограф — тонкие контурные столбики на шкале, без градиентной заливки. */
.iq-mega__tempo {
  background:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--iq-action-primary, #6ee7ff) 6%, transparent) 0 1px, transparent 1px 23px),
    var(--iq-mega-void);
}
.iq-mega__bpm-bar {
  border-radius: 0;
  border: 1px solid color-mix(in srgb, var(--iq-action-primary, #6ee7ff) 55%, transparent);
  border-bottom: 0;
  background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--iq-action-primary, #6ee7ff) 18%, transparent) 0 2px, transparent 2px 5px);
}
.iq-mega__bpm:hover .iq-mega__bpm-bar { filter: none; border-color: var(--iq-mega-cyan); background: color-mix(in srgb, var(--iq-action-primary, #6ee7ff) 22%, transparent); }
.iq-mega__variable { border-style: dashed; }
@media (prefers-reduced-motion: reduce) {
  .iq-mega :is(.iq-mega__dir, .iq-mega__big, .iq-mega__tile)::after { transition: none; }
}

/* Сетка-чертёж catalog-grid-overlay.png (подпись и линейки зашиты в картинку, полоса ~42 px) лежала под левой колонкой:
   меню разделов закрывало её (27.09.2026, снимок Артемия). Взамен — линейки CSS ровно в свободном поле между рамкой ::before
   и колонками (слева 15 px, сверху 26 px, замер): мелкое деление 8 px, крупное 40 px, фоном .main-catalog__inner — под всеми
   детьми, ни во что не залезает. Верхняя линейка начинается после подписи «SPEC SHEET · REV 02». */
@media (min-width: 768px) {
  body.iq-variant-techspec:is(.post-type-archive-product, .tax-product_cat) .main-catalog__inner {
    --iq-ruler-major: color-mix(in srgb, var(--iq-action-primary, #6ee7ff) 55%, transparent);
    --iq-ruler-minor: color-mix(in srgb, var(--iq-action-primary, #6ee7ff) 28%, transparent);
    background-image:
      repeating-linear-gradient(to bottom, var(--iq-ruler-major) 0 1px, transparent 1px 40px),
      repeating-linear-gradient(to bottom, var(--iq-ruler-minor) 0 1px, transparent 1px 8px),
      repeating-linear-gradient(to right, var(--iq-ruler-major) 0 1px, transparent 1px 40px),
      repeating-linear-gradient(to right, var(--iq-ruler-minor) 0 1px, transparent 1px 8px);
    background-size: 10px calc(100% - 120px), 5px calc(100% - 120px), calc(100% - 320px) 10px, calc(100% - 320px) 5px;
    background-position: 0 40px, 0 40px, 296px 7px, 296px 7px;
    background-repeat: no-repeat;
  }
  html[data-iq-theme='light'] body.iq-variant-techspec:is(.post-type-archive-product, .tax-product_cat) .main-catalog__inner {
    --iq-ruler-major: rgba(0, 0, 255, .45);
    --iq-ruler-minor: rgba(0, 0, 255, .2);
  }
}

/* ───────────────────────── 2а. Дефекты со снимков владельца 26.09.2026 (правка 27.09.2026) ─────────────────────────
   1) Ряд «▶ · ♡ · корзина» винила: ▶ стоял на 3px выше — у .catalog-item__buttons-wrap остался margin-top:6px
      от обычной карточки (замер: play top 581, like/cart top 584). Внутри ряда винила обёртка — просто строка. */
body.iq-variant-techspec .catalog-item--vinyl .catalog-item__vinyl-actions .catalog-item__buttons-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  border-top: 0; /* 01.10.2026: рамка темы (border-top 1px) над ♡ и корзиной на /catalog/page/N/ */
}

/* 2) Корень раздела с HeroPin (music/video/cloth/equipment): служебная строка одна — строка HeroPin со счётчиком;
      «Sheet 01 / 01 · catalog index» над h1 здесь дублировала её. На прочих разделах ::before остаётся. */
body.iq-variant-techspec:is(.tax-product_cat, .post-type-archive-product) .main-catalog__list > .iq-hero-pin ~ .main-catalog__title::before,
body.iq-variant-techspec:is(.tax-product_cat, .post-type-archive-product) .main-catalog__list > .main-catalog__eyebrow + .main-catalog__title::before {
  content: none;
}
/* Граффити-тег под счётчиком HeroPin наезжал на «1281 релизов в каталоге» (top:-.62em) и уходил за правый край
   (поворот вокруг центра). На корне раздела — в правый нижний угол h1, мельче, поворот от правого края. */
body.iq-variant-techspec .main-catalog__list > .iq-hero-pin ~ .main-catalog__title .main-catalog__tag {
  top: auto;
  bottom: 26px;
  right: 0;
  font-size: clamp(40px, 5vw, 76px);
  transform-origin: 100% 100%;
}
@media (max-width: 767px) {
  /* На телефоне h1 занимает всю ширину — тегу нет свободного угла, на корне раздела его нет. */
  body.iq-variant-techspec .main-catalog__list > .iq-hero-pin ~ .main-catalog__title .main-catalog__tag { display: none; }
}

/* 3) «Тренируйся в своём ритме»: плашки тарифов были скруглены (14px) на радиальном градиенте — чужие techspec.
      Чертёж: углы 0, линии 1px, моно-цены, название капсом мелким кеглем. */
body.iq-variant-techspec .iq-library-intro {
  border-radius: 0;
  background: var(--iqp-surface);
}
body.iq-variant-techspec .iq-library-intro__plan,
body.iq-variant-techspec .iq-library-intro__support {
  border-radius: 0;
  border-color: var(--iqp-line-strong);
  background: transparent;
}
body.iq-variant-techspec .iq-library-intro__actions { gap: 0; }
body.iq-variant-techspec .iq-library-intro__actions > * + * { margin-top: -1px; }
body.iq-variant-techspec .iq-library-intro__plan > span {
  font: 600 12px/1.3 var(--iq-font);
  letter-spacing: .08em;
  text-transform: uppercase;
}
body.iq-variant-techspec .iq-library-intro__plan strong {
  font-family: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 15px;
}
body.iq-variant-techspec .iq-library-intro__plan:hover,
body.iq-variant-techspec .iq-library-intro__support:hover {
  position: relative;
  z-index: 1;
  border-color: var(--iq-action-primary);
}
body.iq-variant-techspec .iq-library-intro__support {
  font: 600 12px/1 var(--iq-font);
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Главная, «IQFITNESS / MUSIC SYSTEM» (снимок 27.09.2026): строка стояла в 1 px от линии шапки — отступ сверху;
   голубой квадрат 6×6 с ореолом ничего не значил — вместо него мини-эквалайзер из трёх полос (это музыкальная
   система), полосы дышат по очереди; без анимации при reduced-motion. */
body.iq-variant-techspec.home .main-banner__eyebrow { margin-top: 28px; }
body.iq-variant-techspec.home .main-banner__eyebrow::before {
  width: 11px;
  height: 10px;
  box-shadow: none;
  background:
    linear-gradient(var(--iq-action-primary), var(--iq-action-primary)) 0 100% / 3px 60% no-repeat,
    linear-gradient(var(--iq-action-primary), var(--iq-action-primary)) 4px 100% / 3px 100% no-repeat,
    linear-gradient(var(--iq-action-primary), var(--iq-action-primary)) 8px 100% / 3px 40% no-repeat;
  animation: iq-eyebrow-eq 1.2s ease-in-out infinite;
}
@keyframes iq-eyebrow-eq {
  0%, 100% { background-size: 3px 60%, 3px 100%, 3px 40%; }
  33% { background-size: 3px 100%, 3px 45%, 3px 80%; }
  66% { background-size: 3px 35%, 3px 75%, 3px 100%; }
}
@media (prefers-reduced-motion: reduce) {
  body.iq-variant-techspec.home .main-banner__eyebrow::before { animation: none; }
}

/* Подвал в светлой теме (снимок владельца 27.09.2026): промо IQ Music оставался чёрной плашкой — картинка
   iq-music-band с чёрным фоном; для светлой — своя версия iq-music-band-light (яркость обращена, оттенок
   сохранён: стекло и чертёж на светлом). Иконки VK/Telegram были залиты белым (fill:#fff) по светлому —
   почти не видны; «Написать в поддержку» — зелёный rgb(24,99,57), которого нет в палитре. */
html[data-iq-theme='light'] body.iq-variant-techspec .footer__library {
  background-color: #eceff4;
  background-image: image-set(
    url(../img/brand/iq-music-band-light.avif) type('image/avif'),
    url(../img/brand/iq-music-band-light.webp) type('image/webp'),
    url(../img/brand/iq-music-band-light.png) type('image/png')
  );
  box-shadow: inset 0 0 0 1px rgba(35, 36, 41, .12);
}
html[data-iq-theme='light'] body.iq-variant-techspec .footer__library h2 { color: #16171b; }
html[data-iq-theme='light'] body.iq-variant-techspec .footer__library p { color: #4a4d55; }
html[data-iq-theme='light'] body.iq-variant-techspec .footer__library .footer__eyebrow { color: #0000ff; }
/* Тема держит цвет ссылки через !important (iq-visual.css: body .footer__library-link) — перебиваю так же. */
html[data-iq-theme='light'] body.iq-variant-techspec .footer__library .footer__library-link { color: #0000ff !important; }
html[data-iq-theme='light'] body.iq-variant-techspec .social-icons__link { border-color: rgba(35, 36, 41, .22); }
html[data-iq-theme='light'] body.iq-variant-techspec .social-icons__link svg { fill: currentColor; color: #232429; }
html[data-iq-theme='light'] body.iq-variant-techspec .social-icons__link:hover { border-color: #0000ff; }
html[data-iq-theme='light'] body.iq-variant-techspec .social-icons__link:hover svg { color: #0000ff; }
html[data-iq-theme='light'] body.iq-variant-techspec .footer__support strong { color: #16171b; }

/* Обложка товара с наклоном Atropos (TiltCover в product/Gallery.tsx, 27.09.2026): обёртки на всю площадь. */
.product__img .iq-tilt,
.product__img .iq-tilt .atropos-scale,
.product__img .iq-tilt .atropos-rotate,
.product__img .iq-tilt .atropos-inner { display: block; width: 100%; height: 100%; }
.product__img .iq-tilt .atropos-inner { border-radius: inherit; }

/* Кабинет — мелкие детали «чертежа» (27.09.2026, выбор Артемия из плана: «крутые идеи — в первую очередь»).
   Рамки-листы с уголками и линейкой, подпись листа, приветствие граффити (TagType), номер заказа моно,
   статус штампом (Zeitmax), шкала скачиваний, нумерация меню. Область — .iq-account (layout кабинета). */
.iq-account {
  --acc: var(--iq-action-primary, #6ee7ff); --acc-hot: #ff5a1f;
  --acc-line: rgba(232, 236, 240, .16); --acc-mute: rgba(232, 236, 240, .42);
}
html[data-iq-theme='light'] .iq-account {
  --acc: #0000ff; --acc-line: rgba(22, 23, 27, .18); --acc-mute: rgba(22, 23, 27, .5);
}
/* Небо из точек (28.09.2026, TECHSPEC § 06): точки рисует канвас FlickeringDots (вставлен первым
   ребёнком в разметке кабинета — favorites/orders/account) — слой radial-gradient убран здесь,
   иначе точки задваивались бы. isolation — чтобы канвас с z-index:-1 не проваливался за фон листа. */
.iq-account .iq-sheet {
  position: relative;
  isolation: isolate;
  border-radius: 0 !important;
  background-image:
    linear-gradient(var(--acc), var(--acc)), linear-gradient(var(--acc), var(--acc)),
    linear-gradient(var(--acc), var(--acc)), linear-gradient(var(--acc), var(--acc)),
    linear-gradient(var(--acc), var(--acc)), linear-gradient(var(--acc), var(--acc)),
    linear-gradient(var(--acc), var(--acc)), linear-gradient(var(--acc), var(--acc)),
    repeating-linear-gradient(90deg, var(--acc-line) 0 1px, transparent 1px 8px);
  background-size: 14px 2px, 2px 14px, 14px 2px, 2px 14px, 14px 2px, 2px 14px, 14px 2px, 2px 14px, calc(100% - 48px) 5px;
  background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%, 24px calc(100% - 1px);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-origin: border-box;
}
.iq-account .iq-sheet::before,
.iq-account .iq-sheet::after {
  position: absolute; pointer-events: none;
  font: 500 10px/1 'IBM Plex Mono', ui-monospace, Menlo, monospace; letter-spacing: .16em; color: var(--acc-mute);
}
.iq-account .iq-sheet::before { content: attr(data-sheet); top: 14px; right: 20px; }
.iq-account .iq-sheet::after { content: 'IQ / ACC · REV 26'; bottom: 12px; right: 20px; }
@media (max-width: 767px) {
  .iq-account .iq-sheet::before { top: 8px; right: 12px; font-size: 9px; }
  .iq-account .iq-sheet { padding-top: 30px !important; }
  .iq-account .iq-sheet::after { display: none; }
}
.iq-account .iq-sheet .bg-card { border-radius: 0; }

.iq-account .iq-acc-hello {
  display: inline-block; margin: 6px 0 14px -2px;
  font: 400 clamp(30px, 4.2vw, 48px)/1 'IQ TagType', var(--iq-display, sans-serif);
  color: var(--acc); transform: rotate(-4deg); transform-origin: 0 100%;
}

.iq-account .iq-order-no { display: flex; align-items: baseline; gap: 10px; }
.iq-account .iq-order-no__num {
  font: 500 18px/1 'IBM Plex Mono', ui-monospace, Menlo, monospace; letter-spacing: .04em;
  color: var(--foreground, currentColor); opacity: 1;
}
.iq-account .iq-order-no { color: var(--acc-mute); }
.iq-account .iq-order-no__num { color: rgba(232, 236, 240, .92); }
html[data-iq-theme='light'] .iq-account .iq-order-no__num { color: #16171b; }

.iq-account .iq-stamp {
  --st: var(--acc);
  font: 400 13px/1 'IQ Zeitmax', var(--iq-font, sans-serif) !important; letter-spacing: .1em !important;
  padding: 6px 10px 5px !important; border: 2px solid var(--st); border-radius: 3px !important;
  outline: 1px solid var(--st); outline-offset: 2px;
  background: none !important; color: var(--st) !important;
  transform: rotate(-4deg); margin: 4px 6px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='70'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3.2 0 0 0 -.7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='70'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3.2 0 0 0 -.7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.iq-account .iq-stamp[data-status='processing'] { --st: var(--acc-hot); transform: rotate(3deg); }
.iq-account .iq-stamp[data-status='cancelled'],
.iq-account .iq-stamp[data-status='refunded'] { --st: var(--acc-mute); transform: rotate(-2deg); }

.iq-account .iq-dl-meter { display: inline-flex; align-items: center; gap: 3px; margin-top: 6px; }
.iq-account .iq-dl-meter i { width: 10px; height: 12px; border: 1px solid var(--acc-line); transform: skewX(-12deg); }
.iq-account .iq-dl-meter i[data-on] { background: var(--acc); border-color: var(--acc); }
.iq-account .iq-dl-meter b {
  margin-left: 8px; font: 500 11px/1 'IBM Plex Mono', ui-monospace, Menlo, monospace; letter-spacing: .08em; color: var(--acc-mute);
}

@media (min-width: 768px) {
  .iq-account .iq-account-nav { counter-reset: accnav; }
  .iq-account .iq-account-nav li { counter-increment: accnav; }
  .iq-account .iq-account-nav a::before {
    content: counter(accnav, decimal-leading-zero); margin-right: 12px;
    font: 500 10px/1 'IBM Plex Mono', ui-monospace, Menlo, monospace; letter-spacing: .06em; opacity: .5;
  }
  .iq-account .iq-account-nav a[aria-current='page']::after {
    content: ''; width: 22px; height: 1px; margin-left: 10px; background: currentColor;
  }
}
html[data-iq-theme='light'] .iq-account .iq-account-nav a[aria-current='page'] { color: #0000ff; border-color: #0000ff; }

/* Телефон, вошедший клиент (27.09.2026): «Личный кабинет» текстом наезжал на логотип (кнопка 106–260px при
   логотипе до 166px). До 559px — квадрат 44px с иконкой человека, как соседние кнопки темы и корзины. */
@media (max-width: 559px) {
  body.iq-variant-techspec .header__login .header__lk-btn {
    width: 44px; padding: 0; font-size: 0 !important; letter-spacing: 0; overflow: hidden;
  }
  body.iq-variant-techspec .header__login .header__lk-btn::before {
    content: ''; width: 20px; height: 20px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.2-4 4.3-6 8-6s6.8 2 8 6'/%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' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.2-4 4.3-6 8-6s6.8 2 8 6'/%3E%3C/svg%3E") center / contain no-repeat;
  }
}

/* Кабинет, фон листов (27.09.2026, Артемий: «коричневый фон не нравится»). Серый нейтральный #1b1b1b рядом с
   холодной страницей #0b0c0e читался тёплым/коричневым. Лист — холодный почти-чёрный с сеткой точек чертежа,
   вложенные карточки — на тон темнее. В светлой теме — прежние светлые тона плюс синяя сетка точек. */
.iq-account { --acc-sheet: #0d1015; --acc-card: #090b0f; --acc-dots: color-mix(in srgb, var(--iq-action-primary, #6ee7ff) 7%, transparent); }
html[data-iq-theme='light'] .iq-account { --acc-sheet: #f4f6f9; --acc-card: #fff; --acc-dots: rgba(0, 0, 255, .06); }
.iq-account .iq-sheet { background-color: var(--acc-sheet) !important; border-color: var(--acc-line) !important; }
.iq-account .iq-sheet .bg-card { background-color: var(--acc-card) !important; border-color: var(--acc-line) !important; }

/* Обложка-перевёртыш с 3D-пластинкой у музыки (27.09.2026, components/iq/vinyl3d): обёртка встаёт на место
   .product__img в ряду info-wrap — та же ширина и липкость, сама обложка внутри растягивается на обёртку.
   Галерея из нескольких фото (.iq-gallery, product/Gallery.tsx, 30.09.2026) встаёт туда же.
   Копия для телефона — под паспортом во всю ширину (30.09.2026; раньше плавала 200px слева в «Описании»).
   Какая копия видна — порог телефона TECHSPEC (< 760), с обеих сторон: тема прячет/показывает .product__img
   по 767px, и в полосе 760–767 без этого не было бы ни одной обложки или были бы обе. */
body.iq-variant-techspec.single-product .product__info-wrap > :is(.iq-vinyl-stage, .iq-gallery) {
  flex-shrink: 0; width: clamp(280px, 30vw, 400px); position: sticky; top: 135px; align-self: flex-start;
}
body.iq-variant-techspec.single-product .iq-vinyl-stage .product__img { width: 100% !important; position: static; }
@media (max-width: 759px) {
  body.iq-variant-techspec.single-product .product__info-wrap > :is(.product__img, .iq-vinyl-stage, .iq-gallery) { display: none; }
  body.iq-variant-techspec.single-product .product__info :is(.product__img--mobile, .iq-vinyl-stage--mobile, .iq-gallery--mobile) {
    display: block; float: none; width: 100% !important; max-width: none; margin: var(--iq-s-4) 0 0;
  }
  body.iq-variant-techspec.single-product .product__info .iq-gallery--mobile { display: flex; }
  body.iq-variant-techspec.single-product .iq-vinyl-stage--mobile .product__img--mobile { margin: 0; }
}
@media (min-width: 760px) {
  body.iq-variant-techspec.single-product .product__info-wrap > .product__img,
  body.iq-variant-techspec.single-product .product__info-wrap > .iq-vinyl-stage .product__img { display: block; max-width: none; }
  body.iq-variant-techspec.single-product .product__info :is(.product__img--mobile, .iq-vinyl-stage--mobile, .iq-gallery--mobile) { display: none; }
}

/* Кабинет: имя из ASCII-символов (AsciiName) с граффити-тегом «привет,» поверх левого верхнего угла. */
.iq-account .iq-acc-ascii { position: relative; margin: 4px 0 18px; }
.iq-account .iq-acc-ascii .iq-acc-hello { position: absolute; left: -6px; top: -14px; margin: 0; pointer-events: none; }

/* Мега-меню каталога гаснет сразу после перехода по его ссылке (флаг ставит CatalogMegaMenu, снимает уход курсора). */
html body .main-nav > li[data-mega-closed] .main-nav__column-submenu { visibility: hidden !important; opacity: 0 !important; pointer-events: none; }

/* «Горячая линия» (27.09.2026, Артемий: «накладывается») — плашка с текстом в левом нижнем углу лезла на
   боковое меню каталога и на поиск в мега-меню. Теперь квадрат 44px с иконкой трубки, подпись всплывает
   справа при наведении/фокусе; пока открыто мега-меню каталога — прячется. */
body.iq-variant-techspec .header-link {
  width: 44px; height: 44px; padding: 0 !important;
  display: grid; place-items: center;
  border: 1px solid var(--iq-hair-strong);
  border-radius: var(--iq-radius-panel, 3px);
  background: var(--iq-bg-surface, #131519);
}
body.iq-variant-techspec .header-link:hover,
body.iq-variant-techspec .header-link:focus-visible {
  border-color: var(--iq-action-primary);
}
body.iq-variant-techspec .header-link::before {
  content: ''; width: 20px; height: 20px; background: var(--iq-action-primary, #6ee7ff);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%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' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.iq-variant-techspec .header-link > span {
  position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
  padding: 8px 10px; white-space: nowrap; font-size: 11px !important;
  background: var(--iq-bg-surface-raised, #151920); border: 1px solid var(--iq-hair-strong, rgba(232,236,240,.2));
  opacity: 0; pointer-events: none; transition: opacity .15s;
}
body.iq-variant-techspec .header-link:hover > span,
body.iq-variant-techspec .header-link:focus-visible > span { opacity: 1; }
body:has(.main-nav > li:hover > .iq-mega, .main-nav > li:focus-within > .iq-mega) .header-link { opacity: 0; pointer-events: none; }

/* Мега-меню каталога в фирменном стиле (27.09.2026): лист чертежа (уголки, линейка, подпись SHEET · REV),
   номера разделов готикой Blackcraft, пластинки выезжают из конвертов направлений и новинок, штампы Zeitmax. */
.iq-mega__sec { grid-template-columns: 40px 1fr auto; }
.iq-mega__sec-no {
  font: 400 26px/1 'IQ Blackcraft', var(--iq-display, serif); color: var(--iq-mega-dim);
  text-align: center; transition: color .18s, text-shadow .18s, transform .25s var(--iq-mega-ease);
}
.iq-mega__sec:hover .iq-mega__sec-no { color: var(--iq-mega-muted); }
.iq-mega__sec--on .iq-mega__sec-no { color: var(--iq-mega-cyan); text-shadow: 0 0 14px var(--iq-mega-cyan-dim); transform: scale(1.08); }
.iq-mega__sec i, .iq-mega__dir-sub, .iq-mega__bpm-n, .iq-mega__tile i { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; }

.iq-mega__stage {
  background:
    linear-gradient(var(--iq-mega-cyan), var(--iq-mega-cyan)) 10px 10px / 14px 1px no-repeat,
    linear-gradient(var(--iq-mega-cyan), var(--iq-mega-cyan)) 10px 10px / 1px 14px no-repeat,
    linear-gradient(var(--iq-mega-cyan), var(--iq-mega-cyan)) calc(100% - 10px) calc(100% - 10px) / 14px 1px no-repeat,
    linear-gradient(var(--iq-mega-cyan), var(--iq-mega-cyan)) calc(100% - 10px) calc(100% - 10px) / 1px 14px no-repeat,
    radial-gradient(circle, color-mix(in srgb, var(--iq-action-primary, #6ee7ff) 6%, transparent) 1px, transparent 1.2px) 0 0 / 16px 16px;
}
/* Линейка по верхнему краю листа: мелкие деления через 8px, крупные через 64px. */
.iq-mega__stage::before {
  content: ''; position: absolute; left: 32px; right: 32px; top: 0; height: 8px; pointer-events: none; opacity: .5;
  background:
    repeating-linear-gradient(90deg, var(--iq-mega-line-hi) 0 1px, transparent 1px 64px) 0 0 / 100% 8px no-repeat,
    repeating-linear-gradient(90deg, var(--iq-mega-line) 0 1px, transparent 1px 8px) 0 0 / 100% 4px no-repeat;
}
.iq-mega__sheet {
  position: absolute; right: 32px; bottom: 8px; pointer-events: none;
  font: 500 9.5px/1 'IBM Plex Mono', ui-monospace, Menlo, monospace; letter-spacing: .2em; color: var(--iq-mega-dim);
}

/* Направления: конверт + пластинка вместо эквалайзера. */
.iq-mega__dir { align-items: center; }
.iq-mega__dir-t .iq-mega__dir-sub { display: block; margin-top: 4px; font-weight: 500; font-size: 11.5px; color: var(--iq-mega-muted); font-variant-numeric: tabular-nums; }
.iq-mega__disc { position: relative; flex: none; width: 58px; height: 58px; margin-right: 12px; }
.iq-mega__disc-sleeve {
  position: absolute; inset: 0; z-index: 1; transition: transform .45s var(--iq-mega-ease); border-radius: 3px;
  background: var(--iq-mega-void) center / cover; border: 1px solid var(--iq-mega-line);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .45);
}
.iq-mega__disc-rec, .iq-mega__cover-rec {
  position: absolute; border-radius: 50%;
  background:
    radial-gradient(circle, var(--iq-mega-c, var(--iq-mega-cyan)) 0 17%, #050506 17.5% 19%, transparent 19.5%),
    repeating-radial-gradient(circle, #101114 0 1px, #2a2d33 1.5px 2.5px),
    #101114;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 12px rgba(0, 0, 0, .5);
  transition: transform .45s var(--iq-mega-ease);
}
.iq-mega__disc-rec { inset: 3px; }
.iq-mega__disc-rec::after, .iq-mega__cover-rec::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 30deg, transparent 0 20%, rgba(255, 255, 255, .09) 25%, transparent 32% 70%, rgba(255, 255, 255, .06) 76%, transparent 82%);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .iq-mega__dir:hover .iq-mega__disc-sleeve { transform: translateX(-20px) rotate(-3deg); }
  .iq-mega__dir:hover .iq-mega__disc-rec { transform: translateX(18px) rotate(200deg); animation: iq-mega-spin 1.8s linear .45s infinite; }
  .iq-mega__covers a:hover .iq-mega__cover-rec { transform: translateY(-30%) rotate(160deg); }
}
@keyframes iq-mega-spin { from { transform: translateX(18px) rotate(200deg); } to { transform: translateX(18px) rotate(560deg); } }
.iq-mega__dir::before { opacity: .06; }

/* Новинки: пластинка выглядывает из-за обложки, свежие — штамп NEW. */
.iq-mega__cover-art { position: relative; display: block; }
.iq-mega__cover-art .iq-mega__cover-img { position: relative; z-index: 1; border-radius: 3px; }
.iq-mega__cover-rec { --iq-mega-c: var(--iq-mega-cyan); inset: 6%; }
.iq-mega__covers { padding-top: 12px; }

.iq-mega__stamp {
  position: absolute; z-index: 2; right: 6px; top: 6px; padding: 4px 6px 3px;
  font: 400 11px/1 'IQ Zeitmax', var(--iq-font, sans-serif); letter-spacing: .1em; color: var(--iq-mega-cyan);
  border: 1.5px solid currentColor; outline: 1px solid currentColor; outline-offset: 1.5px; border-radius: 2px;
  background: rgba(7, 8, 10, .8); transform: rotate(6deg); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='70'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3.2 0 0 0 -.7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='70'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3.2 0 0 0 -.7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.iq-mega__hot-photo .iq-mega__stamp { right: auto; top: auto; left: 18px; bottom: 16px; font-size: 15px; padding: 6px 9px 5px; transform: rotate(-4deg); background: #0d0b08; }
.iq-mega__stamp--gold { color: var(--iq-mega-gold); }

html[data-iq-theme='light'] .iq-mega__stage {
  background:
    linear-gradient(var(--iq-mega-cyan), var(--iq-mega-cyan)) 10px 10px / 14px 1px no-repeat,
    linear-gradient(var(--iq-mega-cyan), var(--iq-mega-cyan)) 10px 10px / 1px 14px no-repeat,
    linear-gradient(var(--iq-mega-cyan), var(--iq-mega-cyan)) calc(100% - 10px) calc(100% - 10px) / 14px 1px no-repeat,
    linear-gradient(var(--iq-mega-cyan), var(--iq-mega-cyan)) calc(100% - 10px) calc(100% - 10px) / 1px 14px no-repeat,
    radial-gradient(circle, rgb(0 0 255 / 8%) 1px, transparent 1.2px) 0 0 / 16px 16px;
}
html[data-iq-theme='light'] .iq-mega__stamp { background: rgb(255 255 255 / 80%); }

/* «Темп, BPM» — пульт (27.09.2026): табло готикой + метроном в темпе диапазона, каналы-индикаторы из сегментов. */
.iq-mega__deck { padding: 14px 16px 12px; }
.iq-mega__deck-read { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px dashed var(--iq-mega-line); }
.iq-mega__deck-num { display: flex; align-items: baseline; gap: 8px; min-width: 150px; }
.iq-mega__deck-num b {
  font: 400 34px/1 'IQ Blackcraft', var(--iq-display, serif); color: var(--iq-mega-cyan);
  text-shadow: 0 0 18px var(--iq-mega-cyan-dim); animation: iq-mega-flick .32s steps(3) both;
}
.iq-mega__deck-num span, .iq-mega__deck-meta small { font: 500 10px/1 'IBM Plex Mono', ui-monospace, Menlo, monospace; letter-spacing: .2em; color: var(--iq-mega-dim); }
@keyframes iq-mega-flick { 0% { opacity: .2; transform: translateY(2px); } 50% { opacity: .9; } 70% { opacity: .5; } 100% { opacity: 1; transform: none; } }
.iq-mega__deck-meta { display: flex; flex-direction: column; gap: 6px; font: 500 13px/1.2 'IBM Plex Mono', ui-monospace, Menlo, monospace; color: var(--iq-mega-text); }
.iq-mega__deck-meta small { letter-spacing: .08em; }
.iq-mega__metro { position: relative; width: 84px; height: 50px; overflow: hidden; }
.iq-mega__metro::before { /* шкала-дуга */
  content: ''; position: absolute; left: 2px; right: 2px; top: 4px; height: 90px; border-radius: 50%;
  border: 1px solid var(--iq-mega-line-hi); border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent;
}
.iq-mega__metro-arm {
  position: absolute; left: calc(50% - 1px); bottom: -2px; width: 2px; height: 46px; border-radius: 2px;
  background: linear-gradient(var(--iq-mega-cyan), color-mix(in srgb, var(--iq-action-primary, #6ee7ff) 30%, transparent)); transform-origin: 50% 100%;
  animation: iq-mega-metro var(--iq-mega-beat, .5s) ease-in-out infinite alternate;
}
.iq-mega__metro-arm::before { content: ''; position: absolute; left: -3px; top: 8px; width: 8px; height: 5px; border-radius: 1px; background: var(--iq-mega-cyan); }
.iq-mega__metro-led {
  position: absolute; right: 0; top: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--iq-mega-cyan);
  box-shadow: 0 0 8px var(--iq-mega-cyan); animation: iq-mega-led var(--iq-mega-beat, .5s) steps(1) infinite;
}
@keyframes iq-mega-metro { from { transform: rotate(-28deg); } to { transform: rotate(28deg); } }
@keyframes iq-mega-led { 0% { opacity: 1; } 30% { opacity: .15; } }

.iq-mega__deck .iq-mega__bpm-row { height: 104px; gap: 8px; }
.iq-mega__deck .iq-mega__bpm { gap: 7px; }
.iq-mega__vu { display: flex; flex-direction: column-reverse; gap: 2px; flex: 1; justify-content: flex-start; }
.iq-mega__vu i { height: 4px; border-radius: 1px; background: rgba(232, 236, 240, .05); transition: background .2s, box-shadow .2s; }
.iq-mega__vu i[data-lit] { background: color-mix(in srgb, var(--iq-action-primary, #6ee7ff) 32%, transparent); }
.iq-mega__vu i[data-lit]:nth-child(n + 10) { background: rgba(255, 138, 92, .4); }
.iq-mega__vu i[data-lit]:nth-child(n + 13) { background: rgba(255, 92, 138, .5); }
.iq-mega__bpm--on .iq-mega__vu i[data-lit] { background: var(--iq-mega-cyan); box-shadow: 0 0 6px color-mix(in srgb, var(--iq-action-primary, #6ee7ff) 45%, transparent); }
.iq-mega__bpm--on .iq-mega__vu i[data-lit]:nth-child(n + 10) { background: #ff8a5c; box-shadow: 0 0 6px rgba(255, 138, 92, .5); }
.iq-mega__bpm--on .iq-mega__vu i[data-lit]:nth-child(n + 13) { background: #ff5c8a; box-shadow: 0 0 6px rgba(255, 92, 138, .5); }
.iq-mega__bpm--on .iq-mega__bpm-n { color: var(--iq-mega-cyan); }
.iq-mega__deck .iq-mega__bpm-n { border-top: 1px solid var(--iq-mega-line); padding-top: 6px; }
.iq-mega__bpm--on .iq-mega__bpm-n { border-top-color: var(--iq-mega-cyan); }

html[data-iq-theme='light'] .iq-mega__vu i { background: rgb(35 36 41 / 7%); }
html[data-iq-theme='light'] .iq-mega__vu i[data-lit] { background: rgb(0 0 255 / 28%); }
html[data-iq-theme='light'] .iq-mega__bpm--on .iq-mega__vu i[data-lit] { background: #0000ff; box-shadow: none; }
html[data-iq-theme='light'] .iq-mega__metro-arm { background: #0000ff; }
html[data-iq-theme='light'] .iq-mega__metro-arm::before, html[data-iq-theme='light'] .iq-mega__metro-led { background: #0000ff; box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .iq-mega__metro-arm, .iq-mega__metro-led, .iq-mega__deck-num b { animation: none; }
}

/* ===== Фирменные микро-детали (27.09.2026) ===== */

/* Переход страниц — мини-пластинка по центру (app/(app)/loading.tsx). */
.iq-route-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  min-height: 52vh; padding: 48px 16px;
  font: 500 10px/1 'IBM Plex Mono', ui-monospace, Menlo, monospace; letter-spacing: .24em; color: var(--iq-muted, #8a929c);
  animation: iq-fade-in 240ms 180ms var(--iq-ease-out) both; /* быстрый переход не мигает пластинкой */
}

/* Корзина в шапке: мини-пластинка выпрыгивает из иконки и падает обратно, иконка подпрыгивает. */
.header__cart-wrap { position: relative; }
.iq-cart-drop { position: absolute; left: 50%; top: 50%; z-index: 3; pointer-events: none; animation: iq-cart-drop 720ms cubic-bezier(.3, .7, .4, 1) both; }
.iq-cart-drop > span { display: block; margin: -8px 0 0 -8px; }
@keyframes iq-cart-drop {
  0% { transform: translate(0, 0) scale(.4) rotate(0); opacity: 0; }
  18% { opacity: 1; }
  45% { transform: translate(-6px, -34px) scale(1) rotate(200deg); }
  82% { transform: translate(0, -2px) scale(.7) rotate(420deg); opacity: 1; }
  100% { transform: translate(0, 0) scale(.3) rotate(480deg); opacity: 0; }
}
.header__cart-wrap[data-bump] .header__cart { animation: iq-cart-hop 560ms 480ms var(--iq-ease-out) both; }
.header__cart-wrap[data-bump='0'] .header__cart { animation-name: iq-cart-hop-b; } /* смена имени перезапускает прыжок на каждое добавление */
@keyframes iq-cart-hop { 0%, 100% { transform: none; } 30% { transform: translateY(3px) scaleY(.88); } 60% { transform: translateY(-5px); } }
@keyframes iq-cart-hop-b { 0%, 100% { transform: none; } 30% { transform: translateY(3px) scaleY(.88); } 60% { transform: translateY(-5px); } }

/* Штамп «В КОРЗИНЕ» (Zeitmax, рваная краска как у штампов заказа) — на обложке карточки каталога и на
   обложке товара, пока товар в корзине. Флаг — data-in-cart на кнопке (CardActions / AddToCart). */
.catalog-item--vinyl:has(.catalog-item__cart[data-in-cart]) .catalog-item__vinyl-sleeve::after,
body.single-product:has(button[data-in-cart]) :is(.product__img, .iq-gallery__stage)::after {
  content: 'В КОРЗИНЕ';
  /* У .catalog-item__image::after темы — inset:0 на весь конверт: сбрасываем габариты явно. */
  position: absolute; z-index: 6; inset: auto auto 12% 8%; width: auto; height: auto; margin: 0; pointer-events: none;
  padding: 7px 12px 6px;
  font: 400 18px/1 'IQ Zeitmax', var(--iq-font, sans-serif); letter-spacing: .1em; white-space: nowrap;
  color: #ff4f80; border: 2px solid currentColor; outline: 1px solid currentColor; outline-offset: 2px; border-radius: 3px;
  background: rgb(9 10 13 / 78%); text-shadow: 0 0 10px rgb(255 79 128 / 45%);
  transform: rotate(-9deg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='70'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3.2 0 0 0 -.7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='70'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3.2 0 0 0 -.7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: iq-stamp-slam 380ms cubic-bezier(.2, .9, .3, 1.2) both;
}
body.single-product:has(button[data-in-cart]) :is(.product__img, .iq-gallery__stage)::after { font-size: 26px; padding: 10px 16px 9px; inset: auto auto 9% 7%; }
body.single-product:has(button[data-in-cart]) :is(.product__img--mobile, .iq-gallery--mobile .iq-gallery__stage)::after { font-size: 18px; padding: 7px 12px 6px; }
@keyframes iq-stamp-slam {
  0% { opacity: 0; transform: rotate(-22deg) scale(2.2); }
  60% { opacity: 1; transform: rotate(-7deg) scale(.94); }
  100% { opacity: 1; transform: rotate(-9deg) scale(1); }
}
html[data-iq-theme='light'] :is(.catalog-item__vinyl-sleeve, .product__img, .iq-gallery__stage)::after { color: #e0004f; background: rgb(255 255 255 / 70%); }

/* Сердечко избранного — наклейка: розовое сердце с белой каймой шлёпается на кнопку, при снятии отклеивается. */
.catalog-item__like { position: relative; }
.catalog-item__like:is([aria-pressed='true'], [data-peel])::before { opacity: 0; }
.catalog-item__like:is([aria-pressed='true'], [data-peel])::after {
  content: '';
  position: absolute; left: 50%; top: 50%; width: 24px; height: 22px; margin: -11px 0 0 -12px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 20.5 3.6 12.4C1 9.8 1.2 5.6 4.2 3.4 6.8 1.6 10 2.4 12 5c2-2.6 5.2-3.4 7.8-1.6 3 2.2 3.2 6.4.6 9Z' fill='%23ff5c8a' stroke='%23fff' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M17.5 4.6c1 .5 1.8 1.4 2 2.6' fill='none' stroke='%23fff' stroke-opacity='.7' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgb(0 0 0 / 45%));
  transform: rotate(-8deg);
  animation: iq-sticker-on 340ms cubic-bezier(.2, .9, .3, 1.25) both;
}
.catalog-item__like[data-peel]::after { animation: iq-sticker-peel 440ms cubic-bezier(.5, 0, .75, 0) both; transform-origin: 20% 90%; }
@keyframes iq-sticker-on { 0% { opacity: 0; transform: rotate(-30deg) scale(1.9); } 100% { opacity: 1; transform: rotate(-8deg) scale(1); } }
@keyframes iq-sticker-peel {
  0% { transform: rotate(-8deg); opacity: 1; }
  40% { transform: perspective(60px) rotateX(35deg) rotate(-4deg) translateY(-2px); }
  100% { transform: perspective(60px) rotateX(70deg) rotate(18deg) translate(10px, -22px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .iq-cart-drop { display: none; }
  .header__cart-wrap[data-bump] .header__cart,
  .catalog-item__like:is([aria-pressed='true'], [data-peel])::after,
  .catalog-item--vinyl .catalog-item__vinyl-sleeve::after,
  :is(.product__img, .iq-gallery__stage)::after { animation: none; }
}

/* Статья новости на телефоне была без заголовка (найдено 27.09.2026, и на бою): тема прячет обычный
   заголовок при ≤767px, а вариант techspec — мобильный. Оставляем обычный, он уже свёрстан под techspec. */
@media (width <= 767px) {
  body.iq-variant-techspec .single-news__title { display: block; }
}

/* Статичные страницы (оферта, контакты, конвенция, подписка — app/(app)/[slug]) — обход фирстиля 27.09.2026:
   раньше заголовок был мелким текстом, над ним — пустой герой в 64px, а сетка .legal__inner темы (колонка 300px
   под оглавление, которого нет) уводила заголовок вправо. Теперь: крупный заголовок как у «Новостей», текст на листе. */
html body.iq-variant-techspec .iq-page__inner,
html body .iq-page__inner {
  display: block; width: min(1100px, 100% - 32px); margin-inline: auto; padding: 28px 0 88px;
}
.iq-page__inner > :not(.iq-page__sheet) :is(h1, h2),
.iq-page__title {
  margin: 0 0 22px; max-width: 22ch;
  font: 700 clamp(28px, 4.6vw, 56px)/1.02 var(--iq-display, 'IQ Unbounded', sans-serif);
  letter-spacing: var(--iq-heading-tracking, -.01em); text-transform: uppercase; overflow-wrap: anywhere;
  color: var(--iq-fg-primary, #e8ecf0);
}
.iq-page__sheet { padding: 40px clamp(16px, 4vw, 48px) 44px; }
.iq-page__sheet > * { max-width: 78ch; }
.iq-page__sheet :is(h1, h2) {
  font: 700 clamp(22px, 3.2vw, 36px)/1.1 var(--iq-display, 'IQ Unbounded', sans-serif);
  text-transform: none; overflow-wrap: anywhere; hyphens: auto; margin: 1.4em 0 .6em;
}
.iq-page__sheet :is(h1, h2):first-child { margin-top: 0; }
.iq-page__sheet h3 { font-size: clamp(17px, 2vw, 21px); margin: 1.3em 0 .5em; }
.iq-page__sheet :is(p, li) { line-height: 1.65; }
.iq-page__sheet a { color: var(--iq-action-signal, var(--iq-action-primary, #6ee7ff)); text-underline-offset: 3px; }
.iq-page__sheet table { width: 100%; border-collapse: collapse; }
.iq-page__sheet :is(td, th) { border: 1px solid var(--iq-hair, rgba(232, 236, 240, .12)); padding: 10px 12px; vertical-align: top; }
.iq-page__sheet td:first-child { font: 500 11px/1.3 'IBM Plex Mono', ui-monospace, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--iq-muted, #8a929c); width: 30%; }
@media (width <= 767px) {
  html body.iq-variant-techspec .iq-page__inner, html body .iq-page__inner { padding-top: 16px; }
  .iq-page__sheet { padding: 34px 14px 30px; }
}
/* Герой страницы (конвенция: свой заголовок в hero.richText) — без собственных отступов контейнера. */
.iq-page__inner > :not(.iq-page__sheet):not(h1) { margin: 0 0 22px; padding: 0; max-width: none; width: auto; }

/* Отзыв на карточке товара (27.09.2026, «коряво»): белая рамка темы вокруг формы, звёзды столбиком, сумма
   кэшбэка тёмно-синим по чёрному. Теперь форма — лист чертежа, звёзды в ряд с подсветкой при наведении. */
body .product__reviews-inner #review_form_wrapper,
body .product__reviews-inner #review_form { background: none !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
body .product__reviews-inner #respond {
  position: relative; margin-top: 18px; padding: 36px clamp(16px, 3vw, 32px) 28px;
  border: 1px solid var(--iq-hair, rgba(232, 236, 240, .12)); border-radius: 0 !important;
  background:
    linear-gradient(var(--iq-action-signal, var(--iq-action-primary, #6ee7ff)), var(--iq-action-signal, var(--iq-action-primary, #6ee7ff))) 0 0 / 14px 1px no-repeat,
    linear-gradient(var(--iq-action-signal, var(--iq-action-primary, #6ee7ff)), var(--iq-action-signal, var(--iq-action-primary, #6ee7ff))) 0 0 / 1px 14px no-repeat,
    linear-gradient(var(--iq-action-signal, var(--iq-action-primary, #6ee7ff)), var(--iq-action-signal, var(--iq-action-primary, #6ee7ff))) 100% 100% / 14px 1px no-repeat,
    linear-gradient(var(--iq-action-signal, var(--iq-action-primary, #6ee7ff)), var(--iq-action-signal, var(--iq-action-primary, #6ee7ff))) 100% 100% / 1px 14px no-repeat,
    radial-gradient(circle, color-mix(in srgb, var(--iq-action-primary, #6ee7ff) 6%, transparent) 1px, transparent 1.2px) 0 0 / 16px 16px,
    var(--iq-bg-surface, #0d1015) !important;
}
body .product__reviews-inner #respond::before {
  content: 'SHEET · REVIEW'; position: absolute; top: 12px; right: 16px;
  font: 500 9.5px/1 'IBM Plex Mono', ui-monospace, Menlo, monospace; letter-spacing: .2em; color: var(--iq-muted, #8a929c);
}
body .product__reviews-inner .comment-reply-title { display: block; margin: 0 0 18px; }
body .product__reviews-inner .comment-form-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-bottom: 14px; }
body .product__reviews-inner .comment-form-rating label { margin: 0; }
body .product__reviews-inner p.stars { display: inline-flex !important; flex-direction: row !important; gap: 2px; margin: 0 !important; }
body .product__reviews-inner p.stars button {
  display: inline-block !important; width: 34px; height: 34px; padding: 0 !important; border: 0 !important; background: none !important;
  font-size: 26px; line-height: 34px; color: #ffd35c !important; opacity: .28; cursor: pointer; transition: opacity .12s, transform .15s var(--iq-ease-out, ease);
}
body .product__reviews-inner p.stars button[data-on] { opacity: 1; }
@media (hover: hover) {
  body .product__reviews-inner p.stars:hover button { opacity: 1; }
  body .product__reviews-inner p.stars button:hover ~ button { opacity: .28; }
  body .product__reviews-inner p.stars button:hover { transform: scale(1.15); }
}
body .product__reviews-inner p.stars button:focus-visible { outline: 2px solid var(--iq-action-signal, var(--iq-action-primary, #6ee7ff)); outline-offset: 2px; }
body .product__reviews-inner .review-cashback-cta { margin: 0 0 18px; color: var(--iq-muted, #8a929c); }
body .product__reviews-inner .review-cashback-cta b {
  display: inline-block; margin: 0 2px; padding: 3px 7px 2px; transform: rotate(-3deg);
  font: 400 14px/1 'IQ Zeitmax', var(--iq-font, sans-serif); letter-spacing: .06em;
  color: #ff4f80; border: 1.5px solid currentColor; border-radius: 2px;
}
body .product__reviews-inner #comment {
  width: 100%; min-height: 150px; padding: 14px 16px; border: 1px solid var(--iq-hair, rgba(232, 236, 240, .14)) !important;
  border-radius: 0 !important; background: rgb(0 0 0 / 25%) !important; color: inherit; resize: vertical;
}
body .product__reviews-inner #comment:focus { outline: none; border-color: var(--iq-action-signal, var(--iq-action-primary, #6ee7ff)) !important; }
html[data-iq-theme='light'] body .product__reviews-inner #respond { background-color: #f4f6f9 !important; }
html[data-iq-theme='light'] body .product__reviews-inner #comment { background: #fff !important; }
html[data-iq-theme='light'] body .product__reviews-inner p.stars button { color: #e0a800 !important; }

/* Каталог: «Подбор по BPM» и «Отбей темп» (27.09.2026, ревью владельца: отступы снизу). Ровные поля 28/32,
   блоки разведены между собой и отделены от сетки карточек; «Отбей темп» — пластинка слева, подсказка справа. */
body.iq-variant-techspec .main-catalog__list > .iq-discovery { padding: 26px 32px 28px !important; margin-bottom: 14px; }
body.iq-variant-techspec .main-catalog__list > .iq-discovery + .iq-discovery { margin-top: 0; }
body.iq-variant-techspec .main-catalog__list > .iq-discovery:has(+ :not(.iq-discovery)) { margin-bottom: 24px; }
.iq-discovery:has(.iq-tap-tempo__pad) { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 24px; }
.iq-discovery:has(.iq-tap-tempo__pad) > .iq-discovery__head { grid-column: 1 / -1; margin-bottom: 16px; }
.iq-discovery .iq-tap-tempo__pad {
  margin: 0 !important; width: 104px; height: 104px; border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 30%, #050506 30.5% 32%, transparent 32.5%),
    repeating-radial-gradient(circle, #101114 0 1px, #1f2227 1.5px 3px) !important;
}
.iq-discovery .iq-tap-tempo__pad.is-pulsing { animation: iq-tap-spin .3s var(--iq-ease-out, ease); }
@keyframes iq-tap-spin { from { rotate: 0deg; } to { rotate: 40deg; } }
.iq-discovery .iq-tap-tempo__result { margin: 0 !important; max-width: 46ch; }
html[data-iq-theme='light'] .iq-discovery .iq-tap-tempo__pad {
  background: radial-gradient(circle, transparent 0 30%, #c9ced8 30.5% 32%, transparent 32.5%), repeating-radial-gradient(circle, #eef1f5 0 1px, #dfe3ea 1.5px 3px) !important;
}
@media (width <= 767px) {
  body.iq-variant-techspec .main-catalog__list > .iq-discovery { padding: 18px 16px 20px !important; }
  .iq-discovery .iq-tap-tempo__pad { width: 84px; height: 84px; }
}
@media (prefers-reduced-motion: reduce) { .iq-discovery .iq-tap-tempo__pad.is-pulsing { animation: none; } }

/* Мобильное меню в фирстиле (27.09.2026): как меню каталога на ПК — номера разделов готикой Blackcraft
   вместо значков, подпись листа сверху и ревизия снизу, подразделы — треклист «стороны A» (A1, A2…)
   с мини-пластинкой у каждого пункта; текущий раздел — пластинка крутится. Подпись стороны —
   data-side у .mobile-menu__back (CatalogTree). */
body.iq-variant-techspec .help-block .mobile-menu { counter-reset: iq-mm iq-nav 1; }
@media (max-width: 991px) {
body.iq-variant-techspec .help-block__inner::before {
  content: 'SHEET 00 · НАВИГАЦИЯ · IQ FITNESS';
  display: block; padding: 10px 20px 9px; text-align: left;
  font: 500 10px/1 'IBM Plex Mono', ui-monospace, Menlo, monospace; letter-spacing: .16em; color: rgba(232, 236, 240, .42);
  border-bottom: 1px dashed rgba(232, 236, 240, .14);
}
body.iq-variant-techspec .help-block__inner::after {
  content: 'IQ / NAV · SIDE A · 33⅓ RPM · REV 26';
  display: block; padding: 18px 20px calc(18px + env(safe-area-inset-bottom, 0px)) 50px;
  font: 500 10px/1 'IBM Plex Mono', ui-monospace, Menlo, monospace; letter-spacing: .16em; color: rgba(232, 236, 240, .42);
  background: radial-gradient(circle, #0b0c0e 0 1.5px, var(--iq-action-primary, #6ee7ff) 1.5px 4.5px, #1b1e24 4.5px 5.2px, #23272f 5.2px 6px, #1b1e24 6px 7px, #23272f 7px 7.8px, #1b1e24 7.8px 9.5px, rgba(232, 236, 240, .2) 9.5px 10px, transparent 10px) 20px 50% / 20px 20px no-repeat;
}
}

/* «КАТАЛОГ» и пункты навигации — ярлыки листов моно справа. */
body.iq-variant-techspec .help-block .mobile-menu > li > a { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body.iq-variant-techspec .help-block .mobile-menu > li:first-child > a::after,
body.iq-variant-techspec .help-block .mobile-menu > li.menu-item > a::after {
  font: 500 10px/1 'IBM Plex Mono', ui-monospace, Menlo, monospace; letter-spacing: .16em; color: rgba(232, 236, 240, .42);
}
body.iq-variant-techspec .help-block .mobile-menu > li:first-child > a::after { content: 'SHEET 01 · INDEX'; }
body.iq-variant-techspec .help-block .mobile-menu > li.menu-item { counter-increment: iq-nav; }
body.iq-variant-techspec .help-block .mobile-menu > li.menu-item > a::after { content: 'SHEET ' counter(iq-nav, decimal-leading-zero); }

/* Разделы каталога: номер готикой вместо значка. */
body.iq-variant-techspec .mobile-menu__catalog > li { position: relative; counter-increment: iq-mm; }
body.iq-variant-techspec .mobile-menu__catalog > li::before {
  content: counter(iq-mm, decimal-leading-zero);
  display: block; position: absolute; z-index: 1; left: 18px; top: 15px; width: auto; height: auto; margin: 0;
  background: none; transform: none; pointer-events: none;
  font: 400 22px/1 'IQ Blackcraft', var(--iq-display, serif); color: rgba(232, 236, 240, .34);
}
body.iq-variant-techspec .mobile-menu__catalog > li.current-menu-item::before,
body.iq-variant-techspec .mobile-menu__catalog > li:has(> a[aria-current='page'])::before { color: var(--iq-action-primary, #6ee7ff); }
body.iq-variant-techspec .mobile-menu__catalog > li > a.iq-icon-inline .iq-menu-icon { display: none; }
body.iq-variant-techspec .mobile-menu__catalog > li > a { padding-left: 58px; }

/* Подраздел — треклист: A1, A2… и мини-пластинка справа. */
body.iq-variant-techspec .mobile-menu__catalog .sub-menu { counter-reset: iq-trk; }
body.iq-variant-techspec .mobile-menu__back::after {
  content: attr(data-side);
  display: block; padding: 10px 20px 9px; text-transform: uppercase;
  font: 500 10px/1 'IBM Plex Mono', ui-monospace, Menlo, monospace; letter-spacing: .16em; color: rgba(232, 236, 240, .42);
  border-top: 1px dashed rgba(232, 236, 240, .14); background: #0b0c0e;
}
body.iq-variant-techspec .mobile-menu__catalog .sub-menu li.menu-item { counter-increment: iq-trk; }
body.iq-variant-techspec .mobile-menu__catalog .sub-menu a { display: flex; align-items: center; gap: 14px; }
body.iq-variant-techspec .mobile-menu__catalog .sub-menu a::before {
  content: 'A' counter(iq-trk);
  flex: 0 0 26px;
  font: 500 11px/1 'IBM Plex Mono', ui-monospace, Menlo, monospace; letter-spacing: .06em; color: color-mix(in srgb, var(--iq-action-primary, #6ee7ff) 70%, transparent);
}
body.iq-variant-techspec .mobile-menu__catalog .sub-menu a::after {
  content: ''; flex: 0 0 24px; height: 24px; margin-left: auto; border-radius: 50%;
  background:
    conic-gradient(from 20deg, transparent 0 34deg, rgb(255 255 255 / 16%) 44deg, transparent 54deg 200deg, rgb(255 255 255 / 10%) 212deg, transparent 224deg),
    radial-gradient(circle, #0b0c0e 0 1.5px, rgba(232, 236, 240, .55) 1.5px 5px, #16181d 5px 5.6px, #20232a 5.6px 6.4px, #16181d 6.4px 7.6px, #20232a 7.6px 8.4px, #16181d 8.4px 12px);
  box-shadow: 0 0 0 1px rgba(232, 236, 240, .14);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
body.iq-variant-techspec .mobile-menu__catalog .sub-menu a:is(:hover, :active, :focus-visible)::after { transform: rotate(200deg); }
body.iq-variant-techspec .mobile-menu__catalog .sub-menu li.current-menu-item > a { color: var(--iq-action-primary, #6ee7ff); }
body.iq-variant-techspec .mobile-menu__catalog .sub-menu li.current-menu-item > a::after {
  background:
    conic-gradient(from 20deg, transparent 0 34deg, rgb(255 255 255 / 16%) 44deg, transparent 54deg 200deg, rgb(255 255 255 / 10%) 212deg, transparent 224deg),
    radial-gradient(circle, #0b0c0e 0 1.5px, var(--iq-action-primary, #6ee7ff) 1.5px 5px, #16181d 5px 5.6px, #20232a 5.6px 6.4px, #16181d 6.4px 7.6px, #20232a 7.6px 8.4px, #16181d 8.4px 12px);
  animation: iq-mm-spin 1.8s linear infinite;
}
@keyframes iq-mm-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  body.iq-variant-techspec .mobile-menu__catalog .sub-menu a::after { transition: none; animation: none !important; }
}

/* Светлая тема мобильного меню (27.09.2026). До этого на бою было нечитаемо: пункты «Каталог», «Новинки»,
   «Новости» — светлый текст (#e8ecf0 из правок выше, они грузятся после iq-p-light.css и при равной
   специфичности выигрывают) на белом, а разделы каталога — тёмный текст на зашитом #131519. */
html[data-iq-theme='light'] body.iq-variant-techspec .help-block .mobile-menu > li > a,
html[data-iq-theme='light'] body.iq-variant-techspec .help-block .mobile-menu > li:nth-of-type(n) > a,
html[data-iq-theme='light'] body.iq-variant-techspec .help-block .mobile-menu__catalog > li > a,
html[data-iq-theme='light'] body.iq-variant-techspec .help-block .mobile-menu__catalog .sub-menu a {
  color: #16171b; border-bottom-color: rgba(22, 23, 27, .12);
}
html[data-iq-theme='light'] body.iq-variant-techspec .help-block .mobile-menu > li > a[aria-current='page'],
html[data-iq-theme='light'] body.iq-variant-techspec .help-block .mobile-menu > li.current-menu-item > a,
html[data-iq-theme='light'] body.iq-variant-techspec .help-block .mobile-menu__catalog .sub-menu li.current-menu-item > a { color: #0000ff; }
html[data-iq-theme='light'] body.iq-variant-techspec .help-block .mobile-menu__catalog { background: #f4f6f9; }
html[data-iq-theme='light'] body.iq-variant-techspec .help-block .mobile-menu__catalog > li,
html[data-iq-theme='light'] body.iq-variant-techspec .help-block .mobile-menu__back,
html[data-iq-theme='light'] body.iq-variant-techspec .help-block .mobile-menu__catalog .sub-menu li { border-bottom-color: rgba(22, 23, 27, .1); }
html[data-iq-theme='light'] body.iq-variant-techspec .help-block .mobile-menu__catalog .sub-menu { background: var(--iq-bg-surface-raised, #fff); }
html[data-iq-theme='light'] body.iq-variant-techspec .help-block .mobile-menu__back-btn { background: #f4f6f9; color: #0000ff; }
html[data-iq-theme='light'] body.iq-variant-techspec .help-block .mobile-menu__back-btn::before,
html[data-iq-theme='light'] body.iq-variant-techspec .help-block .mobile-menu__more-btn::after { border-color: #0000ff; }
html[data-iq-theme='light'] body.iq-variant-techspec .help-block .mobile-menu__catalog > li::before { color: rgba(22, 23, 27, .38); }
html[data-iq-theme='light'] body.iq-variant-techspec .help-block .mobile-menu__catalog > li.current-menu-item::before,
html[data-iq-theme='light'] body.iq-variant-techspec .help-block .mobile-menu__catalog > li:has(> a[aria-current='page'])::before { color: #0000ff; }
html[data-iq-theme='light'] body.iq-variant-techspec .help-block__inner::before,
html[data-iq-theme='light'] body.iq-variant-techspec .help-block__inner::after,
html[data-iq-theme='light'] body.iq-variant-techspec .help-block .mobile-menu > li > a::after,
html[data-iq-theme='light'] body.iq-variant-techspec .help-block .mobile-menu__back::after { color: rgba(22, 23, 27, .5); border-color: rgba(22, 23, 27, .16); }
html[data-iq-theme='light'] body.iq-variant-techspec .help-block .mobile-menu__back::after { background: var(--iq-bg-surface-raised, #fff); }
html[data-iq-theme='light'] body.iq-variant-techspec .help-block .mobile-menu__catalog .sub-menu a::before { color: #0000ff; }

/* Подбор музыки /podbor/ (27.09.2026) — язык «лист техзадания»: три шага (SHEET 01–03) — те же Sheet
   (Sheet.tsx), что корзина/оформление, номер шага — готика Blackcraft; направления — прямоугольные
   моно-ярлыки (не пилюли), выбранный — акцент + маленький штамп-галочка; загрузка — RecordSpinner
   вместо текста, пустой результат — фирменная иллюстрация (конверт+пластинка, EmptyStates.tsx). */
.iq-podbor__controls { padding: 0; border: 0; background: transparent; gap: 16px; }
.iq-podbor__sheet { padding: 26px 20px 22px; }
@media (width <= 767px) {
  .iq-podbor__sheet { padding: 30px 14px 18px; }
}
.iq-podbor__step-no {
  display: block; margin: 0 0 8px;
  font: 400 42px/1 'IQ Blackcraft', var(--iq-display, serif);
  color: var(--iq-action-primary);
}
@media (width <= 767px) {
  .iq-podbor__step-no { font-size: 32px; }
}

/* Направления — те же .iq-filter-chip, но прямоугольные моно-ярлыки: своё написание побеждает пилюлю
   любого варианта темы через body + два класса контейнера (specificity), не !important. */
body .iq-podbor__chips .iq-filter-chip {
  position: relative;
  overflow: visible;
  min-height: 40px;
  padding: 9px 14px;
  border-radius: 2px;
  color: var(--iq-fg-muted);
  background: var(--iq-card-bg);
  border-color: var(--iq-border-subtle);
  font: 600 11px/1 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
body .iq-podbor__chips .iq-filter-chip.is-active {
  color: var(--iq-action-primary);
  border-color: var(--iq-action-primary);
  background: color-mix(in srgb, var(--iq-action-primary) 14%, transparent);
}
body .iq-podbor__chips .iq-filter-chip.is-active::after {
  content: '✓';
  position: absolute; top: -7px; right: -7px;
  display: grid; place-items: center;
  width: 15px; height: 15px; border-radius: 2px;
  background: var(--iq-action-primary); color: var(--iq-bg-canvas, #0b0c0e);
  font: 700 9px/1 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  box-shadow: 0 1px 3px rgb(0 0 0 / 35%);
}

.iq-podbor__results-head { grid-column: 1 / -1; margin: 0 0 2px; }
.iq-podbor__results-label {
  display: inline-block;
  color: var(--iq-fg-muted);
  font: 700 11px/1 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.iq-podbor__loading {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 40px 16px;
  color: var(--iq-fg-muted);
  font: 500 10px/1 'IBM Plex Mono', ui-monospace, Menlo, monospace; letter-spacing: .2em; text-transform: uppercase;
}
/* Переопределяет исходный .iq-podbor__empty (простой абзац) — теперь строка с иллюстрацией слева. */
.iq-podbor__empty {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  margin: 0; padding: 24px 0; border: 0; border-radius: 0; background: transparent;
  color: var(--iq-fg-muted); font: 500 14px/1.5 var(--iq-font);
}
.iq-podbor__empty p { margin: 0; max-width: 46ch; }

/* Вход/регистрация/восстановление в языке листа чертежа (27.09.2026): страницы login/register/forgot-password/
   reset-password теперь кладут форму на Sheet (brand/Sheet) с className="iq-auth" — здесь то, что специфично
   для этой обёртки: подпись раздела и номер листа готикой над h1 (AuthHead), табы-«ярлыки чертежа» (LoginTabs)
   и светлая тема для разделителя/кнопок OAuth (.iq-oauth был собран только под тёмную — на светлом фоне
   белый текст и рамки терялись). */
.iq-auth-head { margin-bottom: 16px; }
.iq-auth-head__eyebrow {
  margin: 0 0 6px;
  font: 500 10px/1.3 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acc-mute);
}
.iq-auth-head__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.iq-auth-head__no {
  flex: none;
  font: 400 40px/1 'IQ Blackcraft', var(--iq-display, serif);
  color: var(--acc-mute);
}
@media (max-width: 767px) {
  .iq-auth-head__no { font-size: 30px; }
}

.iq-auth-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--acc-line); }
.iq-auth-tabs__btn {
  margin-right: 24px;
  padding: 10px 2px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  cursor: pointer;
  font: 700 11px/1.2 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acc-mute);
  transform: translateY(1px);
  transition: color 0.2s, border-color 0.2s;
}
.iq-auth-tabs__btn:hover { color: #e8ecf0; }
.iq-auth-tabs__btn--on { color: var(--acc); border-color: var(--acc); }
html[data-iq-theme='light'] .iq-auth-tabs__btn:hover { color: #16171b; }

.iq-auth .iq-oauth__sep { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; }
html[data-iq-theme='light'] .iq-auth .iq-oauth__sep { color: rgba(22, 23, 27, 0.5); }
html[data-iq-theme='light'] .iq-auth .iq-oauth__sep::before,
html[data-iq-theme='light'] .iq-auth .iq-oauth__sep::after { background: rgba(22, 23, 27, 0.18); }
html[data-iq-theme='light'] .iq-auth .iq-oauth__btn {
  border-color: rgba(22, 23, 27, 0.18);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.01));
  color: #16171b !important;
}
html[data-iq-theme='light'] .iq-auth .iq-oauth__btn--vk:hover { border-color: #0077ff99; }
html[data-iq-theme='light'] .iq-auth .iq-oauth__btn--yandex:hover { border-color: #fc3f1d99; }
html[data-iq-theme='light'] .iq-auth .iq-oauth__btn:focus-visible { outline-color: #0000ff; }
/* Пояснение на «Забыли пароль» (27.09.2026): было prose dark:prose-invert — Tailwind-тёмный режим сайта включён
   всегда, и в светлой теме бренда текст выходил светлым по светлому. Цвет — от токенов темы. */
.iq-auth-lead { color: var(--iq-fg-muted, rgba(232, 236, 240, .7)); font-size: 15px; line-height: 1.6; }
.iq-auth-lead p { margin: 0 0 .6em; }

/* Иконки кнопок винил-карточки по центру (27.09.2026, «иконки неровно стоят»). У «В избранное» внутри текстовый
   узел (font-size 0) — в grid он становился второй строкой (28px + 10px), и сердце уезжало вверх на 5px.
   Все дети и ::before — в одну ячейку. Кольцо фокуса после клика мышью (Safari рисует своё двойное,
   кнопка «Слушать» казалась выше соседей) — только при навигации с клавиатуры, тонкое акцентное. */
body.iq-variant-techspec .catalog-item--vinyl .catalog-item__vinyl-actions .catalog-item__play,
body.iq-variant-techspec .catalog-item--vinyl .catalog-item__like,
body.iq-variant-techspec .catalog-item--vinyl .catalog-item__cart { grid-template: 1fr / 1fr; }
body.iq-variant-techspec .catalog-item--vinyl .catalog-item__vinyl-actions .catalog-item__play::before,
body.iq-variant-techspec .catalog-item--vinyl .catalog-item__like::before,
body.iq-variant-techspec .catalog-item--vinyl .catalog-item__cart::before,
body.iq-variant-techspec .catalog-item--vinyl .catalog-item__vinyl-actions .catalog-item__play > *,
body.iq-variant-techspec .catalog-item--vinyl .catalog-item__cart > * { grid-area: 1 / 1; }
body.iq-variant-techspec .catalog-item--vinyl .catalog-item__vinyl-actions :is(.catalog-item__play, .catalog-item__like, .catalog-item__cart):focus:not(:focus-visible) { outline: none; box-shadow: none; }
body.iq-variant-techspec .catalog-item--vinyl .catalog-item__vinyl-actions :is(.catalog-item__play, .catalog-item__like, .catalog-item__cart):focus-visible { outline: 2px solid var(--iqp-accent, var(--iq-action-primary, #6ee7ff)); outline-offset: 2px; box-shadow: none; }

/* ── Сообщения форм (components/Message) — плашка чертежа вместо скруглённой красной ───────── */
.iq-msg {
  position: relative;
  margin: 24px 0;
  padding: 26px 16px 14px 18px;
  border: 1px solid var(--acc-line, rgba(255, 255, 255, 0.14));
  border-left: 3px solid var(--iq-msg-c, var(--acc, var(--iq-action-primary, #6ee7ff)));
  background: color-mix(in srgb, var(--iq-msg-c, var(--iq-action-primary, #6ee7ff)) 7%, transparent);
  color: inherit;
  font-size: 15px;
  line-height: 1.45;
}
.iq-msg::before {
  content: attr(data-kind);
  position: absolute;
  top: 8px;
  left: 18px;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--iq-msg-c, var(--acc, var(--iq-action-primary, #6ee7ff)));
}
.iq-msg--error { --iq-msg-c: #ff5c8a; }
.iq-msg--success { --iq-msg-c: var(--iq-action-primary, #6ee7ff); }
.iq-msg--warning { --iq-msg-c: #ffb547; }
html[data-iq-theme='light'] .iq-msg--error { --iq-msg-c: #c2185b; }
html[data-iq-theme='light'] .iq-msg--success { --iq-msg-c: #00788f; }
html[data-iq-theme='light'] .iq-msg--warning { --iq-msg-c: #a15c00; }

/* «Мои загрузки» треклистом пластинки (27.09.2026): номер стороны/дорожки готикой слева от строки,
   мета формата и числа скачиваний моно. Область — .iq-account (layout кабинета). */
.iq-account .iq-dl-track {
  flex: none;
  min-width: 2.2em;
  padding-top: 2px;
  font: 400 22px/1 'IQ Blackcraft', var(--iq-display, serif);
  color: var(--acc-mute);
  text-align: center;
}
@media (max-width: 767px) {
  .iq-account .iq-dl-track { font-size: 18px; min-width: 1.8em; }
}
.iq-account .iq-dl-track__meta {
  display: flex; flex-wrap: wrap; gap: 8px 12px;
  font: 500 10px/1 'IBM Plex Mono', ui-monospace, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase;
  color: var(--acc-mute);
}

/* Штамп «ОТПИСАН» на странице отписки — тот же приём, что «В КОРЗИНЕ», но самостоятельным элементом
   (не ::after над карточкой): анимация iq-stamp-slam, розовый, без анимации при reduced-motion. */
.iq-unsub-stamp {
  display: inline-block;
  padding: 7px 12px 6px;
  font: 400 18px/1 'IQ Zeitmax', var(--iq-font, sans-serif); letter-spacing: .1em; white-space: nowrap;
  color: #ff4f80; border: 2px solid currentColor; outline: 1px solid currentColor; outline-offset: 2px; border-radius: 3px;
  transform: rotate(-9deg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='70'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3.2 0 0 0 -.7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='70'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3.2 0 0 0 -.7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: iq-stamp-slam 380ms cubic-bezier(.2, .9, .3, 1.2) both;
}
@media (prefers-reduced-motion: reduce) { .iq-unsub-stamp { animation: none; } }

/* ── Главная, телефон: 3D-волна под текстом, а не поверх (27.09.2026) ─────────────────────────────
   Волна стояла абсолютно на top: 470px (iq-visual.css), а текст первого экрана с тремя кнопками
   во всю ширину заканчивается на ~660px — лента наезжала на подпись «Музыка для тренировки…» и
   обрезалась краем баннера. На телефоне она идёт в потоке после текста. !important — правила темы
   для .main-banner__tempo-desk разбросаны по нескольким вариантам с разной специфичностью. */
@media (max-width: 760px) {
  body.home .main-banner__inner { flex-direction: column !important; }
  body.home .main-banner__content { order: 1; }
  body.home .main-banner__tempo-desk {
    order: 2;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    height: 280px !important;
    margin: 0 !important;
  }
  body.home .main-banner__tempo-orbit { width: 100% !important; height: 100% !important; }
  body.home .main-banner--iq { height: auto !important; min-height: 0 !important; }
}

/* ── Страница товара, телефон (27.09.2026, снимки Артемия с iPhone) ───────────────────────────────
   «С этим товаром покупают»: высоту карточки задавала сама картинка (её натуральный размер) —
   карточки вытягивались, обложка резалась. Обложка — квадрат, картинка высоту не задаёт. */
body.single-product .iq-copurchase-card,
body.single-product .iq-copurchase-card__target { min-height: 0; }
body.single-product .iq-copurchase-card__image {
  position: relative;
  min-height: 0;
  aspect-ratio: 1 / 1;
  align-self: start;
}
body.single-product .iq-copurchase-card__image img { position: absolute; inset: 0; }

/* Кибер-сигил на карточках (27.09.2026): при наведении из углов обложки вместо меток-засечек вырастают шипы.
   Только ПК с мышью: на телефоне наведения нет. Шипы — тот же генератор, что сигил первого экрана (brand/sigil.ts). */
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  body.iq-variant-techspec .catalog-item__image::after {
    background:
      url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cg%20fill%3D%22%23cfd6de%22%3E%3Cpath%20d%3D%22M-0.2%201.6L3.4%202.2L6.7%202.6L9.9%202.7L13%202.7L15.9%202.6L18.7%202.4L21.4%202.2L23.9%202L26.4%201.8L28.7%201.8L31%201.9L33.2%202.1L35.4%202.4L37.5%202.7L39.5%203.3L41.6%203.9L43.6%204.7L45.6%205.8L45.6%205.8L43.6%204.7L41.6%203.8L39.6%203.1L37.5%202.5L35.4%201.9L33.3%201.5L31.1%201.2L28.8%200.9L26.4%200.7L24%200.4L21.4%200L18.8%20-0.3L16%20-0.6L13.1%20-0.9L10.1%20-1.1L7%20-1.3L3.7%20-1.5L0.2%20-1.6Z%22%2F%3E%3Cpath%20d%3D%22M-1.6%200.2L-1.5%203.7L-1.3%207L-1.1%2010.1L-0.9%2013.1L-0.6%2016L-0.3%2018.8L0%2021.4L0.4%2024L0.7%2026.4L0.9%2028.8L1.2%2031.1L1.5%2033.3L1.9%2035.4L2.5%2037.5L3.1%2039.6L3.8%2041.6L4.7%2043.6L5.8%2045.6L5.8%2045.6L4.7%2043.6L3.9%2041.6L3.3%2039.5L2.7%2037.5L2.4%2035.4L2.1%2033.2L1.9%2031L1.8%2028.7L1.8%2026.4L2%2023.9L2.2%2021.4L2.4%2018.7L2.6%2015.9L2.7%2013L2.7%209.9L2.6%206.7L2.2%203.4L1.6%20-0.2Z%22%2F%3E%3Cpath%20d%3D%22M-0.8%200.9L1%202.7L2.7%204.4L4.3%206L5.9%207.7L7.5%209.3L9.1%2010.9L10.7%2012.5L12.2%2014L13.6%2015.6L15%2017.2L16.5%2018.6L18%2019.9L19.6%2021.2L21.3%2022.3L23%2023.2L25%2024L25%2024L23.1%2023.2L21.3%2022.2L19.7%2021L18.2%2019.7L16.7%2018.3L15.4%2016.8L14.1%2015.2L12.8%2013.6L11.6%2011.7L10.4%209.9L9.2%207.9L7.8%206L6.3%204.2L4.7%202.4L2.8%200.6L0.8%20-0.9Z%22%2F%3E%3Cpath%20d%3D%22M18.9%202L20.3%203.1L21.6%204.2L22.7%205.4L23.7%206.5L24.4%207.8L24.9%209.2L25%2010.5L24.9%2011.9L24.6%2013.2L24%2014.4L24%2014.4L24.6%2013.2L25%2011.9L25.2%2010.5L25.2%209.1L24.9%207.7L24.4%206.2L23.7%204.6L22.7%203.2L21.3%201.9L19.5%200.9Z%22%2F%3E%3Cpath%20d%3D%22M0.9%2019.5L1.9%2021.3L3.2%2022.7L4.6%2023.7L6.2%2024.4L7.7%2024.9L9.1%2025.2L10.5%2025.2L11.9%2025L13.2%2024.6L14.4%2024L14.4%2024L13.2%2024.6L11.9%2024.9L10.5%2025L9.2%2024.9L7.8%2024.4L6.5%2023.7L5.4%2022.7L4.2%2021.6L3.1%2020.3L2%2018.9Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 0 0 / 0 0 no-repeat,
      url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cg%20transform%3D%22rotate(180%2024%2024)%22%20fill%3D%22%23cfd6de%22%3E%3Cpath%20d%3D%22M-0.2%201.6L3.4%202.2L6.7%202.6L9.9%202.7L13%202.7L15.9%202.6L18.7%202.4L21.4%202.2L23.9%202L26.4%201.8L28.7%201.8L31%201.9L33.2%202.1L35.4%202.4L37.5%202.7L39.5%203.3L41.6%203.9L43.6%204.7L45.6%205.8L45.6%205.8L43.6%204.7L41.6%203.8L39.6%203.1L37.5%202.5L35.4%201.9L33.3%201.5L31.1%201.2L28.8%200.9L26.4%200.7L24%200.4L21.4%200L18.8%20-0.3L16%20-0.6L13.1%20-0.9L10.1%20-1.1L7%20-1.3L3.7%20-1.5L0.2%20-1.6Z%22%2F%3E%3Cpath%20d%3D%22M-1.6%200.2L-1.5%203.7L-1.3%207L-1.1%2010.1L-0.9%2013.1L-0.6%2016L-0.3%2018.8L0%2021.4L0.4%2024L0.7%2026.4L0.9%2028.8L1.2%2031.1L1.5%2033.3L1.9%2035.4L2.5%2037.5L3.1%2039.6L3.8%2041.6L4.7%2043.6L5.8%2045.6L5.8%2045.6L4.7%2043.6L3.9%2041.6L3.3%2039.5L2.7%2037.5L2.4%2035.4L2.1%2033.2L1.9%2031L1.8%2028.7L1.8%2026.4L2%2023.9L2.2%2021.4L2.4%2018.7L2.6%2015.9L2.7%2013L2.7%209.9L2.6%206.7L2.2%203.4L1.6%20-0.2Z%22%2F%3E%3Cpath%20d%3D%22M-0.8%200.9L1%202.7L2.7%204.4L4.3%206L5.9%207.7L7.5%209.3L9.1%2010.9L10.7%2012.5L12.2%2014L13.6%2015.6L15%2017.2L16.5%2018.6L18%2019.9L19.6%2021.2L21.3%2022.3L23%2023.2L25%2024L25%2024L23.1%2023.2L21.3%2022.2L19.7%2021L18.2%2019.7L16.7%2018.3L15.4%2016.8L14.1%2015.2L12.8%2013.6L11.6%2011.7L10.4%209.9L9.2%207.9L7.8%206L6.3%204.2L4.7%202.4L2.8%200.6L0.8%20-0.9Z%22%2F%3E%3Cpath%20d%3D%22M18.9%202L20.3%203.1L21.6%204.2L22.7%205.4L23.7%206.5L24.4%207.8L24.9%209.2L25%2010.5L24.9%2011.9L24.6%2013.2L24%2014.4L24%2014.4L24.6%2013.2L25%2011.9L25.2%2010.5L25.2%209.1L24.9%207.7L24.4%206.2L23.7%204.6L22.7%203.2L21.3%201.9L19.5%200.9Z%22%2F%3E%3Cpath%20d%3D%22M0.9%2019.5L1.9%2021.3L3.2%2022.7L4.6%2023.7L6.2%2024.4L7.7%2024.9L9.1%2025.2L10.5%2025.2L11.9%2025L13.2%2024.6L14.4%2024L14.4%2024L13.2%2024.6L11.9%2024.9L10.5%2025L9.2%2024.9L7.8%2024.4L6.5%2023.7L5.4%2022.7L4.2%2021.6L3.1%2020.3L2%2018.9Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 100% 100% / 0 0 no-repeat,
      linear-gradient(var(--iq-action-signal), var(--iq-action-signal)) 0 0 / 9px 1px no-repeat,
      linear-gradient(var(--iq-action-signal), var(--iq-action-signal)) 0 0 / 1px 9px no-repeat,
      linear-gradient(var(--iq-action-signal), var(--iq-action-signal)) 100% 100% / 9px 1px no-repeat,
      linear-gradient(var(--iq-action-signal), var(--iq-action-signal)) 100% 100% / 1px 9px no-repeat;
    transition: background-size .45s cubic-bezier(.2, .9, .25, 1.15), opacity .3s;
  }
  body.iq-variant-techspec .catalog-item:hover .catalog-item__image::after {
    opacity: .95;
    background-size: 44px 44px, 44px 44px, 0 1px, 1px 0, 0 1px, 1px 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.iq-variant-techspec .catalog-item__image::after { transition: none; }
}

/* 21st.dev (27.09.2026): порты Magic UI без зависимостей для главной — ShineBorder, FlickeringGrid,
   NumberTicker, Marquee (компоненты — src/components/ui/*.tsx). Оригиналы держатся на motion/tailwindcss-animate,
   которых в проекте нет — здесь только сама разметка со своими классами, вся анимация — plain CSS ниже. */

/* ShineBorder — блик по рамке карточки подписки (main-catalog__promo-card). Маска-трюк (content-box +
   border-box, composite exclude/xor) вырезает из фона только тонкую рамку; сам фон — радиальный блик,
   который едет по диагонали через background-position (0%→100%→0%). */
.iq-shine-border {
  background-size: 300% 300%;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  padding: var(--iq-shine-border-width, 1px);
  animation: iq-shine-border-move var(--iq-shine-duration, 8s) linear infinite;
}
@keyframes iq-shine-border-move {
  0% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}
@media (prefers-reduced-motion: reduce) {
  .iq-shine-border { animation: none; background-position: 0% 0%; }
}

/* FlickeringGrid — фон страниц входа/регистрации/доступа (AuthBackdrop). С главной снята 27.09.2026: за
   «Каталог в цифрах» уже идут фоновые волны. Сетка на ширину контейнера, к листу в центре гаснет. */
.iq-auth-stage { position: relative; isolation: isolate; }
.iq-auth-backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, transparent 38%, #000 62%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, transparent 38%, #000 62%, transparent 100%);
}

/* Каталог/категории: список забирал ширину по содержимому (flex-элемент без роста) — справа от сетки
   пустовало 185–265 px на ПК (Артемий 27.09.2026, «Новинки»). */
body:is(.post-type-archive-product, .tax-product_cat) .main-catalog__list { flex: 1 1 0; min-width: 0; }

/* NumberTicker — барабан цифр в счётчиках (StatCounters) и в шапке (корзина/избранное). Высота и
   line-height колонки — 1em, наследуются от шрифта места вставки (.iq-stat-counters__value/.header__count). */
.iq-number-ticker {
  display: inline-flex;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.iq-number-ticker__reel { display: inline-flex; }
.iq-number-ticker__col {
  display: inline-block;
  overflow: hidden;
  height: 1em;
  line-height: 1em;
}
.iq-number-ticker__strip {
  display: block;
  transition: transform 1.2s cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}
.iq-number-ticker__digit {
  display: block;
  height: 1em;
  line-height: 1em;
  text-align: center;
}
.iq-number-ticker__sep { display: inline-block; white-space: pre; }
@media (prefers-reduced-motion: reduce) {
  .iq-number-ticker__strip { transition: none; }
}

/* Marquee — базовая лента (порт Magic UI, свои keyframes вместо tailwindcss-animate). */
.iq-marquee {
  display: flex;
  overflow: hidden;
  gap: var(--iq-gap, 1rem);
}
.iq-marquee--vertical { flex-direction: column; }
.iq-marquee__row {
  display: flex;
  flex-shrink: 0;
  justify-content: space-around;
  gap: var(--iq-gap, 1rem);
  animation: iq-marquee-x var(--iq-duration, 40s) linear infinite;
}
.iq-marquee__row--vertical { flex-direction: column; animation-name: iq-marquee-y; }
.iq-marquee__row--reverse { animation-direction: reverse; }
.iq-marquee:hover .iq-marquee__row--pause-on-hover { animation-play-state: paused; }
@keyframes iq-marquee-x {
  to { transform: translateX(calc(-100% - var(--iq-gap, 1rem))); }
}
@keyframes iq-marquee-y {
  to { transform: translateY(calc(-100% - var(--iq-gap, 1rem))); }
}
@media (prefers-reduced-motion: reduce) {
  .iq-marquee { overflow-x: auto; }
  .iq-marquee__row { animation: none; }
  .iq-marquee__row:not(:first-child) { display: none; }
}

/* CoverMarquee — лента обложек «последние релизы» сразу после Hero (главная). Квадрат 120px (десктоп),
   88px на телефоне; рамка — лёгкий хром, скругление — как у медиа-карточек каталога (--iq-radius-media).
   Маски по краям — плавное растворение ленты, не жёсткий обрез. */
.iq-cover-marquee {
  --iq-gap: 14px;
  --iq-duration: 50s;
  max-width: 1440px;
  margin: 20px auto 0;
  padding: 0 clamp(16px, 4vw, 40px);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.iq-cover-marquee__item {
  display: block;
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  border-radius: var(--iq-radius-media);
  border: 1px solid rgba(232, 236, 240, .28);
  overflow: hidden;
  transition: transform .25s, border-color .25s;
}
.iq-cover-marquee__img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) and (pointer: fine) {
  .iq-cover-marquee__item:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--iq-action-primary, #6ee7ff) 55%, transparent);
  }
}
@media (max-width: 767px) {
  .iq-cover-marquee__item { width: 88px; height: 88px; }
}

/* Сетка-чертёж (PNG в левом верхнем углу листа) снята на главной: линии и крестики наезжали на меню. В каталоге её место
   заняли линейки CSS выше — это правило раньше гасило и их (тот же вес, стоит ниже), поэтому линейка пропала с боя
   после 42f0ba0 (27.09.2026, Артемий: «была полоса как линейкой вымерена, исчезла»). */
@media (min-width: 768px) {
  body.iq-variant-techspec.home .main-catalog__inner { background-image: none; }
}

/* Первый экран на ПК: высота была жёсткой (min(670px, 100vh − 132px)) при overflow:hidden — нижняя строка
   «Музыка для тренировки · доступ после оплаты…» обрезалась (Артемий 27.09.2026). Теперь секция растёт по
   содержимому, прежняя высота — нижняя граница. */
@media (min-width: 992px) {
  body.home .main-banner--iq { height: auto; min-height: max(560px, min(670px, calc(100vh - 132px))); padding-bottom: 28px; }
}

/* Боковое меню каталога — sticky (top 136px). Раскрытый раздел выше экрана не пролистывался: меню «прилипало»,
   низ списка был недостижим (Артемий 27.09.2026). Высота — не больше видимой части, остальное прокручивается внутри.
   Только у липкой колонки (см. :not(:has(.iq-discovery)) выше): на /catalog/ с фильтрами жанра и темпа колонка
   не липнет, и тот же предел обрезал второй фильтр рамкой панели (28.09.2026). */
@media (min-width: 768px) {
  .main-catalog__sidebar-wrapper:not(:has(.iq-discovery)) {
    max-height: calc(100vh - 136px - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}

/* Телефон (≈75 % посетителей по Метрике): полоса «Каталог» над товарами занимала 224px — теперь одна строка
   с горизонтальной прокруткой, подпись «Каталог» скрыта (27.09.2026). */
@media (max-width: 767px) {
  body:is(.post-type-archive-product, .tax-product_cat) .main-catalog__secondary-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px;
    overflow-x: auto;
    margin-inline: -16px;
    padding: 0 16px 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  body:is(.post-type-archive-product, .tax-product_cat) .main-catalog__secondary-nav::-webkit-scrollbar { display: none; }
  body:is(.post-type-archive-product, .tax-product_cat) .main-catalog__secondary-label { display: none; }
  body:is(.post-type-archive-product, .tax-product_cat) .main-catalog__secondary-link { flex: 0 0 auto; white-space: nowrap; }
}

/* Плеер превью: вся область названия ведёт на релиз (растянутая ссылка), плюс видимая подпись «Открыть релиз →». */
.iq-sticky-player__track { position: relative; }
.iq-sticky-player__link--cover::after { content: ''; position: absolute; inset: -6px 0; z-index: 1; }
.iq-sticky-player__open {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--iq-action-primary, #6ee7ff);
}
html[data-iq-theme='light'] .iq-sticky-player__open { color: #0000ff; }

/* Телефон: «Подбор по BPM» над товарами занимал 296px — теперь строка «Темп» и чипы с горизонтальной прокруткой. */
@media (max-width: 767px) {
  .iq-discovery[aria-labelledby='iq-bpm-facets-title'] { padding: 12px 0 4px !important; margin: 0 0 14px !important; border: 0 !important; background: none !important; }
  .iq-discovery[aria-labelledby='iq-bpm-facets-title'] .iq-discovery__head { margin: 0 0 8px !important; }
  .iq-discovery[aria-labelledby='iq-bpm-facets-title'] h2 { font-size: 12px !important; letter-spacing: .14em; text-transform: uppercase; margin: 0 !important; line-height: 1.2; }
  .iq-discovery[aria-labelledby='iq-bpm-facets-title'] .iq-discovery__eyebrow { display: none; }
  .iq-discovery[aria-labelledby='iq-bpm-facets-title'] .iq-discovery__chips {
    display: flex !important; flex-wrap: nowrap !important; gap: 8px; overflow-x: auto;
    margin-inline: -16px; padding: 0 16px 4px; scrollbar-width: none;
  }
  .iq-discovery[aria-labelledby='iq-bpm-facets-title'] .iq-discovery__chips::-webkit-scrollbar { display: none; }
  .iq-discovery[aria-labelledby='iq-bpm-facets-title'] .iq-filter-chip { flex: 0 0 auto; white-space: nowrap; }
}

/* Телефон, главная: верхний отступ первого экрана 48 → 16px — чипы музыки по направлениям целиком на первом экране. */
@media (max-width: 767px) {
  body.home .main-banner--iq .main-banner__inner { padding-top: 16px; }
  body.home .main-banner--iq .main-banner__description { margin-bottom: 0; }
}

/* ── Главная, ПК от 1024px: первый экран «витрина, а не меню» (28.09.2026, Артемий: «чёрное пространство, не
   понятно, насколько математически верно»). Слева — заголовок и кнопки (чипы и плитки уходят: hero-sections
   .mobileOnly), справа — волна во всю высоту текстовой колонки, прижатая к правому краю, над ней показание
   темпа; под экраном — указатель музыки (MusicIndex). Высота по содержимому, без прежней min-height 670px. */
@media (min-width: 1024px) {
  body.home .main-banner--iq { height: auto !important; min-height: 0 !important; padding-bottom: 0 !important; }
  body.home .main-banner--iq .main-banner__inner { align-items: flex-start; min-height: 0; padding-top: 40px; padding-bottom: 40px; }
  body.home .main-banner__tempo-desk {
    top: 56px !important;
    bottom: 40px !important;
    right: -4% !important;
    transform: none !important;
    width: min(62%, 800px) !important;
    height: auto !important;
  }
  body.home .main-banner__tempo-orbit { width: 100% !important; height: 100% !important; }
}

/* Счётчики главной — цифры-ризограф (RisoDigits, TECHSPEC § 06). Высота задаёт размер точки; ширина — по числу знаков. */
body.iq-variant-techspec .iq-stat-counters__value--riso { display: block; line-height: 0; }
body.iq-variant-techspec .iq-stat-counters__value--riso canvas { display: block; height: clamp(40px, 5vw, 64px); width: auto; max-width: 100%; }

/* ── Карточка товара — блок покупки (30.09.2026, решение Артемия; было — п.8 очереди TECHSPEC, 28.09).
   Одна логика для телефона и ПК: [цена — только ПК, тема прячет её до 767px] → панель действий одной строкой
   (количество · «В корзину» тянется · лайк · сторис, всё 48px; ProductDescription.module.css .panel) →
   «Послушать фрагмент» во всю ширину → заметка о доступе (caption) → параметры поставки (SpecList).
   Внутри панели — --iq-s-2, между группами — --iq-s-4 (вдвое больше, TECHSPEC § 03).
   order из темы (iq-parts.css § 25–26) сбрасывается: порядок — порядок разметки. */
body.iq-variant-techspec.single-product .product__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--iq-s-4);
  margin: var(--iq-s-5) 0 0;
}
body.iq-variant-techspec.single-product .product__actions > :is(.product__price, .product__actions-row) { order: 0; margin: 0; }
body.iq-variant-techspec.single-product .product__actions .product__add-to-cart {
  width: 100%; min-width: 0; height: 100%; min-height: var(--iq-s-7); margin: 0; justify-content: center; touch-action: manipulation;
}
/* Подпись «В корзину · 9 990,00 ₽» (тема включает её до 767px) — одной строкой: рядом с количеством и лайком
   на 360px кнопке остаётся 214px, значок корзины (абсолютно у края, поле 46px) переносил цену на вторую строку.
   Значок здесь лишний — подпись и так «В корзину». */
@media (max-width: 767px) {
  body.iq-variant-techspec.single-product .product__actions .product__add-to-cart { padding-inline: var(--iq-s-3); white-space: nowrap; }
  body.iq-variant-techspec.single-product .product__actions .product__add-to-cart svg { display: none; }
}

/* Избранное/сторис — квадратные иконки-кнопки той же высоты, что «В корзину» (48px). */
body.iq-variant-techspec.single-product .product__icon-btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--iq-s-7);
  min-width: var(--iq-s-7);
  height: var(--iq-s-7);
  padding: 0;
  border: 1px solid var(--iq-hair-strong, rgba(232, 236, 240, 0.18));
  border-radius: var(--iq-radius-input, 3px);
  background: transparent;
  color: var(--iq-fg-primary, #e8ecf0);
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color var(--iq-dur-fast, 160ms) var(--iq-ease-out, ease), color var(--iq-dur-fast, 160ms) var(--iq-ease-out, ease);
}
/* Значок из спрайта (#icon-like) заливается текущим цветом; свой inline svg «Картинка для сторис»
   красится через собственные fill/stroke на <svg> (StoryIcon, ProductDescription.tsx) — их не перебиваем. */
body.iq-variant-techspec.single-product .product__icon-btn svg use { fill: currentColor; }
body.iq-variant-techspec.single-product .product__icon-btn:focus-visible,
body.iq-variant-techspec.single-product .product__icon-btn.active {
  border-color: var(--iq-action-primary, #6ee7ff);
  color: var(--iq-action-primary, #6ee7ff);
}
body.iq-variant-techspec.single-product .product__icon-btn:active:not(:disabled) { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
  body.iq-variant-techspec.single-product .product__icon-btn:hover:not(:disabled) {
    border-color: var(--iq-action-primary, #6ee7ff);
    color: var(--iq-action-primary, #6ee7ff);
  }
}
body.iq-variant-techspec.single-product .product__icon-btn:disabled { opacity: 0.5; cursor: default; }

/* Треклист (SamplePlayer.module.css) — отступ от блока покупки, группа. */
body.iq-variant-techspec.single-product .product__list:not(:empty) { margin: var(--iq-s-6) 0 0; }

/* ── Лидеры продаж (28.09.2026): место на конверте, полка на главной, вводная строка категории ── */
.catalog-item__rank {
  position: absolute; z-index: 3; left: 8px; top: 8px; padding: 4px 6px 3px;
  font: 600 12px/1 var(--iq-font-mono, ui-monospace, monospace); letter-spacing: .04em; font-variant-numeric: tabular-nums;
  color: var(--iq-bg-base, #07080a); background: var(--iq-action-primary, #6ee7ff); border-radius: 2px; pointer-events: none;
}
.iq-bestsellers .main-catalog__inner { display: block; }
.iq-bestsellers__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin-bottom: 16px; }
.iq-bestsellers__head .main-catalog__title { margin: 0; }
.iq-bestsellers__note { font: 400 12px/1.4 var(--iq-font-mono, ui-monospace, monospace); letter-spacing: .06em; text-transform: uppercase; color: var(--iq-fg-muted, #8a93a0); }
.iq-bestsellers__all { margin-left: auto; color: var(--iq-action-primary, #6ee7ff); text-decoration: none; }
.iq-bestsellers__all:hover { text-decoration: underline; }
.iq-bestsellers .main-catalog__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .iq-bestsellers .main-catalog__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Телефон: лента с прокруткой вбок, следующий конверт выглядывает — восемь карточек столбиком были в 8 экранов.
   Поля (30.09.2026, TECHSPEC § 07 «Карточка релиза»): заголовок и лента — в --iq-page-gutter, край карточки = край
   заголовка. Ширина ленты была зажата темой (350px при полях −16px — правый край обрезан на 354px), а прилипание
   без scroll-padding прижимало первую карточку к x≈4. */
@media (max-width: 640px) {
  html body .iq-bestsellers.main-catalog .main-catalog__inner { padding-inline: var(--iq-page-gutter); }
  html body .iq-bestsellers.main-catalog .main-catalog__list {
    display: flex; flex-wrap: nowrap; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    width: auto; margin-inline: calc(-1 * var(--iq-page-gutter)); padding-inline: var(--iq-page-gutter);
    scroll-padding-inline: var(--iq-page-gutter); scrollbar-width: none;
  }
  html body .iq-bestsellers.main-catalog .main-catalog__list > .catalog-item { flex: 0 0 78%; scroll-snap-align: start; }
}
/* Карточка «Лидеров» крупнее сетки каталога (246+ px против ~160) — и текст крупнее: название — роль h3 на 16px,
   данные — caption 13px с ровными цифрами; подпись над конвертом — «NN · REL xxxxx», как в каталоге (тема на главной
   писала «NN · IQ MUSIC»); ▶ ♡ корзина — один ряд: обёртка ♡+корзина тянулась на всю строку и центровалась (дыра). */
.iq-bestsellers .catalog-item__vinyl-title { font-size: 16px; line-height: 1.3; }
.iq-bestsellers .catalog-item__vinyl-specs { font: 500 13px/1.45 var(--iq-font, Manrope, sans-serif); font-variant-numeric: tabular-nums; }
body.iq-variant-techspec.home .iq-bestsellers .catalog-item--vinyl::before {
  content: counter(iq-plate, decimal-leading-zero) "  ·  REL " attr(data-iq-release);
}
body.iq-variant-techspec .iq-bestsellers .catalog-item--vinyl .catalog-item__vinyl-actions .catalog-item__buttons-wrap { flex: none; width: auto; }
.main-catalog__lead { grid-column: 1 / -1; max-width: 65ch; margin: 0 0 8px; color: var(--iq-fg-muted, #8a93a0); }

/* Текст страниц (оферта, правила, новости — Tailwind prose) в светлой теме (28.09.2026, «на белой теме договор не
   читается»): prose-invert включён всегда (тёмный режим Tailwind не следует за data-iq-theme) — текст был светло-серым,
   жирное и заголовок внутри документа белыми по белому. Цвета — токены: текст основной, заголовки и ссылки — акцент,
   жирное — зелёный токен успеха (просьба Артемия: «в оттенках наших токенов, синим или зелёным»). */
html[data-iq-theme='light'] .prose.prose {
  --tw-prose-body: var(--iq-fg-primary, #232429);
  --tw-prose-headings: var(--iq-action-primary, #0000ff);
  --tw-prose-lead: var(--iq-fg-muted, #5b5d66);
  --tw-prose-links: var(--iq-action-primary, #0000ff);
  --tw-prose-bold: var(--iq-success, #186339);
  --tw-prose-counters: var(--iq-fg-muted, #5b5d66);
  --tw-prose-bullets: var(--iq-fg-faint, #9498a3);
  --tw-prose-hr: var(--iq-hair-strong, rgb(35 36 41 / 22%));
  --tw-prose-quotes: var(--iq-fg-primary, #232429);
  --tw-prose-quote-borders: var(--iq-action-primary, #0000ff);
  --tw-prose-captions: var(--iq-fg-muted, #5b5d66);
  --tw-prose-code: var(--iq-fg-primary, #232429);
  --tw-prose-th-borders: var(--iq-hair-strong, rgb(35 36 41 / 22%));
  --tw-prose-td-borders: var(--iq-hair, rgb(35 36 41 / 12%));
  color: var(--tw-prose-body);
}
/* Иконка Telegram на «Помочь выбрать подписку» (28.09.2026) — цвет текста кнопки, не сжимается. */
.iq-library-intro__icon { flex: none; fill: currentColor; }
/* «Серый квадрат» реферального блока на телефоне (28.09.2026): у темы сетка цифр auto-fit minmax(160px) — на
   ширине телефона 2 колонки на 3 цифры, пустая ячейка светилась фоном-линией. Телефон — столбец, шире — три в ряд. */
body.iq-variant-techspec.page-template-page-personal .iq-ref__stats { grid-template-columns: 1fr; }
@media (min-width: 600px) {
  body.iq-variant-techspec.page-template-page-personal .iq-ref__stats { grid-template-columns: repeat(3, 1fr); }
}
/* Телефон, гость (28.09.2026): «Вход» текстом (86px) наезжал на логотип — «ВХОД» поверх «FITNESS», меню поверх «IQ».
   До 559px — квадрат 44px с иконкой человека, как у вошедшего (правило выше); «Регистрация» и так скрыта. */
@media (max-width: 559px) {
  body.iq-variant-techspec .header__login .header__login-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; min-height: 44px; padding: 0; font-size: 0 !important; letter-spacing: 0; overflow: hidden;
  }
  body.iq-variant-techspec .header__login .header__login-btn::before {
    content: ''; width: 20px; height: 20px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.2-4 4.3-6 8-6s6.8 2 8 6'/%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' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.2-4 4.3-6 8-6s6.8 2 8 6'/%3E%3C/svg%3E") center / contain no-repeat;
  }
}
/* Логотип на телефоне — своей шириной и с воздухом по бокам (28.09.2026): при 360 и 430px «IQ» касался меню,
   «FITNESS» — кнопки входа. До 380px кнопки справа 40px и зазор 4px, чтобы строка влезла в 360. */
@media (max-width: 559px) {
  body.iq-variant-techspec .header__logo--wordmark { flex: none; width: auto; margin-inline: 8px 6px; }
}
@media (max-width: 380px) {
  body.iq-variant-techspec .header__indicators { gap: 4px; }
  body.iq-variant-techspec .header__login .header__login-btn,
  body.iq-variant-techspec .header__login .header__lk-btn,
  body.iq-variant-techspec .header__indicators > :is(a, button) { width: 40px; min-width: 40px; }
}

/* Страница товара на телефоне (30.09.2026): «Горячая линия» (.header-link, fixed, левый нижний угол) при прокрутке
   садилась на «В корзину» — у панели покупки кнопка во всю ширину, угла без неё нет. Главное действие здесь —
   покупка; ссылка на линию (t.me) есть на странице ещё в 4 местах и на остальных страницах. */
@media (max-width: 759px) {
  body.single-product .header-link { display: none; }
}

/* Фильтры «Жанр»/«Темп» в левой колонке каталога и карточки (30.09.2026, снимок Артемия): блоки шли без рамки и
   отступов — «ФИЛЬТР» прилипал к линейке, чипы вылезали за ширину меню. Та же рамка, что у меню разделов. */
.main-catalog__sidebar-wrapper > .iq-discovery {
  margin: 16px 0 0 !important; padding: 16px 14px 18px !important;
  border: 1px solid rgba(232, 236, 240, .12) !important; box-sizing: border-box; max-width: 100%;
}
.main-catalog__sidebar-wrapper > .iq-discovery .iq-discovery__head { margin: 0 0 12px !important; }
.main-catalog__sidebar-wrapper > .iq-discovery h2 { font-size: 26px !important; line-height: 1.05 !important; margin: 4px 0 0 !important; }
.main-catalog__sidebar-wrapper > .iq-discovery .iq-discovery__chips { display: flex; flex-wrap: wrap; gap: 6px !important; }
.main-catalog__sidebar-wrapper > .iq-discovery .iq-filter-chip { margin: 0 !important; padding: 8px 10px !important; font-size: 11px !important; min-height: 0 !important; max-width: 100%; white-space: normal; }
html[data-iq-theme='light'] .main-catalog__sidebar-wrapper > .iq-discovery { border-color: rgba(8, 6, 15, .14) !important; }

/* Тумблер «Пиксельные обложки» (PixelToggle). По умолчанию растр DitherCover скрыт; включённый — html[data-iq-pixels='on']. */
html:not([data-iq-pixels='on']) .catalog-item canvas[aria-hidden][width='96'] { display: none; }
.iq-pixel-toggle { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 0; background: none; border: 0; color: inherit; font: inherit; font-size: 13px; letter-spacing: .04em; opacity: .75; cursor: pointer; }
.iq-pixel-toggle:hover, .iq-pixel-toggle:focus-visible { opacity: 1; }
.iq-pixel-toggle__track { position: relative; width: 34px; height: 18px; border: 1px solid currentColor; border-radius: 9px; transition: background-color .2s; }
.iq-pixel-toggle__thumb { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: currentColor; transition: transform .2s; }
.iq-pixel-toggle[aria-checked='true'] .iq-pixel-toggle__track { background: color-mix(in srgb, currentColor 25%, transparent); }
.iq-pixel-toggle[aria-checked='true'] .iq-pixel-toggle__thumb { transform: translateX(16px); }
@media (prefers-reduced-motion: reduce) { .iq-pixel-toggle__track, .iq-pixel-toggle__thumb { transition: none; } }

/* Шеврон бокового меню кликабелен (CatalogTree: правые 56px строки раскрывают подменю) — курсор-рука. */
.sidebar__menu > li.menu-item-has-children { cursor: pointer; }

/* «Музыка» в шапке — первый пункт, акцентное подчёркивание; группы подменю музыки в боковом меню (CatalogTree.groupKids). */
.main-nav > li.iq-nav-music > a { color: var(--iq-action-primary, #6ee7ff); }
body.iq-variant-techspec .main-catalog__sidebar-wrapper .sidebar__menu .sub-menu > li.sub-menu__group { margin: 12px 0 2px; padding: 0 var(--iqp-sp-4, 16px) 0 44px; line-height: 1.6; font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--iqp-muted, #5b626b); pointer-events: none; }

/* 01.10.2026: тумблер пикселей вставал ячейкой в сетку каталога — скрыт до выкладки кода без него (fe8858d). */
.iq-pixel-toggle { display: none !important; }

/* Фильтры каталога (CatalogFilters, 01.10.2026, макет «плитки + шкала»): направления — плитки с числом миксов
   (крупные сверху, хвост строкой «ещё»), темп — шкала: высота столбика = число миксов в диапазоне. */
.iq-filter-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin-top: 12px; } /* одна колонка: в две слова рвались посередине */
.iq-filter-tile { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; min-width: 0; padding: 9px 10px; border: 1px solid var(--iqp-line, rgba(232,236,240,.12)); color: var(--iqp-fg, #e8ecf0); font-size: 12.5px; line-height: 1.25; text-decoration: none; transition: border-color .15s, color .15s; }
.iq-filter-tile__t { min-width: 0; }
.iq-filter-tile__n { flex: none; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; color: var(--iqp-muted, #8a929c); font-variant-numeric: tabular-nums; }
.iq-filter-tile:hover, .iq-filter-tile:focus-visible { border-color: var(--iqp-line-strong, rgba(232,236,240,.3)); }
.iq-filter-tile.is-active { border-color: var(--iqp-accent, #6ee7ff); color: var(--iqp-accent, #6ee7ff); }
.iq-filter-tile.is-active .iq-filter-tile__n { color: inherit; }
.iq-filter-more { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 10px 0 0; font-size: 12px; color: var(--iqp-muted, #8a929c); }
.iq-filter-more a { color: var(--iqp-fg, #e8ecf0); text-decoration: none; border-bottom: 1px solid var(--iqp-line, rgba(232,236,240,.12)); }
.iq-filter-more a:hover, .iq-filter-more a.is-active { color: var(--iqp-accent, #6ee7ff); border-bottom-color: currentColor; }
.iq-tempo-scale { display: flex; align-items: stretch; gap: 4px; height: 96px; margin-top: 12px; }
.iq-tempo-scale__bar { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 6px; text-decoration: none; color: var(--iqp-muted, #8a929c); }
.iq-tempo-scale__col { display: block; background: var(--iqp-line-strong, rgba(232,236,240,.22)); transition: background-color .15s; }
.iq-tempo-scale__lbl { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; line-height: 1; text-align: center; white-space: nowrap; letter-spacing: -.02em; }
.iq-tempo-scale__bar:hover .iq-tempo-scale__col, .iq-tempo-scale__bar:focus-visible .iq-tempo-scale__col { background: var(--iqp-fg, #e8ecf0); }
.iq-tempo-scale__bar.is-active { color: var(--iqp-accent, #6ee7ff); }
.iq-tempo-scale__bar.is-active .iq-tempo-scale__col { background: var(--iqp-accent, #6ee7ff); }
.iq-tempo-scale + .iq-discovery__chips { margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .iq-filter-tile, .iq-tempo-scale__col { transition: none; } }

/* 01.10.2026: «Подобрать под занятие» прилипала к сетке карточек (зазор 1px) и была со скруглением в прямоугольном блоке. */
body.iq-variant-techspec .main-catalog__list > .iq-podbor-cta { margin: 0 0 24px; border-radius: 0; }
/* Иконка активной вкладки «Каталог» (голубой фон) — цвет текста вкладки, а не серый пунктов: была почти не видна. */
body.iq-variant-techspec .main-catalog__secondary-link.is-active .iq-menu-icon { color: currentColor; stroke: currentColor; opacity: 1; }

/* 01.10.2026: карточки оборудования — рамка картинки тянулась под пропорции фото (544/359/321px в одном ряду), названия
   и цены вставали вразнобой, а фото лежало на линиях и уголках рамки. Рамка квадратная, фото целиком с полем внутри. */
body.iq-variant-techspec .main-catalog__list > .catalog-item:not(.catalog-item--vinyl) .catalog-item__image { aspect-ratio: 1 / 1; height: auto; overflow: hidden; }
body.iq-variant-techspec .main-catalog__list > .catalog-item:not(.catalog-item--vinyl) .catalog-item__image img { width: 100% !important; height: 100% !important; object-fit: contain !important; padding: 9%; box-sizing: border-box; }

/* 01.10.2026: правая колонка мега-меню («Диски за 1 ₽», сезон, ШТОРМ) начиналась на 22px выше плиток направлений —
   у тех сверху подпись «// Направление». Верх карточек — по верху первой плитки. */
@media (width > 900px) { .iq-mega__music > .iq-mega__picks { margin-top: 22px; } }
/* 01.10.2026: под номерами страниц лежала серая плашка на всю ширину (фон 18 % от сетки-разделителей списка). */
body.iq-variant-techspec .main-catalog__list > .pagination { background: none; border-radius: 0; }

/* 01.10.2026: в светлой теме разделитель с шумом (главная, перед «каталогом в цифрах») оставался чёрной полосой —
   у темы фон #000 без светлого варианта. В светлой: фон страницы, шум тёмным и тише. */
html[data-iq-theme='light'] body.iq-variant-techspec .iq-noise-divider { background: transparent; }
html[data-iq-theme='light'] body.iq-variant-techspec .iq-noise-divider canvas { filter: invert(1); opacity: .18; }