/* Runline Hydraulics — site stylesheet */

:root{
  --sans:"IBM Plex Sans","Segoe UI",Roboto,Arial,sans-serif;
  --mono:"IBM Plex Mono",Consolas,"Liberation Mono",monospace;
  --shell:1680px;
}
[data-theme=day]{
  --bg:#F1F4F6; --surf:#FFFFFF; --ink:#141C22; --dim:#57676F;
  --rule:#D2DAE0; --hair:#E8EDF0;
  --ox:#A7452F; --oxTx:#FFFFFF; --oxSoft:#F7EAE6;
  --pru:#2A5271; --pruSoft:#EAF0F5;
  --line:#141C22;
  --sky:linear-gradient(180deg,#DCEAF3 0%,#F1F4F6 100%);
  --sea:#B9CEDF; --land:#F4F7F9; --coast:#8FA6B8;
}
[data-theme=night]{
  --bg:#0E1519; --surf:#18222A; --ink:#E9F0F4; --dim:#8DA0AB;
  --rule:#293740; --hair:#212E36;
  --ox:#C25E45; --oxTx:#FFFFFF; --oxSoft:#261915;
  --pru:#79ADCE; --pruSoft:#152430;
  --line:#DCE6EC;
  --sky:linear-gradient(180deg,#101E29 0%,#0E1519 100%);
  --sea:#0C1A25; --land:#26343F; --coast:#3D505C;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:15px;line-height:1.55;transition:background .3s,color .3s}
a{color:inherit}
h1,h2,h3{letter-spacing:-.02em;font-weight:600;margin:0}
.shell{max-width:var(--shell);margin:0 auto;padding:0 22px}
/* Чертежи подключены отдельными файлами, поэтому цвет через них не
   наследуется. Линии в них тёмные, фон прозрачный — в ночной теме
   достаточно инверсии: тёмное становится светлым, прозрачное остаётся. */
.dwg{width:100%;height:auto;display:block}
[data-theme=night] .dwg{filter:invert(1)}
/* На фотографии первой сцены фон тёмный в обе темы, поэтому
   чертёж инвертируется всегда — и днём, и ночью. */
.scene.s1 .stage .dwg{filter:invert(1)}

/* ─────────── red utility strip ─────────── */
.util{background:var(--ox);color:var(--oxTx);font-size:12.5px}
.util .shell{display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;min-height:38px}
.util .l,.util .r{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.util a{text-decoration:none;opacity:.94}
.util a:hover{opacity:1;text-decoration:underline}
.util .sep{opacity:.45}
.util .mono{font-family:var(--mono);font-size:12px}

/* ─────────── header ─────────── */
.top{background:var(--surf);border-bottom:1px solid var(--rule);
  position:sticky;top:0;z-index:40}
.top .shell{display:flex;align-items:center;gap:24px;min-height:62px;flex-wrap:wrap}
.logo{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);flex:none}
.logo svg{display:block;flex:none}
.logo .w{display:flex;flex-direction:column;line-height:1}
.logo .w b{font-weight:600;letter-spacing:.13em;font-size:16px}
.logo .w i{font-style:normal;font-size:8.5px;letter-spacing:.19em;color:var(--dim);margin-top:3px}
.mainnav{display:flex;gap:22px;font-size:14px}
.mainnav a{color:var(--dim);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.mainnav a:hover,.mainnav a.on{color:var(--ink);border-bottom-color:var(--ox)}
.spacer{flex:1}
.search{display:flex;align-items:center;gap:8px;border:1px solid var(--rule);
  padding:7px 11px;min-width:240px;background:var(--bg);position:relative}

/* выпадающий список результатов поиска */
.searchres{display:none;position:absolute;top:100%;left:-1px;right:-1px;z-index:80;
  margin-top:4px;background:var(--surf);border:1px solid var(--rule);
  box-shadow:0 10px 28px rgba(0,0,0,.18);max-height:420px;overflow-y:auto}
.searchres.on{display:block}
.searchres a{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;
  padding:9px 13px;text-decoration:none;border-bottom:1px solid var(--rule);
  color:var(--ink)}
.searchres a:last-child{border-bottom:0}
.searchres a:hover,.searchres a.on{background:var(--bg)}
.searchres .src{font-family:var(--mono);font-size:12.5px;font-weight:600;
  color:var(--ox);grid-row:span 2;align-self:center;min-width:64px}
.searchres .srn{font-size:13px;line-height:1.35}
.searchres .srm{font-size:11.5px;color:var(--dim);font-family:var(--mono)}
.srempty,.srmore{padding:10px 13px;font-size:12px;color:var(--dim);
  font-family:var(--mono)}
.srmore{border-top:1px solid var(--rule)}
.search svg{width:15px;height:15px;color:var(--dim);flex:none}
.search input{border:0;background:none;outline:none;font-family:var(--mono);
  font-size:13px;color:var(--ink);width:100%}
.search input::placeholder{color:var(--dim)}

/* day / night switch — sun and moon slide */
.dn{position:relative;display:flex;border:1px solid var(--rule);flex:none;overflow:hidden}
.dn button{position:relative;z-index:2;font-family:var(--sans);font-size:12px;
  padding:7px 11px;background:none;border:0;color:var(--dim);cursor:pointer;
  display:flex;align-items:center;gap:5px;transition:color .3s}
.dn button[aria-pressed=true]{color:#fff}
.dn svg{width:12px;height:12px;display:block}
.dn::after{content:"";position:absolute;z-index:1;top:0;right:50%;bottom:0;left:0;background:var(--ox);
  transition:inset .32s cubic-bezier(.4,0,.2,1)}
[data-theme=night] .dn::after{right:0;left:50%}

.btn{font-size:13.5px;padding:9px 16px;text-decoration:none;display:inline-block;
  border:1px solid var(--ink);color:var(--ink);white-space:nowrap;transition:.16s}
.btn:hover{background:var(--ink);color:var(--surf)}
.btn.solid{background:var(--ox);border-color:var(--ox);color:#fff}
.btn.solid:hover{filter:brightness(.9)}

/* ─────────── layout ─────────── */
.layout{display:grid;grid-template-columns:238px 1fr;gap:22px;padding:22px 0 40px;align-items:start}
.side{background:var(--surf);border:1px solid var(--rule);position:sticky;top:84px;padding:16px 0}
.side .grp{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);
  padding:0 18px;margin:0 0 7px}
.side .grp+.grp,.side a+.grp{margin-top:20px}
.side a{display:flex;justify-content:space-between;gap:10px;padding:6px 18px;
  font-size:13.5px;text-decoration:none;border-left:3px solid transparent}
.side a span{font-family:var(--mono);font-size:11px;color:var(--dim)}
.side a:hover{background:var(--hair)}
.side a.on{border-left-color:var(--ox);background:var(--oxSoft);font-weight:500}
/* «Справочник» — отдельный блок под каталогом: отбит линией, заголовок
   набран так же, как названия разделов каталога, и ведёт на свою страницу */
.side .grpref{margin-top:16px;border-top:1px solid var(--rule);
  padding:13px 18px 10px;font-size:13px;font-weight:600;color:var(--ink)}
.side .refitem{color:var(--dim);padding-top:5px;padding-bottom:5px}
.side .refitem:hover{color:var(--ink)}
.main{display:flex;flex-direction:column;gap:22px;min-width:0}

.panel{background:var(--surf);border:1px solid var(--rule)}
.phead{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:16px 22px;border-bottom:1px solid var(--rule);flex-wrap:wrap}
.phead h2{font-size:16px;letter-spacing:0}
.phead .meta{font-family:var(--mono);font-size:12px;color:var(--dim)}
.phead a.more{font-size:13px;color:var(--pru);text-decoration:none}
.phead a.more:hover{text-decoration:underline}

/* ─────────── hero ─────────── */
.hero{position:relative;overflow:hidden;background:var(--sky)}
.hero .inner{display:grid;grid-template-columns:1fr 1.02fr;min-height:392px}
.hero .txt{padding:40px 34px 34px;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:3}
.hero .kick{font-family:var(--mono);font-size:12px;color:var(--pru);margin:0 0 14px;
  display:flex;align-items:center;gap:9px}
.hero .kick .dot{width:7px;height:7px;background:var(--ox);border-radius:50%;
  animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.hero h1{font-size:40px;line-height:1.1;margin-bottom:16px;max-width:15ch}
.hero .sub{font-size:15.5px;color:var(--dim);max-width:50ch;margin:0 0 26px}
.hero .acts{display:flex;gap:10px;flex-wrap:wrap}
.hero .art{border-left:1px solid var(--rule);padding:28px;display:flex;
  flex-direction:column;justify-content:center;position:relative;z-index:3}
.hero .art .dwg{max-height:196px}
.artcap{display:flex;justify-content:space-between;gap:14px;margin-top:16px;padding-top:13px;
  border-top:1px solid var(--rule);font-family:var(--mono);font-size:11.5px;color:var(--dim)}
.artcap b{color:var(--ink);font-weight:500}

/* sun / moon arc across the hero */
.arc{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;opacity:.85}
.arc svg{width:100%;height:100%;display:block}
.arc .path{fill:none;stroke:var(--rule);stroke-width:1;stroke-dasharray:5 6}
.arc .body{transition:transform .9s cubic-bezier(.4,0,.2,1),opacity .5s}
.sunb{color:#D9A441}
.moonb{color:#8FB4CC}
[data-theme=day] .moonb{opacity:0}
[data-theme=night] .sunb{opacity:0}
[data-theme=day] .sunb{transform:translateX(0)}
[data-theme=night] .moonb{transform:translateX(0)}

/* ─────────── thread finder ─────────── */
.tf{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:var(--rule)}
.tf a{background:var(--surf);padding:15px 16px;text-decoration:none;display:block;
  border-bottom:3px solid transparent;transition:.16s}
.tf a:hover{background:var(--oxSoft);border-bottom-color:var(--ox);transform:translateY(-2px)}
.tf .ang{font-family:var(--mono);font-size:17px;font-weight:600;display:block}
.tf .nm{font-size:12.5px;color:var(--dim);margin-top:4px;display:block}

/* Панели резьбовых систем в указателе — цель ссылок с плиток резьб
   на главной. Шапка липкая, поэтому отступ сверху, иначе заголовок
   панели уезжает под неё. */
.panel[id^=sys-]{scroll-margin-top:84px}

/* ─────────── лупа над чертежом ───────────
   Круг с увеличенным чертежом ведётся за курсором, а на телефоне —
   выше пальца, чтобы он не закрывал разглядываемое место. Точка касания
   помечается перекрестием. Инвертирование в ночной теме такое же, как
   у самого чертежа, иначе лупа светила бы белым. */
[data-lens]{position:relative}
/* Долгое нажатие пальцем — это вызов лупы, а не выделение картинки и не
   всплывающее меню Safari. */
[data-lens] img{-webkit-touch-callout:none;-webkit-user-select:none;
  user-select:none}
[data-lens].lensing,[data-lens].lensing img{cursor:none}
.lens{position:absolute;width:230px;height:230px;border-radius:50%;
  border:1px solid var(--rule);background:var(--surf);overflow:hidden;
  box-shadow:0 6px 26px rgba(16,26,33,.18);
  pointer-events:none;opacity:0;transition:opacity .12s;z-index:40}
.lens.on{opacity:1}
.lensimg{position:absolute;inset:0;background-repeat:no-repeat}
/* Ночью инвертируется только слой с чертежом — ровно так же, как сам
   чертёж на странице; рамка и фон лупы остаются как есть. */
[data-theme=night] .lensimg{filter:invert(1) hue-rotate(180deg)}
[data-theme=night] .lens{border-color:#3A4A55}
.lensdot{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;
  pointer-events:none;opacity:0;z-index:41}
.lensdot.on{opacity:1}
.lensdot::before,.lensdot::after{content:'';position:absolute;background:var(--ox)}
.lensdot::before{left:12px;top:0;width:2px;height:26px}
.lensdot::after{top:12px;left:0;height:2px;width:26px}
@media(max-width:820px){.lens{width:170px;height:170px}}
@media(hover:none){.lens{width:170px;height:170px}}

/* ─────────── экранный резьбомер ───────────
   Все шкалы нарисованы в миллиметрах и умножаются на --k: коэффициент
   калибровки, который посетитель подбирает по банковской карте (gauge.js).
   По умолчанию единица — тогда работает обычный css-миллиметр. */
.gauge{--k:1}
/* Два экрана мини-программы: калибровка и сами шкалы. */
.gapp[data-step=cal] .guse,.gapp[data-step=use] .gcal{display:none}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--ox);
  cursor:pointer;text-decoration:underline;text-underline-offset:2px}
/* Карта поперёк экрана телефона помещается только в горизонтальном
   положении: 85,6 мм против примерно 65 мм ширины в вертикальном. */
/* Подсказка для iPhone: полного экрана там нет, зато есть установка
   на домашний экран. Показывается скриптом, когда полноэкранного
   режима в браузере действительно нет. */
.ioshint{margin:0 22px 14px;padding:11px 13px;font-size:13.5px;line-height:1.5;
  color:var(--ink);background:var(--pruSoft);border-left:2px solid var(--ox)}
@media(max-width:820px){.ioshint{margin:0 14px 12px}}
.turnhint{display:none;margin:0 22px 14px;padding:10px 12px;font-size:13.5px;
  color:var(--oxTx);background:var(--ox)}
@media(max-width:820px) and (orientation:portrait){.turnhint{display:block}}
/* Резьбомер в шапке — не пункт меню, а отдельная кнопка с рамкой. */
.gaugelink{display:inline-flex;align-items:center;gap:7px;height:34px;
  padding:0 11px;border:1px solid var(--ox);color:var(--ox);font-size:13px;
  font-weight:500;white-space:nowrap;text-decoration:none;transition:.16s}
.gaugelink svg{width:18px;height:18px;flex:none}
.gaugelink:hover{background:var(--ox);color:var(--oxTx)}
/* В шапке тесно: ниже полутора тысяч точек остаётся только значок,
   название уходит в подсказку. */
@media(max-width:1499px){.gaugelink .lg{display:none}.gaugelink{padding:0 9px}}
/* Кнопка резьбомера отнимает у шапки полсотни точек, и на средних экранах
   строка переставала помещаться. Возвращаем место за счёт поля поиска:
   оно и так раскрывается в выпадающий список. */
@media(max-width:1499px){.top .search{min-width:190px}}
.gbox{padding:6px 4px 18px 6px;overflow-x:auto}
.gsvg{display:block;color:var(--ink);max-width:none}
.gsvg line,.gsvg polyline{stroke:currentColor;stroke-width:.25;fill:none}
.gsvg .tick{stroke-width:.35}
.gsvg text{font-family:var(--mono);font-size:2.6px;fill:currentColor}
.gsvg text.lab{font-size:3px;text-anchor:start;fill:var(--ox)}
.gsvg.comb{margin-bottom:5px}
.wmarks{position:relative;font-family:var(--mono);font-size:10px;color:var(--ox);
  height:126px}
.wm{position:absolute;transform:rotate(90deg);transform-origin:left top;
  white-space:nowrap}
.wm::before{content:'';position:absolute;left:-1px;top:-6px;width:1px;height:5px;
  background:var(--ox)}
/* Карта при подгонке меняет размер и может то вызывать полосы прокрутки,
   то убирать их. Полоса меняет ширину окна, окно двигает ползунок, и
   бегунок прыгает из-под пальца. Поэтому вертикальная полоса на этой
   странице всегда на месте, а горизонтальное переполнение подрезается. */
html[data-gauge]{overflow-y:scroll}
.calbox{padding:0 22px 22px;overflow-x:hidden}
/* Первый экран мини-программы: на телефоне на нём должны помещаться
   только карта, ползунок и кнопка, поэтому поля и текст ужимаются. */
/* На телефоне калибровка занимает весь экран: ни шапки, ни меню, ни
   подвала — только карта, ползунок и кнопка. Строку браузера убирает
   кнопка «Во весь экран», сама по себе она не прячется. */
@media(max-width:820px),(max-height:560px) and (orientation:landscape){
  html[data-gauge=cal] .top,html[data-gauge=cal] .util,
  html[data-gauge=cal] .side,html[data-gauge=cal] footer{display:none}
  html[data-gauge=cal] .layout,html[data-gauge=cal] .shell{padding:0;margin:0;
    max-width:none}
  html[data-gauge=cal] .calpanel{position:fixed;inset:0;z-index:200;border:0;
    background:var(--bg);display:flex;flex-direction:column;
    justify-content:center;overflow:auto}
  html[data-gauge=cal] .calpanel .ptitle{border-bottom:0}
}
@media(max-width:820px),(max-height:560px) and (orientation:landscape){
  .calpanel .ref{padding:12px 14px 2px}
  .calpanel .ref p{font-size:14px;line-height:1.5}
  .calpanel .ptitle{padding:12px 14px}
  .calbox{padding:0 14px 14px}
  .turnhint{margin:0 14px 10px}
}
@media(max-width:900px) and (orientation:landscape),(max-height:560px) and (orientation:landscape){
  /* Телефон повёрнут: экран низкий, а карта высотой 54 мм должна
     поместиться целиком вместе с ползунком. Убираем всё лишнее сверху
     и ставим управление сбоку от карты, а не под ней. */
  .util{display:none}
  .calpanel .ref{display:none}
  .calpanel .ptitle{padding:8px 14px}
  .gapp[data-step=cal] .layout,.layout{padding-top:8px}
  .calbox{display:flex;gap:16px;align-items:flex-start}
  .calrow{flex-direction:column;align-items:stretch;margin-bottom:0;
    width:210px;flex:none;gap:8px}
  .slidewrap{width:100%}
}
.card{width:calc(85.6mm * var(--k));height:calc(53.98mm * var(--k));
  border:1px solid var(--ox);display:flex;align-items:flex-end;
  padding:8px;color:var(--dim);font-size:12px;font-family:var(--mono)}
/* Ползунок стоит над картой (в горизонтальном положении — слева от неё):
   карта меняет размер при подгонке, и стоя выше она сдвигала бы сам
   ползунок, из-за чего бегунок прыгал под пальцем. */
.calrow{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.calrow label{font-size:13px;color:var(--dim)}
/* Ползунок калибровки. На Android горизонтальное движение по узкому
   ползунку браузер норовит принять за прокрутку страницы, отсюда рывки,
   поэтому жесты внутри него отключены, а сам он сделан крупнее пальца. */
.slidewrap{display:flex;align-items:center;gap:8px;flex:1;min-width:170px}
.calrow input[type=range]{flex:1;min-width:0;accent-color:var(--ox);
  height:34px;touch-action:none;-webkit-appearance:none;appearance:none;
  background:transparent}
.calrow input[type=range]::-webkit-slider-runnable-track{height:4px;
  background:var(--rule)}
.calrow input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;
  width:28px;height:28px;margin-top:-12px;border-radius:50%;
  background:var(--ox);border:0}
.calrow input[type=range]::-moz-range-track{height:4px;background:var(--rule)}
.calrow input[type=range]::-moz-range-thumb{width:28px;height:28px;border:0;
  border-radius:50%;background:var(--ox)}
.calrow .nudge{min-width:44px;height:38px;font-size:18px;line-height:1;
  padding:0;touch-action:manipulation}
.calrow output{font-family:var(--mono);font-size:13px;min-width:48px}

/* ─────────── большой поиск на главной ─────────── */
.findbody{padding:22px}
.find .search.big{min-width:0;width:100%;padding:14px 16px;gap:11px;
  border-color:var(--ox);background:var(--surf)}
.find .search.big input{font-size:17px}
.find .search.big svg{width:19px;height:19px;color:var(--ox)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.chips button{font-family:var(--mono);font-size:12px;color:var(--dim);
  background:var(--surf);border:1px solid var(--rule);padding:5px 10px;
  cursor:pointer;transition:.16s}
.chips button:hover{border-color:var(--ox);color:var(--ox)}
.findlead{margin:18px 0 10px;font-size:14.5px;color:var(--dim);max-width:70ch}
.findnotes{margin:0;padding-left:18px;max-width:76ch}
.findnotes li{font-size:13.5px;line-height:1.55;color:var(--dim);margin-bottom:5px}
.findnotes li::marker{color:var(--ox)}
.searchres b{color:var(--ox);font-weight:600}

/* ─────────── ranges ─────────── */
.ranges{display:grid;grid-template-columns:repeat(auto-fit,minmax(214px,1fr));gap:1px;background:var(--rule)}
.ranges a{background:var(--surf);padding:20px;text-decoration:none;display:flex;
  flex-direction:column;gap:12px;transition:background .16s}
.ranges a:hover{background:var(--pruSoft)}
.ranges .th{height:106px;display:flex;align-items:center;justify-content:center;
  transition:transform .3s cubic-bezier(.4,0,.2,1)}
.ranges a:hover .th{transform:scale(1.07)}
.ranges .th .dwg{max-height:106px;width:auto}
.ranges .tx{display:flex;flex-direction:column;gap:10px;min-width:0}
.ranges .c{font-family:var(--mono);font-size:15px;font-weight:600}
.ranges .n{font-size:12.5px;color:var(--dim);line-height:1.45}
.ranges .k{font-family:var(--mono);font-size:11px;color:var(--ox)}

/* ─────────── banner ─────────── */
.banner{display:grid;grid-template-columns:170px 1fr auto;gap:26px;align-items:center;
  padding:22px 26px;border-left:4px solid var(--ox)}
.banner .art{height:104px;display:flex;align-items:center;justify-content:center}
.banner .art .dwg{max-height:104px;width:auto}
.banner .tag{font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ox);margin:0 0 7px}
.banner h2{font-size:21px;margin-bottom:7px}
.banner p{margin:0;color:var(--dim);font-size:13.5px;max-width:62ch}
/* баннеры страницы «Справочник» — вместо чертежа рисованный значок */
.refban .art{color:var(--pru)}
.refban .tag{display:inline-block;border:0;padding:0;background:none}
.refban h2{margin-bottom:7px}
.refban h2 a{color:inherit;text-decoration:none}
.refban h2 a:hover{color:var(--ox)}
.refban .btn{white-space:nowrap}

/* ─────────── longevity ─────────── */
.longrun{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--rule)}
/* Карточку описывает только прямой потомок: правило `.longrun div`
   попадало и во вложенный `.hex`, добавляло ему поля 22/20 и при
   border-box съедало шестиугольник до нуля. Получалась пустая полоса
   сверху, а текст казался прижатым к низу карточки. */
.longrun>div{background:var(--surf);padding:22px 20px;display:flex;flex-direction:column}
.longrun .hex{width:26px;height:26px;flex:none;padding:0;color:var(--pru);margin-bottom:13px}
.longrun .hex svg{display:block;width:100%;height:100%}
.longrun b{display:block;font-size:15px;font-weight:600;margin-bottom:6px}
.longrun p{font-size:12.8px;color:var(--dim);margin:0;line-height:1.5}

/* hexagon divider */

/* ─────────── справочная статья ─────────── */
/* Статьи набираются как в каталоге Link Technology: колонка около 70
   знаков, текст выключен по формату с автоматическими переносами —
   язык страницы задан в <html lang>, поэтому переносы расставляет сам
   браузер. Без переносов выключка рвала бы строки пробелами. */
.ref{padding:16px 22px 6px;max-width:70ch}
.ref p{margin:0 0 14px;font-size:15px;line-height:1.62;
  text-align:justify;hyphens:auto;-webkit-hyphens:auto;
  text-wrap:pretty;overflow-wrap:break-word}
.ref p.lead{font-size:17px;line-height:1.6;color:var(--dim)}
.ref ul,.ref ol{margin:0 0 14px;padding-left:20px}
.ref li{margin-bottom:9px;font-size:15px;line-height:1.6;
  text-align:justify;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
/* Вводный абзац и подписи оставляем по левому краю: короткие строки
   выключка растягивает некрасиво. */
.ref .tcap{text-align:left;hyphens:manual}
/* По решению заказчика весь текст на страницах выключен по формату:
   вводные абзацы, карточки площадок, блоки главной, контакты. */
.ref p.lead,.fwork p,.fwork .fwhat,.pqcols p,.longrun p,.terms p,.contact .cnote,
.quote p,.findlead,.dlterm p,.fp{text-align:justify;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.ref li::marker{color:var(--ox)}
/* плашки стандартов на главной: ссылки на карточки в статье */
.stdchips{display:flex;flex-wrap:wrap;gap:8px;padding:16px 22px 20px}
.stdchips a{font-family:var(--mono);font-size:12px;padding:6px 11px;border:1px solid var(--rule);
  text-decoration:none;color:var(--ink);background:var(--surf)}
.stdchips a:hover{border-color:var(--ox);color:var(--ox)}
.stdbox:target{background:var(--oxSoft);border-left-color:var(--ox);padding:10px 16px;
  scroll-margin-top:96px}
/* Карточка стандарта: номер моноширинным — он читается как артикул,
   название рядом обычным шрифтом. Слева тонкая линейка, чтобы подряд
   идущие стандарты не сливались в сплошной текст. */
.stdbox{border-left:2px solid var(--rule);padding-left:16px;margin:0 0 22px}
.stdbox:last-child{margin-bottom:8px}
.stdbox h3{margin:0 0 9px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.stdc{font-family:var(--mono);font-size:14.5px;font-weight:600;
  letter-spacing:.02em;color:var(--ink)}
.stdn{font-size:13.5px;font-weight:400;color:var(--dim)}
.stdbox p{margin:0 0 10px}
.stdbox ul{margin:0;padding-left:18px}
.stdbox li{margin-bottom:6px;font-size:14px;color:var(--dim)}
/* Таблицы статьи: как в каталоге — название слева, значения по центру
   под своим заголовком. Столбцы с числами держим узкими, иначе в таблице
   из трёх колонок значения разъезжаются по краям страницы. */
.reft th:first-child,.reft td:first-child{text-align:left;font-family:var(--mono)}
.reft th:not(:first-child),.reft td:not(:first-child){width:23%}
.reft .src{font-family:var(--sans)}
/* ─────────── «Этапы производства»: маршруты деталей и таблица сталей ───────────
   Строка схемы — деталь, справа её операции по порядку, между ними
   стрелки. Ключевая операция (отжиг муфт) выделена цветом. Цепочка,
   которая не помещается, переносится; на телефоне название детали
   встаёт над цепочкой. Таблица сталей: название детали обычным шрифтом,
   марки моноширинным — они читаются как обозначения. */
.route{padding:2px 22px 18px}
.rrow{display:grid;grid-template-columns:200px 1fr;gap:6px 20px;align-items:start;
  padding:12px 0;border-top:1px solid var(--hair)}
.rrow:first-child{border-top:0}
.rname{font-size:14px;font-weight:600;line-height:1.35;padding-top:5px}
.rsteps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px}
.rsteps li{position:relative;margin:0;font-family:var(--mono);font-size:12px;line-height:1.3;
  padding:5px 9px;border:1px solid var(--rule);background:var(--surf);color:var(--ink)}
.rsteps li+li::before{content:"";position:absolute;right:100%;top:50%;width:16px;margin-right:3px;
  border-top:1px solid var(--dim)}
.rsteps li+li::after{content:"";position:absolute;right:100%;top:50%;margin:-3.5px 3px 0 0;
  border-style:solid;border-width:3.5px 0 3.5px 5px;border-color:transparent transparent transparent var(--dim)}
.rsteps li.key{border-color:var(--ox);color:var(--ox);background:var(--oxSoft);font-weight:600}
.gradet th:first-child,.gradet td:first-child{font-family:var(--sans)}
.gradet td:nth-child(3),.gradet td:nth-child(4){font-family:var(--mono);font-size:12.5px}
.gradet thead th{white-space:normal}
@media(max-width:760px){.rrow{grid-template-columns:1fr}.rname{padding-top:0}}
/* Подпись относится к таблице ПОД ней, поэтому сверху воздуха много,
   а снизу почти нет: иначе читается как примечание к предыдущей. */
.tcap{padding:26px 22px 7px;font-family:var(--mono);font-size:11.5px;
  color:var(--ink);border-top:1px solid var(--hair);margin-top:18px}
.panel>.tcap:first-of-type{border-top:0;margin-top:0;padding-top:6px}
.ruler{display:block;margin:6px 22px 2px;color:var(--ink);max-width:100%}
.ruler line{stroke:currentColor;stroke-width:.3}
.ruler text{font-family:var(--mono);font-size:2.8px;fill:currentColor}
/* Печать: линейка должна выйти настоящего размера, поэтому со страницы
   убирается всё лишнее, а фон делается белым независимо от темы. */
@media print{
  .util,.top,.side,footer,.quote,.crumb{display:none}
  .layout{display:block}
  .panel{border:0;break-inside:avoid}
  body{background:#fff}
  .ruler{color:#000}
}

/* ─────────── two-up ─────────── */
.row2{display:grid;grid-template-columns:1.35fr 1fr;gap:22px;align-items:start}
/* Правая колонка тянется до высоты левой, а лишнюю высоту забирает
   баннер с числом: тогда под перечнем стандартов не остаётся пустоты,
   а число просто стоит по центру своей панели. */
.row2 .col2{display:flex;flex-direction:column;gap:22px;align-self:stretch}
.row2 .col2 .nums{flex:1;display:flex;flex-direction:column}
.row2 .col2 .nums .numsline{flex:1;display:flex;align-items:center;
  justify-content:center;padding:32px 28px}
.terms{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule)}
.terms div{background:var(--surf);padding:19px 20px}
.terms b{display:block;font-size:14.5px;font-weight:600;margin-bottom:6px}
.terms p{font-size:12.8px;color:var(--dim);margin:0;line-height:1.5}
.nums div{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:13px 22px;border-bottom:1px solid var(--hair)}
.nums div:last-child{border-bottom:0}
.nums .v{font-family:var(--mono);font-size:20px;font-weight:600;color:var(--pru)}
.nums .k{font-size:13px;color:var(--dim);text-align:right;max-width:20ch}
.std{display:flex;flex-wrap:wrap;gap:1px;background:var(--rule)}
.std span{background:var(--surf);padding:12px 14px;font-family:var(--mono);
  font-size:12.5px;flex:1 1 auto;text-align:center;white-space:nowrap}

/* ─────────── quote strip ─────────── */
.quote{display:flex;align-items:center;justify-content:space-between;gap:26px;
  padding:26px 30px;flex-wrap:wrap;border-left:4px solid var(--ox)}
.quote h2{font-size:20px;margin-bottom:6px}
.quote p{margin:0;color:var(--dim);font-size:14px;max-width:56ch}

/* ─────────── catalogue page ─────────── */
.crumb{font-size:12.5px;color:var(--dim);margin:0;padding:16px 22px 0}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--ox)}
.ptitle{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding:12px 22px 4px}
.ptitle .code{font-family:var(--mono);font-size:30px;font-weight:600}
.ptitle .nm{font-size:17px;font-weight:500}
.tags{display:flex;gap:7px;flex-wrap:wrap;padding:0 22px 16px}
.tag{font-family:var(--mono);font-size:11.5px;border:1px solid var(--rule);
  padding:3px 8px;color:var(--dim)}
.split{display:grid;grid-template-columns:1.7fr 1fr;border-top:1px solid var(--rule)}
.split .art{padding:26px;background:var(--pruSoft)}
.split .art .dwg{max-height:250px}
.split .spec{border-left:1px solid var(--rule)}
.spec div{display:flex;justify-content:space-between;gap:14px;padding:11px 20px;
  border-bottom:1px solid var(--hair);font-size:13.5px}
.spec div:last-child{border-bottom:0}
.spec .k{color:var(--dim)}
.spec .v{font-family:var(--mono);font-size:12.5px;text-align:right}
.spec .specnote{margin:0;padding:10px 20px;font-size:11px;line-height:1.4;color:var(--dim)}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{padding:8px 12px;border-bottom:1px solid var(--hair)}
/* Значения стоят по центру под заголовком своего столбца — во всех
   таблицах сайта; первый столбец (артикул, название) — слева. */
th{text-align:center}
thead th{background:var(--pruSoft);font-weight:600;font-size:11.5px;letter-spacing:.03em;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);white-space:nowrap}
th.grp{text-align:center}
th.sub{font-weight:400;color:var(--dim);font-family:var(--mono);font-size:11px}
td{font-variant-numeric:tabular-nums;text-align:center}
td.pn{font-family:var(--mono);font-weight:500;text-align:left;white-space:nowrap}
td.th{font-family:var(--mono);white-space:nowrap}
/* первый столбец слева; для заголовка это задаётся в разметке (rowspan
   «Артикул» стоит в первой строке шапки, а во второй первым идёт E) */
td:first-child{text-align:left}
tbody tr:hover{background:var(--oxSoft)}
tbody tr:hover td.pn{color:var(--ox)}
.tfoot{font-size:12.5px;color:var(--dim);padding:12px 20px;border-top:1px solid var(--rule)}
.fam{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--rule)}
.fam a{background:var(--surf);padding:14px 16px;text-decoration:none;transition:background .16s}
.fam a:hover{background:var(--pruSoft)}
.fam a.on{background:var(--hair)}
.fam .c{font-family:var(--mono);font-weight:600;font-size:14px;display:block}
.fam .n{font-size:12px;color:var(--dim);margin-top:3px;display:block}

/* ─────────── footer ─────────── */
footer{border-top:1px solid var(--rule);background:var(--surf);padding:34px 0 26px;
  font-size:13px;color:var(--dim)}
.fcols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px}
.fp{margin-top:14px;max-width:36ch}
footer h4{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink);margin:0 0 10px;font-weight:600}
footer a{display:block;text-decoration:none;color:var(--dim);padding:3px 0}
footer a:hover{color:var(--ox)}
.legal{margin-top:28px;padding-top:16px;border-top:1px solid var(--hair);display:flex;
  justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:12px}

/* ─────────── responsive ─────────── */
@media(max-width:1180px){
  .layout{grid-template-columns:1fr}.side{position:static}
  .hero .inner{grid-template-columns:1fr}
  .hero .art{border-left:0;border-top:1px solid var(--rule)}
  .row2{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}.split .spec{border-left:0;border-top:1px solid var(--rule)}
  .banner{grid-template-columns:1fr}
}
@media(max-width:760px){
  .top .shell{padding-top:12px;padding-bottom:12px}
  .top .search{min-width:0;order:5;width:100%}
  .hero h1{font-size:29px}
  .terms{grid-template-columns:1fr}
  .fcols{grid-template-columns:1fr 1fr}
  .impulse{padding:16px 20px}
}
:focus-visible{outline:2px solid var(--ox);outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  *,*::after{transition:none!important;animation:none!important}
  .impulse .trace{stroke-dashoffset:0}
}

/* ═══════════ hover, after the Link Technology site ═══════════
   Menu: a plate slides in behind the item. Cards: the drawing steps
   forward and a curtain rises from below. Same mechanics, our colour,
   and the plate takes the hexagon's pointed ends instead of a skew. */

.mainnav a{position:relative;z-index:0;padding:6px 13px;border-bottom:0;
  transition:color .24s ease}
.mainnav a::before{content:"";position:absolute;z-index:-1;top:-2px;right:0;bottom:-2px;left:0;
  background:var(--ox);transform:scaleX(0);transform-origin:left center;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,7px 100%,0 50%)}
.mainnav a:hover::before,.mainnav a.on::before{transform:scaleX(1)}
.mainnav a:hover,.mainnav a.on{color:#fff}

.side a{position:relative;overflow:hidden}
.side a::before{content:"";position:absolute;top:0;bottom:0;left:0;width:3px;
  background:var(--ox);transform:scaleY(0);transform-origin:top;
  transition:transform .26s cubic-bezier(.4,0,.2,1)}
.side a:hover::before{transform:scaleY(1)}

/* card: drawing steps forward, curtain rises, one slow glint crosses it */
.ranges a,.fam a,.idx a{position:relative;overflow:hidden}
.ranges a::after,.fam a::after,.idx a::after{
  content:"Open the range →";position:absolute;left:0;right:0;bottom:0;
  background:var(--ox);color:#fff;font-family:var(--mono);font-size:12px;
  letter-spacing:.02em;padding:9px 20px;transform:translateY(101%);
  transition:transform .3s cubic-bezier(.4,0,.2,1)}
.fam a::after{content:"Open →";padding:8px 16px;font-size:11.5px}
.idx a::after{content:"Open →"}
.ranges a:hover::after,.fam a:hover::after,.idx a:hover::after{transform:translateY(0)}
.ranges a .th,.idx a .th{transition:transform .34s cubic-bezier(.4,0,.2,1)}
.ranges a:hover .th,.idx a:hover .th{transform:scale(1.08) translateY(-3px)}
.ranges a::before,.fam a::before{content:"";position:absolute;top:-60%;bottom:-60%;width:44%;
  left:-60%;pointer-events:none;transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent)}
[data-theme=night] .ranges a::before,[data-theme=night] .fam a::before{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent)}
.ranges a:hover::before,.fam a:hover::before{animation:glint 2.5s ease-in-out infinite}
@keyframes glint{0%{left:-60%}55%,100%{left:130%}}

/* ═══════════ variant D — the hero plays three scenes ═══════════ */
.dhero{position:relative;overflow:hidden;min-height:486px}
.scene{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;visibility:hidden;
  transition:opacity .85s ease,visibility .85s,transform .85s cubic-bezier(.4,0,.2,1);
  transform:scale(1.03)}
.scene.on{opacity:1;visibility:visible;transform:scale(1);z-index:2}
.scene .grid{position:relative;z-index:4;display:grid;grid-template-columns:1.06fr 1fr;
  gap:32px;height:100%;padding:42px 34px 56px;align-items:center}
.scene h1{font-size:40px;line-height:1.1;margin-bottom:16px;max-width:16ch}
.scene h1 .ln{display:block;overflow:hidden}
.scene h1 .ln i{display:block;font-style:normal;transform:translateY(105%);
  transition:transform .7s cubic-bezier(.16,1,.3,1)}
.scene.on h1 .ln:nth-child(1) i{transform:translateY(0);transition-delay:.16s}
.scene.on h1 .ln:nth-child(2) i{transform:translateY(0);transition-delay:.26s}
.scene.on h1 .ln:nth-child(3) i{transform:translateY(0);transition-delay:.36s}
.scene.on h1 .ln:nth-child(4) i{transform:translateY(0);transition-delay:.46s}

/* ─────────── выделенные слова в заголовках ───────────
   Шестигранник повторяет знак из логотипа, только положенный на бок:
   боковые скосы взяты в той же пропорции к высоте. Нижний внутренний
   отступ больше верхнего — иначе clip-path срезает хвосты букв p и g. */
.hx{display:inline-block;white-space:nowrap;padding:.06em .52em .16em;
  background:var(--ox);color:var(--oxTx);line-height:1;
  clip-path:polygon(0 50%,.34em 0,calc(100% - .34em) 0,100% 50%,
                    calc(100% - .34em) 100%,.34em 100%)}
/* Строки заголовка подрезаны по высоте — из-под них выезжает текст.
   Шестигранник выше строки, поэтому там, где он есть, оставляем запас:
   на выезд текста это почти не влияет, он уходит вниз на 105%. */
.scene h1 .ln:has(.hx){overflow:clip;overflow-clip-margin:.22em}
/* Шестигранник шире слов на величину внутренних отступов, и при узкой
   колонке строка из-за этого переносится там, где перенос не задуман.
   Там, где выделение есть, даём заголовку немного больше ширины. */
.scene h1:has(.hx){max-width:22ch}

/* Пульс: два удара подряд и длинная пауза, как у сердца. Размер меняется
   чуть-чуть, основную работу делает подсветка — сильное увеличение
   упёрлось бы в подрезку строки. Шестигранники в заголовке вспыхивают
   не разом, а один за другим сверху вниз, то есть по ходу чтения. */
@keyframes hxbeat{
   0%{transform:scale(1);filter:brightness(1)}
   4%{transform:scale(1.035);filter:brightness(1.16)}
   9%{transform:scale(1);filter:brightness(1)}
  14%{transform:scale(1.024);filter:brightness(1.1)}
  21%{transform:scale(1);filter:brightness(1)}
 100%{transform:scale(1);filter:brightness(1)}
}
.scene.on h1 .hx{animation:hxbeat 3.2s ease-in-out infinite}
/* Задержка отсчитывается от момента, когда строка закончила выезжать. */
.scene.on h1 .ln:nth-child(1) .hx{animation-delay:1.1s}
.scene.on h1 .ln:nth-child(2) .hx{animation-delay:1.32s}
.scene.on h1 .ln:nth-child(3) .hx{animation-delay:1.54s}
.scene.on h1 .ln:nth-child(4) .hx{animation-delay:1.76s}
@media(prefers-reduced-motion:reduce){.scene.on h1 .hx{animation:none}}
.scene .kick,.scene .sub,.scene .acts{opacity:0;transform:translateY(14px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.scene.on .kick{opacity:1;transform:none;transition-delay:.1s}
.scene.on .sub{opacity:1;transform:none;transition-delay:.46s}
.scene.on .acts{opacity:1;transform:none;transition-delay:.58s}
.scene .kick{font-family:var(--mono);font-size:12px;margin:0 0 14px;
  display:flex;align-items:center;gap:9px}
.scene .kick .dot{width:7px;height:7px;background:var(--ox);border-radius:50%;
  animation:pulse 2.4s ease-in-out infinite}
.scene .sub{font-size:15.5px;max-width:47ch;margin:0 0 26px}
.scene .acts{display:flex;gap:10px;flex-wrap:wrap}
.scene .stage{padding:26px 24px;border:1px solid var(--rule)}
.scene .stage .dwg{max-height:186px}
.scene .artcap{display:flex;justify-content:space-between;gap:14px;margin-top:16px;
  padding-top:13px;border-top:1px solid var(--rule);font-family:var(--mono);font-size:11.5px}

/* scene 1 — the lake fills the frame */
.scene.s1 .bg{position:absolute;top:-3%;right:-3%;bottom:-3%;left:-3%;background-size:cover;
  background-position:center 55%;transition:opacity .9s ease;
  animation:kenburns 36s ease-in-out infinite alternate}
.scene.s1 .bg.d{background-image:url(hero-day.jpg);opacity:1}
.scene.s1 .bg.n{background-image:url(hero-night.jpg);opacity:0}
[data-theme=night] .scene.s1 .bg.d{opacity:0}
[data-theme=night] .scene.s1 .bg.n{opacity:1}
/* фото неактивной темы не грузится: тема выставлена в <head> до стилей */
[data-theme=day] .scene.s1 .bg.n,[data-theme=night] .scene.s1 .bg.d{background-image:none}
.scene.s1 .veil{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;
  background:linear-gradient(100deg,rgba(10,20,28,.88) 0%,rgba(10,20,28,.7) 40%,
             rgba(10,20,28,.24) 64%,rgba(10,20,28,.44) 100%)}
.scene.s1{color:#F2F7FA}.scene.s1 .kick{color:#BBD4E4}
.scene.s1 h1{color:#fff}.scene.s1 .sub{color:rgba(242,247,250,.82)}
.scene.s1 .stage{background:rgba(12,22,30,.5);border-color:rgba(255,255,255,.2);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}

.scene.s1 .artcap{border-top-color:rgba(255,255,255,.22);color:rgba(234,242,247,.74)}
.scene.s1 .btn{border-color:rgba(255,255,255,.6);color:#fff}
.scene.s1 .btn:hover{background:#fff;color:#16303F}

/* scene 2 — printed on tinted stock, a slice of the lake down the side.
   By day the stock is a cool blueprint grey, so it agrees with the blue
   lake beside it and leaves the red strip as the only warm thing on the
   page. By night the stock goes deep prussian and the warm sunset is the
   one light source. Either way only one temperature is doing the talking. */
.scene.s2{background:#CCD6DB;color:#1E3343}
[data-theme=night] .scene.s2{background:#17232B;color:#EAE2DC}
.scene.s2 .grid{grid-template-columns:1.1fr .9fr 250px;padding-right:0}
.scene.s2 .kick{color:var(--ox)}
.scene.s2 .sub{color:#4C5F6C}
[data-theme=night] .scene.s2 .sub{color:#8FA1AE}
.scene.s2 .stage{background:#BEC9CF;border-color:#A6B6BF}
[data-theme=night] .scene.s2 .stage{background:#1B2831;border-color:#394A56}
.scene.s2 .stage .dwg{color:#1E3343}
[data-theme=night] .scene.s2 .stage .dwg{color:#EAE2DC}
.scene.s2 .artcap{border-top-color:#A6B6BF;color:#4C5F6C}
[data-theme=night] .scene.s2 .artcap{border-top-color:#394A56;color:#8FA1AE}
.scene.s2 .btn.solid{border-color:var(--ox)}
.scene.s2 .btn{border-color:currentColor;color:inherit}
.scene.s2 .slice{position:relative;overflow:hidden;height:100%;margin:-42px 0 -56px}
.scene.s2 .slice i{position:absolute;top:0;right:0;bottom:0;left:0;background-size:cover;
  background-position:center;transition:opacity .9s ease;
  animation:kenburns 40s ease-in-out infinite alternate}
.scene.s2 .slice .sd{background-image:url(strip-day.jpg);opacity:1}
.scene.s2 .slice .sn{background-image:url(strip-night.jpg);opacity:0}
[data-theme=night] .scene.s2 .slice .sd{opacity:0}
[data-theme=night] .scene.s2 .slice .sn{opacity:1}
[data-theme=day] .scene.s2 .slice .sn,[data-theme=night] .scene.s2 .slice .sd{background-image:none}

/* scene 3 — the drawing alone on the open sky */
.scene.s3{background:var(--sky);color:var(--ink)}
.scene.s3 .kick{color:var(--pru)}
.scene.s3 .sub{color:var(--dim)}
.scene.s3 .stage{background:var(--surf)}
.scene.s3 .artcap{color:var(--dim)}
.scene.s3 .arcbg{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;opacity:.8}
.scene.s3 .arcbg svg{width:100%;height:100%;display:block}
.scene.s3 .arcbg .p{fill:none;stroke:var(--rule);stroke-width:1;stroke-dasharray:5 6}

/* sun and moon ride every scene */
.dorb{position:absolute;z-index:3;width:56px;height:56px;
  transition:opacity .9s ease,left 1.2s cubic-bezier(.4,0,.2,1),top 1.2s cubic-bezier(.4,0,.2,1)}
.dorb.sun{color:#F2C57C;left:63%;top:15%;opacity:1}
.dorb.moon{color:#D3E2EC;left:76%;top:26%;opacity:0}
[data-theme=night] .dorb.sun{opacity:0;left:52%;top:30%}
[data-theme=night] .dorb.moon{opacity:1;left:66%;top:15%}
/* each scene has its own horizon, measured off the photograph:
   day lake 52% of the block, sunset 70%, the tall slice 53% and 67%.
   The sun sits just above the waterline; the moon rides higher. */
.scene.s1 .dorb.sun{left:60%;top:39%}
[data-theme=night] .scene.s1 .dorb.moon{left:67%;top:18%}
.scene.s2 .dorb.sun{left:50%;margin-left:-28px;top:40%}
[data-theme=night] .scene.s2 .dorb.moon{left:50%;margin-left:-28px;top:22%}
.scene.s3 .dorb.sun{left:62%;top:45%}
[data-theme=night] .scene.s3 .dorb.moon{left:66%;top:17%}
.dorb .halo{animation:breathe 6s ease-in-out infinite}

/* scene control */
.hnav{position:absolute;z-index:6;left:34px;bottom:22px;display:flex;gap:8px;align-items:center}
.hnav button{width:44px;height:4px;padding:0;border:0;cursor:pointer;position:relative;
  background:rgba(127,140,150,.42);overflow:hidden}
.scene.s1 ~ .hnav button{background:rgba(255,255,255,.3)}
.hnav button i{position:absolute;top:0;bottom:0;left:0;width:100%;background:var(--ox);
  transform:scaleX(0);transform-origin:left}
.hnav button[aria-current=true] i{animation:fill 7s linear forwards}
.dhero.paused .hnav button[aria-current=true] i{animation-play-state:paused}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hnav .place{margin-left:14px;font-family:var(--mono);font-size:10.5px;
  color:rgba(255,255,255,.6);opacity:0;transition:opacity .5s}
.dhero[data-scene="0"] .hnav .place{opacity:1}

@media(max-width:1180px){
  .dhero{min-height:0}
  .scene{position:static;opacity:1;visibility:visible;transform:none;display:none}
  .scene.on{display:block}
  .scene .grid,.scene.s2 .grid{grid-template-columns:1fr;padding:30px 24px 48px}
  .scene h1 .ln i{transform:none}

  /* The tall slice has nowhere to stand once the columns collapse, so the
     lake lies down instead: a band under the drawing, cut from the wide
     photograph that scene one has already loaded. */
  .scene.s2 .slice{height:158px;margin:0;border-top:1px solid var(--rule)}
  .scene.s2 .slice .sd{background-image:url(hero-day.jpg);background-position:center 46%}
  .scene.s2 .slice .sn{background-image:url(hero-night.jpg);background-position:center 62%}
  .scene.s2 .dorb.sun{left:80%;top:24%}
  [data-theme=night] .scene.s2 .dorb.moon{left:76%;top:16%}
}
@media(max-width:760px){.scene h1{font-size:28px}.dorb{width:40px;height:40px}}
@media(prefers-reduced-motion:reduce){
  .scene h1 .ln i{transform:none}
  .scene .kick,.scene .sub,.scene .acts{opacity:1;transform:none}
  .scene.s1 .bg,.scene.s2 .slice i{animation:none}
  .hnav button[aria-current=true] i{animation:none;transform:scaleX(1)}
  .ranges a:hover::before,.fam a:hover::before{animation:none}
}

/* ═══════════ impulse readout, scene three ═══════════ */
.scene.s3 .col{display:flex;flex-direction:column;gap:14px}
.scene.s3 .stage{padding:20px 22px}
.scene.s3 .stage .dwg{max-height:138px}
.cycles{border:1px solid var(--rule);background:var(--surf);padding:14px 18px;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.cycles .wave{flex:1 1 150px;min-width:130px}
.cycles svg{width:100%;height:46px;display:block;overflow:visible}
.cycles .base{stroke:var(--hair);stroke-width:1}
.cycles .trace{fill:none;stroke:var(--ox);stroke-width:2;stroke-linejoin:round;
  stroke-dasharray:2400;stroke-dashoffset:2400}
.scene.s3.on .cycles .trace{animation:draw 5s linear infinite}
@keyframes draw{0%{stroke-dashoffset:2400}70%,100%{stroke-dashoffset:0}}
.cycles .num{font-family:var(--mono);font-size:25px;font-weight:600;line-height:1;
  display:block;font-variant-numeric:tabular-nums;color:var(--ink)}
.cycles .cap{font-size:11.5px;line-height:1.45;color:var(--dim);margin-top:5px;display:block;max-width:30ch}
@media(max-width:1180px){.cycles{margin-top:4px}}
@media(prefers-reduced-motion:reduce){.scene.s3.on .cycles .trace{animation:none;stroke-dashoffset:0}}

/* ═══════════ languages ═══════════ */
/* свёрнуто — виден только текущий язык; список остальных — выпадающая
   панель, раскрывается по клику (details/summary, работает без JS) или
   по наведению (hover, десктоп). */
.langsw{position:relative;display:inline-block}
.langsw summary{display:inline-flex;align-items:center;gap:5px;cursor:pointer;
  list-style:none;padding:2px 9px;border:1px solid rgba(255,255,255,.42);
  border-radius:3px}
.langsw summary::-webkit-details-marker{display:none}
.langsw summary::marker{content:""}
.langsw summary::after{content:"";width:0;height:0;margin-left:2px;flex:none;
  border:3px solid transparent;border-top-color:currentColor;
  border-bottom:0;opacity:.7;transform:translateY(1px)}
.langsw:hover summary,.langsw[open] summary{opacity:1;border-color:rgba(255,255,255,.75)}
.langmenu{display:none;position:absolute;top:100%;right:0;z-index:90;margin-top:4px;
  background:var(--ox);border:1px solid rgba(255,255,255,.42);border-radius:4px;
  padding:4px;min-width:150px;box-shadow:0 8px 22px rgba(0,0,0,.35)}
.langsw:hover .langmenu,.langsw[open] .langmenu{display:grid;grid-template-columns:1fr 1fr}
.langmenu a{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;
  text-decoration:none;font-size:11.5px;opacity:.85;border-radius:3px;white-space:nowrap}
.langmenu a:hover{opacity:1;background:rgba(255,255,255,.12);text-decoration:none}
.langmenu a.on{background:rgba(255,255,255,.92);color:var(--ox);opacity:1;font-weight:600}

/* the curtain speaks the page language */
[lang=ru] .ranges a::after{content:"Открыть раздел →"}
[lang=ru] .fam a::after,[lang=ru] .idx a::after{content:"Открыть →"}
[lang=zh] .ranges a::after{content:"查看系列 →"}
[lang=zh] .fam a::after,[lang=zh] .idx a::after{content:"查看 →"}
[lang=es] .ranges a::after{content:"Ver la sección →"}
[lang=es] .fam a::after,[lang=es] .idx a::after{content:"Abrir →"}
[lang=pt] .ranges a::after{content:"Ver a seção →"}
[lang=pt] .fam a::after,[lang=pt] .idx a::after{content:"Abrir →"}
[lang=de] .ranges a::after{content:"Bereich öffnen →"}
[lang=de] .fam a::after,[lang=de] .idx a::after{content:"Öffnen →"}
[lang=fr] .ranges a::after{content:"Voir la section →"}
[lang=fr] .fam a::after,[lang=fr] .idx a::after{content:"Ouvrir →"}
[lang=it] .ranges a::after{content:"Apri la sezione →"}
[lang=it] .fam a::after,[lang=it] .idx a::after{content:"Apri →"}
[lang=tr] .ranges a::after{content:"Bölümü aç →"}
[lang=tr] .fam a::after,[lang=tr] .idx a::after{content:"Aç →"}
[lang=pl] .ranges a::after{content:"Otwórz dział →"}
[lang=pl] .fam a::after,[lang=pl] .idx a::after{content:"Otwórz →"}
[lang=ja] .ranges a::after{content:"シリーズを見る →"}
[lang=ja] .fam a::after,[lang=ja] .idx a::after{content:"開く →"}
[lang=id] .ranges a::after{content:"Buka bagian →"}
[lang=id] .fam a::after,[lang=id] .idx a::after{content:"Buka →"}

/* Chinese needs its own faces and no negative tracking */
[lang=zh]{--sans:"IBM Plex Sans","PingFang SC","Hiragino Sans GB","Microsoft YaHei",
  "Noto Sans SC","Source Han Sans SC",sans-serif}
[lang=zh] h1,[lang=zh] h2,[lang=zh] h3{letter-spacing:0}
/* Японский: латиница из Plex, а кандзи и кана — из системного японского
   шрифта посетителя (свой CJK-шрифт не тащим, он тяжёлый). */
[lang=ja]{--sans:"IBM Plex Sans","Hiragino Kaku Gothic ProN","Hiragino Sans",
  "Yu Gothic","Noto Sans JP","Source Han Sans JP","Meiryo",sans-serif}
[lang=ja] h1,[lang=ja] h2,[lang=ja] h3{letter-spacing:0}
[lang=zh] .scene h1{line-height:1.24}
[lang=zh] .logo .w i{letter-spacing:.19em}
[lang=zh] .sub,[lang=zh] .terms p,[lang=zh] .longrun p{line-height:1.75}
/* Cyrillic runs about a third longer than English, so the headline
   gets a smaller size and a wider measure — each line still has to fit
   on one row, otherwise the mask that reveals it clips the wrong height */
[lang=ru] .scene h1{font-size:33px;max-width:27ch;line-height:1.14}
@media(max-width:760px){[lang=ru] .scene h1{font-size:25px;max-width:none}}
/* Индонезийский: строки заголовка длиннее английских — тот же приём, что
   и для русского, иначе строка переносится и маска обрезает её по высоте */
[lang=id] .scene h1,[lang=es] .scene h1,[lang=pt] .scene h1,[lang=de] .scene h1,
[lang=it] .scene h1,[lang=fr] .scene h1,[lang=tr] .scene h1,[lang=pl] .scene h1{
  font-size:33px;max-width:27ch;line-height:1.15}
@media(max-width:760px){
  [lang=id] .scene h1,[lang=es] .scene h1,[lang=pt] .scene h1,[lang=de] .scene h1,
  [lang=it] .scene h1,[lang=fr] .scene h1,[lang=tr] .scene h1,[lang=pl] .scene h1{
    font-size:25px;max-width:none}}



/* ═══════════ the first scene tells the time of day ═══════════
   Morning when the theme is light, evening when it is dark: the same
   machines, the same fittings, and nothing failed in between. */
[data-theme=day] .bynight,[data-theme=night] .byday{display:none}

/* Sunrise belongs on the right, over the city on the far shore, so the
   drawing card (adapter BB) steps in and leaves a strip of photograph
   beside it. Заголовок разбит на четыре строки не длиннее 18 знаков —
   каждая строка обязана уместиться в один ряд, иначе маска обрежет её. */
.scene.s1 .grid{grid-template-columns:1.02fr .84fr;padding-right:132px}
.scene.s1 .dorb.sun{left:88%;top:37%}
[data-theme=night] .scene.s1 .dorb.moon{left:88%;top:14%}
[data-theme=night] .scene.s1 .dorb.sun{left:88%;top:52%}
.scene.s1 .veil{background:linear-gradient(100deg,rgba(10,20,28,.88) 0%,
  rgba(10,20,28,.7) 40%,rgba(10,20,28,.2) 64%,rgba(10,20,28,.16) 100%)}
[data-theme=night] .scene.s1 .veil{background:linear-gradient(100deg,rgba(6,10,14,.9) 0%,
  rgba(6,10,14,.76) 40%,rgba(6,10,14,.26) 64%,rgba(6,10,14,.22) 100%)}

/* In the tall slice the whole horizon is visible, so the sun can sit low
   and to the right where the skyline is. */
.scene.s2 .dorb.sun{left:60%;margin-left:0;top:36%}
[data-theme=night] .scene.s2 .dorb.moon{left:58%;margin-left:0;top:16%}

@media(max-width:1180px){
  .scene.s1 .grid{grid-template-columns:1fr;padding-right:24px}
  .scene.s1 .dorb.sun,[data-theme=night] .scene.s1 .dorb.moon{left:78%}
}

/* ═══════════════════════ small screens ═══════════════════════
   One compact sticky row: mark, price button, menu. Everything else —
   search, the language of the interface, the main links and the whole
   catalogue tree — waits behind the menu button. */

.btn .sm{display:none}
.burger{display:none;align-items:center;gap:8px;font-family:var(--sans);font-size:13.5px;
  background:none;border:1px solid var(--rule);color:var(--ink);padding:9px 13px;cursor:pointer}
.burger svg{width:15px;height:11px;display:block;flex:none}
.burger svg line{stroke:currentColor;stroke-width:2;transition:transform .25s,opacity .2s}
[data-nav=open] .burger{background:var(--ox);border-color:var(--ox);color:#fff}
[data-nav=open] .burger svg line:nth-child(1){transform:translateY(4.5px) rotate(45deg);transform-origin:center}
[data-nav=open] .burger svg line:nth-child(2){opacity:0}
[data-nav=open] .burger svg line:nth-child(3){transform:translateY(-4.5px) rotate(-45deg);transform-origin:center}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

@media(max-width:1000px){
  .burger{display:inline-flex}
  .top .shell{flex-wrap:wrap;gap:10px;padding-top:10px;padding-bottom:10px;min-height:0}
  .spacer{flex:1}
  /* На узком экране шапка сворачивается в бургер. Правило касается только
     шапки: большое поле поиска на главной живёт в своей панели и прячется
     вместе с меню не должно. */
  .top .mainnav,.top .search,.top .dn{display:none;order:9;width:100%}
  [data-nav=open] .top .mainnav{display:flex;flex-direction:column;gap:0;
    border-top:1px solid var(--rule);padding-top:6px}
  [data-nav=open] .top .search{display:flex;min-width:0}
  [data-nav=open] .top .dn{display:flex;width:auto}
  .mainnav a{padding:12px 13px}
  .layout{grid-template-columns:1fr;gap:14px;padding-top:14px}
  .side{position:static;display:none}
  [data-nav=open] .side{display:block}
  .side a{padding:11px 18px}
  .util .l{display:none}
  .util .r{gap:8px 14px;flex-wrap:wrap;padding:7px 0;width:100%;justify-content:flex-start}
  .util .r .sep{display:none}
  .langsw{margin-left:auto}
}

@media(max-width:760px){
  .shell{padding:0 14px}
  .util{font-size:11.5px}
  .util .mono{font-size:11px}
  .util .r > a:nth-child(3){display:none}      /* WhatsApp — есть в форме заявки */
  .util .r > a:nth-child(5){display:none}      /* каталог PDF — остаётся в подвале */

  .logo .w b{font-size:15px;letter-spacing:.11em}
  .logo .w i{font-size:8px}
  .btn .lg{display:none}
  .btn .sm{display:inline}
  .btn.cta{padding:10px 14px}
  .burger span{display:none}
  .burger{padding:10px 12px}

  /* the hero: let the headline wrap naturally instead of holding the
     line breaks that were drawn for a wide screen */
  .dhero{min-height:0}
  .scene .grid,.scene.s1 .grid,.scene.s2 .grid{grid-template-columns:1fr;
    padding:24px 16px 50px;gap:20px}
  .scene h1{font-size:27px;max-width:none;line-height:1.16}
  [lang=ru] .scene h1{font-size:24px;max-width:none}
  [lang=zh] .scene h1{font-size:25px}
  .scene h1 .ln,.scene h1 .ln i{display:inline;overflow:visible;transform:none}
  .scene h1 .ln::after{content:" "}
  .scene .kick{font-size:11px}
  .scene .sub{font-size:14.5px;margin-bottom:20px}
  .scene .acts{gap:8px}
  .scene .acts .btn{flex:1 1 auto;text-align:center;padding:13px 14px}
  .scene .stage{padding:16px 14px}
  .scene .stage .dwg,.scene.s3 .stage .dwg{max-height:132px}
  .scene.s3 .col{gap:10px}
  .scene.s2 .slice{height:118px}
  .scene.s2 .dorb.sun{left:78%;top:20%}
  [data-theme=night] .scene.s2 .dorb.moon{left:74%;top:14%}
  .cycles{gap:12px;padding:12px 14px}
  .cycles .num{font-size:21px}
  .cycles .cap{font-size:11px;max-width:none}
  .hnav{left:16px;bottom:15px}
  .hnav button{width:34px;height:5px}
  .hnav .place{display:none}

  .phead{padding:13px 16px}
  .phead h2{font-size:15px}
  .tf{grid-template-columns:1fr 1fr}
  .tf a{padding:13px 14px}
  .ranges,.longrun,.terms,.fam{grid-template-columns:1fr}
  .ranges a{flex-direction:row;align-items:center;gap:14px;padding:14px 16px}
  .ranges .th{height:72px;flex:0 0 96px}
  .ranges .th .dwg{max-height:72px;max-width:96px}
  .ranges .tx{gap:5px;flex:1 1 auto}
  .ranges .c{font-size:14px}
  .ranges .n{font-size:12px}
  .ranges a::after,.fam a::after{display:none}
  .longrun>div,.terms div{padding:16px}
  .nums div{padding:12px 16px}
  .std span{flex:1 1 42%;padding:11px 8px;font-size:12px}
  .quote{padding:18px 16px;gap:14px}
  .quote h2{font-size:18px}
  .quote > div:last-child{width:100%}
  .quote .btn{flex:1 1 auto;text-align:center;padding:13px 14px}

  .crumb{padding:14px 16px 0}
  .ptitle{padding:10px 16px 4px}
  .ptitle .code{font-size:25px}
  .ptitle .nm{font-size:15px}
  .tags{padding:0 16px 14px}
  .split .art{padding:16px}
  .split .art .dwg{max-height:180px}
  .spec div{padding:11px 16px}
  th,td{padding:8px 9px;font-size:12.5px}
  td.pn{position:sticky;left:0;background:var(--surf);z-index:1}
  tbody tr:hover td.pn{background:var(--oxSoft)}
  .tfoot{padding:11px 16px}
  .fcols{grid-template-columns:1fr;gap:20px}
  footer{padding:26px 0 22px}
  footer a{padding:6px 0}
}

@media(max-width:480px){
  .artcap{flex-direction:column;gap:5px}
}
@media(max-width:400px){
  .scene h1{font-size:24px}
  [lang=ru] .scene h1{font-size:22px}
  .tf{grid-template-columns:1fr}
}

/* the Chinese label needs a face that has the glyphs, whatever the page language */
.langsw a[hreflang=zh]{font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",
  "Noto Sans SC","Source Han Sans SC","WenQuanYi Micro Hei",sans-serif}
.langsw a[hreflang=ja]{font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans",
  "Yu Gothic","Noto Sans JP","Source Han Sans JP",sans-serif}

.langsw a{display:inline-flex;align-items:center;gap:5px}
.langsw .flag{display:inline-flex;width:16px;height:11px;flex:none;border-radius:2px;
  overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.25) inset}
.langsw .flag svg{width:100%;height:100%;display:block}
.langsw .langcode{line-height:1}


/* сетка серий на странице раздела */
.idx{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:var(--rule)}
.idx a{background:var(--surf);padding:20px 18px;text-decoration:none;display:flex;
  flex-direction:column;gap:11px;position:relative;overflow:hidden}
.idx a:hover{background:var(--pruSoft)}
.idx .th{height:108px;display:flex;align-items:center;justify-content:center;
  transition:transform .34s cubic-bezier(.4,0,.2,1)}
.idx a:hover .th{transform:scale(1.08) translateY(-3px)}
.idx .th .dwg{max-height:108px;width:auto}
.idx .c{font-family:var(--mono);font-size:16px;font-weight:600}
.idx .n{font-size:12.5px;color:var(--dim);line-height:1.45}
.idx .k{font-family:var(--mono);font-size:11.5px;color:var(--ox);margin-top:auto}
td.or{font-family:var(--mono);white-space:nowrap;color:var(--dim)}
@media(max-width:760px){
  .idx{grid-template-columns:1fr 1fr}
  .idx a{padding:14px 12px;gap:8px}
  .idx .th{height:72px}.idx .th .dwg{max-height:72px}
  .idx .c{font-size:14px}.idx .n{font-size:11.5px}
}

/* два исполнения гайки — подпись на странице, а не на чертеже */
.vars{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule)}
.vars div{background:var(--surf);padding:16px 20px}
.vars b{font-family:var(--mono);font-size:15px;font-weight:600;display:block}
.vars span{font-size:13px;color:var(--dim);margin-top:4px;display:block}
@media(max-width:760px){.vars{grid-template-columns:1fr}}

/* подгруппы каталога: резьбовая система или тип рукава */
.side .sub{font-size:11px;color:var(--dim);padding:0 18px;margin:10px 0 4px;
  font-style:normal;opacity:.85}
.side .grp+.sub{margin-top:4px}
.idxgrp{font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--pru);
  margin:0;padding:16px 22px 10px;border-top:1px solid var(--hair)}
.panel .idxgrp:first-of-type{border-top:0}

/* короткое отраслевое обозначение серии рядом с артикулом */
.short{font-family:var(--mono);font-size:11px;color:var(--ox);margin-left:7px}
.shorthead{font-family:var(--mono);font-size:15px;font-weight:600;color:var(--ox);
  border:1px solid var(--ox);padding:2px 8px;margin-left:2px}
.tag.ox{color:var(--ox);border-color:var(--ox)}

/* ═══════════ дерево каталога ═══════════
   Три уровня на <details>: без скрипта, с клавиатуры и в поиске по
   странице ветки раскрываются сами. */
.side details{border-bottom:1px solid var(--hair)}
.side details:last-of-type{border-bottom:0}
.side summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  gap:8px;user-select:none;position:relative;transition:background .16s}
.side summary::-webkit-details-marker{display:none}
.side summary::before{content:"";width:0;height:0;flex:none;
  border-left:4px solid currentColor;border-top:3.5px solid transparent;
  border-bottom:3.5px solid transparent;opacity:.5;transition:transform .18s}
.side details[open]>summary::before{transform:rotate(90deg)}
.side summary span{margin-left:auto;font-family:var(--mono);font-size:10.5px;
  color:var(--dim);font-weight:400}
.side summary:hover{background:var(--raise)}

.side .l1>summary{padding:11px 18px;font-size:13px;font-weight:600;
  letter-spacing:.02em;color:var(--ink)}
/* Название раздела в верхнем уровне — ссылка на его страницу; каретка и
   остальная строка по-прежнему разворачивают ветку. */
.side summary .fam{color:inherit;text-decoration:none;font:inherit;letter-spacing:inherit}
.side summary .fam:hover{text-decoration:underline}
/* Выбранная в меню ветка-фильтр и полоса над карточками указателя */
/* страницы старой сборки: старое дерево спрятано, пока скрипт не подменит его новым */
.side[data-nav] details{display:none}
.side a.flt{padding:8px 18px 8px 30px;font-size:12.5px;color:var(--ink);
  border-bottom:0;line-height:1.35;align-items:baseline}
.side a.flt.sel{color:var(--ox);font-weight:600;background:var(--oxSoft)}
.side a.flt.sel::before{transform:scaleY(1)}
.side a.flt.sel span{color:var(--ox)}
.filt .phead{padding-top:12px;padding-bottom:12px}
.filt h2{color:var(--ox)}
.filt{scroll-margin-top:84px}
.idx a[hidden],.panel[hidden]{display:none}
.side .l2>summary{padding:9px 18px 9px 30px;font-size:12.5px;color:var(--ink)}
.side .l2{border-bottom:0}
.side .l3>summary{padding:8px 18px 8px 42px;font-size:12px;color:var(--dim)}
.side .l3{border-bottom:0}
.side .l1>a,.side .l2>a{padding-left:42px}
.side .l3>a{padding-left:54px}
.side details a{border-bottom:0}
.side details a.on::before{content:"";position:absolute;left:0;top:0;bottom:0;
  width:3px;background:var(--ox)}

/* в дереве — название изделия, номер серии мелко справа */
.side details a{display:flex;align-items:baseline;gap:10px;line-height:1.35;
  padding-top:7px;padding-bottom:7px}
.side details a i{font-style:normal;flex:1;font-size:12.5px}
.side details a>span{flex:none;margin-left:auto;font-family:var(--mono);
  font-size:10.5px;color:var(--dim)}
.side details a.on>span{color:var(--ox)}

/* под какой рукав рассчитан фитинг — последняя цифра кода */
.tag.fit{color:var(--pru);border-color:var(--pru)}
.idx .fitmark{font-family:var(--mono);font-size:10.5px;color:var(--pru);
  border:1px solid var(--pruSoft);padding:2px 6px;align-self:flex-start}

/* четвёртый уровень дерева: тип рукава */
.side .l4>summary{padding:7px 18px 7px 54px;font-size:11.5px;color:var(--dim)}
.side .l4{border-bottom:0}
.side .l4>a{padding-left:66px}

/* баннер вместо прежней сетки «ассортимент в цифрах» */
.numsline{padding:46px 28px;text-align:center;font-size:clamp(22px,3.4vw,38px);
  font-weight:600;letter-spacing:-.01em;line-height:1.25;color:var(--ink)}

/* ─────────── страница «Доставка»: карта морских маршрутов ─────────── */
.dlpanel{padding:0 0 18px}
.dlmap{background:var(--sea);border-bottom:1px solid var(--rule)}
.dlmap svg{display:block;width:100%;height:auto}
.dlsea{fill:var(--sea)}
.dlland{fill:var(--land);stroke:var(--coast);stroke-width:1;stroke-linejoin:round;
  vector-effect:non-scaling-stroke}
.dlroutes .dlline,.dlroutes .dlcase{fill:none;stroke:none}
/* светлая подложка под линией: маршрут читается и там, где проходит
   над сушей или рядом с берегом */
.dlroutes .dlcase.on{stroke:var(--surf);stroke-width:7;stroke-linecap:round;
  stroke-linejoin:round;vector-effect:non-scaling-stroke;opacity:.85}
.dlroutes .dlline.on{stroke:var(--ox);stroke-width:3.4;stroke-linecap:round;
  stroke-linejoin:round;vector-effect:non-scaling-stroke}
.dldot{fill:var(--dim);opacity:.5;stroke:var(--surf);stroke-width:1;
  vector-effect:non-scaling-stroke}
.dldot.on{fill:var(--ox);opacity:1;stroke-width:2}
.dlorigin{fill:var(--pru);stroke:var(--surf);stroke-width:2;
  vector-effect:non-scaling-stroke}
/* подписи порта отправления и выбранного порта прямо на карте */
.dllabel text{font-family:var(--mono);font-size:13px;font-weight:600;
  fill:var(--ink);paint-order:stroke;stroke:var(--surf);stroke-width:3.5;
  stroke-linejoin:round}
#dldlab{opacity:0}
.dlship{fill:var(--ink);stroke:var(--surf);stroke-width:1.2;opacity:0}
/* строка «откуда → куда» и срок */
.dlinfo{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:10px 22px;padding:16px 22px 6px}
.dlfrom{font-family:var(--mono);font-size:13px;color:var(--dim)}
.dlarrow{color:var(--ox);margin:0 8px}
.dlto{font-size:17px;font-weight:600}
.dldays{display:flex;align-items:baseline;gap:10px}
.dllab{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.dlval{font-family:var(--mono);font-size:14px;line-height:1.5;text-align:right}
/* вкладки регионов и список портов */
.dltabs{display:flex;flex-wrap:wrap;gap:6px;margin:14px 22px 0}
.dltabs button{background:var(--surf);border:1px solid var(--rule);padding:7px 13px;
  font:inherit;font-size:12.5px;color:var(--dim);cursor:pointer}
.dltabs button:hover{background:var(--hair);color:var(--ink)}
.dltabs button.on{background:var(--ox);border-color:var(--ox);color:#fff}
.dlports{display:flex;flex-wrap:wrap;gap:6px;margin:10px 22px 0}
.dlports button{flex:1 1 170px;display:flex;justify-content:space-between;align-items:baseline;
  gap:8px;background:var(--surf);border:1px solid var(--rule);border-left:3px solid transparent;
  padding:9px 13px;font:inherit;font-size:13.5px;color:var(--ink);text-align:left;cursor:pointer}
.dlports button span{font-family:var(--mono);font-size:11px;color:var(--dim)}
.dlports button[hidden]{display:none}
.dlports button:hover{background:var(--hair)}
.dlports button.on{border-left-color:var(--ox);background:var(--oxSoft);font-weight:500}
.dlnotes{padding:16px 22px 0;max-width:70ch}
.dlnotes p{margin:0 0 10px;font-size:12.5px;line-height:1.55;color:var(--dim);
  text-align:justify;hyphens:auto;-webkit-hyphens:auto}
/* условия поставки */
.dlterms{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1px;background:var(--rule)}
.dlterm{background:var(--surf);padding:20px 22px}
.dlterm h3{margin:0 0 9px;font-size:15px;font-weight:600}
.dlterm p{margin:0 0 10px;font-size:13.5px;line-height:1.6;color:var(--dim);
  text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.dlterm p:last-child{margin-bottom:0}
@media(max-width:820px){
  .dlinfo{padding:14px 16px 4px}
  .dltabs,.dlports{margin-left:16px;margin-right:16px}
  .dlnotes{padding:14px 16px 0}
  .dlterm{padding:16px}
  .dlval{text-align:left}
}

/* ─────────── форма «Запросить цену» ─────────── */
.qpanel{padding:22px}
.qform label{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;font-size:13px}
.qform label>span{color:var(--dim)}
.qform input[type=text],.qform input[type=email],.qform input[type=tel],.qform textarea{
  font:inherit;font-size:14px;padding:9px 12px;border:1px solid var(--rule);background:var(--surf);
  color:var(--ink);border-radius:0;width:100%;box-sizing:border-box}
.qform textarea{resize:vertical;min-height:120px}
.qform input:focus,.qform textarea:focus{outline:2px solid var(--ox);outline-offset:-1px}
.qrow{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.qfile input[type=file]{font-size:13px}
.qfile small{color:var(--dim);font-size:12px}
.qlist{font-family:var(--mono);font-size:12px;color:var(--pru);min-height:1em}
.qcaptcha{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:14px 16px;
  margin:6px 0 18px;background:var(--hair)}
.qcaptcha span{font-size:13px;color:var(--dim);flex:1 1 100%}
.qcaptcha b{font-family:var(--mono);font-size:18px;font-weight:600}
.qcaptcha input{font:inherit;font-family:var(--mono);font-size:16px;width:84px;padding:7px 10px;
  border:1px solid var(--rule);background:var(--surf);color:var(--ink)}
.qtrap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.qform{position:relative}
.qnote{margin:16px 0 0;padding:12px 16px;font-size:14px;border-left:3px solid var(--rule)}
.qnote.ok{border-color:#2f7d4f;background:#edf7f0;color:#1f5a38}
.qnote.bad{border-color:var(--ox);background:var(--oxSoft)}
.qnote.wait{color:var(--dim)}
[data-theme=night] .qnote.ok{background:#15291d;color:#9fd9b4}
.qalt{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px;padding-top:16px;
  border-top:1px solid var(--rule);font-size:13px;color:var(--dim)}
.qalt a{color:var(--ink)}
@media(max-width:640px){.qrow{grid-template-columns:1fr}.qpanel{padding:16px}}

/* ─────────── страница «Производство» ─────────── */
.fworks{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));overflow:hidden}
.fwork{background:var(--surf);padding:0 0 20px;display:flex;flex-direction:column;
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:0 -1px -1px 0}
.fwork .fphoto{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
/* площадка без фото: чертёж продукта в той же рамке 3:2 */
.fwork .fart{width:100%;aspect-ratio:3/2;display:flex;align-items:center;justify-content:center;
  padding:8% 10%;background:var(--bg);border-bottom:1px solid var(--rule)}
.fwork .fart .dwg{max-width:100%;max-height:100%;width:auto;height:auto}
.fwork .ftx{padding:18px 22px 0}
.fwork .fn{font-family:var(--mono);font-size:11px;color:var(--ox);letter-spacing:.08em}
.fwork h3{margin:4px 0 8px;font-size:16px}
.fwork .fwhat{margin:0 0 8px;font-size:13.5px;color:var(--ink)}
.fwork p{margin:0;font-size:13px;line-height:1.55;color:var(--dim)}
.fgallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--rule)}
.fgallery img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;background:var(--surf)}
/* ─────────── цена и качество: сквозная линия ───────────
   Строка под шапкой (не липкая) и блок на главной. Маркер — маленький ромб фирменного красного. */
.pqstrip{background:var(--bg);border-bottom:1px solid var(--rule);font-size:12.5px;color:var(--dim)}
.pqstrip .shell{display:flex;gap:10px 30px;flex-wrap:wrap;justify-content:center;padding:7px 0}
.pqstrip span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.pqstrip span::before{content:'';width:6px;height:6px;background:var(--ox);transform:rotate(45deg);flex:none}
.pqcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--rule)}
.pqcols>div{background:var(--surf);padding:20px 22px 22px}
.pqcols b{display:block;font-size:15px;font-weight:600;margin-bottom:8px}
.pqcols p{margin:0;font-size:13.5px;line-height:1.6;color:var(--dim)}
@media(max-width:760px){.pqstrip span{white-space:normal}.pqstrip .shell{justify-content:flex-start}}

/* ─────────── контакты ─────────── */
/* Две колонки: слева телефон, под ним почта, ниже два QR-кода;
   справа адрес. Содержимое обеих колонок стоит по центру по высоте. */
.contacts{display:grid;grid-template-columns:1.15fr 1fr;align-items:center}
.contact{padding:30px 28px;display:flex;flex-direction:column;justify-content:center;gap:16px;align-items:flex-start;
  align-self:stretch}
.contact.main{border-right:1px solid var(--rule)}
.contact h3{margin:0 0 4px;font-size:12px;font-family:var(--mono);font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim)}
.contact .crow{display:flex;flex-direction:column;gap:4px}
.contact .big{font-size:20px;font-weight:600;color:var(--ink);text-decoration:none;font-style:normal;line-height:1.4}
.contact.addr .big{font-size:17px}
.contact a.big:hover{color:var(--ox)}
.contact .cnote{margin:0;font-size:13px;line-height:1.55;color:var(--dim)}
.contact .cnote b{color:var(--ink);font-weight:600}
.contact .qrs{display:flex;flex-wrap:wrap;gap:22px 34px;margin-top:6px}
.contact .qr{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:var(--dim);
  font-size:12.5px;line-height:1.4;text-align:center;width:150px}
/* QR всегда чёрный на белом — иначе телефон его не прочтёт, в ночной теме тоже */
.contact .qr img{width:150px;height:150px;background:#fff;padding:6px;border:1px solid var(--rule);filter:none!important}
.contact a.qr:hover{color:var(--ox)}
.contact .btn{margin-top:2px}
@media(max-width:760px){.contacts{grid-template-columns:1fr}
  .contact.main{border-right:0;border-bottom:1px solid var(--rule)}.contact{padding:22px 18px}}
.qform .qcaptcha input{width:96px}

/* ─────────── всплывающий чертёж над карточкой серии ─────────── */
.dpop{position:fixed;z-index:60;display:none;padding:14px 16px 10px;background:var(--surf);
  border:1px solid var(--rule);box-shadow:0 18px 44px rgba(20,28,34,.22);pointer-events:none;
  opacity:0;transform:scale(.94);transform-origin:center;
  transition:opacity .22s ease,transform .26s cubic-bezier(.2,.8,.3,1.1)}
.dpop.show{display:block}
.dpop.on{opacity:1;transform:none;animation:dpopwave .9s ease-out}
.dpop img{display:block;width:100%;height:auto;max-height:70vh;object-fit:contain}
.dpopc{display:block;margin-top:8px;font-family:var(--mono);font-size:13px;font-weight:600;color:var(--ox)}
@keyframes dpopwave{
  0%{box-shadow:0 18px 44px rgba(20,28,34,.22),0 0 0 0 rgba(167,69,47,.55)}
  100%{box-shadow:0 18px 44px rgba(20,28,34,.22),0 0 0 22px rgba(167,69,47,0)}
}
/* волна по карточке от точки, куда пришла мышь */
.idx a,.ranges a{position:relative;overflow:hidden}
.ripple{position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(167,69,47,.34) 0%,rgba(167,69,47,.14) 45%,rgba(167,69,47,0) 70%);
  transform:scale(0);animation:ripple .75s ease-out forwards}
@keyframes ripple{to{transform:scale(1);opacity:0}}
@media(prefers-reduced-motion:reduce){.ripple{display:none}.dpop.on{animation:none}}

/* копирайт в подвале — по центру строки .legal, тем же серым */
.legal .cpy{color:var(--dim)}

/* ─────────── плашка согласия на cookies ───────────
   Появляется только там, где согласие требуется, и только если при
   сборке заданы счётчики. Внизу экрана, не перекрывает шапку. */
.ckbar{position:fixed;left:16px;right:16px;bottom:16px;z-index:95;max-width:720px;margin:0 auto;
  background:var(--surf);border:1px solid var(--rule);box-shadow:0 8px 28px rgba(10,20,28,.18);
  padding:14px 18px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.ckbar p{margin:0;flex:1 1 300px;font-size:13px;line-height:1.5;color:var(--dim)}
.ckbar div{display:flex;gap:8px}
.ckbar .btn{padding:8px 14px;font-size:13px}

/* Полоса «оригинал сайта». Её ставит site.js только на чужом домене
   (копия сайта); на своих доменах и при локальном просмотре её нет.
   Цвета заданы с запасными значениями — на случай, если в копии
   потерялись переменные темы. */
#rlorig{position:fixed;left:0;right:0;top:0;z-index:9999;
  background:var(--ox,#A7452F);color:#fff;font-family:var(--sans,"Segoe UI",Roboto,Arial,sans-serif);
  font-size:13.5px;line-height:1.4;padding:10px 44px 10px 16px;text-align:center;
  box-shadow:0 2px 12px rgba(0,0,0,.25)}
#rlorig a{color:#fff;font-weight:600;text-decoration:underline}
#rlorig button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;
  border:0;color:#fff;font-size:20px;line-height:1;cursor:pointer;padding:4px 8px}