/* Подбор форсунки на главной (catalog/_spec_helper_home.html, nozzle-home.js, nozzle3d.js).
   27.10.2026 (владелец: «на главной это уродский блок», «вообще треш получился», «сделай 3д
   модель как горелка»): белая карточка; слева — 3D-форсунка по Danfoss OD на белом, под ней —
   какой у неё фильтр; плоский чертёж — только пока модель не загрузилась и без WebGL.
   Справа шаги: номер, название, выбранное значение; значения — плашками с заливкой, как
   кнопки горелки в шапке (.b3d-bar), без обводок (правило 13.09.2026); шаги разделены
   воздухом, не линиями. Числа — только высота модели и кегль надписей чертежа. */
.nz{padding:var(--s8) 0}
.nz-head{margin-bottom:var(--s5)}
.nz-head h2{margin:0 0 var(--s2); font:var(--f-section); letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.nz-head p{margin:0; max-width:64ch; font:var(--f-desc); color:var(--muted)}

.nz-card{padding:var(--s6); border-radius:var(--r-md); background:var(--panel); box-shadow:var(--sh-card)}
.nz-body{display:grid; grid-template-columns:minmax(220px, 300px) minmax(0, 1fr); gap:var(--s8); align-items:start}

.nz-pic{position:relative; margin:0; color:var(--ink)}
.nz-pic .nz-stage{position:relative; height:360px; display:grid; place-items:center}
.nz-draw{display:block; width:100%; height:auto; transition:opacity .5s ease}
.nz-gl{position:absolute; inset:0; z-index:1; width:100%; height:100%; display:block; cursor:grab; opacity:0; transition:opacity .8s ease; touch-action:pan-y}
.nz-gl:active{cursor:grabbing}
.nz-3d .nz-gl{opacity:1}
/* плоский чертёж под моделью мышь не ловит: иначе модель хватается только за края (27.10.2026) */
.nz-3d .nz-draw{opacity:0; pointer-events:none}
.nz-draw text{font-family:var(--mono); font-size:14px; font-weight:700; letter-spacing:.04em; text-anchor:middle;
  fill:var(--dim); transition:fill var(--t-fast)}
.nz-draw text.on{fill:var(--ink)}
.nz-num{width:20px; height:20px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:var(--dark); color:var(--dark-ink); font:var(--f-label); font-weight:600; font-style:normal}
.nz-pic figcaption{margin-top:var(--s3); font:var(--f-desc); color:var(--muted); text-align:center}
.nz-filter{display:block; font:var(--f-name); color:var(--ink)}
.nz-filter:empty{display:none}

.nz-steps{display:grid; gap:var(--s7); padding-top:var(--s3)}
.nz-step-head{display:flex; align-items:center; gap:var(--s2); margin-bottom:var(--s3)}
.nz-step-head b{font:var(--f-name); font-weight:600; color:var(--ink)}
.nz-step-head .nz-val{margin-left:auto; font:var(--f-small); color:var(--muted)}
.nz-step.done .nz-val{color:var(--ink); font-weight:600}
.nz-opts{display:flex; flex-wrap:wrap; gap:var(--s2)}
.nz-opts button{height:var(--h-md); min-width:56px; padding:0 var(--s4); border:0; border-radius:var(--r-sm); background:var(--chip);
  color:var(--ink); cursor:pointer; font:500 13px/1 var(--mono); transition:background var(--t-fast), color var(--t-fast)}
.nz-opts button:hover{background:var(--grey-hi)}
.nz-opts button[aria-pressed="true"]{background:var(--dark); color:var(--dark-ink)}
.nz-opts button:disabled{color:var(--faint); background:var(--panel); cursor:default}
.nz-opts button:focus-visible{outline:none; box-shadow:var(--focus)}
/* «ещё N ▾» — такой же плашкой; под ней всплывающая сетка остальных значений теми же
   плашками (владелец 27.10.2026: «кастомные красивые выпадающие списки»). Выбранное из
   сетки — на самой кнопке, тёмной. */
/* сетка — во всю ширину строки шага под кнопками, а не от самой кнопки: та стоит справа,
   и сетка от неё уходила за край экрана */
.nz-opts{position:relative}
.nz-more{position:static}
.nz-opts .nz-more-btn{min-width:0; background:var(--chip); color:var(--muted); white-space:nowrap}
.nz-opts .nz-more-btn:hover, .nz-opts .nz-more-btn[aria-expanded="true"]{background:var(--grey-hi); color:var(--ink)}
.nz-opts .nz-more-btn.on{background:var(--dark); color:var(--dark-ink)}
.nz-pop{position:absolute; z-index:20; top:calc(100% + var(--s2)); left:0; right:0; max-height:300px; overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-wrap:wrap; gap:var(--s2); padding:var(--s3); border-radius:var(--r-md);
  background:var(--panel); box-shadow:var(--sh-pop, var(--sh-card))}
.nz-pop[hidden]{display:none}

.nz-foot{display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s2) var(--s4); margin-top:var(--s7)}
.nz-count{margin:0; font:var(--f-block); color:var(--ink)}
.nz:not(.chosen) .nz-count{font:var(--f-desc); color:var(--muted)}
.nz-reset{border:0; background:none; padding:0; cursor:pointer; font:var(--f-button); letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.nz-reset:hover{color:var(--ink)}
.nz-results{margin-top:var(--s5)}
.nz-results:empty{display:none}
.nz.busy .nz-results, .nz.busy .nz-count{opacity:.45; transition:opacity var(--t-fast)}
.nz-results .sh-more{display:inline-block; margin-top:var(--s5); font:var(--f-button); letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); text-decoration:none}
.nz-results .sh-more:hover{color:var(--ink)}

.nz-brands{display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s2) var(--s4); margin:var(--s5) 0 0}
.nz-brands span{font:var(--f-label); letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.nz-brands a{font:var(--f-name); color:var(--ink); text-decoration:none}
.nz-brands a:hover{text-decoration:underline}
.nz-brands a.all{margin-left:auto; font:var(--f-button); letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}

@media (max-width:800px){
  .nz-card{padding:var(--s4)}
  .nz-body{grid-template-columns:minmax(0, 1fr); gap:var(--s5)}
  .nz-pic .nz-stage{height:280px}
  .nz-opts button{height:44px}
  .nz-brands a.all{margin-left:0; flex-basis:100%}
}