/* ===== Конфігуратор запиту (компонент Zapyt.astro, скрипт /js/zapyt.js).
   Світне інженерне креслення в стилі «Атріуму»: холодні лінії будови, зелена кабіна,
   бурштинові розмірні лінії. Токени кольорів і шрифтів беруться з base.css.
   Розкладка залежить від ширини самого блока (container queries), а не вікна. ===== */

.zq{--zl:#B9E0DA;--zd:rgba(170,225,210,.36);--zb:#7FD4E6;--za:#FFC98A;position:relative;container-type:inline-size}
.zq-head{margin-bottom:clamp(20px,3vw,30px)}
.zq-head h2{margin-bottom:14px}
.zq-head .lead{max-width:44em}

/* проста форма без JavaScript; зі скриптом її замінює конфігуратор */
.zq-fb{max-width:560px}
.zq.zq-wait .zq-fb,.zq.zq-on .zq-fb{display:none}
.zq.zq-wait:not(.zq-on)::after{content:"";display:block;height:560px;border:1px solid var(--ln);border-radius:12px;background:linear-gradient(110deg,rgba(11,25,27,.6) 30%,rgba(22,46,50,.7) 50%,rgba(11,25,27,.6) 70%) 0 0/300% 100%;animation:zq-wait 1.6s linear infinite}
@keyframes zq-wait{to{background-position:-150% 0}}

/* ---- вибір типу: чотири плитки з малими анімованими піктограмами ---- */
.zq-types{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px}
.zq-type{display:flex;align-items:center;gap:14px;min-height:78px;padding:12px 16px;border:1px solid var(--ln);border-radius:12px;background:rgba(11,25,27,.62);color:var(--tx2);text-align:left;cursor:pointer;
  transition:border-color .25s,background .3s,box-shadow .3s,color .2s,transform .25s var(--ez)}
.zq-type:hover{border-color:var(--ln2);transform:translateY(-2px);color:#fff}
.zq-type svg{flex:none;width:46px;height:46px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:var(--mu);transition:color .25s}
.zq-type svg .a{opacity:.5}
.zq-type span{min-width:0}
.zq-type b{display:block;font:500 16px/1.2 var(--fd);letter-spacing:-.005em}
.zq-type small{display:block;margin-top:5px;font-size:13px;line-height:1.3;color:var(--mu)}
.zq-type[aria-selected=true]{border-color:var(--g);background:radial-gradient(120% 150% at 0 0,rgba(133,199,86,.22),rgba(133,199,86,0) 62%),rgba(11,25,27,.82);color:#fff;
  box-shadow:0 0 0 1px rgba(133,199,86,.22),0 0 36px -10px rgba(133,199,86,.55)}
.zq-type[aria-selected=true] svg{color:var(--g2);filter:drop-shadow(0 0 5px rgba(133,199,86,.65))}
.zq-type .m{transform-box:fill-box}
.zq-live .zq-type[aria-selected=true][data-t=lift] .m,.zq-type[data-t=lift]:hover .m{animation:zq-i-up 3.4s var(--ez) infinite}
.zq-live .zq-type[aria-selected=true][data-t=platform] .m,.zq-type[data-t=platform]:hover .m{animation:zq-i-up 3.8s var(--ez) infinite}
.zq-type[data-t=escalator] .m,.zq-type[data-t=travelator] .m{stroke-dasharray:4 3.4;stroke-width:2.2}
.zq-live .zq-type[aria-selected=true][data-t=escalator] .m,.zq-type[data-t=escalator]:hover .m,.zq-live .zq-type[aria-selected=true][data-t=travelator] .m,.zq-type[data-t=travelator]:hover .m{animation:zq-i-run .8s linear infinite}
@keyframes zq-i-up{0%,10%{transform:none}45%,60%{transform:translateY(-18px)}95%,100%{transform:none}}
@keyframes zq-i-run{to{stroke-dashoffset:-7.4}}

/* ---- каркас ---- */
.zq-grid{display:grid;gap:18px}
.zq-main{min-width:0}
.zq-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:12px}
.zq-tabs{display:none;gap:6px}
.zq-tabs button{min-height:44px;padding:0 16px;border:1px solid var(--ln2);border-radius:8px;background:none;color:var(--mu);font:600 14.5px/1 var(--ft);cursor:pointer}
.zq-tabs button[aria-selected=true]{border-color:var(--g);background:rgba(133,199,86,.14);color:var(--g2)}

/* ---- креслення ---- */
.zq-stages{display:grid;gap:12px}
.zq-stages.n2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.zq-stage{position:relative;height:clamp(420px,60vh,560px);border:1px solid var(--ln);border-radius:12px;overflow:hidden;
  background:radial-gradient(70% 58% at 50% 44%,rgba(40,84,78,.34),rgba(40,84,78,0) 72%),
    linear-gradient(rgba(170,225,210,.085) 1px,transparent 1px) 0 -1px/100% 100px,linear-gradient(90deg,rgba(170,225,210,.085) 1px,transparent 1px) -1px 0/100px 100%,
    linear-gradient(rgba(170,225,210,.04) 1px,transparent 1px) 0 -1px/100% 20px,linear-gradient(90deg,rgba(170,225,210,.04) 1px,transparent 1px) -1px 0/20px 100%,
    linear-gradient(180deg,#0C1B1E,#070F10);
  box-shadow:inset 0 0 70px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06)}
.zq-stages:not(.n2) .zq-stage{height:clamp(360px,52vh,500px)}
.zq-stage::before,.zq-stage::after{content:"";position:absolute;width:16px;height:16px;border:solid rgba(133,199,86,.7);pointer-events:none}
.zq-stage::before{right:10px;top:10px;border-width:1px 1px 0 0}
.zq-stage::after{left:10px;bottom:10px;border-width:0 0 1px 1px}
.zq-cap{position:absolute;left:14px;top:13px;font:600 11.5px/1 var(--ft);letter-spacing:.16em;text-transform:uppercase;color:var(--mu);pointer-events:none}
.zq-cap i{margin-right:9px;font-style:normal;color:var(--g)}
.zq-svg{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 0 4px rgba(133,199,86,.34))}
.zq-ov{position:absolute;inset:0;pointer-events:none}
.zq-ov>*{position:absolute;left:0;top:0;pointer-events:auto;animation:zq-fade .5s .45s backwards}
@keyframes zq-fade{from{opacity:0}}

/* лінії креслення: кожна нова лінія «промальовується» з однаковою швидкістю пера */
.zq-svg :is(line,rect,path,circle,ellipse){stroke-linecap:round;stroke-linejoin:round;animation:zq-draw 1s var(--ez) backwards}
@keyframes zq-draw{from{stroke-dasharray:0 1300;fill-opacity:0}to{stroke-dasharray:1300 0}}
.zq-ht{fill:none;stroke:rgba(185,224,218,.4);stroke-width:1;animation:none!important}
.zq-w{stroke:var(--zl);stroke-width:1.3}
.zq-w.n{fill:none;stroke-width:1.5}
.zq-w3{stroke:var(--zl);stroke-width:3}
.zq-walls.steel .zq-w{fill:rgba(185,224,218,.09);stroke-width:1.7}
.zq-walls.none .zq-w{fill:none;stroke:var(--zd);stroke-dasharray:5 4}
.zq-fill{stroke:none;opacity:.75}
.zq-thin{fill:none;stroke:var(--zd);stroke-width:1}
.zq-thin.d{stroke-dasharray:4 4}
.zq-thin.g{stroke:var(--g)}
.zq-gnd{stroke:var(--zl);stroke-width:1.4}
.zq-ax{fill:none;stroke:rgba(133,199,86,.42);stroke-width:1;stroke-dasharray:10 3 2 3}
.zq-cab{stroke:var(--g2);stroke-width:1.8;fill:rgba(133,199,86,.07)}
.zq-cab.f{fill:rgba(14,36,30,.94)}
.zq-cab.gl{stroke:var(--zb);fill:rgba(127,212,230,.1)}
.zq-cab.f.gl{fill:rgba(12,32,38,.9)}
path.zq-cab{fill:none;stroke-width:2.2}
.zq-cwt{stroke:#8FB0AE;stroke-width:1.1}
.zq-rail{stroke:var(--zl);stroke-width:1;fill:rgba(185,224,218,.26)}
.zq-rail2{fill:none;stroke:var(--g2);stroke-width:2.4}
.zq-rope{stroke:var(--zd);stroke-width:1}
.zq-mach{stroke:var(--za);stroke-width:1.3;fill:rgba(255,201,138,.14)}
.zq-mast{stroke:var(--zl);stroke-width:1.2;fill:rgba(185,224,218,.1)}
.zq-glass{stroke:var(--zb);stroke-width:1.1;fill:rgba(127,212,230,.07)}
.zq-glass.n{stroke:none}
.zq-hr{fill:none;stroke:var(--zb);stroke-width:2.2}
.zq-truss{stroke:var(--zl);stroke-width:1.4;fill:rgba(11,25,27,.86)}
.zq-br{fill:none;stroke:var(--zd);stroke-width:1}
.zq-belt{fill:none;stroke:var(--g2);stroke-width:2.6;stroke-dasharray:9 5;animation:none!important}
.zq-steps{fill:none;stroke:var(--g2);stroke-width:1.5;animation:none!important}
.zq-live .zq-belt{animation:zq-belt .7s linear infinite!important}
.zq-live .zq-steps{animation:zq-go 1s linear infinite!important}
@keyframes zq-belt{to{stroke-dashoffset:-14}}
@keyframes zq-go{to{transform:translate(var(--sx),var(--sy))}}
.zq-ghost{fill:none;stroke:var(--zd);stroke-width:1;stroke-dasharray:6 4}
.zq-man{fill:none;stroke:rgba(234,242,239,.72);stroke-width:1.3}
.zq-ps{stroke:rgba(169,229,124,.5);stroke-width:1;fill:rgba(133,199,86,.1)}
.zq-ps.h{fill:rgba(133,199,86,.32)}
.zq-dp{stroke:var(--zb);stroke-width:1;fill:rgba(127,212,230,.4);transition:transform .9s var(--ez)}
.zq-open .zq-dp{transform:translate(var(--ox),var(--oy))}
.zq-ld{stroke:var(--zb);stroke-width:1;fill:rgba(127,212,230,.22);transition:fill .4s,stroke .4s}
.zq-ld.on{stroke:var(--g2);fill:rgba(169,229,124,.85)}
.zq-cdr{stroke:var(--zb);stroke-width:2}
.zq-beam{stroke:none;fill:rgba(169,229,124,.24);opacity:0;transition:opacity .5s;animation:none!important}
.zq-open .zq-beam{opacity:1}
.zq-drag .zq-dp{transition:none}
.zq-ex{stroke:rgba(255,201,138,.5);stroke-width:1}
.zq-dl{fill:none;stroke:var(--za);stroke-width:1}
.zq-ah{fill:var(--za);stroke:none}
.zq-t{fill:var(--mu);font:500 10.5px/1 var(--ft);letter-spacing:.04em}
.zq-t.g{fill:var(--g2);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase}
.zq-t.e{text-anchor:end;font-variant-numeric:tabular-nums}
.zq-t.d{fill:var(--za);font:500 12px/1 var(--fd)}

/* ---- модель 3D (zapyt3d.js): канвас, підписи розмірів, кнопка «повернути вигляд» ---- */
.zq-s3{display:none}
.zq-3d .zq-s3{display:block}
.zq-cv{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y;cursor:grab;outline:0;animation:zq-fade .7s backwards}
.zq-cv.on{cursor:grabbing}
.zq-l3{padding:4px 7px;border:1px solid rgba(255,201,138,.48);border-radius:6px;background:rgba(7,15,16,.84);color:var(--za);font:500 11.5px/1 var(--fd);white-space:nowrap;translate:-50% -50%}
.zq-ov>.zq-l3{pointer-events:none}
.zq-l3.g{border-color:rgba(133,199,86,.55);color:var(--g2);font:600 10.5px/1 var(--ft);letter-spacing:.08em;text-transform:uppercase}
.zq-l3.w{border-color:var(--ln2);color:var(--tx2);font:500 12px/1 var(--ft)}
.zq-l3.a{border-style:dashed}
.zq-l3.b{translate:-50% 14px}
.zq-l3.r{translate:12px -50%}
.zq-l3.g,.zq-l3.w{translate:calc(-100% - 14px) -50%}
.zq-s3 .zq-tip{left:auto;right:34px;top:13px;bottom:auto;translate:none;font-size:12px;animation:zq-tipout .8s 8s forwards}
@keyframes zq-tipout{to{opacity:0}}
.zq-rst{position:absolute;right:12px;bottom:12px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--ln2);border-radius:50%;background:rgba(7,15,16,.82);color:var(--tx2);cursor:pointer;transition:border-color .2s,color .2s}
.zq-rst svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.zq-rst:hover{border-color:var(--g);color:var(--g2)}
.zq-3d .zq-stages{grid-template-columns:minmax(0,1.14fr) minmax(0,1fr)}
.zq-3d .zq-stage:not(.on):not(.zq-s3){display:none}
.zq-3d .zq-stage,.zq-3d .zq-stages:not(.n2) .zq-stage{height:clamp(420px,60vh,560px)}
.zq-3d .zq-tabs{display:flex;margin-left:auto}
.zq-3d .zq-tg.unk{margin-left:0}
.zq-3d .zq-tabs.one,.zq-tabs [data-v="3d"]{display:none}
.zq-3d .zq-stage:not(.zq-s3) .zq-free,.zq-stage+.zq-stage .zq-free{display:none}

/* ---- числа на розмірних лініях ---- */
.zq-chip{display:inline-flex;align-items:baseline;gap:3px;padding:5px 7px;border:1px solid rgba(255,201,138,.5);border-radius:6px;background:rgba(7,15,16,.92);color:var(--za);font:500 12px/1 var(--fd);white-space:nowrap;cursor:text;translate:-50% -50%;
  transition:border-color .2s,box-shadow .2s,color .2s}
.zq-chip input{width:5ch;min-width:0;padding:0;border:0;border-radius:0;background:none;color:inherit;font:inherit;text-align:center;outline:0;font-variant-numeric:tabular-nums;-webkit-appearance:none;appearance:none}
.zq-chip i{font:400 10px/1 var(--ft);font-style:normal;color:rgba(255,201,138,.72)}
.zq-chip:hover{border-color:var(--za)}
.zq-chip:focus-within{border-color:var(--g2);box-shadow:0 0 0 3px rgba(133,199,86,.26);color:#fff}
.zq-chip.ro{border-style:dashed;border-color:var(--ln2);color:var(--tx2);font:500 12px/1 var(--ft);cursor:default}

/* ---- ручки: видима кнопка 30 px, зона дотику 44 px ---- */
.zq-h{display:grid;place-items:center;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;cursor:ew-resize;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;outline:0}
.zq-h.v{cursor:ns-resize}
.zq-h svg{width:30px;height:30px;padding:5px;border-radius:50%;background:var(--g);color:var(--gd);fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;
  box-shadow:0 0 0 1px rgba(169,229,124,.7),0 0 16px rgba(133,199,86,.8);transition:scale .2s var(--ez),background .2s}
.zq-h.v svg{rotate:90deg}
.zq-h:hover svg,.zq-h.on svg{background:var(--g2);scale:1.15}
.zq-h:focus-visible svg{outline:2px solid #fff;outline-offset:2px}
.zq-h::before{content:"";position:absolute;inset:7px;border-radius:50%;border:1px solid var(--g2);opacity:0;pointer-events:none}
.zq-live:not(.zq-geo) .zq-h::before{animation:zq-ping 2.4s ease-out infinite}
@keyframes zq-ping{0%{opacity:.85;transform:scale(.8)}70%,100%{opacity:0;transform:scale(1.75)}}

.zq-tip,.zq-free{position:absolute;left:50%;bottom:14px;translate:-50% 0;white-space:nowrap;pointer-events:none;transition:opacity .4s,visibility 0s}
.zq-tip{font-size:12.5px;color:var(--mu);letter-spacing:.02em}
.zq-geo .zq-tip,.zq-unk .zq-tip{opacity:0}
.zq-free{padding:10px 18px;border-radius:22px;background:var(--g);color:var(--gd);font:600 14.5px/1 var(--ft);box-shadow:0 0 30px rgba(133,199,86,.5);opacity:0;visibility:hidden}
.zq-unk .zq-free{opacity:1;visibility:visible}
.zq-unk .zq-dims,.zq-unk .zq-ov>*,.zq-unk .zq-strip,.zq-unk .zq-hint{display:none}

/* ---- керування під кресленням ---- */
.zq-hint{min-height:1.5em;margin-top:12px;font-size:15px;line-height:1.5;color:var(--tx2)}
.zq-strip{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 18px;margin-top:14px}
.zq-strip [hidden]{display:none!important}
.zq-st-l{display:block;font:600 11.5px/1.2 var(--ft);letter-spacing:.1em;text-transform:uppercase;color:var(--mu)}
.zq-st{display:grid;grid-template-columns:44px 68px 44px;gap:7px 0;align-items:center}
.zq-st .zq-st-l{grid-column:1/-1}
.zq-st input{width:100%!important;height:44px;min-width:0;padding:0 2px;border:1px solid var(--ln2);border-width:1px 0;border-radius:0;background:rgba(7,15,16,.6);color:var(--tx);font:600 16px/1 var(--ft);text-align:center;font-variant-numeric:tabular-nums;-webkit-appearance:none;appearance:none}
.zq-st input:focus{outline:0;border-color:var(--g);box-shadow:inset 0 0 0 1px var(--g)}
.zq-b{position:relative;width:44px;height:44px;padding:0;border:1px solid var(--ln2);border-radius:8px 0 0 8px;background:rgba(234,242,239,.05);cursor:pointer;transition:background .2s,border-color .2s}
.zq-b.pl{border-radius:0 8px 8px 0}
.zq-b:hover{background:rgba(133,199,86,.16);border-color:var(--g)}
.zq-b::before,.zq-b.pl::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:1px;background:var(--g2)}
.zq-b.pl::after{transform:rotate(90deg)}
.zq-st.dm{display:none}
.zq-st.zq-stp{grid-template-columns:36px 34px 36px;gap:6px 0;padding:9px 10px 10px;border:1px solid var(--ln);border-radius:10px;background:rgba(7,15,16,.84)}
.zq-stp .zq-b{width:36px;height:36px}
.zq-stp input{height:36px;font-size:15px}
.zq-sg{display:grid;align-content:start;gap:7px;min-width:0}
.zq-seg{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px}
.zq-seg button{min-height:40px;padding:0 13px;border:1px solid var(--ln2);border-radius:8px;background:rgba(234,242,239,.04);color:var(--tx2);font:500 14.5px/1.1 var(--ft);cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.zq-seg button:hover{border-color:var(--g);color:#fff}
.zq-seg button[aria-pressed=true]{border-color:var(--g);background:rgba(133,199,86,.17);color:var(--g2);box-shadow:inset 0 0 0 1px rgba(133,199,86,.42)}
.zq-sg.sub .zq-st-l{display:none}
.zq-sg.sub button{min-height:44px;padding:0 15px;font-weight:600;color:var(--tx)}
.zq-tg{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 15px 0 10px;border:1px solid var(--ln2);border-radius:22px;background:rgba(234,242,239,.04);color:var(--tx);font:500 14.5px/1 var(--ft);cursor:pointer;transition:border-color .2s,background .2s}
.zq-tg i{position:relative;flex:none;width:38px;height:22px;border-radius:11px;background:rgba(170,225,210,.22);transition:background .25s}
.zq-tg i::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--tx);transition:transform .25s var(--ez),background .25s}
.zq-tg[aria-checked=true]{border-color:var(--g);background:rgba(133,199,86,.12)}
.zq-tg[aria-checked=true] i{background:var(--g)}
.zq-tg[aria-checked=true] i::after{transform:translateX(16px);background:var(--gd)}
.zq-tg.unk{margin-left:auto;border-color:rgba(255,201,138,.55);font-weight:600}
.zq-tg.unk[aria-checked=true]{border-color:var(--g)}
.zq-opts{display:grid;gap:18px 26px;margin-top:22px;padding-top:22px;border-top:1px solid var(--ln)}
.zq-sg.br{grid-column:1/-1}

/* ---- підсумок і контакти ---- */
.zq-side{padding:22px 22px 24px}
.zq-sum h3{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;font-size:19px}
.zq-sum h3 small{font:400 13px/1.2 var(--ft);letter-spacing:0;color:var(--di)}
.zq-sum-l{margin:14px 0 20px;border-top:1px solid var(--ln)}
.zq-sum-l li{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid var(--ln);font-size:14.5px;line-height:1.35}
.zq-sum-l span{flex:none;max-width:48%;color:var(--mu)}
.zq-sum-l b{font-weight:600;text-align:right;color:var(--tx);overflow-wrap:anywhere}
.zq-sum-l .lo b{font-weight:400;color:var(--di)}
.zq-sum-l .hi b{color:var(--wm)}
.zq-sum-l .es b{color:var(--g2)}
.zq-form{display:grid;gap:12px}
.zq-form .btn{width:100%}
.zq-more{display:grid;gap:12px}
.zq-more-b{display:flex;align-items:center;gap:8px;min-height:44px;padding:0;border:0;background:none;color:var(--tx2);font:500 14.5px/1.3 var(--ft);text-align:left;cursor:pointer}
.zq-more-b::before{content:"";flex:none;width:8px;height:8px;margin:0 4px 3px 2px;border:solid var(--g);border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .25s var(--ez)}
.zq-more-b[aria-expanded=true]::before{transform:rotate(225deg);margin-bottom:-3px}
.zq-more-b em{font-style:normal;color:var(--di)}
.zq-more-b:hover{color:#fff}
.zq-note{font-size:13.5px;line-height:1.45;color:var(--mu)}
.zq-form .ferr{grid-column:auto}

/* ---- подяка ---- */
.zq-done{display:grid;justify-items:center;gap:14px;padding:clamp(28px,6cqw,64px) clamp(20px,5cqw,56px);text-align:center;border-color:rgba(133,199,86,.5)}
.zq-done>svg{width:66px;height:66px;fill:none;stroke:var(--g2);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 10px rgba(133,199,86,.6))}
.zq-done h3{font-size:clamp(22px,3cqw,30px)}
.zq-done p{max-width:34em;color:var(--tx2)}
.zq-done .zq-photo{margin-top:8px;color:var(--tx)}
.zq-done-b{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:6px}
.zq-again{min-height:54px;padding:0 18px;border:0;background:none;color:var(--mu);font:500 15px/1 var(--ft);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.zq-again:hover{color:#fff}

/* ---- ширина блока: комп’ютер, планшет, телефон ---- */
@container (min-width:1040px){
  .zq-grid{grid-template-columns:minmax(0,1fr) 376px;align-items:start;gap:22px}
  .zq-side{position:sticky;top:calc(var(--hh,72px) + 14px)}
}
@container (min-width:600px){
  .zq-opts{grid-template-columns:1fr 1fr}
}
@container (max-width:900px){
  .zq-types{grid-template-columns:1fr 1fr}
}
@container (max-width:719px){
  .zq-type{min-height:64px;padding:10px 12px;gap:10px}
  .zq-type svg{width:36px;height:36px}
  .zq-type b{font-size:14.5px}
  .zq-type small{font-size:12px}
  .zq-tabs,.zq-3d .zq-tabs.one{display:flex;flex:1 1 100%;margin-left:0}
  .zq-tabs [data-v="3d"]{display:block}
  .zq-tabs button{flex:1 1 0;padding:0 8px}
  .zq-stages.n2,.zq-3d .zq-stages{grid-template-columns:minmax(0,1fr)}
  .zq-stages.n2 .zq-stage:not(.on):not(.zq-s3),.zq-3d.zq-t3 .zq-stage:not(.zq-s3),.zq-3d:not(.zq-t3) .zq-s3{display:none}
  .zq-stage,.zq-stages:not(.n2) .zq-stage,.zq-3d .zq-stage,.zq-3d .zq-stages:not(.n2) .zq-stage{height:430px}
  .zq[data-m=escalator] .zq-stage,.zq[data-m=travelator] .zq-stage{height:340px}
  .zq-stage .zq-free{display:block!important}
  .zq-s3 .zq-tip{display:none}
  .zq-bar .zq-sg.sub{flex:1 1 100%}
  .zq-sg.sub .zq-seg button{flex:1 1 auto}
  .zq-st.dm{display:grid}
  .zq-st.dm.off{display:none}
  .zq-strip{gap:14px 12px}
  .zq-chip{padding:5px 6px;font:600 16px/1 var(--ft)}
  .zq-chip i{display:none}
  .zq-chip.ro{font-size:12.5px}
  .zq-tg.unk{margin-left:0}
  .zq-side{padding:18px 16px 20px}
  .zq-ov>.zq-stp{display:none}
}
@container (max-width:420px){
  .zq-type small{display:none}
  .zq-type{min-height:56px;padding:8px 10px;gap:8px}
  .zq-type svg{width:30px;height:30px}
  .zq-type b{font-size:13px}
}
@media (pointer:coarse){
  .zq-st.dm{display:grid}
  .zq-ov>.zq-stp{display:none}
  .zq-seg button{min-height:44px}
  .zq-chip input{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .zq *,.zq *::before,.zq *::after{animation:none!important;transition:none!important}
}

/* сторінка з одним типом (лише платформа): плитки вибору типу не потрібні */
.zq-types:has(> .zq-type:only-child){display:none}