/* ============================================================
   АЛСИ-ФТ · превью дизайна 2026 (overlay поверх site.css) · v2
   Подключается ТОЛЬКО на index-2026.html. Удалить файл = откат.
   v2: тёмный контрастный футер, сочнее палитра, меньше блеклости.
   ============================================================ */

:root {
  /* палитра в oklch — насыщеннее и контрастнее, чем v1 */
  --blue: oklch(0.58 0.19 245);
  --blue-deep: oklch(0.46 0.17 248);
  --ink: oklch(0.21 0.035 260);
  --muted: oklch(0.45 0.025 255);
  --surface: oklch(0.97 0.01 240);
  --line: color-mix(in oklch, var(--blue) 16%, white);
  --cyan: color-mix(in oklch, var(--blue) 16%, white);
  --green: oklch(0.62 0.18 150);

  --radius: 14px;
  --shadow:
    0 1px 2px oklch(0.3 0.04 255 / .07),
    0 12px 32px oklch(0.3 0.06 255 / .12);
  --shadow-hover:
    0 2px 4px oklch(0.3 0.04 255 / .09),
    0 22px 48px oklch(0.3 0.08 250 / .18);

  /* Единая спокойная глубина контентных карточек.
     Короткая тень и внутренний кант повторяют выбранный макет,
     не превращая карточки в отдельные «плавающие окна». */
  --card-depth-surface: #fff;
  --card-depth-border: color-mix(in srgb, var(--blue) 13%, #d8e2ec);
  --card-depth-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    inset 0 -1px 0 rgba(47, 78, 107, .09),
    0 2px 3px rgba(24, 55, 84, .055),
    0 9px 18px rgba(24, 55, 84, .09);
  --card-depth-shadow-hover:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    inset 0 -1px 0 rgba(47, 78, 107, .1),
    0 3px 5px rgba(24, 55, 84, .07),
    0 13px 24px rgba(24, 55, 84, .12);

  /* флюидная типографика */
  --hero-h1-size: clamp(2.25rem, 1.15rem + 3vw, 3.25rem); /* 36→52px: длинные слова не вылезают из колонки */
  --hero-h1-line: 1.05;
  --section-h2-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
  --panel-h2-size: clamp(1.2rem, 1rem + 0.8vw, 1.5rem);
  --hero-panel-radius: 24px;
  --section-space: clamp(44px, 4vw + 20px, 72px);

  --logo-blue: #00a0f8; /* точный цвет логотипа */
  --ease-spring: linear(0, 0.42 22%, 0.87 44%, 1.02 62%, 0.99 80%, 1);
}

[data-theme="dark"] {
  --card-depth-surface: var(--surface-2);
  --card-depth-border: color-mix(in srgb, var(--blue) 16%, var(--line));
  --card-depth-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .055),
    inset 0 -1px 0 rgba(0, 0, 0, .28),
    0 2px 3px rgba(0, 0, 0, .2),
    0 9px 18px rgba(0, 0, 0, .24);
  --card-depth-shadow-hover:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    inset 0 -1px 0 rgba(0, 0, 0, .32),
    0 3px 5px rgba(0, 0, 0, .24),
    0 13px 24px rgba(0, 0, 0, .3);
}

/* Масштаб страницы оставляем нативным. CSS zoom меняет расчётную ширину
   viewport и координаты fixed-элементов, из-за чего в Chrome расходились
   шапка и плавающие подсказки. Компактность задаётся размерами компонентов. */

/* фикс: width/height-атрибуты (анти-CLS) не должны ломать пропорции.
   :where() даёт нулевую специфичность — правило сильнее атрибута, но слабее любого CSS */
:where(img[width][height]) { height: auto; }

body {
  background:
    radial-gradient(1200px 600px at 85% -100px, color-mix(in oklch, var(--blue) 12%, transparent), transparent 65%),
    radial-gradient(900px 500px at -10% 30%, color-mix(in oklch, var(--blue) 6%, transparent), transparent 60%),
    var(--white);
  color: var(--ink);
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
}

h1, h2, h3 { text-wrap: balance; letter-spacing: -0.015em; }
p { text-wrap: pretty; }

/* подпись под логотипом — в цвет самого логотипа */
.site-header .brand-name { color: var(--logo-blue); }
.site-header .brand { color: var(--logo-blue); }
.footer-grid .footer-brand .brand-name { color: var(--logo-blue); }
[data-theme="dark"] .footer-grid .footer-brand .brand-name { color: var(--logo-blue); }

/* ---------- объёмный логотип: фирменный знак без перерисовки ---------- */
.site-header .brand-mark,
.about-hero-brand .brand-mark {
  position: relative;
  isolation: isolate;
  transform: perspective(220px) rotateX(3deg) rotateY(-6deg) translateZ(0);
  transform-origin: 50% 64%;
  filter:
    drop-shadow(-1px -1px 0 rgba(255, 255, 255, .9))
    drop-shadow(1px 1px 0 rgba(0, 151, 238, .42))
    drop-shadow(1px 1px 0 rgba(0, 126, 205, .22));
  transition:
    transform var(--motion-fast) var(--ease-out),
    filter var(--motion-fast) var(--ease-out);
  will-change: transform;
}

.site-header .brand-mark img,
.about-hero-brand .brand-mark img {
  position: relative;
  z-index: 1;
  filter:
    drop-shadow(-1px -1px 0 rgba(255, 255, 255, .58))
    drop-shadow(1px 1px 0 rgba(0, 126, 205, .28));
}

.site-header .brand-name {
  text-shadow:
    0 1px 0 rgba(255, 255, 255, .88),
    0 3px 7px rgba(0, 91, 164, .18);
}

.site-header .brand:hover .brand-mark,
.site-header .brand:focus-visible .brand-mark,
.about-hero-brand:hover .brand-mark {
  transform: perspective(220px) rotateX(-2deg) rotateY(5deg) translateY(-1px) translateZ(0);
  filter:
    drop-shadow(-1px -1px 0 rgba(255, 255, 255, .96))
    drop-shadow(1px 1px 0 rgba(0, 164, 245, .48))
    drop-shadow(1.5px 1.5px 0 rgba(0, 126, 205, .26));
}

/* ---------- хедер: стекло + насыщение ---------- */
.site-header {
  background: color-mix(in oklch, white 82%, transparent);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border-bottom: 1px solid color-mix(in oklch, var(--blue) 14%, transparent);
}
.main-nav a {
  border-radius: 10px;
  transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.main-nav a:hover { background: color-mix(in oklch, var(--blue) 10%, transparent); }

/* ---------- герой ---------- */
.home-hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--blue) 12%, white);
  border: 1px solid color-mix(in oklch, var(--blue) 32%, white);
  color: var(--blue-deep);
  font-weight: 700;
}
.home-hero h1 {
  background: linear-gradient(115deg, var(--ink) 55%, var(--blue-deep) 120%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.home-hero .lead { color: oklch(0.4 0.025 255); }
.hero-slider,
.home-hero .hero-slider {
  border-radius: var(--hero-panel-radius);
  box-shadow: var(--shadow-hover);
  outline: 1px solid color-mix(in oklch, var(--blue) 18%, transparent);
  outline-offset: -1px;
}

/* панель поиска — приподнятая, с кольцом фокуса */
.search-panel {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  transition: box-shadow var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out);
}
.search-panel:focus-within {
  border-color: color-mix(in oklch, var(--blue) 50%, white);
  box-shadow: var(--shadow), 0 0 0 4px color-mix(in oklch, var(--blue) 20%, transparent);
}

/* чипы фактов — контрастнее */
.trust-line span {
  border-radius: 999px;
  padding: 10px 16px;
  background: white;
  border: 1px solid color-mix(in oklch, var(--blue) 22%, white);
  color: oklch(0.38 0.025 255);
  box-shadow: 0 2px 6px oklch(0.3 0.05 255 / .08);
}
.trust-line strong { color: var(--blue-deep); }

/* Единая панель с ключевыми фактами вместо трёх разрозненных плашек. */
.home-hero .trust-line {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 650px;
  gap: 0;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--blue) 20%, var(--line));
  border-radius: 22px;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--blue) 5%, #fff), #fff 58%),
    #fff;
  box-shadow: 0 14px 34px rgba(25, 80, 125, 0.09);
}
.home-hero .trust-item {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  min-height: 64px;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 15px;
  transition: background-color .2s ease, transform .2s ease;
}
.home-hero .trust-item:hover {
  background: color-mix(in srgb, var(--blue) 6%, transparent);
  transform: translateY(-1px);
}
.home-hero .trust-item + .trust-item::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 1px;
  background: color-mix(in srgb, var(--blue) 17%, var(--line));
}
.home-hero .trust-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--blue) 25%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--blue) 9%, #fff);
  color: var(--blue-deep);
  font-style: normal;
}
.home-hero .trust-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.home-hero .trust-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.home-hero .trust-copy strong {
  display: block;
  color: var(--blue-deep);
  font-size: 1rem;
  line-height: 1.05;
  white-space: nowrap;
}
.home-hero .trust-copy small {
  display: block;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.28;
}
[data-theme="dark"] .home-hero .trust-line {
  border-color: var(--line);
  background: linear-gradient(120deg, color-mix(in srgb, var(--blue) 8%, var(--surface-2)), var(--surface-2));
  box-shadow: 0 16px 36px rgba(0, 0, 0, .2);
}
[data-theme="dark"] .home-hero .trust-icon {
  border-color: color-mix(in srgb, var(--blue) 34%, var(--line));
  background: var(--surface-3);
  color: #8fd2ff;
}
[data-theme="dark"] .home-hero .trust-copy strong { color: #b9e5ff; }

@media (max-width: 720px) {
  .home-hero .trust-line { grid-template-columns: 1fr; padding: 7px; }
  .home-hero .trust-item { min-height: 58px; }
  .home-hero .trust-item + .trust-item::before {
    top: 0;
    right: 12px;
    bottom: auto;
    left: 12px;
    width: auto;
    height: 1px;
  }
}

/* Показатели на странице компании — карточки в общей стилистике сайта. */
.about-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 0 !important;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
main:not(.product-shell) > .about-stats { padding: 0 !important; }
.about-stats .about-stat-item {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  min-height: 108px;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface, #fff);
  box-shadow: 0 10px 28px rgba(35, 53, 84, .06);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.about-stats .about-stat-item:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--blue) 32%, var(--line));
  box-shadow: 0 12px 28px rgba(25, 80, 125, .09);
}
.about-stat-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--blue) 9%, #fff);
  color: var(--blue-deep);
  font-style: normal;
}
.about-stat-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.about-stat-copy {
  min-width: 0;
  margin: 0;
}
.about-stats .about-stat-copy strong {
  display: block;
  color: var(--blue-deep);
  font-size: clamp(1.45rem, 1rem + .7vw, 1.9rem);
  line-height: 1.05;
  white-space: nowrap;
}
.about-stats .about-stat-copy span {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.42;
}
[data-theme="dark"] .about-stats {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
[data-theme="dark"] .about-stats .about-stat-item {
  border-color: var(--line);
  background: var(--surface-2);
}
[data-theme="dark"] .about-stat-icon {
  border-color: color-mix(in srgb, var(--blue) 38%, var(--line));
  background: var(--surface-3);
  color: #8fd2ff;
}
[data-theme="dark"] .about-stats .about-stat-copy strong { color: #b9e5ff; }

@media (max-width: 980px) {
  .about-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .about-stats { grid-template-columns: 1fr; }
  main:not(.product-shell) > .about-stats { padding: 0 !important; }
  .about-stats .about-stat-item { min-height: 88px; padding: 13px 14px; }
}

/* ---------- кнопки ---------- */
.primary-btn {
  border-radius: 12px;
  background: linear-gradient(180deg, color-mix(in oklch, var(--blue) 90%, white), var(--blue-deep));
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, white 35%, transparent),
    0 6px 16px color-mix(in oklch, var(--blue) 40%, transparent);
  transition: transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out), filter var(--motion-fast) var(--ease-out);
}
.primary-btn:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, white 35%, transparent),
    0 10px 22px color-mix(in oklch, var(--blue) 48%, transparent);
}
.primary-btn:active { transform: translateY(0) scale(0.99); }

/* ---------- карточки сценариев ---------- */
.route-card {
  position: relative;
  border-radius: var(--radius);
  border: 1px solid color-mix(in oklch, var(--blue) 14%, white);
  box-shadow: 0 1px 3px oklch(0.3 0.04 255 / .06);
  transition:
    transform var(--motion-base) var(--ease-spring),
    box-shadow var(--motion-base) var(--ease-out),
    border-color var(--motion-base) var(--ease-out);
  overflow: hidden;
}
.route-card span { color: var(--blue-deep); font-weight: 700; }
.home-route-grid .route-card > strong { color: var(--blue-deep); }
.route-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), color-mix(in oklch, var(--blue) 40%, var(--green)));
  opacity: 0;
  transition: opacity var(--motion-base) var(--ease-out);
}
.route-card::after {
  content: "→";
  position: absolute;
  right: 18px;
  bottom: 14px;
  font-size: 18px;
  color: var(--blue);
  opacity: 0;
  translate: -6px 0;
  transition: opacity var(--motion-base) var(--ease-out), translate var(--motion-base) var(--ease-spring);
}
.route-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: color-mix(in oklch, var(--blue) 40%, white);
}
.route-card:hover::before,
.route-card:hover::after { opacity: 1; translate: 0 0; }

.route-card-button {
  width: 100%;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* ---------- заголовки секций ---------- */
.section-heading h2 { font-size: var(--section-h2-size); color: var(--ink); }
.section-heading a,
.section-heading .section-heading-action {
  border-radius: 999px;
  padding: 8px 16px;
  border: 1px solid color-mix(in oklch, var(--blue) 26%, white);
  color: var(--blue-deep);
  background: transparent;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}
.section-heading a:hover,
.section-heading .section-heading-action:hover {
  background: color-mix(in oklch, var(--blue) 10%, white);
  border-color: color-mix(in oklch, var(--blue) 45%, white);
}
.section-heading-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.section-heading-actions > * {
  flex: 0 0 auto;
  white-space: nowrap;
}
.section-heading .consultation-action {
  border-color: var(--blue-deep);
  color: #fff;
  background: var(--blue-deep);
}
.section-heading .consultation-action:hover {
  border-color: var(--blue);
  color: #fff;
  background: var(--blue);
}

@media (max-width: 420px) {
  .section-heading:has(.section-heading-actions) {
    flex-direction: column;
    align-items: stretch;
  }
  .section-heading-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }
  .section-heading-actions > * {
    width: 100%;
  }
}

/* ---------- scroll-driven reveal (прогрессивное улучшение) ---------- */
/* scroll-driven reveal убран: элементы первого экрана оставались полупрозрачными,
   т.к. для них диапазон entry не проигрывается. Появление делает IntersectionObserver в app.js. */


/* слайдер героя: мягкое «дыхание» кадров */
.hero-slide img { transition: transform 1.2s var(--ease-out); }
.hero-slide.active img { transform: scale(1.015); }

/* ---------- футер: глубокий тёмный, контрастный ---------- */
.site-footer {
  border-top: 3px solid var(--blue);
  background:
    radial-gradient(1000px 420px at 12% -5%, oklch(0.4 0.1 250 / .38), transparent 65%),
    radial-gradient(800px 400px at 95% 110%, oklch(0.35 0.09 255 / .25), transparent 60%),
    linear-gradient(180deg, oklch(0.24 0.045 258), oklch(0.18 0.035 260));
  color: oklch(0.86 0.015 250);
}
.footer-intro p,
.footer-intro span { color: oklch(0.78 0.018 250); }
.footer-phone {
  color: #fff;
  text-shadow: 0 1px 0 oklch(0.15 0.03 260 / .4);
}
.footer-phone:hover { color: color-mix(in oklch, var(--blue) 45%, white); }
.footer-column summary { color: #fff; }
.footer-column a {
  color: oklch(0.74 0.02 250);
  transition: color var(--motion-fast) var(--ease-out), translate var(--motion-fast) var(--ease-out);
}
.footer-column a:hover { color: #fff; translate: 2px 0; }
.footer-grid .footer-brand .brand-name { color: var(--logo-blue); }
.footer-grid .link-button {
  border-color: color-mix(in oklch, var(--blue) 55%, transparent);
  color: color-mix(in oklch, var(--blue) 40%, white);
}
.footer-grid .link-button:hover,
.footer-grid .link-button:focus-visible {
  border-color: var(--blue);
  color: #fff;
  background: color-mix(in oklch, var(--blue) 30%, transparent);
}
.footer-meta {
  border-top: 1px solid oklch(0.55 0.03 255 / .25);
  color: oklch(0.62 0.02 255);
}

/* ---------- бейдж превью ---------- */
.preview-badge {
  position: fixed;
  left: 50%;
  bottom: 18px;
  translate: -50% 0;
  z-index: 200;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: white;
  text-decoration: none;
  background: color-mix(in oklch, var(--ink) 82%, var(--blue));
  box-shadow: 0 10px 30px oklch(0.2 0.05 260 / .4), inset 0 1px 0 oklch(1 0 0 / .12);
  backdrop-filter: blur(8px);
  transition: transform var(--motion-fast) var(--ease-out);
}
.preview-badge:hover { transform: translate(0, -2px); }

/* устройства без hover — убрать лишние эффекты */
@media (hover: none) {
  .route-card:hover { transform: none; }
}

/* ============================================================
   ТЁМНАЯ ТЕМА v2 — сгенерирована по всем светлым поверхностям site.css
   Мягкая «dim»-палитра: без чёрных провалов, ровные ступени яркости
   ============================================================ */
html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

[data-theme="dark"] {
  --white: oklch(0.235 0.018 255);
  --surface: oklch(0.185 0.016 258);   /* фон страницы */
  --surface-2: oklch(0.235 0.018 255); /* карточки, панели */
  --surface-3: oklch(0.27 0.022 252);  /* подложки, ховеры, tinted */
  --ink: oklch(0.9 0.012 250);
  --muted: oklch(0.7 0.016 250);
  --line: oklch(0.35 0.02 254);
  --cyan: oklch(0.3 0.045 245);
  --blue: oklch(0.7 0.14 240);
  --blue-deep: oklch(0.62 0.14 243);
  --shadow: 0 1px 2px oklch(0 0 0 / .4), 0 12px 30px oklch(0 0 0 / .35);
  --shadow-hover: 0 2px 4px oklch(0 0 0 / .45), 0 20px 44px oklch(0 0 0 / .45);
}
[data-theme="dark"] body {
  background:
    radial-gradient(1200px 600px at 85% -100px, oklch(0.28 0.05 250 / .55), transparent 65%),
    radial-gradient(900px 500px at -10% 30%, oklch(0.25 0.04 255 / .45), transparent 60%),
    var(--surface);
  color: var(--ink);
}

/* --- авто-оверрайды (полный проход, без :is — псевдоэлементы поддержаны) --- */
[data-theme="dark"] body,
[data-theme="dark"] .site-header,
[data-theme="dark"] .secondary-btn,
[data-theme="dark"] .home-hero,
[data-theme="dark"] .stock-hero,
[data-theme="dark"] .about-hero,
[data-theme="dark"] .page-hero,
[data-theme="dark"] .page-hero.about-hero,
[data-theme="dark"] .hero-note,
[data-theme="dark"] .service-hero-panel,
[data-theme="dark"] .stock-hero-photo,
[data-theme="dark"] .about-hero-panel,
[data-theme="dark"] .about-hero-metrics span,
[data-theme="dark"] .search-panel,
[data-theme="dark"] .catalog-sticky-search,
[data-theme="dark"] .catalog-sticky-search input,
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .trust-line span,
[data-theme="dark"] .hero-slider,
[data-theme="dark"] .hero-slide-caption,
[data-theme="dark"] .hero-slider-controls button,
[data-theme="dark"] .hero-slider-dots,
[data-theme="dark"] .home-hero .hero-slider,
[data-theme="dark"] .hero-feature-kicker,
[data-theme="dark"] .home-hero .hero-slide img,
[data-theme="dark"] .route-card,
[data-theme="dark"] .process-tabs button,
[data-theme="dark"] .process-grid .process-card,
[data-theme="dark"] .process-grid .process-card:hover,
[data-theme="dark"] .process-grid .process-card:focus-visible,
[data-theme="dark"] .process-card img,
[data-theme="dark"] .process-more,
[data-theme="dark"] .service-list div,
[data-theme="dark"] .product-row,
[data-theme="dark"] .industry-card,
[data-theme="dark"] .service-cards div,
[data-theme="dark"] .stats-grid div,
[data-theme="dark"] .contact-card,
[data-theme="dark"] .map-placeholder,
[data-theme="dark"] .faq-list,
[data-theme="dark"] .faq-list button,
[data-theme="dark"] .contact-hero-address,
[data-theme="dark"] .contact-map-section,
[data-theme="dark"] .press-hero-showcase,
[data-theme="dark"] .press-hub,
[data-theme="dark"] .press-tabs,
[data-theme="dark"] .press-feed-link,
[data-theme="dark"] .press-main-card,
[data-theme="dark"] .press-aside,
[data-theme="dark"] .article-card,
[data-theme="dark"] .press-pagination,
[data-theme="dark"] .press-pagination .secondary-btn,
[data-theme="dark"] .press-page-list button,
[data-theme="dark"] .article-hero,
[data-theme="dark"] .article-hero-grid img,
[data-theme="dark"] .article-aside,
[data-theme="dark"] .article-gallery,
[data-theme="dark"] .article-gallery img,
[data-theme="dark"] .catalog-main,
[data-theme="dark"] .catalog-floating-help,
[data-theme="dark"] .catalog-floating-close,
[data-theme="dark"] .direction-card,
[data-theme="dark"] .catalog-sidebar,
[data-theme="dark"] .product-sidebar,
[data-theme="dark"] .catalog-route-actions button[data-catalog-route-parent],
[data-theme="dark"] .filter-pills button,
[data-theme="dark"] .subcategory-panel,
[data-theme="dark"] .subcategory-back,
[data-theme="dark"] .subcategory-card,
[data-theme="dark"] .subcategory-card[data-subcategory-card]:hover,
[data-theme="dark"] .subcategory-card[data-subcategory-card]:focus-visible,
[data-theme="dark"] .subcategory-card.active,
[data-theme="dark"] .subcategory-card-leaf,
[data-theme="dark"] .stock-category-tab,
[data-theme="dark"] .stock-category-tab.active,
[data-theme="dark"] .stock-category-tab:hover,
[data-theme="dark"] .stock-toolbar,
[data-theme="dark"] .stock-equipment-list .stock-card,
[data-theme="dark"] .stock-equipment-list .stock-card:hover,
[data-theme="dark"] .stock-equipment-list .stock-card:focus-visible,
[data-theme="dark"] .stock-empty,
[data-theme="dark"] .stock-check-copy,
[data-theme="dark"] .stock-check-steps div,
[data-theme="dark"] .selection-mode-bar button.active,
[data-theme="dark"] .selection-mode-bar button:hover,
[data-theme="dark"] .process-picker,
[data-theme="dark"] .selection-form,
[data-theme="dark"] .selection-summary,
[data-theme="dark"] .quick-selection-form,
[data-theme="dark"] .process-list button,
[data-theme="dark"] .equipment-card,
[data-theme="dark"] .catalog-empty,
[data-theme="dark"] .wide-search button,
[data-theme="dark"] .product-section-nav a,
[data-theme="dark"] .product-return-nav a,
[data-theme="dark"] .product-return-nav button,
[data-theme="dark"] .product-return-nav a:hover,
[data-theme="dark"] .product-return-nav button:hover,
[data-theme="dark"] .product-return-nav a:focus-visible,
[data-theme="dark"] .product-return-nav button:focus-visible,
[data-theme="dark"] .compare-actions button,
[data-theme="dark"] .link-button,
[data-theme="dark"] .main-media,
[data-theme="dark"] .zoom-btn,
[data-theme="dark"] .zoom-btn:hover,
[data-theme="dark"] .gallery-arrow,
[data-theme="dark"] .gallery-count,
[data-theme="dark"] .thumb,
[data-theme="dark"] .summary-area,
[data-theme="dark"] .quote-panel,
[data-theme="dark"] .spec-table tbody > tr:nth-child(even) > *,
[data-theme="dark"] .legacy-specs tbody > tr:nth-child(even) > *,
[data-theme="dark"] .related-card,
[data-theme="dark"] .related-card img,
[data-theme="dark"] .modal-panel,
[data-theme="dark"] .modal-close,
[data-theme="dark"] .catalog-open,
[data-theme="dark"] .drawer-close,
[data-theme="dark"] .cookie-notice,
[data-theme="dark"] .cookie-notice__button--secondary,
[data-theme="dark"] .stock-hero-facts,
[data-theme="dark"] .stock-feature-slider,
[data-theme="dark"] .stock-feature-kicker,
[data-theme="dark"] .stock-feature-slide,
[data-theme="dark"] .stock-feature-slide img,
[data-theme="dark"] .menu-toggle,
[data-theme="dark"] .main-nav,
[data-theme="dark"] .about-directions-grid a,
[data-theme="dark"] .about-service-grid div,
[data-theme="dark"] .contact-request {
  background: var(--surface-2);
}

[data-theme="dark"] .equipment-type-filter button {
  color: var(--ink);
  background: var(--surface-2);
}

[data-theme="dark"] .tube-compatibility {
  background: linear-gradient(145deg, var(--surface-2), var(--surface-3));
  box-shadow: 0 12px 30px rgba(0, 0, 0, .24);
}

[data-theme="dark"] .tube-compatibility-card {
  color: var(--ink);
  border-color: var(--line);
  background: linear-gradient(145deg, var(--surface-2), var(--surface-3));
  box-shadow: 0 8px 18px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .04);
}

[data-theme="dark"] .tube-compatibility-card:hover,
[data-theme="dark"] .tube-compatibility-card:focus-visible,
[data-theme="dark"] .tube-compatibility-card.active,
[data-theme="dark"] .tube-compatibility-card[aria-pressed="true"] {
  border-color: #149ce8;
  background: linear-gradient(145deg, var(--surface-2), rgba(20, 156, 232, .16));
}

[data-theme="dark"] .tube-compatibility-icon,
[data-theme="dark"] .tube-compatibility-copy strong span {
  color: #9bdcff;
  background: rgba(20, 156, 232, .14);
}

[data-theme="dark"] .equipment-type-filter button > span {
  color: #8fd2ff;
  background: var(--surface-3);
}

[data-theme="dark"] .equipment-type-filter button:hover,
[data-theme="dark"] .equipment-type-filter button:focus-visible {
  color: #b9e5ff;
  background: var(--surface-3);
}

[data-theme="dark"] .equipment-type-filter button.active,
[data-theme="dark"] .equipment-type-filter button[aria-pressed="true"] {
  color: #fff;
  background: linear-gradient(180deg, #149ce8, #0574d8);
}

[data-theme="dark"] .equipment-type-filter button.active > span,
[data-theme="dark"] .equipment-type-filter button[aria-pressed="true"] > span {
  color: #0574d8;
  background: #fff;
}

[data-theme="dark"] .main-nav a:hover,
[data-theme="dark"] .main-nav a.active,
[data-theme="dark"] .secondary-btn:hover,
[data-theme="dark"] .about-hero-media,
[data-theme="dark"] .about-hero-steps span,
[data-theme="dark"] .hero-slider-dots button,
[data-theme="dark"] .home-hero .hero-slider-dots button,
[data-theme="dark"] .process-tabs button:hover,
[data-theme="dark"] .process-tabs button.active,
[data-theme="dark"] .process-tabs span,
[data-theme="dark"] .process-more:hover,
[data-theme="dark"] .process-more:focus-visible,
[data-theme="dark"] .contact-hero-map,
[data-theme="dark"] .contact-index,
[data-theme="dark"] .press-tabs button span,
[data-theme="dark"] .press-tabs button.active,
[data-theme="dark"] .press-tabs button:hover,
[data-theme="dark"] .article-card span,
[data-theme="dark"] .contacts-band,
[data-theme="dark"] .direction-card:hover,
[data-theme="dark"] .direction-card.active,
[data-theme="dark"] .catalog-main.is-internal .direction-card:hover,
[data-theme="dark"] .catalog-main.is-internal .direction-card:focus-visible,
[data-theme="dark"] .catalog-main.is-internal .direction-card.active,
[data-theme="dark"] .catalog-sidebar a:hover,
[data-theme="dark"] .product-sidebar a:hover,
[data-theme="dark"] .catalog-sidebar a.active,
[data-theme="dark"] .product-sidebar a.active,
[data-theme="dark"] .catalog-sidebar .catalog-submenu a:hover,
[data-theme="dark"] .catalog-sidebar .catalog-submenu a.active,
[data-theme="dark"] .catalog-route-actions button[data-catalog-route-parent]:hover,
[data-theme="dark"] .catalog-route-actions button[data-catalog-route-parent]:focus-visible,
[data-theme="dark"] .catalog-result-count,
[data-theme="dark"] .filter-pills button.active,
[data-theme="dark"] .filter-pills button:hover,
[data-theme="dark"] .subcategory-panel-actions > span,
[data-theme="dark"] .subcategory-back:hover,
[data-theme="dark"] .equipment-card .stock-card-category,
[data-theme="dark"] .stock-check-steps span,
[data-theme="dark"] .process-list button.active,
[data-theme="dark"] .process-list button:hover,
[data-theme="dark"] .selection-form-head > span,
[data-theme="dark"] .sidebar-group-toggle:hover,
[data-theme="dark"] .sidebar-group-toggle:focus-visible,
[data-theme="dark"] .sidebar-group-toggle.active,
[data-theme="dark"] .product-sidebar .sidebar-subnav a.active,
[data-theme="dark"] .product-section-nav a:hover,
[data-theme="dark"] .product-section-nav a:focus-visible,
[data-theme="dark"] .product-section-nav a.active,
[data-theme="dark"] .compare-actions button:hover,
[data-theme="dark"] .compare-actions button:focus-visible,
[data-theme="dark"] .spec-table thead > tr > *,
[data-theme="dark"] .legacy-specs thead > tr > *,
[data-theme="dark"] .spec-table tbody > tr:hover > *,
[data-theme="dark"] .legacy-specs tbody > tr:hover > *,
[data-theme="dark"] .cookie-notice__button--secondary:hover,
[data-theme="dark"] .stock-feature-slider .hero-slider-dots button,
[data-theme="dark"] .menu-toggle[aria-expanded="true"],
[data-theme="dark"] .about-showroom-section,
[data-theme="dark"] .about-showroom-media,
[data-theme="dark"] .about-cta-section {
  background: var(--surface-3);
}

[data-theme="dark"] .home-hero::before,
[data-theme="dark"] .stock-hero::before,
[data-theme="dark"] .about-hero::before,
[data-theme="dark"] .home-hero::after,
[data-theme="dark"] .stock-hero::after,
[data-theme="dark"] .about-hero::after,
[data-theme="dark"] .page-hero:not(.stock-hero):not(.about-hero):not(.article-hero)::before,
[data-theme="dark"] .page-hero:not(.stock-hero):not(.about-hero):not(.article-hero)::after,
[data-theme="dark"] .hero-note::after,
[data-theme="dark"] .hero-slide::after,
[data-theme="dark"] .stock-board::before,
[data-theme="dark"] .stock-category-tab::before {
  background: none;
}

[data-theme="dark"] .main-nav a,
[data-theme="dark"] .process-tabs button,
[data-theme="dark"] .catalog-sidebar a,
[data-theme="dark"] .catalog-subnav-label,
[data-theme="dark"] .sidebar-subnav-label,
[data-theme="dark"] .product-sidebar a,
[data-theme="dark"] .sidebar-group > a,
[data-theme="dark"] .catalog-sidebar .catalog-submenu a,
[data-theme="dark"] .product-sidebar .sidebar-subnav a,
[data-theme="dark"] .subcategory-card strong,
[data-theme="dark"] .question-grid label,
[data-theme="dark"] .selection-extra label,
[data-theme="dark"] .selection-contact-grid label,
[data-theme="dark"] .quick-selection-form label,
[data-theme="dark"] .selection-summary dd,
[data-theme="dark"] .sidebar-group-toggle,
[data-theme="dark"] .summary-area p,
[data-theme="dark"] .check-list li,
[data-theme="dark"] .tabs button,
[data-theme="dark"] .spec-table,
[data-theme="dark"] .quote-form label {
  color: var(--ink);
}

[data-theme="dark"] .catalog-mobile-navigation select {
  color: var(--ink);
  border-color: var(--line);
  background: var(--surface);
}

[data-theme="dark"] .stock-category-tab small {
  color: var(--muted);
}

[data-theme="dark"] .hero-note,
[data-theme="dark"] .service-hero-panel,
[data-theme="dark"] .about-hero-media,
[data-theme="dark"] .about-hero-panel,
[data-theme="dark"] .about-hero-brand,
[data-theme="dark"] .about-hero-metrics span,
[data-theme="dark"] .trust-line span,
[data-theme="dark"] .hero-slide-caption,
[data-theme="dark"] .home-hero .hero-slider,
[data-theme="dark"] .hero-feature-kicker,
[data-theme="dark"] .process-tabs button,
[data-theme="dark"] .process-grid .process-card,
[data-theme="dark"] .contact-hero-address,
[data-theme="dark"] .article-hero-grid img,
[data-theme="dark"] .article-gallery img,
[data-theme="dark"] .catalog-floating-close,
[data-theme="dark"] .catalog-submenu,
[data-theme="dark"] .subcategory-card,
[data-theme="dark"] .stock-category-tab,
[data-theme="dark"] .stock-toolbar,
[data-theme="dark"] .stock-equipment-list .stock-card,
[data-theme="dark"] .stock-check-copy,
[data-theme="dark"] .stock-check-steps div,
[data-theme="dark"] .sidebar-subnav,
[data-theme="dark"] .product-return-nav a,
[data-theme="dark"] .product-return-nav button,
[data-theme="dark"] .gallery-arrow,
[data-theme="dark"] .gallery-count,
[data-theme="dark"] .cookie-notice,
[data-theme="dark"] .cookie-notice__button--secondary,
[data-theme="dark"] .stock-hero-facts,
[data-theme="dark"] .stock-hero-facts span,
[data-theme="dark"] .stock-feature-slider,
[data-theme="dark"] .stock-feature-kicker {
  border-color: var(--line);
}

/* --- ручная полировка --- */
[data-theme="dark"] .site-header {
  background: color-mix(in oklch, oklch(0.19 0.018 257) 85%, transparent);
  border-bottom-color: oklch(0.32 0.025 254 / .7);
}
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3 { color: var(--ink); }
[data-theme="dark"] .home-hero h1, [data-theme="dark"] .page-hero h1 {
  background: linear-gradient(115deg, var(--ink) 55%, oklch(0.78 0.1 240) 120%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
[data-theme="dark"] :is(input, textarea, select) {
  background: oklch(0.2 0.016 256);
  color: var(--ink);
  border-color: var(--line);
}
[data-theme="dark"] :is(input, textarea)::placeholder { color: oklch(0.55 0.015 252); }
[data-theme="dark"] .modal-panel { background: var(--surface-2); color: var(--ink); }
[data-theme="dark"] .spec-table th { background: var(--surface-3); }
[data-theme="dark"] :is(.spec-table td, .spec-table th) { border-color: var(--line); color: var(--ink); }
[data-theme="dark"] .footer-grid .footer-brand .brand-name { color: var(--logo-blue); }
/* Фото сохраняют исходную яркость, а прозрачные поля подстраиваются под тему. */
[data-theme="dark"] {
  --media-studio: var(--surface-2);
}

[data-theme="dark"] :is(.main-media, .thumb, .related-card, .equipment-card, .subcategory-card, .catalog-main-card, .stock-card, .hero-slide, .process-card, .route-card, .product-row, .product-section-nav a, .product-section-nav, .direction-card, .catalog-section-card, .section-card) img {
  mix-blend-mode: normal;
  background: var(--media-studio) !important;
}

[data-theme="dark"] :is(.main-media, .thumb) {
  isolation: isolate;
  background: var(--media-studio) !important;
  background-image: none !important;
}
[data-theme="dark"] .preview-badge { background: oklch(0.3 0.05 250); }
[data-theme="dark"] .trust-line span { background: var(--surface-2); color: var(--ink); border-color: var(--line); }

/* ---------- кнопка переключателя ---------- */
.theme-toggle {
  inline-size: 38px; block-size: 38px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}
.theme-toggle:hover { background: color-mix(in oklch, var(--blue) 12%, transparent); color: var(--blue-deep); transform: rotate(15deg); }
[data-theme="dark"] .theme-toggle { color: oklch(0.8 0.05 90); }

/* --- элементы поверх фото слайдера: остаются светлым «стеклом» в тёмной теме --- */
[data-theme="dark"] .hero-slide-caption {
  background: rgba(255, 255, 255, .88);
  border-color: rgba(198, 216, 235, .7);
  color: #1a2233;
  backdrop-filter: blur(10px) saturate(1.08);
}
[data-theme="dark"] .hero-slide-caption strong { color: #16203a; }
[data-theme="dark"] .hero-slide-caption a { color: #0468bd; }
[data-theme="dark"] .hero-feature-kicker {
  background: rgba(255, 255, 255, .88);
  border-color: rgba(198, 216, 235, .7);
  color: #0b5aa3;
}
[data-theme="dark"] .hero-slider-dots {
  background: rgba(255, 255, 255, .92);
  border-color: rgba(198, 216, 235, .7);
}
[data-theme="dark"] .hero-slider-dots button { background: #b8c6d8; }
[data-theme="dark"] .hero-slider-dots button.active,
[data-theme="dark"] .hero-slider-dots button[aria-current="true"] { background: #0574d8; }
[data-theme="dark"] .hero-slider-controls button {
  background: rgba(255, 255, 255, .92);
  border-color: rgba(198, 216, 235, .7);
  color: #0b5aa3;
}

/* --- слайдер главной: авторский дизайн — тёмный scrim + белый текст без плашки --- */
[data-theme="dark"] .home-hero .hero-slide::after {
  background: linear-gradient(180deg, rgba(11, 18, 32, 0) 0%, rgba(11, 18, 32, .72) 78%, rgba(11, 18, 32, .84) 100%);
}
[data-theme="dark"] .home-hero .hero-slide-caption {
  background: transparent;
  padding: 0;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  color: #fff;
}
[data-theme="dark"] .home-hero .hero-slide-caption strong { color: #fff; }
[data-theme="dark"] .home-hero .hero-slide-caption a { color: #d8efff; }

/* --- элементы поверх фото: финальная зачистка --- */
[data-theme="dark"] .hero-slider-controls { background: transparent; border: 0; }
[data-theme="dark"] .stock-feature-kicker {
  background: rgba(255, 255, 255, .88);
  border-color: rgba(198, 216, 235, .7);
  color: #0b5aa3;
}
[data-theme="dark"] .gallery-arrow,
[data-theme="dark"] .gallery-count {
  background: rgba(255, 255, 255, .9);
  border-color: rgba(198, 216, 235, .7);
  color: #0b5aa3;
}
[data-theme="dark"] .media-actions .zoom-btn {
  background: rgba(255, 255, 255, .9);
  border-color: rgba(198, 216, 235, .7);
  color: #0b5aa3;
}

/* --- надписи поверх фото без плашек: текст прямо на светлом снимке --- */
[data-theme="dark"] .hero-slide-caption,
[data-theme="dark"] .stock-feature-slider .hero-slide-caption {
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  padding: 0 2px;
}
[data-theme="dark"] .hero-slide-caption strong,
[data-theme="dark"] .stock-feature-slider .hero-slide-caption strong {
  color: #101828;
  text-shadow: 0 1px 10px rgba(255, 255, 255, .85), 0 0 24px rgba(255, 255, 255, .7);
}
[data-theme="dark"] .hero-slide-caption a,
[data-theme="dark"] .stock-feature-slider .hero-slide-caption a {
  color: #0563b8;
  text-shadow: 0 1px 10px rgba(255, 255, 255, .85), 0 0 20px rgba(255, 255, 255, .65);
}
[data-theme="dark"] .hero-feature-kicker,
[data-theme="dark"] .stock-feature-kicker {
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  padding: 0 2px;
  color: #0563b8;
  text-shadow: 0 1px 10px rgba(255, 255, 255, .85), 0 0 20px rgba(255, 255, 255, .65);
}
[data-theme="dark"] .hero-slider-dots {
  background: transparent;
  border: 0;
  box-shadow: none;
}
[data-theme="dark"] .hero-slider-dots button {
  background: rgba(24, 34, 52, .35);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .5);
}
[data-theme="dark"] .hero-slider-dots button.active,
[data-theme="dark"] .hero-slider-dots button[aria-current="true"] {
  background: #0574d8;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .75);
}
/* на главной подпись лежит на тёмном градиенте — там текст остаётся белым */
[data-theme="dark"] .home-hero .hero-slide-caption strong {
  color: #fff;
  text-shadow: 0 1px 12px rgba(11, 18, 32, .55);
}
[data-theme="dark"] .home-hero .hero-slide-caption a {
  color: #d8efff;
  text-shadow: 0 1px 12px rgba(11, 18, 32, .55);
}

/* ============================================================
   Единый стиль подписей слайдеров — как на главной:
   тёмный градиент внизу фото + белый текст без плашки.
   Действует в обеих темах, на всех страницах.
   ============================================================ */
.hero-slide::after {
  height: 50%;
  background: linear-gradient(180deg, rgba(11, 18, 32, 0) 0%, rgba(11, 18, 32, .72) 78%, rgba(11, 18, 32, .84) 100%);
}
.hero-slide-caption {
  left: 24px;
  right: auto;
  bottom: 70px;
  z-index: 4;
  width: min(410px, calc(100% - 48px));
  min-height: 0;
  padding: 0;
  color: #fff;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}
.hero-slide-caption strong {
  color: #fff;
  font-size: 24px;
  min-height: 0;
  text-shadow: 0 1px 12px rgba(11, 18, 32, .55);
}
.hero-slide-caption a {
  margin-top: 8px;
  color: #d8efff;
  text-shadow: 0 1px 12px rgba(11, 18, 32, .55);
}
[data-theme="dark"] .hero-slide::after {
  background: linear-gradient(180deg, rgba(11, 18, 32, 0) 0%, rgba(11, 18, 32, .72) 78%, rgba(11, 18, 32, .84) 100%);
}
[data-theme="dark"] .hero-slide-caption,
[data-theme="dark"] .stock-feature-slider .hero-slide-caption {
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  padding: 0;
}
[data-theme="dark"] .hero-slide-caption strong,
[data-theme="dark"] .stock-feature-slider .hero-slide-caption strong {
  color: #fff;
  text-shadow: 0 1px 12px rgba(11, 18, 32, .55);
}
[data-theme="dark"] .hero-slide-caption a,
[data-theme="dark"] .stock-feature-slider .hero-slide-caption a {
  color: #d8efff;
  text-shadow: 0 1px 12px rgba(11, 18, 32, .55);
}
/* точки-навигация под подписью — единый вид */
.hero-slider-dots { background: transparent; border: 0; box-shadow: none; }
.hero-slider-dots button { background: rgba(255, 255, 255, .55); }
.hero-slider-dots button.active,
.hero-slider-dots button[aria-current="true"] { background: #0574d8; }
[data-theme="dark"] .hero-slider-dots button { background: rgba(255, 255, 255, .55); box-shadow: none; }
[data-theme="dark"] .hero-slider-dots button.active,
[data-theme="dark"] .hero-slider-dots button[aria-current="true"] { background: #0574d8; box-shadow: none; }

/* --- выравнивание сайдбара каталога по линии-разделителю справа --- */
@media (min-width: 941px) {
  .catalog-layout > .catalog-sidebar {
    margin-top: var(--catalog-route-offset, 45px);
  }

  .catalog-route-actions {
    flex: 0 0 auto;
    flex-wrap: nowrap;
  }
}

/* Каталог: счётчики выглядят как метаданные, а не как лишние кнопки. */
[data-theme="dark"] .catalog-result-count,
[data-theme="dark"] .subcategory-panel-actions > span {
  border: 0;
  color: var(--muted);
  background: transparent;
}

/* --- защита от переполнения длинными словами --- */
h1, h2, h3, .hero-copy, .about-hero-copy, .page-hero .lead {
  overflow-wrap: break-word;
  hyphens: auto;
}
.about-hero-grid > *,
.hero-grid > * { min-width: 0; }

/* --- shared-element переход фото товара --- */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-group(product-media) {
    animation-duration: 420ms;
    animation-timing-function: var(--ease-out);
  }
  ::view-transition-old(product-media),
  ::view-transition-new(product-media) {
    /* фото масштабируется целиком, без кроссфейда-«призрака» */
    mix-blend-mode: normal;
    height: 100%;
    object-fit: contain;
  }
}

/* --- аккордеоны: плавная анимация реальной высоты (interpolate-size, 2026) ---
   grid-template-rows не подходит: у подменю несколько дочерних строк.
   В браузерах без поддержки остаётся max-height-фолбэк из site.css. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }

  .catalog-submenu,
  .sidebar-subnav {
    max-height: none;
    height: auto;
    overflow: hidden;
    transition:
      height 320ms var(--ease-out),
      opacity 200ms var(--ease-out),
      margin 320ms var(--ease-out),
      visibility 0s linear 0s;
  }
  .catalog-menu-group:not(.open) .catalog-submenu,
  .sidebar-group:not(.open) .sidebar-subnav {
    max-height: none;
    height: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      height 300ms var(--ease-out),
      opacity 180ms var(--ease-out),
      margin 300ms var(--ease-out),
      visibility 0s linear 300ms;
  }
}

/* --- правки после проверки в браузере --- */
/* кнопка поиска не должна переносить слово */
.search-panel .primary-btn,
.wide-search button,
.catalog-sticky-search .primary-btn { white-space: nowrap; }

/* Catalog search follows its introduction and keeps the submit label intact. */
.catalog-main .catalog-intro {
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
.catalog-main .catalog-intro > div > p:last-child {
  margin-bottom: 0;
}
.catalog-main .catalog-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  width: 100%;
}
.catalog-main .catalog-search input { min-width: 0; }
.catalog-main .catalog-search .primary-btn {
  min-width: 100px;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}
@media (max-width: 480px) {
  .catalog-main .catalog-search .primary-btn {
    min-width: 84px;
    padding-inline: 16px;
  }
}

/* чип «Новые поступления» на светлом фото — контрастнее */
[data-theme="dark"] .hero-feature-kicker,
[data-theme="dark"] .stock-feature-kicker {
  color: #0a3f75;
  text-shadow:
    0 1px 2px rgba(255,255,255,.95),
    0 0 10px rgba(255,255,255,.9),
    0 0 22px rgba(255,255,255,.75);
}

/* --- плавная смена содержимого каталога --- */
/* блок направлений: к height добавляем отступы и сетку, чтобы схлопывание шло цельно */
.catalog-directions {
  transition:
    height 480ms cubic-bezier(.22, 1, .36, 1),
    margin-bottom 480ms cubic-bezier(.22, 1, .36, 1);
}
.catalog-directions .section-heading {
  transition:
    max-height 420ms cubic-bezier(.22, 1, .36, 1),
    opacity 260ms cubic-bezier(.22, 1, .36, 1),
    margin-bottom 420ms cubic-bezier(.22, 1, .36, 1),
    transform 420ms cubic-bezier(.22, 1, .36, 1);
}
.direction-grid {
  transition: gap 480ms cubic-bezier(.22, 1, .36, 1);
}
@media (min-width: 1100px) {
  .catalog-main .direction-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.direction-card {
  transition:
    min-height 480ms cubic-bezier(.22, 1, .36, 1),
    padding 480ms cubic-bezier(.22, 1, .36, 1),
    grid-template-columns 480ms cubic-bezier(.22, 1, .36, 1),
    gap 480ms cubic-bezier(.22, 1, .36, 1),
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    background-color .2s ease;
}
.direction-card img {
  transition: width 480ms cubic-bezier(.22, 1, .36, 1), height 480ms cubic-bezier(.22, 1, .36, 1);
}
.direction-card strong {
  transition: font-size 380ms cubic-bezier(.22, 1, .36, 1);
}
.direction-card span {
  transition:
    max-height 420ms cubic-bezier(.22, 1, .36, 1),
    opacity 240ms cubic-bezier(.22, 1, .36, 1),
    transform 420ms cubic-bezier(.22, 1, .36, 1);
}

/* результаты каталога мягко проявляются при смене подраздела */
@media (prefers-reduced-motion: no-preference) {
  .catalog-results.is-swapping .subcategory-grid,
  .catalog-results.is-swapping .catalog-results-text {
    opacity: 0;
    transform: translateY(6px);
  }
  .catalog-results .subcategory-grid,
  .catalog-results .catalog-results-text {
    transition: opacity 260ms var(--ease-out), transform 320ms var(--ease-out);
  }
}

/* --- контент виден по умолчанию: скрываем только когда JS точно жив ---
   Раньше .reveal имел opacity:0 в базовом CSS. Если JS не отработал
   (ошибка, троттлинг фоновой вкладки, отключённый JS) — страница оставалась пустой. */
.reveal { opacity: 1; transform: none; }
.motion-stagger > * { opacity: 1; transform: none; }

html.js-motion .reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(12px);
}
html.js-motion .motion-stagger:not(.is-visible) > * {
  opacity: 0;
  transform: translateY(18px) scale(.985);
}
/* страховка: если наблюдатель не сработал за 3 секунды, показываем всё */
html.js-motion.motion-timeout .reveal,
html.js-motion.motion-timeout .motion-stagger > * {
  opacity: 1 !important;
  transform: none !important;
}

/* --- переключатель темы на мобильных: .header-contact скрыт, кнопку выносим в шапку --- */
@media (max-width: 940px) {
  .site-header .theme-toggle {
    position: absolute;
    top: 10px;
    right: 92px;
    z-index: 3;
    inline-size: 44px;
    block-size: 44px;
    display: inline-grid;
  }
  .site-header { position: sticky; }
}

/* --- страховка: ни одно фото не темнеет в тёмной теме --- */
[data-theme="dark"] .direction-card img,
[data-theme="dark"] .catalog-main.is-internal .direction-card img {
  mix-blend-mode: normal;
  background: oklch(0.94 0.005 250) !important;
  border-radius: 10px;
  padding: 3px;
  filter: none;
}

/* --- зебра в таблицах характеристик (тёмная тема) --- */
[data-theme="dark"] .spec-table tbody > tr:nth-child(even) > *,
[data-theme="dark"] .legacy-specs tbody > tr:nth-child(even) > * {
  background: oklch(0.265 0.02 254);
}
[data-theme="dark"] .spec-table tbody > tr:nth-child(odd) > *,
[data-theme="dark"] .legacy-specs tbody > tr:nth-child(odd) > * {
  background: transparent;
}
[data-theme="dark"] .spec-table tbody > tr:hover > *,
[data-theme="dark"] .legacy-specs tbody > tr:hover > * {
  background: oklch(0.31 0.035 248);
}
[data-theme="dark"] .spec-table thead > tr > * {
  background: oklch(0.3 0.028 252);
  color: var(--ink);
}

/* --- воздух между смысловыми блоками карточки товара ---
   34px при заголовке 34px читались как «слиплось»: отступ должен быть
   заметно больше кегля заголовка, иначе блок не отделяется. */
.product-page .related-section {
  margin-top: clamp(56px, 5vw, 88px);
  padding-top: clamp(28px, 2.6vw, 40px);
  border-top: 1px solid var(--line);
}
.product-page .detail-section { margin-bottom: 0; }

/* ============================================================
   Единая витрина для фото товаров в тёмной теме.
   Фото у нас разного типа: часть — PNG с прозрачным фоном,
   часть — JPEG с белым. Чтобы каталог выглядел ровно, всем
   даём одинаковую светлую подложку со скруглением и отступом.
   ============================================================ */
[data-theme="dark"] :is(
  .catalog-main-card, .subcategory-card, .product-row, .equipment-card,
  .stock-card, .product-section-nav, .product-section-nav a, .main-media,
  .thumb, .related-card, .direction-card, .hero-slide, .process-card,
  .route-card, .catalog-section-card, .section-card
) img {
  background: #f2f5f8 !important;
  mix-blend-mode: normal !important;
  border-radius: 10px;
  padding: 6px;
  box-sizing: border-box;
  object-fit: contain;
}
/* главное фото карточки — витрина крупнее и с более мягким скруглением */
[data-theme="dark"] .main-media img {
  border-radius: 14px;
  padding: 12px;
}
/* миниатюры — компактнее */
[data-theme="dark"] .thumb img {
  border-radius: 8px;
  padding: 3px;
}

/* --- ровные колонки в таблицах характеристик ---
   Таблицы приходят из разных источников с разным числом ячеек;
   фиксированная раскладка не даёт колонкам «плясать» от строки к строке. */
.spec-table,
.legacy-specs {
  table-layout: fixed;
  width: 100%;
}
.spec-table td,
.spec-table th,
.legacy-specs td,
.legacy-specs th {
  overflow-wrap: break-word;
  vertical-align: middle;
}
/* первая колонка — название параметра, ей больше места */
.spec-table tbody > tr > *:first-child,
.legacy-specs tbody > tr > *:first-child { width: 38%; }

/* --- страховка для входных анимаций героя ---
   В фоновой вкладке (и при отключённом JS) keyframes-анимации
   замирают на первом кадре с opacity 0 — контент «пропадает».
   Когда включён режим motion-timeout, отключаем их полностью. */
html.motion-timeout .home-hero .hero-copy > *,
html.motion-timeout .page-hero .hero-copy > *,
html.motion-timeout .about-hero .about-hero-copy > *,
html.motion-timeout .page-hero-grid > * > *,
html.motion-timeout .hero-slide-caption,
html.motion-timeout .hero-slider,
html.motion-timeout .subcategory-card,
html.motion-timeout .stock-card,
html.motion-timeout .process-card,
html.motion-timeout .modal-panel,
html.motion-timeout .catalog-floating-help {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* --- страницы категорий каталога: без бокового меню, контент во всю ширину --- */
.product-shell.category-page {
  display: block;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 28px var(--page-gutter) 48px;
}
.category-page .product-page { max-width: none; }
.category-page .product-head h1 { font-size: clamp(2rem, 1.2rem + 2.2vw, 2.75rem); }
.category-page .related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.faq-list {
  display: grid;
  width: 100%;
  max-width: none;
  gap: 10px;
  padding: clamp(14px, 1.5vw, 20px);
  border: 1px solid var(--card-depth-border);
  border-radius: 20px;
  overflow: visible;
  background: color-mix(in srgb, var(--surface) 32%, var(--white));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .92),
    0 10px 30px rgba(24, 55, 84, .06);
}
.faq-list details {
  margin: 0;
  padding: 0;
  border: 1px solid var(--card-depth-border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--card-depth-surface);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 2px 5px rgba(24, 55, 84, .035);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.faq-list details[open] {
  border-color: color-mix(in srgb, var(--blue) 42%, var(--line));
  background: color-mix(in srgb, var(--blue) 3%, var(--card-depth-surface));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 8px 20px rgba(13, 105, 180, .08);
}
.faq-list summary {
  display: flex;
  align-items: center;
  min-height: 62px;
  gap: 14px;
  padding: 15px 18px;
  list-style: none;
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::before {
  content: "+";
  display: grid;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--blue) 30%, var(--line));
  border-radius: 50%;
  background: var(--white);
  color: var(--blue-deep);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
}
.faq-list details[open] summary::before {
  content: "−";
  border-color: var(--blue);
  background: var(--blue-deep);
  color: #fff;
}
.faq-list p {
  margin: 0;
  padding: 0 20px 20px 62px;
  color: var(--muted);
  line-height: 1.65;
}
[data-theme="dark"] .faq-list {
  background: color-mix(in srgb, var(--surface-2) 84%, var(--surface-3));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .035),
    0 12px 30px rgba(0, 0, 0, .2);
}
[data-theme="dark"] .faq-list details {
  background: var(--card-depth-surface);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .045),
    0 2px 5px rgba(0, 0, 0, .16);
}
[data-theme="dark"] .faq-list details[open] {
  background: color-mix(in srgb, var(--blue) 6%, var(--card-depth-surface));
}
[data-theme="dark"] .faq-list summary::before {
  border-color: color-mix(in srgb, var(--blue) 45%, var(--line));
  background: var(--surface-3);
  color: #8fd2ff;
}
[data-theme="dark"] .faq-list details[open] summary::before {
  background: var(--blue);
  color: #fff;
}

@media (max-width: 640px) {
  .faq-list { padding: 10px; border-radius: 16px; }
  .faq-list summary { min-height: 56px; gap: 10px; padding: 13px 14px; }
  .faq-list summary::before { flex-basis: 26px; width: 26px; height: 26px; }
  .faq-list p { padding: 0 14px 16px 50px; }
}
.category-page nav[aria-label="Смежные разделы каталога"] {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.category-page nav[aria-label="Смежные разделы каталога"] a {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
}


/* ============================================================
   ЕДИНЫЙ ВЕРТИКАЛЬНЫЙ РИТМ  (v3)
   Один отступ между секциями на всех страницах сайта.
   Собственные вертикальные padding/margin секций гасятся (!important —
   иначе классовые правила из site.css перебивают обнуление),
   расстояние задаёт только gap. Внутренний воздух оставлен лишь
   секциям с собственным фоном, где иначе текст прилипнет к заливке.
   ============================================================ */
:root {
  --rhythm: clamp(38px, 3.6vw, 52px);
  --rhythm-sm: clamp(26px, 2.4vw, 36px);
  --separator-content-gap: clamp(12px, 1.2vw, 18px);
}

/* ---------- обычные страницы ---------- */
main:not(.product-shell) {
  display: flex;
  flex-direction: column;
  gap: var(--rhythm);
}
main:not(.product-shell) > *,
main:not(.product-shell) > * > .container {
  padding-block: 0 !important;
  margin-block: 0 !important;
}

/* Keep the catalog title and main directions together without changing other section gaps. */
.catalog-main:not(.is-internal) > .catalog-intro + .catalog-directions {
  margin-block-start: calc(clamp(16px, 1.8vw, 24px) - var(--rhythm)) !important;
}

/* Compact catalog: reduce only the gap below the direction switcher by a third. */
.catalog-main.is-internal > .catalog-directions + .catalog-layout {
  margin-block-start: calc(var(--rhythm) / -3) !important;
}

/* Секции с верхним разделителем: контент не должен касаться линии. */
main:not(.product-shell) > :is(
  .company-strip,
  .about-intro-section,
  .about-service-section
) {
  padding-block-start: var(--separator-content-gap) !important;
}

/* первый экран: воздух от шапки и до следующей секции */
main:not(.product-shell) > .home-hero,
main:not(.product-shell) > .page-hero {
  padding-block: clamp(20px, 1.8vw, 26px) clamp(14px, 1.4vw, 20px) !important;
}

/* секции с собственным фоном — внутренний воздух */
main:not(.product-shell) > .about-showroom-section,
main:not(.product-shell) > .about-cta-section,
main:not(.product-shell) > .contact-request,
main:not(.product-shell) > .press-hub,
main:not(.product-shell) > .contacts-band {
  padding-block: clamp(26px, 2.2vw, 34px) !important;
}

/* ---------- карточка товара и страницы категорий ----------
   display здесь НЕ трогаем: в базовых стилях есть медиазапрос,
   который на узком экране складывает сетку с боковым меню в одну колонку. */
main.product-shell .product-page {
  display: flex;
  flex-direction: column;
  gap: var(--rhythm-sm);
}
main.product-shell .product-page > * {
  padding-block: 0 !important;
  margin-block: 0 !important;
}
main.product-shell .product-page > .related-section {
  padding-block-start: var(--separator-content-gap) !important;
}
/* После описания/таблицы рекомендациям нужен дополнительный визуальный
   разрыв. Селектор по соседству не затрагивает страницы категорий, где
   related-section используется как основной список моделей. */
main.product-shell:not(.category-page) .product-page > .detail-section + .related-section {
  margin-block-start: clamp(14px, 1.5vw, 22px) !important;
}
main.product-shell.category-page .product-page > .detail-section {
  padding-block-start: var(--separator-content-gap) !important;
}
main.product-shell .product-page > .quote-panel {
  padding-block: 14px !important;
}

@media (max-width: 940px) {
  :root { --rhythm: 30px; --rhythm-sm: 24px; }
}

/* --- высота первого экрана по содержимому ---
   У шапок страниц была жёсткая min-height 560px: если текста мало,
   снизу оставалась пустота, которая складывалась с отступом секции. */
.page-hero,
.about-hero,
.stock-hero,
.home-hero { min-height: 0; }
.about-hero .about-hero-grid,
.home-hero .hero-grid { min-height: 0; }


/* ============================================================
   ТАБЛИЦЫ ХАРАКТЕРИСТИК  (v2)
   Структура восстановлена из оригинала (объединённые ячейки),
   поэтому фиксированная раскладка колонок больше не нужна:
   колонки подстраиваются под содержимое и не рвут слова.
   ============================================================ */
.spec-table-wrap {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white, #fff);
}
.spec-table-wrap::-webkit-scrollbar { height: 8px; }
.spec-table-wrap::-webkit-scrollbar-thumb {
  background: color-mix(in oklch, var(--blue) 24%, transparent);
  border-radius: 999px;
}

.spec-table,
.legacy-specs {
  table-layout: auto !important;
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: 0.94rem;
}
.spec-table--matrix { min-width: calc(var(--cols, 4) * 94px); }

.spec-table th,
.spec-table td {
  padding: 11px 16px !important;
  vertical-align: middle !important;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid color-mix(in oklch, var(--line) 55%, transparent);
}
.spec-table td.nw, .spec-table th.nw { white-space: nowrap !important; }
.spec-table th:last-child,
.spec-table td:last-child { border-right: 0; }
.spec-table tbody > tr:last-child > * { border-bottom: 0; }

/* ширина колонок задаётся содержимым, а не процентами */
.spec-table th,
.spec-table.wide th,
.spec-table tbody > tr > *:first-child,
.legacy-specs tbody > tr > *:first-child { width: auto; }

/* шапка */
.spec-table thead th {
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
  text-align: center;
  background: color-mix(in oklch, var(--blue) 9%, white);
  border-bottom: 2px solid color-mix(in oklch, var(--blue) 26%, white);
}
.spec-table thead th:first-child { text-align: left; }

/* параметр / значение — обе колонки по левому краю */
.spec-table--pairs tbody td { text-align: left; }
.spec-table--pairs tbody td:first-child {
  color: var(--muted);
  width: 55%;
}

/* сравнение моделей — подписи слева, значения по центру */
.spec-table--matrix tbody td { text-align: center; }
.spec-table--matrix tbody td:first-child {
  text-align: left;
  color: var(--muted);
  font-weight: 600;
}

/* объединённая ячейка первой колонки — заголовок группы строк */
.spec-table td[rowspan]:first-child {
  font-weight: 600;
  color: var(--ink);
  background: color-mix(in oklch, var(--blue) 4%, transparent);
}

@media (max-width: 640px) {
  .spec-table { font-size: 0.88rem; }
  .spec-table th,
  .spec-table td { padding: 9px 12px !important; }
  .spec-table--pairs tbody td:first-child { width: 50%; }
}

/* тёмная тема */
[data-theme="dark"] .spec-table-wrap {
  border-color: var(--line);
  background: var(--surface-2, #16202c);
}
[data-theme="dark"] .spec-table thead th {
  background: color-mix(in oklch, var(--blue) 20%, #16202c);
  border-bottom-color: color-mix(in oklch, var(--blue) 40%, #16202c);
  color: #fff;
}
[data-theme="dark"] .spec-table td[rowspan]:first-child {
  background: color-mix(in oklch, var(--blue) 10%, transparent);
}

/* Полноэкранный просмотр фотографий оборудования. Видео продолжает
   использовать обычное компактное модальное окно. */
.modal.image-viewer-modal {
  position: fixed;
  inset: 0;
  top: 0 !important;
  min-height: 100dvh !important;
  padding: max(16px, env(safe-area-inset-top)) 16px 16px;
}

.modal.image-viewer-modal .video-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1440px, calc(100vw - 32px));
  height: calc(100dvh - 32px);
  max-height: calc(100dvh - 32px);
  overflow: hidden;
  padding: 20px;
}

.modal.image-viewer-modal .video-modal > h2 {
  overflow: hidden;
  margin: 0 100px 12px 0;
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-zoom-frame {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  min-height: 0;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
}

.image-zoom-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.image-zoom-toolbar button,
.image-zoom-toolbar output {
  min-width: 42px;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--blue-deep);
  background: #fff;
  font: inherit;
  font-weight: 800;
  text-align: center;
}

.image-zoom-toolbar button {
  cursor: pointer;
}

.image-zoom-toolbar button:hover:not(:disabled),
.image-zoom-toolbar button:focus-visible {
  border-color: var(--blue);
  background: #eef8ff;
}

.image-zoom-toolbar button:disabled {
  cursor: default;
  opacity: .45;
}

.image-zoom-toolbar output {
  min-width: 112px;
  color: var(--ink);
}

.image-zoom-viewport {
  position: relative;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #f4f7fb;
  cursor: zoom-in;
  overscroll-behavior: contain;
}

.image-zoom-viewport.is-zoomed {
  cursor: grab;
}

.image-zoom-viewport.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.image-zoom-canvas {
  position: relative;
  min-width: 100%;
  min-height: 100%;
}

.image-zoom-frame .image-zoom-image {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  max-width: none;
  aspect-ratio: auto;
  object-fit: contain;
  opacity: 1;
  transform: translate(-50%, -50%);
  transition: width .18s ease, height .18s ease;
  user-select: none;
}

[data-theme="dark"] .image-zoom-toolbar button,
[data-theme="dark"] .image-zoom-toolbar output {
  border-color: var(--line);
  color: var(--ink);
  background: var(--surface-2, #16202c);
}

[data-theme="dark"] .image-zoom-viewport {
  background: #111a27;
}

@media (max-width: 640px) {
  .modal.image-viewer-modal {
    padding: max(8px, env(safe-area-inset-top)) 8px 8px;
  }

  .modal.image-viewer-modal .video-modal {
    width: calc(100vw - 16px);
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
    padding: 14px;
  }

  .modal.image-viewer-modal .video-modal > h2 {
    margin-right: 82px;
    font-size: 19px;
  }

  .image-zoom-toolbar button,
  .image-zoom-toolbar output {
    min-height: 36px;
    padding: 7px 10px;
  }
}

/* Keep content-led hero panels consistent with the site's light hero cards. */
[data-theme="dark"] .service-hero-panel,
[data-theme="dark"] .press-hero-showcase {
  --ink: #16203a;
  --muted: #68758a;
  --line: #d8e2ef;
  --surface: #f4f8fc;
  --blue: #0497ec;
  --blue-deep: #0574d8;
  color: var(--ink);
  border-color: var(--line);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 22px 52px rgba(35, 53, 84, .13);
}

/* кнопка поиска по складу — вместо двух фильтрующих кнопок */
.stock-toolbar .stock-search-submit {
  align-self: end;
  white-space: nowrap;
  padding: 12px 28px;
}
@media (max-width: 640px) {
  .stock-toolbar .stock-search-submit { width: 100%; }
}

/* отбивка перед подвалом — тем же ритмом, что и между секциями.
   Раньше последняя секция упиралась в футер: её нижний отступ обнулён
   правилом единого ритма, а собственного отступа у футера нет. */
.site-footer { margin-top: var(--rhythm) !important; }

/* ============================================================
   Фото в пресс-центре — та же светлая витрина, что и в каталоге.
   Часть иллюстраций обрезана по контуру автоматически: по краю
   остались полупрозрачные лохмотья и белые ошмётки. На светлом
   фоне они незаметны, на тёмном лезут в глаза. Светлая подложка
   убирает их и выравнивает пресс-центр с каталогом.
   ============================================================ */
[data-theme="dark"] :is(
  .article-hero-grid, .article-gallery, .article-layout,
  .article-content, .press-card, .press-grid, .article-media
) img {
  background: #f2f5f8 !important;
  mix-blend-mode: normal !important;
  border-radius: 12px;
  padding: 10px;
  box-sizing: border-box;
  object-fit: contain;
}
[data-theme="dark"] .article-hero-grid > img {
  border-radius: 16px;
  padding: 16px;
}

/* Статьи и карточки, оставшиеся без фотографии: сетка складывается
   в одну колонку, чтобы текст не жался к пустому месту. */
.article-hero-grid:not(:has(img)),
.article-layout:not(:has(img)) {
  grid-template-columns: 1fr;
  min-height: 0 !important;   /* высота больше не резервируется под снятое фото */
}
.article-hero-grid:not(:has(img)) > * { max-width: 62ch; }
.press-card:not(:has(img)) .press-card-media,
.press-item:not(:has(img)) .press-item-media { display: none; }

/* ============================================================
   ЕДИНЫЙ ВИД ТАБЛИЦ ХАРАКТЕРИСТИК
   Фон задаётся каждой строке явно: это исключает сплошную заливку,
   даже если родительский блок или тема имеют собственный фон.
   Селекторы охватывают текущие и прежние варианты разметки.
   ============================================================ */
.spec-table-wrap {
  background: #fff;
  border-color: #d8e5f0;
}

:is(.spec-table, table.legacy-specs, .legacy-specs table, [data-tab-panel="specs"] table) thead > tr > * {
  color: var(--ink);
  font-weight: 700;
  background-color: #e8f3fc !important;
  border-bottom-color: #c3dced;
}

:is(.spec-table, table.legacy-specs, .legacy-specs table, [data-tab-panel="specs"] table) tbody > tr:nth-child(odd) > * {
  background-color: #fff !important;
}

:is(.spec-table, table.legacy-specs, .legacy-specs table, [data-tab-panel="specs"] table) tbody > tr:nth-child(even) > * {
  background-color: #f5f8fb !important;
}

:is(.spec-table, table.legacy-specs, .legacy-specs table, [data-tab-panel="specs"] table) tbody > tr:hover > * {
  background-color: #edf6fd !important;
}

.spec-table--pairs tbody > tr > :first-child {
  color: #44546a;
  font-weight: 600;
}

[data-theme="dark"] .spec-table-wrap {
  background: #17212d;
  border-color: #334254;
}

[data-theme="dark"] :is(.spec-table, table.legacy-specs, .legacy-specs table, [data-tab-panel="specs"] table) thead > tr > * {
  color: #f6f9fc;
  background-color: #26394d !important;
  border-bottom-color: #3d5872;
}

[data-theme="dark"] :is(.spec-table, table.legacy-specs, .legacy-specs table, [data-tab-panel="specs"] table) tbody > tr:nth-child(odd) > * {
  background-color: #17212d !important;
}

[data-theme="dark"] :is(.spec-table, table.legacy-specs, .legacy-specs table, [data-tab-panel="specs"] table) tbody > tr:nth-child(even) > * {
  background-color: #1d2a38 !important;
}

[data-theme="dark"] :is(.spec-table, table.legacy-specs, .legacy-specs table, [data-tab-panel="specs"] table) tbody > tr:hover > * {
  background-color: #24384b !important;
}

[data-theme="dark"] .spec-table--pairs tbody > tr > :first-child {
  color: #b9c8d8;
}

/* ============================================================
   ВЫСОТА КАТАЛОГА И ПОРЦИОННЫЙ ВЫВОД КАРТОЧЕК
   Короткие подразделы не поднимают подвал выше нижней
   границы экрана, длинные раскрываются ровными порциями.
   ============================================================ */
.catalog-main {
  min-height: calc(100svh - var(--header-h));
  box-sizing: border-box;
}

.catalog-more-row {
  display: flex;
  justify-content: center;
  padding-top: 20px;
}

.catalog-more-row[hidden] {
  display: none;
}

/* Whole card descriptions: rows can grow to fit complete copy. */
.catalog-main .subcategory-grid > .subcategory-card {
  height: auto;
  min-height: 180px;
}
.catalog-main .subcategory-card-body > strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  height: 3.66em;
  overflow: hidden;
}
.catalog-main .subcategory-card-body > span:not(.subcategory-card-path) {
  height: auto;
}
.catalog-main .subcategory-grid > .subcategory-card:has(.subcategory-card-path) {
  height: auto;
  min-height: 216px;
}
.subcategory-grid > .subcategory-card[hidden] {
  display: none;
}

.catalog-more-button {
  min-width: 250px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 11px 18px;
  border: 1px solid rgba(4, 151, 236, .42);
  border-radius: 999px;
  color: var(--blue-deep);
  background: #fff;
  box-shadow: 0 12px 28px rgba(35, 53, 84, .08);
  font: inherit;
  font-weight: 850;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.catalog-more-button small {
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--muted);
  background: #edf7ff;
  font-size: 12px;
  font-weight: 750;
}

.catalog-more-button:hover,
.catalog-more-button:focus-visible {
  transform: translateY(-2px);
  border-color: var(--blue);
  background: #f4faff;
  box-shadow: 0 16px 34px rgba(5, 116, 216, .14);
}

.catalog-more-button:focus-visible {
  outline: 3px solid rgba(4, 151, 236, .18);
  outline-offset: 3px;
}

[data-theme="dark"] .catalog-more-button {
  color: #9ddaff;
  border-color: #355672;
  background: #182431;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .22);
}

[data-theme="dark"] .catalog-more-button small {
  color: #b9c8d8;
  background: #233548;
}

[data-theme="dark"] .catalog-more-button:hover,
[data-theme="dark"] .catalog-more-button:focus-visible {
  border-color: #4b88b4;
  background: #1e3040;
}

@media (max-width: 640px) {
  .catalog-more-button {
    width: 100%;
    min-width: 0;
  }
}

/* ============================================================
   МИКРОВЗАИМОДЕЙСТВИЯ  (v2026.2)
   Цель — отклик на каждое действие: нажатие, отправку, ожидание.
   Всё на transform и opacity, чтобы не грузить отрисовку.
   ============================================================ */

/* нажатие: элемент слегка проседает — привычный тактильный отклик */
:where(button, .primary-btn, .secondary-btn, .link-button, .route-card,
       .subcategory-card, .equipment-card, .related-card, .article-card,
       .filter-pills button, .process-tabs button):active {
  transform: scale(0.985);
}

/* кнопка отправки в состоянии ожидания */
.is-busy {
  position: relative;
  pointer-events: none;
  opacity: 0.86;
}
.is-busy::after {
  content: "";
  position: absolute;
  inset-inline-end: 12px;
  inset-block-start: 50%;
  width: 14px;
  height: 14px;
  margin-block-start: -7px;
  border: 2px solid color-mix(in oklch, white 45%, transparent);
  border-top-color: #fff;
  border-radius: 50%;
  animation: alsi-spin 700ms linear infinite;
}
@keyframes alsi-spin { to { transform: rotate(1turn); } }

/* подтверждение под формой */
.form-note {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 0.94rem;
  line-height: 1.5;
  background: color-mix(in oklch, var(--green) 10%, white);
  border: 1px solid color-mix(in oklch, var(--green) 32%, white);
  color: oklch(0.36 0.06 155);
  opacity: 0;
  transform: translateY(6px);
}
.form-note.is-shown {
  animation: alsi-note-in 320ms var(--ease-out) forwards;
}
@keyframes alsi-note-in { to { opacity: 1; transform: none; } }
[data-theme="dark"] .form-note {
  background: color-mix(in oklch, var(--green) 18%, #16202c);
  border-color: color-mix(in oklch, var(--green) 40%, #16202c);
  color: #dff5e6;
}

/* поля ввода: мягкое кольцо фокуса вместо резкой рамки */
:where(input, textarea, select):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--blue) 26%, transparent);
  border-color: color-mix(in oklch, var(--blue) 55%, white);
}

/* якоря не прячутся под липкой шапкой */
:where(h1, h2, h3, section, [id]) { scroll-margin-top: calc(var(--header-h, 72px) + 16px); }
html { scroll-behavior: smooth; }

/* полоса прочтения статьи */
.reading-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  z-index: 120;
  background: linear-gradient(90deg, var(--blue), color-mix(in oklch, var(--blue) 45%, var(--green)));
  transform-origin: 0 50%;
  transform: scaleX(var(--read, 0));
  transition: transform 90ms linear;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .is-busy::after { animation: none; }
  .form-note.is-shown { animation: none; opacity: 1; transform: none; }
  :where(button, .primary-btn, .secondary-btn):active { transform: none; }
  .reading-progress { transition: none; }
}

/* ============================================================
   РАЗДЕЛ «РЕАЛИЗОВАННЫЕ ПРОЕКТЫ»
   ============================================================ */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}
.project-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white, #fff);
  text-decoration: none;
  color: inherit;
  transition: transform var(--motion-base) var(--ease-spring),
              box-shadow var(--motion-base) var(--ease-out),
              border-color var(--motion-base) var(--ease-out);
}
.project-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: color-mix(in oklch, var(--blue) 38%, white);
}
.project-card img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: #f2f5f8;
}
.project-card .project-industry {
  margin: 12px 16px 0;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--blue-deep);
  background: color-mix(in oklch, var(--blue) 12%, white);
}
.project-card strong { margin: 0 16px; font-size: 1.05rem; line-height: 1.3; }
.project-card p { margin: 0 16px; color: var(--muted); font-size: 0.94rem; }
.project-card small { margin: 4px 16px 0; color: var(--muted); }
.project-card[hidden] { display: none; }

.project-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}
.project-facts > div {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in oklch, var(--blue) 4%, white);
}
.project-facts span { display: block; font-size: 0.82rem; color: var(--muted); margin-bottom: 4px; }
.project-facts strong { font-size: 1rem; }

/* Страница проекта: единый ритм и карточки в стилистике страницы компании. */
main.project-detail {
  gap: clamp(32px, 3vw, 44px);
}

.project-detail .project-facts {
  gap: 14px;
}

.project-detail .project-facts > div {
  display: flex;
  min-width: 0;
  min-height: 108px;
  flex-direction: column;
  justify-content: center;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--blue) 7%, #fff);
  box-shadow: var(--card-depth-shadow);
  transition:
    transform var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-fast) var(--ease-out);
}

.project-detail .project-facts > div:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--blue) 36%, var(--line));
  box-shadow: var(--card-depth-shadow-hover);
}

.project-detail .project-facts span {
  margin-bottom: 7px;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.2;
}

.project-detail .project-facts strong {
  color: var(--blue-deep);
  font-size: 1.08rem;
  line-height: 1.35;
}

.project-detail .project-story h2 {
  margin: 0 0 12px;
}

.project-detail .project-story p {
  margin: 0 0 26px;
  line-height: 1.65;
}

.project-detail .project-story p:last-child {
  margin-bottom: 0;
}

.project-detail .project-equipment {
  display: grid;
  gap: 18px;
}

.project-detail .project-equipment .related-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 780px;
}

.project-detail .project-equipment .related-card {
  display: flex;
  min-height: 150px;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 20px;
}

.project-detail .project-equipment .related-card strong,
.project-detail .project-equipment .related-card span {
  margin: 0;
}

.project-detail .project-cta .split-section {
  align-items: center;
  gap: clamp(28px, 4vw, 48px);
  padding: 28px 0 34px;
  border-top: 1px solid var(--line);
}

.project-detail .project-cta .split-section p {
  margin: 12px 0 0;
}

.projects-page .projects-cta .split-section {
  align-items: center;
}

.projects-page .projects-cta .primary-btn,
.project-detail .project-cta .primary-btn {
  width: auto;
  min-width: 220px;
  justify-self: end;
  padding-inline: 28px;
}

@media (max-width: 680px) {
  main.project-detail {
    gap: 30px;
  }

  .project-detail .project-facts,
  .project-detail .project-equipment .related-grid {
    grid-template-columns: 1fr;
  }

  .project-detail .project-facts > div {
    min-height: 92px;
    padding: 14px 16px;
  }

  .project-detail .project-equipment .related-card {
    min-height: 124px;
  }

  .project-detail .project-cta .split-section {
    gap: 20px;
    padding-bottom: 28px;
  }

  .projects-page .projects-cta .primary-btn,
  .project-detail .project-cta .primary-btn {
    width: 100%;
    min-width: 0;
    justify-self: stretch;
  }
}

/* ============================================================
   ИСПРАВЛЕНИЯ ПО АУДИТУ 2026-09-01
   ============================================================ */

/* Крупные заголовки не должны переноситься внутри слова. */
h1,
h2,
.product-head h1,
.section-heading h2 {
  hyphens: none;
  overflow-wrap: break-word;
  word-break: normal;
}

/* Keep the About title's longest word intact, fitting its actual text column. */
.about-hero-copy {
  container-type: inline-size;
  --about-title-size: var(--hero-h1-size);
}

.about-hero-copy h1 {
  font-size: min(var(--about-title-size), 9.8cqi);
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

@media (max-width: 940px) {
  .about-hero-copy { --about-title-size: 38px; }
}

@media (max-width: 680px) {
  .about-hero-copy { --about-title-size: 31px; }
}

/* Сравнительные таблицы на телефоне сохраняют читаемую ширину колонок
   и прокручиваются внутри собственного контейнера. */
.spec-table-wrap {
  max-width: 100%;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.spec-table--matrix {
  min-width: 680px;
}

.spec-table--matrix thead th,
.spec-table--matrix tbody td {
  min-width: 130px;
}

.spec-table--matrix thead th:first-child,
.spec-table--matrix tbody td:first-child {
  min-width: 180px;
}

/* Изображения проектов получают одинаковую белую витрину независимо
   от наличия прозрачного или уже запечённого фона в исходном файле. */
.project-card img {
  object-fit: contain;
  padding: 16px;
  box-sizing: border-box;
  background: #fff;
}

/* Защита от округления ширины, которое давало 2–3 px переполнения. */
.stock-feature-slider,
.stock-feature-track,
.stock-feature-slide {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

@media (max-width: 680px) {
  .spec-table-wrap {
    margin-inline: 0;
    border-radius: 10px;
  }

  .spec-table--matrix {
    font-size: 0.86rem;
  }

  .spec-table--matrix th,
  .spec-table--matrix td {
    padding: 10px 12px !important;
  }

  /* Минимальная удобная зона касания для часто используемых элементов. */
  .menu-toggle,
  .catalog-open,
  .breadcrumb-compact a,
  .stock-subfilter,
  .equipment-type-filter button,
  .footer-column nav a,
  .catalog-floating-close {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .catalog-floating-close {
    min-width: 44px;
    justify-content: center;
  }

  .hero-slider-dots button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    border: 0;
    background: transparent !important;
  }

  .hero-slider-dots button::after {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #c6d4e5;
  }

  .hero-slider-dots button.active::after,
  .hero-slider-dots button[aria-current="true"]::after {
    background: var(--blue-deep);
  }
}

/* видео грузится только по клику — страница остаётся лёгкой */
.video-embed { position: relative; border-radius: var(--radius); overflow: hidden; cursor: pointer; }
.video-embed img { width: 100%; height: auto; display: block; }
.video-embed button {
  position: absolute; inset: 0; margin: auto;
  width: 74px; height: 74px; border-radius: 50%;
  border: 0; font-size: 26px; color: #fff; cursor: pointer;
  background: color-mix(in oklch, var(--blue) 88%, black);
  box-shadow: 0 10px 30px oklch(0.2 0.05 260 / .45);
  transition: transform var(--motion-base) var(--ease-spring);
}
.video-embed:hover button { transform: scale(1.08); }
.video-embed iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }

[data-theme="dark"] .project-card { background: var(--surface-2, #16202c); }
[data-theme="dark"] .project-facts > div { background: color-mix(in oklch, var(--blue) 12%, #16202c); }

/* Страховка для входных анимаций визуала шапки.
   Если вкладка открылась в фоне, keyframes замирают на первом кадре
   и картинка остаётся невидимой. При включённом motion-timeout снимаем. */
html.motion-timeout :where(
  .about-hero-media, .hero-slider, .hero-note, .service-hero-panel,
  .press-hero-showcase, .stock-feature-slider, .contact-page-hero .hero-note,
  .page-hero-grid > * > *
) {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Шапка раздела проектов: крупное фото последнего проекта */
.project-hero-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--hero-panel-radius, 24px);
  overflow: hidden;
  min-height: var(--hero-panel-height, 460px);
  text-decoration: none;
  color: var(--ink);
  background: #f2f5f8;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition: box-shadow var(--motion-base) var(--ease-out),
              border-color var(--motion-base) var(--ease-out);
}
.project-hero-feature:hover {
  box-shadow: var(--shadow-hover);
  border-color: color-mix(in oklch, var(--blue) 34%, white);
}
.project-hero-feature img {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  object-fit: contain;
  padding: 22px 22px 6px;
  box-sizing: border-box;
  transition: transform .7s var(--ease-out);
}
.project-hero-feature:hover img { transform: scale(1.03); }
.project-hero-caption {
  display: grid;
  gap: 8px;
  padding: 20px 26px 24px;
  background: #fff;
  border-top: 1px solid var(--line);
}
.project-hero-caption strong {
  font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem);
  line-height: 1.24;
  color: var(--ink);
}
.project-hero-caption em {
  font-style: normal;
  font-weight: 700;
  color: var(--blue-deep);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.project-hero-caption em::after { content: "→"; transition: translate var(--motion-base) var(--ease-spring); }
.project-hero-feature:hover .project-hero-caption em::after { translate: 4px 0; }

[data-theme="dark"] .project-hero-feature { border-color: var(--line); }
[data-theme="dark"] .project-hero-caption { background: var(--surface-2, #16202c); }
[data-theme="dark"] .project-hero-caption strong { color: #fff; }

@media (max-width: 940px) {
  .project-hero-feature { min-height: 300px; }
  .project-hero-caption { padding: 16px 18px 18px; }
}

/* Слайдеры с оборудованием: показываем машину целиком, не меняя высоту
   карточки. Нижняя часть слайда зарезервирована под подпись и навигацию. */
.home-hero .hero-slide img,
.stock-feature-slide img {
  position: absolute;
  top: 10px;
  left: 18px;
  width: calc(100% - 36px);
  height: calc(100% - 128px);
  max-height: none;
  box-sizing: border-box;
  padding: 0;
  object-fit: contain;
  object-position: center;
  transform: none;
  background: #fff;
}

.home-hero .hero-slide.active img,
.stock-feature-slide.active img {
  transform: none;
}

@media (max-width: 680px) {
  .home-hero .hero-slide img,
  .stock-feature-slide img {
    top: 8px;
    left: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 136px);
  }
}

/* ============================================================
   ПОДБОР СОВМЕСТИМЫХ НАСОСОВ И ГОЛОВОК LONGERPUMP
   ============================================================ */
.compatibility-picker {
  --compatibility-columns: 3;
  --compatibility-gap: 14px;
  margin-top: 42px;
  padding-top: 34px;
  border-top: 1px solid var(--line, #cfe5f7);
}

main.product-shell .product-page > .compatibility-picker {
  margin-block-start: 42px !important;
  padding-block-start: clamp(34px, 3vw, 44px) !important;
}

.product-return-nav .compatibility-return-link {
  gap: 7px;
  border-color: #75bff0;
  background: #eaf6ff;
  color: #0067b8;
  box-shadow: 0 5px 14px rgba(19, 105, 164, .1);
}

.compatibility-picker__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}

.compatibility-picker__header .eyebrow {
  margin: 0 0 6px;
  color: var(--blue, #0078d4);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .035em;
}

.compatibility-picker__header h2 {
  margin: 0 0 8px;
  color: var(--ink, #111c2f);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.08;
}

.compatibility-picker__header > div > p:last-child {
  max-width: 760px;
  margin: 0;
  color: var(--muted, #526173);
  font-size: 15px;
  line-height: 1.55;
}

.compatibility-picker__count {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 7px 13px;
  border-radius: 999px;
  background: #e8f5ff;
  color: #0065b3;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  margin-top: 24px;
}

.compatibility-picker__selection {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Match one card in the responsive compatibility grid. */
  width: calc((100% - (var(--compatibility-columns) - 1) * var(--compatibility-gap)) / var(--compatibility-columns));
  min-width: 0;
  margin-bottom: 20px;
  padding: 12px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, #f1f9ff 0%, #f8fbfe 100%);
  box-shadow: inset 0 0 0 1px #cce7fa;
}

.compatibility-picker__selection-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #fff;
  color: var(--blue, #0078d4);
  box-shadow: 0 5px 14px rgba(17, 92, 146, .1), inset 0 0 0 1px #bfe0f7;
}

.compatibility-picker__selection-icon svg {
  width: 23px;
  height: 23px;
  stroke: currentColor;
  stroke-width: 1.65;
}

.compatibility-picker__selection > span:last-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.compatibility-picker__selection small {
  color: var(--muted, #526173);
  font-size: 12px;
  font-weight: 700;
}

.compatibility-picker__selection strong {
  color: var(--ink, #111c2f);
  font-size: 15px;
}

.compatibility-picker__grid {
  display: grid;
  grid-template-columns: repeat(var(--compatibility-columns), minmax(0, 1fr));
  gap: var(--compatibility-gap);
}

.compatibility-card {
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  min-height: 154px;
  overflow: hidden;
  border: 1px solid var(--card-depth-border, #c9e1f2);
  border-radius: 16px;
  background: var(--card-depth-surface, #fff);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--card-depth-shadow, 0 8px 20px rgba(24, 68, 101, .1));
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

a.compatibility-card:hover,
a.compatibility-card:focus-visible {
  transform: translateY(-2px);
  border-color: #86c9f6;
  box-shadow: var(--card-depth-shadow-hover, 0 13px 27px rgba(24, 68, 101, .15));
}

.compatibility-card[hidden] {
  display: none !important;
}

.compatibility-card__media {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 12px 8px;
  background: linear-gradient(145deg, #f7fbfe, #eef7fd);
}

.compatibility-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 118px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.compatibility-card__media--placeholder {
  color: #168bd8;
}

.compatibility-card__media--placeholder svg {
  width: 42px;
  height: 42px;
  stroke: currentColor;
  stroke-width: 1.35;
}

.compatibility-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 16px 15px 14px;
}

.compatibility-card__body strong {
  color: var(--ink, #111c2f);
  font-size: 15px;
  line-height: 1.28;
}

.compatibility-card__models {
  margin-top: 7px;
  color: var(--muted, #526173);
  font-size: 12px;
  line-height: 1.4;
}

.compatibility-card__action {
  margin-top: auto;
  padding-top: 11px;
  color: #006dc4;
  font-size: 12px;
  font-weight: 800;
}

.compatibility-card__action--muted {
  color: #728093;
}

/* Pump-head previews are compact; keep the link with the title instead of
   pushing it to the bottom of an oversized card. Pump previews stay unchanged. */
[data-compatibility-picker="pump"] .compatibility-card {
  min-height: 116px;
}

[data-compatibility-picker="pump"] .compatibility-card__media {
  padding-block: 10px;
}

[data-compatibility-picker="pump"] .compatibility-card__media img {
  max-height: 88px;
}

[data-compatibility-picker="pump"] .compatibility-card__body {
  justify-content: center;
  padding: 12px 14px;
}

[data-compatibility-picker="pump"] .compatibility-card__action {
  margin-top: 10px;
  padding-top: 0;
}

.compatibility-picker__more {
  display: block;
  min-width: 220px;
  min-height: 44px;
  margin: 20px auto 0;
  padding: 10px 20px;
  border: 1px solid #8dcef8;
  border-radius: 999px;
  background: #fff;
  color: #006dc4;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.compatibility-picker__more[hidden] {
  display: none !important;
}

.compatibility-picker__more:hover,
.compatibility-picker__more:focus-visible {
  background: #eef8ff;
  border-color: #54b4f1;
}

.compatibility-picker__note {
  margin: 18px 0 0;
  padding-left: 19px;
  position: relative;
  color: var(--muted, #526173);
  font-size: 13px;
  line-height: 1.5;
}

.compatibility-picker__note::before {
  content: "";
  position: absolute;
  top: .55em;
  left: 1px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #18a0e5;
  box-shadow: 0 0 0 4px #e5f5ff;
}

@media (max-width: 980px) {
  .compatibility-picker {
    --compatibility-columns: 2;
  }
}

@media (max-width: 680px) {
  .compatibility-picker {
    --compatibility-columns: 1;
    margin-top: 32px;
    padding-top: 28px;
  }

  main.product-shell .product-page > .compatibility-picker {
    margin-block-start: 32px !important;
    padding-block-start: 28px !important;
  }

  .compatibility-picker__header {
    display: grid;
    gap: 12px;
  }

  .compatibility-picker__count {
    justify-self: start;
    margin-top: 0;
  }

  .compatibility-card {
    grid-template-columns: 88px minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  a.compatibility-card:hover,
  a.compatibility-card:focus-visible {
    transform: none;
  }
}

/* ============================================================
   ЕДИНАЯ ГЛУБИНА КОНТЕНТНЫХ КАРТОЧЕК
   Выбранный вариант: светлый приподнятый кант + короткая тень.
   Слайдеры, изображения, формы и крупные служебные панели намеренно
   не входят в список — их визуальная иерархия остаётся прежней.
   ============================================================ */
.route-card,
.process-grid .process-card,
.industry-card,
.service-list > div,
.service-cards > div,
.timeline li,
.stats-grid > div,
.contact-card,
.article-card,
.catalog-main-card,
.product-row,
.equipment-card,
.stock-equipment-list .stock-card,
.related-card,
.product-section-nav a,
.about-directions-grid a,
.about-service-grid > div,
.about-stat-item,
.project-card,
.project-facts > div,
.catalog-section-card,
.section-card {
  border-color: var(--card-depth-border);
  background-color: var(--card-depth-surface);
  box-shadow: var(--card-depth-shadow);
}

/* Карточки с выбранным состоянием сохраняют собственную заливку,
   но получают тот же кант и ту же высоту над поверхностью. */
.direction-card,
.subcategory-card {
  border-color: var(--card-depth-border);
  box-shadow: var(--card-depth-shadow);
}

.route-card:hover,
.route-card:focus-visible,
.process-grid .process-card:hover,
.process-grid .process-card:focus-visible,
.industry-card:hover,
.industry-card:focus-visible,
.article-card:hover,
.article-card:focus-visible,
.direction-card:hover,
.direction-card:focus-visible,
.subcategory-card[data-subcategory-card]:hover,
.subcategory-card[data-subcategory-card]:focus-visible,
.product-row:hover,
.product-row:focus-visible,
.equipment-card:hover,
.equipment-card:focus-visible,
.stock-equipment-list .stock-card:hover,
.stock-equipment-list .stock-card:focus-visible,
.related-card:hover,
.related-card:focus-visible,
.product-section-nav a:hover,
.product-section-nav a:focus-visible,
.about-directions-grid a:hover,
.about-directions-grid a:focus-visible,
.project-card:hover,
.project-card:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--blue) 34%, var(--card-depth-border));
  box-shadow: var(--card-depth-shadow-hover);
}

.home-service-list > div {
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}

@media (hover: hover) {
  .home-service-list > div:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--blue) 34%, var(--card-depth-border));
    box-shadow: var(--card-depth-shadow-hover);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-service-list > div {
    transition: none;
  }
  .home-service-list > div:hover {
    transform: none;
  }
}

.direction-card.active,
.subcategory-card.active {
  border-color: var(--blue);
  box-shadow: var(--card-depth-shadow-hover);
}

@media (prefers-reduced-motion: reduce) {
  .site-header .brand-mark,
  .about-hero-brand .brand-mark {
    transition: none;
  }

  .site-header .brand:hover .brand-mark,
  .site-header .brand:focus-visible .brand-mark,
  .about-hero-brand:hover .brand-mark {
    transform: perspective(220px) rotateX(3deg) rotateY(-6deg) translateZ(0);
  }

  .route-card:hover,
  .route-card:focus-visible,
  .process-grid .process-card:hover,
  .process-grid .process-card:focus-visible,
  .industry-card:hover,
  .industry-card:focus-visible,
  .article-card:hover,
  .article-card:focus-visible,
  .direction-card:hover,
  .direction-card:focus-visible,
  .subcategory-card[data-subcategory-card]:hover,
  .subcategory-card[data-subcategory-card]:focus-visible,
  .product-row:hover,
  .product-row:focus-visible,
  .equipment-card:hover,
  .equipment-card:focus-visible,
  .stock-equipment-list .stock-card:hover,
  .stock-equipment-list .stock-card:focus-visible,
  .related-card:hover,
  .related-card:focus-visible,
  .product-section-nav a:hover,
  .product-section-nav a:focus-visible,
  .about-directions-grid a:hover,
  .about-directions-grid a:focus-visible,
  .project-card:hover,
  .project-card:focus-visible {
    transform: none;
  }
}

/* ============================================================
   Единая светлая подложка для миниатюр оборудования.
   Исходные файлы не изменяются: прозрачные изображения и фото
   с уже запечённым белым фоном получают одинаковую витрину.
   ============================================================ */
:root {
  --equipment-thumb-surface: #fff;
  --equipment-thumb-border: rgba(203, 218, 233, .9);
  --equipment-thumb-radius: 10px;
}

:is(
  .direction-card,
  .catalog-main-card,
  .subcategory-card,
  .product-row,
  .equipment-card,
  .stock-card,
  .related-card,
  .product-section-nav a
) img,
.thumb img,
.compatibility-card__media img {
  box-sizing: border-box !important;
  padding: 8px !important;
  border: 1px solid var(--equipment-thumb-border) !important;
  border-radius: var(--equipment-thumb-radius) !important;
  background: var(--equipment-thumb-surface) !important;
  object-fit: contain !important;
  object-position: center !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  box-shadow: none !important;
}

/* Маленьким навигационным миниатюрам нужен более компактный отступ. */
:is(.direction-card, .product-section-nav a) img,
.thumb img {
  padding: 5px !important;
}

[data-theme="dark"] :is(
  .direction-card,
  .catalog-main-card,
  .subcategory-card,
  .product-row,
  .equipment-card,
  .stock-card,
  .related-card,
  .product-section-nav a
) img,
[data-theme="dark"] .thumb img,
[data-theme="dark"] .compatibility-card__media img {
  border-color: var(--equipment-thumb-border) !important;
  background: var(--equipment-thumb-surface) !important;
  mix-blend-mode: normal !important;
}

/* Compact floating help: title and close above a centered compact action. */
.catalog-floating-help {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title close" "action action";
  width: 228px;
  max-width: calc(100vw - 32px);
  gap: 6px;
  padding: 10px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(35, 53, 84, .14);
}

.catalog-floating-help > div {
  display: block;
  grid-area: title;
  min-width: 0;
  align-self: center;
}

.catalog-floating-help > div > strong {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  text-wrap: balance;
}

.catalog-floating-help > div > span {
  display: none;
}

.catalog-floating-help .primary-btn {
  grid-area: action;
  width: max-content;
  min-width: 160px;
  max-width: 100%;
  justify-self: center;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.2;
  box-shadow: 0 3px 8px rgba(0, 118, 204, .2);
}

.catalog-floating-help .catalog-floating-close {
  position: static;
  grid-area: close;
  align-self: start;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  border-color: var(--line);
  background: var(--surface);
  box-shadow: none;
  font-size: 18px;
}

@media (max-width: 680px), (pointer: coarse) {
  .catalog-floating-help {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
  }

  .catalog-floating-help .primary-btn {
    min-height: 44px;
  }

  .catalog-floating-help .catalog-floating-close {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }
}

/* Search breadcrumbs respect the hidden state of unused levels. */
.catalog-route [hidden] { display: none !important; }

/* header-stability-20260925: fixed geometry and no logo tilt between pages */
.site-header .brand { width: 44px; height: 55px; flex: none; }
.site-header .brand-mark { width: 44px; height: 44px; flex: none; }
.site-header .brand-mark img { width: 44px; height: auto; aspect-ratio: 824 / 1053; }
.site-header .brand-name { height: 9px; line-height: 9px; flex: none; }
.site-header .brand .brand-mark,
.site-header .brand:hover .brand-mark,
.site-header .brand:focus-visible .brand-mark {
  transform: none;
  transition: none;
  animation: none;
  will-change: auto;
  filter: drop-shadow(-1px -1px 0 rgba(255,255,255,.9))
    drop-shadow(1px 1px 0 rgba(0,151,238,.42))
    drop-shadow(1px 1px 0 rgba(0,126,205,.22));
}

/* The same task-filter styling is available before catalog hydration. */
@media (prefers-reduced-motion: reduce){
}
@media (max-width: 1100px){
}
@media (min-width: 1121px){
}
@media (max-width: 1120px){
}
@media (max-width: 680px){
}
@media (prefers-reduced-motion: reduce){
}
.equipment-type-filter .catalog-task-link{
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #34425b;
  background: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.equipment-type-filter .catalog-task-link > span{
  min-width: 24px;
  padding: 3px 7px;
  border-radius: 999px;
  color: var(--blue-deep);
  background: #edf7ff;
  font-size: 12px;
  line-height: 1;
  text-align: center;
}
.equipment-type-filter .catalog-task-link:hover,.equipment-type-filter .catalog-task-link:focus-visible{
  color: var(--blue-deep);
  border-color: rgba(4, 151, 236, .58);
  background: #f7fbff;
}
.equipment-type-filter .catalog-task-link:focus-visible{
  outline: 3px solid rgba(4, 151, 236, .16);
  outline-offset: 2px;
}
.equipment-type-filter .catalog-task-link.active,.equipment-type-filter .catalog-task-link[aria-pressed="true"]{
  color: #fff;
  border-color: var(--blue-deep);
  background: linear-gradient(180deg, var(--blue), var(--blue-deep));
  box-shadow: 0 8px 18px rgba(5, 116, 216, .18);
}
.equipment-type-filter .catalog-task-link.active > span,.equipment-type-filter .catalog-task-link[aria-pressed="true"] > span{
  color: var(--blue-deep);
  background: #fff;
}
@container (max-width: 190px){
}
@media (max-width: 760px){
}
@media (max-width: 480px){
}
@media (max-width: 1180px){
}
@media (max-width: 940px){
}
@media (max-width: 680px){.equipment-type-filter .catalog-task-link{
    flex: 0 0 auto;
    white-space: nowrap;
  }

}
@media (max-width: 760px){
}
@media (max-width: 430px){
}
@media (prefers-reduced-motion: reduce){
}
@media (max-width: 940px){
}
@media (prefers-reduced-motion: reduce){
}
@media (max-width: 940px){
}
@media (max-width: 680px){
}
@media (max-width: 940px){
}
@media (max-width: 680px){
}
@media (max-width: 940px){
}
@media (max-width: 680px){
}
@media (max-width: 940px){
}
@media (max-width: 680px){
}
@media (max-width: 680px){
}
@media (max-width: 940px){
}
@media (max-width: 680px){
}
@media (max-width: 680px){
}

.equipment-type-filter .catalog-task-link{text-decoration:none}.equipment-type-filter .catalog-task-link[hidden]{display:none}