[hidden]{display:none!important}
:root{--red:#de262d;--red-d:#a5262a;--ink:#111216;--ink2:#343a40;--mut:#6c757d;--line:#d8dcdf;--bg:#f4f5f6;--card:#fff;--ok:#1d7f4e;--warn:#b26a00;--no:#c0262c;color-scheme:light}
*{box-sizing:border-box}html,body{margin:0}
body{font-family:'DM Sans',system-ui,sans-serif;color:var(--ink);background:var(--bg);font-size:15px;line-height:1.45}
h1,h2,h3{font-family:Teko,sans-serif;font-weight:600;letter-spacing:.01em;line-height:1;margin:0}
h1{font-size:40px;margin:6px 0 4px}h2{font-size:22px;margin:22px 0 10px;text-transform:uppercase}h3{font-size:24px;margin:16px 0 8px}h4{margin:16px 0 6px;font-size:14px}
button,input,select{font:inherit;color:inherit}
.top{display:flex;align-items:center;gap:18px;padding:0 16px;height:56px;background:var(--ink);color:#fff}
.brand{font-family:Teko,sans-serif;font-size:28px;color:#fff;text-decoration:none;letter-spacing:.02em}.brand span{color:var(--red)}
.crumb{font-size:13px;color:#c9ccd1}.proto{font-style:normal;background:var(--red);color:#fff;padding:1px 6px;margin-left:6px;font-size:11px;text-transform:uppercase}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 420px;min-height:calc(100vh - 56px)}
.stage-wrap{position:relative;background:linear-gradient(#e9ecef,#d8dcdf);min-height:420px}
#stage{position:sticky;top:0;width:100%;height:calc(100vh - 56px)}
.dz3d-canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}
.dz3d-overlay{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.dz3d-hs{position:absolute;left:0;top:0;pointer-events:auto;border:0;background:none;padding:0;cursor:pointer;opacity:0;transition:opacity .2s}
.dz3d-hs.vis{opacity:1}.dz3d-hs i{display:block;width:22px;height:22px;border-radius:50%;background:var(--red);box-shadow:0 0 0 5px rgba(222,38,45,.25);transform:translate(-50%,-50%)}
.dz3d-hs span{position:absolute;left:16px;top:-12px;white-space:nowrap;background:var(--ink);color:#fff;font-size:12px;padding:3px 7px;opacity:0;transition:opacity .15s}
.dz3d-hs:hover span,.dz3d-hs:focus-visible span,.dz3d-hs.on span{opacity:1}
.dz3d-hs-ctrl i{background:#fff;box-shadow:0 0 0 4px rgba(17,18,22,.25)}
.dz3d-card{position:absolute;left:16px;bottom:70px;max-width:320px;background:#fff;padding:14px 16px;box-shadow:0 6px 24px rgba(0,0,0,.15);pointer-events:auto}
.dz3d-card h4{margin:0 0 6px;font-size:16px}.dz3d-card p{margin:0;font-size:14px}.dz3d-card-x{position:absolute;right:8px;top:6px;border:0;background:none;font-size:18px;cursor:pointer}.dz3d-card-more{display:inline-block;margin-top:8px;color:var(--red)}
.dz3d-load{position:absolute;inset:0;display:grid;place-content:center;gap:10px;text-align:center;color:var(--ink2);transition:opacity .5s}.dz3d-load.done{opacity:0;pointer-events:none}
.dz3d-load-bar{width:220px;height:3px;background:#c7cbd0}.dz3d-load-bar i{display:block;height:100%;width:0;background:var(--red);transition:width .2s}
.dz3d-fail{color:var(--no);max-width:320px}
.fallback{position:absolute;inset:0;display:grid;place-content:center;padding:24px;text-align:center;background:#eef0f2}.fallback img{max-width:min(560px,90%);margin:auto}
.tools{position:absolute;left:12px;right:12px;bottom:12px;display:flex;flex-wrap:wrap;gap:6px}
.tools button{border:1px solid var(--line);background:rgba(255,255,255,.92);padding:7px 11px;cursor:pointer;font-size:13px}
.tools button:hover,.tools button:focus-visible{border-color:var(--ink)}
.panel{background:var(--card);border-left:1px solid var(--line);display:flex;flex-direction:column;height:calc(100vh - 56px);height:calc(100dvh - 56px);position:sticky;top:0}
.panel-scroll{flex:1;min-height:0;overflow:auto;padding:0 22px 24px;overscroll-behavior:contain}
.tabs{z-index:2;display:grid;grid-template-columns:1fr 1fr;background:var(--card);border-bottom:1px solid var(--line);flex:none}
.tabs [role=tab]{border:0;background:none;padding:15px 10px 12px;cursor:pointer;font-weight:700;font-size:13.5px;border-bottom:3px solid transparent;color:var(--mut)}
.tabs [role=tab][aria-selected=true]{color:var(--ink);border-bottom-color:var(--red)}
.tabs [role=tab] small{display:block;font-weight:400;font-size:11.5px;margin-top:2px}
.lede{color:var(--ink2);margin:0 0 4px}.muted{color:var(--mut)}.small{font-size:12.5px}
.seg-row{display:flex;flex-wrap:wrap;gap:6px}
.seg{border:1px solid var(--line);background:#fff;padding:8px 12px;cursor:pointer;font-size:13.5px}
.seg.on{border-color:var(--ink);background:var(--ink);color:#fff}
.grades{display:grid;gap:8px}
.grade{display:grid;grid-template-columns:1fr auto;grid-template-areas:"b e" "s s" "t t";text-align:left;border:1px solid var(--line);background:#fff;padding:12px 14px;cursor:pointer}
.grade b{grid-area:b;font-size:16px}.grade em{grid-area:e;font-style:normal;font-weight:700;text-align:right}.grade em small{display:block;font-weight:400;font-size:11.5px;color:var(--mut);text-decoration:line-through}.grade span{font-size:13px;color:var(--mut)}
.grade.on{border-color:var(--red);box-shadow:inset 3px 0 0 var(--red)}
.chips{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.chip{display:grid;grid-template-columns:28px 1fr;grid-template-areas:"i n" "i p";align-items:center;column-gap:10px;text-align:left;border:1px solid var(--line);background:#fff;padding:9px 10px;cursor:pointer}
.chip i{grid-area:i;width:28px;height:28px;border-radius:50%;border:1px solid rgba(0,0,0,.15)}.chip-name{grid-area:n;font-size:13.5px;font-weight:500}.chip-price{grid-area:p;font-size:12px;color:var(--mut)}
.chip.on{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.wheel-ico{background:radial-gradient(circle,#c9ccd1 30%,#2b2d31 32% 62%,#9ca1a8 64%)!important}
.summary{margin-top:26px;border-top:2px solid var(--ink);padding-top:4px}
.lines{list-style:none;margin:0;padding:0}.lines li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.total{display:flex;justify-content:space-between;align-items:baseline;margin:12px 0 4px}.total b{font-family:Teko,sans-serif;font-size:34px}
.cta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 8px}
.btn-p,.btn-g{display:inline-flex;justify-content:center;align-items:center;min-height:46px;padding:0 16px;text-decoration:none;font-weight:700;cursor:pointer;border:2px solid var(--red)}
.btn-p{background:var(--red);color:#fff}.btn-p:hover{background:var(--red-d);border-color:var(--red-d)}.btn-g{background:#fff;color:var(--ink);border-color:var(--ink)}
.btn-p.sm{min-height:36px;padding:0 12px}
.btn-s{border:1px solid var(--line);background:#fff;padding:6px 10px;cursor:pointer;font-size:13px}
.btn-row{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.link{border:0;background:none;color:var(--ink2);text-decoration:underline;cursor:pointer;padding:6px 0}
.notice{border-left:3px solid var(--warn);background:#fff7e8;padding:9px 12px;margin:10px 0}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);width:max-content;max-width:min(560px,calc(100vw - 24px));display:flex;gap:12px;align-items:center;background:var(--ink);color:#fff;padding:10px 14px;font-size:14px;z-index:40}
.toast .link{color:#fff;font-weight:700;flex:none;min-height:36px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* persistent purchase area (audit R02.2): total + basis + next steps always visible */
.buy{flex:none;border-top:2px solid var(--ink);background:var(--card);padding:10px 22px 12px;display:grid;grid-template-columns:1fr;gap:8px;box-shadow:0 -8px 18px rgba(17,18,22,.06)}
.buy-price{display:grid;grid-template-columns:minmax(0,1fr) auto;min-width:0;align-items:baseline;column-gap:10px}
.buy-name{font-size:13px;color:var(--ink2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.buy-price b{font-family:Teko,sans-serif;font-size:32px;line-height:1;grid-row:span 2}
.buy-basis{font-size:12px;color:var(--mut)}.buy-basis s{margin-left:4px}
.buy-cta{display:grid;grid-template-columns:1fr 1fr;gap:8px}.buy-cta .btn-p,.buy-cta .btn-g{min-height:44px;padding:0 10px;font-size:14px}
.buy-sum{justify-self:start;padding:2px 0;font-size:13px}
.end-note{margin:26px 0 0;border-top:1px solid var(--line);padding-top:10px}
.stage-note{position:absolute;left:12px;top:56px;z-index:3;margin:0;background:rgba(255,247,232,.95);border-left:3px solid var(--warn);padding:5px 9px;font-size:12.5px;max-width:calc(100% - 24px)}
.fallback figure{margin:0}.fallback figcaption{display:inline-flex;gap:8px;align-items:center;font-size:13.5px;background:#fff;padding:6px 10px;margin-top:8px}
.fallback figcaption i{width:18px;height:18px;border-radius:50%;border:1px solid rgba(0,0,0,.2);flex:none}
.fallback .btn-g{justify-self:center}.btn-g.sm{min-height:38px}.fallback #fallback-msg{order:-2}.fallback #fallback-retry{order:-1}
/* sheets: summary + enquiry (native modal dialog; Esc closes, focus returns) */
.sheet{border:0;padding:0;width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 48px);background:var(--card);color:var(--ink);box-shadow:0 20px 50px rgba(17,18,22,.3)}
.sheet[open]{display:flex;flex-direction:column}
.sheet::backdrop{background:rgba(17,18,22,.45)}
.sheet-head{display:flex;justify-content:space-between;gap:12px;padding:14px 20px 10px;border-bottom:1px solid var(--line)}.sheet-head h2{margin:2px 0;font-size:28px;text-transform:none}
.sheet-body{overflow:auto;padding:6px 20px 20px;overscroll-behavior:contain}
.lines li.promo b{color:var(--ok)}
.gifts{margin:6px 0;padding-left:18px;font-size:13.5px}.gifts li{margin:2px 0}
.enq label{display:block;font-size:13px;font-weight:500;margin:10px 0 0}
.enq input:not([type=checkbox]),.enq select,.enq textarea{display:block;width:100%;margin-top:4px;border:1px solid var(--line);padding:10px;font:inherit;font-size:16px;background:#fff}
.enq-two{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}.enq-check{display:flex!important;gap:8px;align-items:flex-start;font-weight:400!important}
.enq-lead{margin:10px 0}.enq-status{color:var(--no);font-size:13.5px}.hp{position:absolute!important;left:-9999px}
.enq-snap{border:1px solid var(--line);background:var(--bg);padding:6px 10px}.enq-snap summary{cursor:pointer;font-weight:700;font-size:13.5px}
.enq-dl{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:6px 0;font-size:13px}.enq-dl dt{color:var(--mut)}.enq-dl dd{margin:0}
.enq-pre{max-height:220px;overflow:auto;background:var(--bg);font-size:11.5px;padding:8px;white-space:pre-wrap}
.result.unv{border-left-color:var(--warn);background:#fffbf3}.result .conf{font-size:13.5px;margin:6px 0 2px}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}
/* simulator */
.sim-lede{margin:12px 0}
.ctrl-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin:8px 0}.ctrl-grid.three{grid-template-columns:1fr 1fr 1fr}
.ctrl-grid label{display:grid;gap:4px;font-size:12.5px;color:var(--ink2)}
.ctrl-grid input[type=number],.ctrl-grid select{border:1px solid var(--line);padding:7px 8px;background:#fff;width:100%}
.ctrl-grid .tog{display:flex;align-items:center;gap:8px}
.result{border:1px solid var(--line);border-left-width:5px;padding:10px 12px;margin:12px 0;background:#fff}
.result.ok{border-left-color:var(--ok)}.result.warn{border-left-color:var(--warn)}.result.no{border-left-color:var(--no)}
.res-head{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}.res-head b{font-size:16px}
.badge{font-size:11.5px;background:#eef0f2;padding:2px 7px}
.result ul{margin:8px 0 4px 18px;padding:0}.result li{margin:3px 0}
.items{list-style:none;margin:0;padding:0}.items li{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;padding:6px 6px;border-bottom:1px solid var(--line);font-size:13.5px;cursor:pointer}
.items li.sel{background:#eaf3ff;box-shadow:inset 3px 0 0 #2f7dd1}.items li img{width:40px;height:40px;object-fit:contain}
.items .cube{width:30px;height:24px;margin:0 5px;background:#b98a55;border:1px solid #5a3d1c}
.st{font-style:normal;font-size:12px;padding:2px 7px;border-radius:9px;background:#eef0f2;color:var(--ink2);text-align:right}
.st.ok{background:#e3f3ea;color:var(--ok)}.st.warn{background:#fff3df;color:var(--warn)}.st.no{background:#fde7e8;color:var(--no)}.st.out{background:#fff0e0;color:#9a4d00}
.items small{display:block;color:var(--mut);font-size:12px}.items em{font-style:normal;font-size:12px;color:var(--mut)}.dot{width:12px;height:12px}
.pk-out{display:grid;grid-template-columns:140px 1fr;gap:14px;align-items:start}#pk-svg{width:100%;color:var(--ink2)}
.kv{list-style:none;margin:6px 0;padding:0}.kv li{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:4px 0;font-size:13.5px}
.kv .neg{color:var(--no)}.kv .tight{color:var(--warn)}.warn-t{color:var(--warn)}
.cmp{margin:12px 0}.cmp summary{cursor:pointer;font-weight:500}
.sim-cta{margin-top:22px;border-top:2px solid var(--ink);padding-top:12px;display:grid;gap:8px}
.sim-cta p{margin:0}
@media (max-width:900px){
  .layout{grid-template-columns:minmax(0,1fr)}.panel{min-width:0}
  /* phone: the 3D stays on screen (sticky) while the controls scroll underneath — every change is visible */
  .stage-wrap{min-height:0;position:sticky;top:0;z-index:6;height:clamp(210px,34svh,300px);box-shadow:0 6px 14px rgba(17,18,22,.10);transition:height .2s}
  .stage-wrap.expanded{height:72svh}
  .stage-wrap:not(.expanded) .dz3d-canvas{touch-action:pan-y!important}
  body.typing .stage-wrap{position:relative}body.typing .buy{display:none}
  .stage-size{display:block}
  .sim>.seg-row{display:grid!important;grid-template-columns:1fr 1fr;gap:6px;margin:0!important;padding:0 0 4px!important;overflow:visible!important}
  .sim>.seg-row .seg{padding:10px 8px!important;min-height:44px;text-align:center}
  .sim-exp>.seg-row{display:grid!important;grid-template-columns:1fr 1fr;gap:6px}
  .sim-exp>.seg-row .seg{padding:10px 8px;min-height:44px;text-align:center}
  .q{width:44px;height:44px}.tools button{min-height:38px}.ip{max-height:82dvh}
  #stage{position:relative;height:100%;min-height:0}
  .panel{border-left:0}
  .tools{left:8px;right:8px;bottom:8px;overflow-x:auto;flex-wrap:nowrap}.tools button{flex:none}
  /* phone: the purchase area is the bottom bar (safe-area aware); full summary opens as a sheet from any mode */
  body{padding-bottom:calc(112px + env(safe-area-inset-bottom))}
  .panel{height:auto;position:static}.panel-scroll{overflow:visible;padding:0 16px 24px}
  .buy{position:fixed;left:0;right:0;bottom:0;z-index:10;padding:8px 12px calc(8px + env(safe-area-inset-bottom));gap:6px;border-top:1px solid var(--line)}
  .buy{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"p p" "s c"}.buy-price{grid-area:p}.buy-cta{grid-area:c}
  .buy-price b{font-size:26px}.buy-sum{grid-area:s;align-self:stretch;border:1px solid var(--ink);padding:0 10px;min-height:44px;text-decoration:none;font-weight:700;font-size:13px}
  .buy-cta .btn-p,.buy-cta .btn-g{font-size:13px;padding:0 6px;line-height:1.15;text-align:center}
  .toast{bottom:calc(124px + env(safe-area-inset-bottom))}
  .sheet{width:100vw;max-width:100vw;max-height:92dvh;margin:auto 0 0;border-radius:14px 14px 0 0}
  .enq-two{grid-template-columns:1fr}
  .stage-note{top:48px;left:8px;font-size:11.5px}
  .chips{grid-template-columns:1fr}.cta{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media (max-width:600px){.crumb{font-size:0}.crumb .proto{font-size:11px;margin:0}.brand{white-space:nowrap;font-size:24px}.top{justify-content:space-between}}

.result .next{font-size:15px;font-weight:500;margin:8px 0 4px}.result .seats{margin:4px 0}.result .seats.neg{color:var(--no)}
.result p{margin:4px 0}.tech{margin-top:6px}.tech summary{cursor:pointer;font-size:13px;color:var(--ink2)}.tech ul{margin:6px 0 2px 18px}
.sim-block{border:1px solid var(--line);background:#fff;padding:10px 12px;margin:10px 0;display:grid;gap:8px}
.sim-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.sim-lab{font-size:12.5px;color:var(--ink2);min-width:96px}.sim-lab small{display:block;color:var(--mut)}
.seg-row.sm .seg{padding:6px 9px;font-size:12.5px}.seg small{display:block;font-size:11px;color:var(--mut)}.seg.on small{color:#d6d8de}   /* explicit colours, not opacity (axe: contrast of the selected grade's price) */
.sim-row .tog{display:flex;align-items:center;gap:6px;font-size:13px;margin-right:auto}
.edit{border-color:#2f7dd1;box-shadow:0 0 0 1px #2f7dd1 inset}
.edit-head{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.edit-head small{color:var(--mut)}.edit-head .x{margin-left:auto;border:0;background:none;font-size:22px;line-height:1;cursor:pointer;padding:0 4px}
.pad{display:grid;grid-template-columns:repeat(3,minmax(64px,84px));grid-template-areas:". u ." "l d r";gap:6px;justify-content:center}
.pad button{min-height:48px;border:1px solid var(--line);background:#f8f9fa;font-size:18px;cursor:pointer;line-height:1.1}.pad button small{display:block;font-size:11px;color:var(--ink2)}
.pad .u{grid-area:u}.pad .l{grid-area:l}.pad .r{grid-area:r}.pad .d{grid-area:d}.pad button:disabled{opacity:.4;cursor:default}
.btn-row{display:flex;flex-wrap:wrap;gap:6px}.btn-s:disabled{opacity:.5}
.picker{margin:12px 0}.picker summary{cursor:pointer;font-weight:500;padding:6px 0}
.pick{list-style:none;margin:0;padding:0}.pick li{display:grid;grid-template-columns:56px 1fr auto;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
.pick img{width:56px;height:56px;object-fit:contain;background:#f4f5f6}.pick small{display:block;color:var(--mut);font-size:12px}.pick .ex{font-style:italic}
.qty{display:flex;align-items:center;gap:6px}.qty b{min-width:18px;text-align:center}.q{width:36px;height:36px;border:1px solid var(--line);background:#fff;font-size:18px;cursor:pointer}.q:disabled{opacity:.4}
@media (max-width:560px){.sim-lab{min-width:0;width:100%}.pad{grid-template-columns:repeat(3,1fr)}}

.sim-on .dz3d-hs{display:none!important}
/* parking (2026-10-11): status text always next to colour */
.pk-kv li{display:grid;grid-template-columns:1fr auto 92px;gap:8px;align-items:baseline}
.pk-kv em{font-style:normal;font-size:12px;text-align:right}
.pk-kv .ok,.verdict.ok b{color:var(--ok,#1e7a45)}.pk-kv .neg,.verdict.neg b{color:var(--no)}.pk-kv .unv,.verdict.unv b,#pk-data .unv{color:var(--warn)}
.verdict{margin:4px 0 8px;font-size:14px}
#sim-parking .hint{display:block;color:var(--ink2);font-size:11.5px;margin-top:2px}
#sim-parking .err{display:block;color:var(--no);font-size:12px;min-height:0}
#sim-parking .err:empty{display:none}
.pk-views{margin:8px 0}

/* ---- O modeli: button on the stage + panel (desktop: over the sidebar; mobile: bottom sheet) */
.info-btn{position:absolute;left:12px;top:12px;z-index:3;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:rgba(255,255,255,.94);padding:7px 12px 7px 8px;cursor:pointer;font-size:13px;font-weight:700}
.info-btn i{display:inline-grid;place-content:center;width:20px;height:20px;border-radius:50%;background:var(--ink);color:#fff;font-style:normal;font-family:Georgia,serif;font-weight:700;font-size:13px}
.info-btn:hover,.info-btn:focus-visible,.info-btn[aria-expanded=true]{border-color:var(--ink)}
.ip{position:fixed;top:56px;right:0;bottom:0;width:420px;z-index:20;display:flex;flex-direction:column;background:var(--card);border-left:1px solid var(--line);box-shadow:-10px 0 28px rgba(17,18,22,.10);opacity:0;transform:translateX(14px);transition:opacity .18s,transform .18s}
.ip.on{opacity:1;transform:none}
.ip-head{display:flex;justify-content:space-between;gap:12px;padding:14px 22px 10px;border-bottom:1px solid var(--line)}
.ip-kicker{margin:0;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.ip-head h2{margin:2px 0 2px;font-size:30px;text-transform:none;outline:none}.ip-variant{margin:0;font-size:13.5px;color:var(--ink2)}
.ip-x{flex:none;width:40px;height:40px;border:1px solid var(--line);background:#fff;font-size:22px;line-height:1;cursor:pointer}.ip-x:hover,.ip-x:focus-visible{border-color:var(--ink)}
.ip-scroll{overflow:auto;padding:4px 22px 28px;overscroll-behavior:contain}
.ip-h{font-family:'DM Sans',sans-serif;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mut);margin:14px 0 8px}
.ip-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0;background:#16181c;color:#fff}
.ip-fact{padding:10px 10px 11px;border-left:1px solid #343a40}.ip-fact:first-child{border-left:0}
.ip-fact dt{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#b9c0c8}
.ip-fact dd{margin:2px 0 0}.ip-fact b{font-family:Teko,sans-serif;font-size:32px;font-weight:600;line-height:1}.ip-fact span{font-size:13px;color:#d3d8dd}.ip-fact small{display:block;font-size:11px;color:#b9c0c8}
.ip-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 4px}.ip-tabs .seg{padding:7px 10px;font-size:13px}.ip-now{font-weight:400;font-size:12px}
.ip-h4{font-size:15px;margin:18px 0 6px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ip-rows{margin:0}.ip-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:4px 12px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.ip-row dt{color:var(--ink2)}.ip-row dd{margin:0}.ip-row dd b{font-weight:700}.ip-row small{display:block;color:var(--mut);font-size:12px;margin-top:2px}
.ip-na{font-weight:500!important;color:var(--mut)}
.ip-kind{display:inline-block;font-size:11px;font-weight:700;padding:1px 6px;border:1px solid currentColor;margin-left:6px;vertical-align:1px;white-space:nowrap}
.ip-kind-model,.ip-kind-assumption{color:var(--warn)}.ip-kind-calc{color:#1f5fa8}
.ip-note{font-size:13px;color:var(--ink2);background:var(--bg);padding:8px 10px;margin:10px 0}
.ip-verdict{margin:6px 0;font-size:14px}
.ip-act{border:1px solid var(--ink);background:#fff;padding:8px 12px;cursor:pointer;font-weight:700;font-size:13px}.ip-act:hover,.ip-act:focus-visible{background:var(--ink);color:#fff}
/* "Prednosti" (BYD highlights audit 15. 10.): one card per highlight — title, benefit, availability, the way to it */
.ip-hls{list-style:none;margin:8px 0 0;padding:0}.ip-eq .ip-hls{padding-left:0}
.ip-hl{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}.ip-hl img{width:84px;height:60px;object-fit:cover;flex:none;background:var(--bg)}
.ip-hl h5{margin:0 0 3px;font-size:14.5px;font-weight:700}.ip-hl p{margin:0 0 5px;font-size:13.5px;color:var(--ink2);line-height:1.4}
.ip-hl small{display:block;color:var(--mut);font-size:12px;margin:3px 0}
.ip-hl-st{display:inline-block;font-size:11px;font-weight:700;padding:1px 6px;border:1px solid var(--line);color:var(--ink2)}.ip-hl-st.un{color:var(--warn);border-color:currentColor}
.ip-hl-act{display:block;margin-top:6px;padding:6px 10px;font-size:12.5px}
.ip-hl-more>summary{margin-top:6px}
.ip-eq{margin:6px 0;font-size:13px}.ip-eq summary{cursor:pointer;font-weight:500}.ip-eq ul{margin:6px 0 0;padding-left:18px}.ip-eq li{margin:2px 0}
.ip-src{margin-top:22px;border-top:2px solid var(--ink);padding-top:8px;font-size:12.5px;color:var(--ink2)}.ip-src summary{cursor:pointer;font-weight:700;font-size:13.5px;color:var(--ink)}.ip-src ul{padding-left:18px}
@media (max-width:900px){
  .info-btn{left:8px;top:8px}
  .ip{top:auto;left:0;width:auto;max-height:72vh;border-left:0;border-top:1px solid var(--line);border-radius:14px 14px 0 0;box-shadow:0 -10px 28px rgba(17,18,22,.16);z-index:30;transform:translateY(18px)}
  .ip-head{padding:12px 16px 8px}.ip-scroll{padding:4px 16px 24px}.ip-head h2{font-size:26px}
}

/* hierarchical version selector (grade -> powertrain -> packs) */
.sel-h{margin:14px 0 6px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);font-weight:700}
.sel-h:first-child{margin-top:0}
/* R02: the trim step uses the version card (.grade) one per row, exactly like the version list of every other model (a two-column
   grid wrapped names and prices in narrow cards — before / after check 17. 10.) */
.chip.pack{grid-template-columns:28px 1fr}.pack-ico{display:grid;place-items:center;font-style:normal;font-weight:700;background:#f1f2f4;color:var(--ink)}
.chip.pack.on .pack-ico{background:var(--red);color:#fff;border-color:var(--red)}

/* ---- seats inside the car */
.seat-bar{position:absolute;left:0;right:0;margin:0 auto;width:fit-content;bottom:60px;z-index:3;display:flex;flex-wrap:wrap;justify-content:center;gap:4px;max-width:calc(100% - 24px);background:rgba(17,18,22,.72);padding:6px;border-radius:4px}
.seat-bar .seg{background:rgba(255,255,255,.95);border-color:transparent;padding:6px 10px;font-size:13px}
.seat-bar .seg.on{background:var(--red);color:#fff}.seat-bar .seg:disabled{opacity:.45;cursor:not-allowed}
.seat-sep{width:1px;background:rgba(255,255,255,.35);margin:2px 4px}
@media (max-width:900px){.seat-bar{bottom:54px;padding:4px;gap:3px;flex-wrap:nowrap;overflow-x:auto;max-width:calc(100% - 16px);justify-content:flex-start}.seat-bar .seg{flex:none}.seat-bar .seg{padding:5px 7px;font-size:12px}.seat-sep{display:none}}

/* ---- phone layout of the practical-use panel (2026-10-11): compact, one row per control, nothing hidden */
.sim-lede-short{display:none}
@media (max-width:900px){
  .sim-lede{display:none}.sim-lede-short{display:block;font-size:13px;color:var(--ink2);margin:8px 0}
  #sim-title{font-size:20px;margin:10px 0 6px}
  .sim-block{padding:8px 10px;gap:6px;margin:8px 0}
  .sim-row{flex-wrap:nowrap}.sim-lab{min-width:0;width:auto;flex:none;font-size:12px}.sim-lab small{display:none}
  .sim-row .seg-row.sm{flex-wrap:nowrap;overflow-x:auto;gap:4px}.sim-row .seg-row.sm .seg{flex:1 0 auto;padding:6px 8px}
  .sim-row:has(.tog){flex-wrap:wrap}
  .result{padding:8px 10px}.result p{margin:2px 0}
  #sim-items li{padding:8px 0}
}
.sim-ref{border:1px solid var(--line);background:#fff;padding:8px 12px;margin:10px 0}.sim-ref summary{cursor:pointer;font-weight:700;font-size:14px}
.sim-ref-imgs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px 0}.sim-ref figure{margin:0}.sim-ref img{display:block;width:100%;height:auto;background:#eee}
.sim-ref figcaption{font-size:11px;color:var(--mut);margin-top:2px}.sim-ref p{margin:6px 0;font-size:13.5px}

/* trim comparison (differences only) */
.grade-cmp{margin:10px 0 0;border:1px solid var(--line);background:#fff;padding:8px 12px}.grade-cmp summary{cursor:pointer;font-weight:700;font-size:14px}.grade-cmp summary .muted{font-weight:400;font-size:12.5px;margin-left:6px}
.gd{border-top:1px solid var(--line);padding:6px 0}.gd:first-child{border-top:0}.gd h4{margin:6px 0 4px}.gd ul{margin:4px 0;padding-left:18px;font-size:13.5px}.gd.cur h4{color:var(--ink)}
.pk-nudge{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px}.pk-nudge .btn-s{min-height:40px}
.sim-lab-t{margin:0}
.stage-size{display:none;position:absolute;right:8px;top:8px;z-index:3;border:1px solid var(--line);background:rgba(255,255,255,.94);padding:7px 10px;font-size:13px;font-weight:700;cursor:pointer;min-height:36px}
@media (max-width:900px){.stage-size{display:block}}
/* ---- podium ring: DOM tooltip + keyboard/screen-reader equivalents of the letters in the podium */
.podium-tip{position:absolute;z-index:4;transform:translate(-50%,-100%);pointer-events:none;white-space:nowrap;max-width:min(92%,420px);overflow:hidden;text-overflow:ellipsis;background:var(--ink);color:#fff;font-size:12.5px;font-weight:500;padding:5px 9px}
.podium-keys{position:absolute;left:12px;top:54px;z-index:5;display:flex;flex-direction:column;gap:4px}
.podium-keys:not(:focus-within){width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.podium-keys button{display:grid;text-align:left;border:1px solid var(--line);background:rgba(255,255,255,.96);padding:5px 12px 4px;cursor:pointer;font-family:Teko,sans-serif;font-size:22px;line-height:1.05;color:var(--ink);min-width:150px}
.podium-keys button small{font-family:'DM Sans',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.podium-keys button:hover,.podium-keys button:focus-visible{border-color:var(--ink)}
@media (max-width:900px){.podium-keys{left:8px;top:48px}}

/* ======================================================================================
   A2 — audit implementation (2026-10-11). Everything below was added on top of build f8dcae1c.
   ====================================================================================== */
:root {
  --est: #3b5b7a; /* neutral “estimate” tone — never the success colour */
  --est-bg: #f1f5f9;
}
.build-id {
  margin-left: auto;
  font-size: 11px;
  color: #aab0b6;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
/* --- model-year / version change explanation (SU-03) */
.change-note {
  border: 1px solid var(--line);
  border-left: 4px solid var(--est);
  background: var(--est-bg);
  padding: 10px 12px;
  margin: 10px 0 4px;
  font-size: 14px;
}
.change-note ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 5px;
}
.change-note .cl-colour_choice,
.change-note .cl-interior_substituted {
  font-weight: 700;
}
.change-note .cl-total {
  border-top: 1px solid var(--line);
  padding-top: 5px;
}
.change-act {
  display: flex;
  gap: 14px;
  align-items: center;
  margin: 8px 0 0;
}
.pending-note {
  margin: 0 0 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--est);
}
.chips.pending .chip.on {
  border-style: dashed;
}
.link-note {
  margin: 10px 0;
}
.link-note p {
  margin: 0 0 8px;
}
/* --- parking (SU-02): four clearance classes, verdict by worst row */
.verdict {
  border: 1px solid var(--line);
  border-left: 5px solid var(--mut);
  background: #fff;
  padding: 9px 11px;
  margin: 0 0 8px;
  font-size: 14px;
}
.verdict b {
  display: block;
  font-size: 16px;
}
.verdict.v-negative,
.verdict.v-zero {
  border-left-color: var(--no);
  background: #fef4f4;
}
.verdict.v-small {
  border-left-color: var(--warn);
  background: #fffaf0;
}
.verdict.v-clear {
  border-left-color: var(--est);
  background: var(--est-bg);
}
.verdict.v-unknown {
  border-left-color: var(--warn);
}
.pk-kv li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(92px, auto);
  gap: 10px;
  align-items: baseline;
}
.pk-kv li em {
  font-style: normal;
  font-size: 12.5px;
  text-align: right;
}
.pk-kv li em small {
  color: var(--mut);
}
.pk-kv .pk-negative b,
.pk-kv .pk-negative em,
.pk-kv .pk-zero b,
.pk-kv .pk-zero em {
  color: var(--no);
  font-weight: 700;
}
.pk-kv .pk-small b,
.pk-kv .pk-small em {
  color: var(--warn);
  font-weight: 700;
}
.pk-kv .pk-clear em,
.pk-kv .pk-positive em {
  color: var(--ink2);
}
.pk-kv .pk-na em,
.pk-kv .pk-unknown em {
  color: var(--mut);
}
.pk-notassessed {
  font-size: 13.5px;
  margin: 8px 0;
  padding: 8px 10px;
  background: #f6f7f8;
}
.pk-help {
  grid-column: 1 / -1;
  margin: 0;
}
/* --- practical-use results (SU-11): estimates are neutral */
.result.est {
  border-left-color: var(--est);
  background: var(--est-bg);
}
.result.empty {
  border-left-color: var(--line);
}
.st.est {
  background: #e6edf4;
  color: var(--est);
}
.result .conf {
  color: var(--ink2);
}
.cu-explain {
  border: 1px solid var(--line);
  border-left: 4px solid var(--warn);
  background: #fffaf0;
  padding: 9px 11px;
  margin: 8px 0;
  font-size: 14px;
}
.cu-explain p {
  margin: 4px 0 8px;
}
.cu-pax {
  margin: 6px 0;
}
/* --- 3D markers (SU-06): hidden markers take no clicks and no focus; visible ones have a 44 px target */
.dz3d-hs {
  visibility: hidden;
  pointer-events: none;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  transition:
    opacity 0.2s,
    visibility 0s 0.2s;
}
.dz3d-hs.vis {
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.2s;
}
.dz3d-hs i {
  position: absolute;
  left: 50%;
  top: 50%;
}
.dz3d-hs span {
  left: 38px;
  top: 10px;
}
.dz3d-hs-ctrl i::after {
  content: "";
  position: absolute;
  inset: 6px;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 100% 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 2px 100% no-repeat;
}
.dz3d-hs-ctrl.open i::after {
  background: linear-gradient(var(--ink), var(--ink)) center / 100% 2px no-repeat;
}
.skip {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 10px 14px;
  font-weight: 700;
}
.skip:focus {
  top: 8px;
}

/* ====================== A2 layout: toolbar, desktop balance, tablet, phone, landscape ====================== */
:root {
  --panel-w: clamp(400px, 30vw, 540px);
  --buy-h: 112px; /* measured at runtime (ResizeObserver) */
  --top-h: 56px;
}
@media (min-width: 901px) {
  .layout {
    grid-template-columns: minmax(0, 1fr) var(--panel-w);
  }
}
/* one contextual toolbar */
.tools {
  align-items: center;
  z-index: 3;
}
.tools button {
  min-height: 40px;
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.95);
}
.tools button[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.tools button:disabled {
  opacity: 0.45;
  cursor: default;
}
.tl-group,
.tl-list {
  display: contents;
}
.tl-toggle {
  display: none;
}
.tl-reset {
  margin-left: auto;
  font-weight: 700;
}
.seat-bar {
  display: none !important;
}
/* colour swatches: all colours of the model year in one row, name of the chosen one in words */
.chips.swatches {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}
.chips.swatches .chip {
  grid-template-columns: 1fr;
  grid-template-areas: "i" "p";
  justify-items: center;
  row-gap: 4px;
  padding: 8px 2px 6px;
  min-height: 62px;
}
.chips.swatches .chip i {
  width: 32px;
  height: 32px;
}
.chips.swatches .chip-name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.chips.swatches .chip-price {
  font-size: 11px;
  white-space: nowrap;
}
.paint-current {
  margin: 8px 0 0;
  font-size: 14px;
}
.paint-current b {
  font-weight: 700;
}
/* compact trim rows */
.grade {
  grid-template-areas: "b e" "s e";
  padding: 9px 12px;
  row-gap: 1px;
  align-items: center;
}
.grade span {
  grid-area: s;
}
/* a card with two detail lines (powertrain cards of the selector, trims with a powertrain line): the second line gets its own row */
.grade:has(span + span) {
  grid-template-areas: "b e" "s e" "t e";
}
.grade span + span {
  grid-area: t;
}
.grade em {
  align-self: center;
}
#panel-config h1 {
  font-size: 32px;
}
h2 {
  margin: 18px 0 8px;
}
/* purchase area: two rows, always visible */
.buy {
  padding: 8px 22px 10px;
  gap: 6px;
}
.buy-price {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "n t" "b t";
  row-gap: 0;
}
.buy-name {
  grid-area: n;
}
.buy-price b {
  grid-area: t;
  grid-row: auto;
}
.buy-basis {
  grid-area: b;
}
.buy-meta {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.buy-sum {
  padding: 0;
}
.price-valid {
  font-size: 12px;
  color: var(--mut);
}
@media (min-width: 901px) {
  .ip {
    width: var(--panel-w);
    bottom: var(--buy-h); /* O modeli never covers the price and the two actions (SU-19) */
  }
}
@media (min-width: 1600px) {
  body {
    font-size: 16px;
  }
  .chip-name,
  .seg,
  .grade span,
  .lines li,
  .small {
    font-size: 14.5px;
  }
  .grade b {
    font-size: 17px;
  }
}
@media (min-width: 901px) and (max-height: 760px) {
  #panel-config .lede {
    display: none;
  }
  #panel-config h1 {
    font-size: 28px;
    margin-top: 2px;
  }
  .tabs [role="tab"] {
    padding: 10px 10px 8px;
  }
}
/* ---- tablet portrait: bigger car, options in two columns (SU-24) */
@media (min-width: 700px) and (max-width: 900px) and (orientation: portrait) {
  :root {
    --stage-h: clamp(360px, 44svh, 520px);
  }
  .cfg-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 24px;
    align-items: start;
  }
  .chips {
    grid-template-columns: 1fr 1fr !important;
  }
  .chips.swatches {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}
/* ---- phone (and tablet portrait) */
@media (max-width: 900px) {
  :root {
    --stage-h: clamp(210px, 34svh, 300px);
    --top-h: 48px;
  }
  .top {
    height: var(--top-h);
  }
  .stage-wrap {
    height: var(--stage-h);
  }
  /* both tabs stay reachable at any scroll position (SU-25) */
  .tabs {
    position: sticky;
    top: var(--stage-h);
    z-index: 5;
    box-shadow: 0 4px 10px rgba(17, 18, 22, 0.06);
  }
  body.typing .tabs {
    top: 0;
  }
  .tabs [role="tab"] {
    min-height: 44px;
    padding: 8px 8px 6px;
  }
  /* toolbar: one row, nothing scrolled out of sight (SU-08) */
  .tools {
    flex-wrap: nowrap;
    overflow: visible;
    gap: 4px;
    left: 6px;
    right: 6px;
    bottom: 6px;
  }
  .tools > button,
  .tl-toggle {
    min-height: 44px;
    flex: 1 1 0;
    min-width: 0;
    padding: 2px 4px;
    font-size: 12.5px;
    line-height: 1.12;
  }
  .tl-group {
    display: block;
    position: relative;
    flex: 1 1 0;
    min-width: 0;
  }
  .tools .tl-toggle {
    display: block;
    width: 100%;
    min-height: 44px;
    white-space: nowrap;
    padding: 2px 2px;
  }
  .tl-list {
    display: none;
    position: absolute;
    left: 0;
    bottom: calc(100% + 4px);
    min-width: 176px;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--ink);
    box-shadow: 0 8px 24px rgba(17, 18, 22, 0.22);
    z-index: 8;
  }
  .tl-group.open .tl-list {
    display: flex;
  }
  .tl-list button {
    min-height: 44px;
    text-align: left;
    border: 0;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
    padding: 0 12px;
  }
  .tl-reset {
    margin-left: 0;
  }
  .info-btn,
  .stage-size {
    min-height: 44px;
    padding: 0 12px;
  }
  /* 44 px targets and 16 px input text (no zoom-on-focus on iOS) */
  .seg,
  .btn-s,
  .link,
  .ip-x,
  .q {
    min-height: 44px;
  }
  .link {
    display: inline-flex;
    align-items: center;
  }
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px !important;
    min-height: 44px;
  }
  .ctrl-grid label {
    font-size: 13.5px;
  }
  .sim-row {
    flex-wrap: wrap !important;
  }
  .sim-row .seg-row.sm {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    overflow: visible !important;
    flex: 1 1 100%;
  }
  .chips.swatches {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .chips.swatches .chip {
    min-height: 64px;
  }
  .grade {
    min-height: 52px;
  }
  .buy {
    grid-template-areas: "p p" "s c";
    padding: 6px 12px calc(8px + env(safe-area-inset-bottom));
  }
  .buy-meta {
    grid-area: s;
  }
  .buy-meta .price-valid {
    display: none;
  }
  /* enlarged 3D = a full-screen layer with an explicit close; the page behind does not scroll, so nothing is trapped (SU-10) */
  .stage-wrap.expanded {
    position: fixed;
    inset: 0 0 var(--buy-h) 0;
    height: auto;
    z-index: 40;
  }
  body.stage-expanded {
    overflow: hidden;
  }
  .stage-wrap.expanded .stage-size {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
    font-weight: 700;
  }
}
@media (max-width: 380px) {
  .tools > button,
  .tl-toggle {
    font-size: 11.5px;
  }
}
/* ---- short landscape phone: car left, options right with their own scroll, one-row purchase bar (SU-09) */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
  :root {
    --top-h: 40px;
  }
  body {
    padding-bottom: 0 !important;
  }
  .top {
    height: var(--top-h);
  }
  .layout {
    grid-template-columns: 54% 46%;
    min-height: 0;
    height: calc(100dvh - var(--top-h));
  }
  .stage-wrap {
    position: relative !important;
    top: auto;
    height: 100% !important;
    min-height: 0;
  }
  #stage {
    position: relative;
    height: 100%;
  }
  .panel {
    position: relative !important;
    height: calc(100dvh - var(--top-h)) !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-left: 1px solid var(--line);
  }
  .panel-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto !important;
    padding: 0 12px 16px;
  }
  .tabs {
    position: static !important;
    flex: none;
  }
  .tabs [role="tab"] {
    min-height: 44px;
    padding: 4px 6px;
  }
  .tabs [role="tab"] small {
    display: none;
  }
  .buy {
    position: static !important;
    flex: none;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "p c" !important;
    padding: 2px 10px calc(2px + env(safe-area-inset-bottom)) !important;
    gap: 8px;
    align-items: center;
  }
  .buy-price {
    grid-template-areas: "t" "b" !important;
    grid-template-columns: 1fr !important;
  }
  .buy-price b {
    font-size: 22px;
  }
  .buy-name,
  .buy-cta .btn-g,
  .buy-meta .price-valid {
    display: none !important;
  }
  .buy-meta {
    display: none;
  }
  .buy-cta {
    grid-template-columns: auto auto;
    align-items: center;
  }
  .buy-cta .buy-sum-ls {
    display: inline-flex !important;
  }
  .stage-size {
    display: none !important;
  }
  .tools > button,
  .tl-toggle {
    font-size: 12px;
  }
  .ip {
    top: var(--top-h) !important;
    left: auto !important;
    right: 0;
    width: 46% !important;
    max-height: none !important;
    bottom: 48px !important;
    border-radius: 0 !important;
  }
  #panel-config h1 {
    font-size: 24px;
  }
  #panel-config .lede {
    display: none;
  }
  .toast {
    bottom: 56px !important;
  }
}
.buy-sum-ls {
  display: none !important;
}
.grade em small {
  text-decoration: none;
}
.grade em small s,
.buy-basis s {
  text-decoration: line-through;
}
.buy-basis s {
  margin-left: 0;
}
@media (max-width: 900px) {
  .buy-meta #share-open {
    display: none;
  }
}
.list-price,
.grade em small {
  white-space: nowrap;
}
#default-note {
  font-size: 14px;
  color: var(--ink2);
}
.skip {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ---- enquiry sheet (SU-20): fields first, attached configuration in one line, send button always in view */
.enq .sheet-body {
  padding-bottom: 0;
}
.enq-snap {
  border: 1px solid var(--line);
  background: #f8f9fa;
  padding: 8px 10px;
  margin: 8px 0 10px;
  font-size: 13.5px;
}
.enq-snap summary {
  cursor: pointer;
}
.enq-snap-l {
  color: var(--mut);
}
.enq form label {
  display: grid;
  gap: 4px;
  margin: 8px 0;
  font-size: 13.5px;
}
.enq form label.enq-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
}
.enq form input:not([type="checkbox"]),
.enq form select,
.enq form textarea {
  border: 1px solid #9aa1a8;
  padding: 9px 10px;
  background: #fff;
  width: 100%;
  min-height: 44px;
  font-size: 16px;
}
.enq form [aria-invalid="true"] {
  border-color: var(--no);
  box-shadow: 0 0 0 1px var(--no);
}
.enq-prac {
  border: 1px solid var(--line);
  margin: 8px 0;
  padding: 2px 10px 6px;
}
.enq-prac p {
  margin: 0 0 4px;
}
.enq-foot {
  position: sticky;
  bottom: 0;
  background: var(--card);
  border-top: 1px solid var(--line);
  margin: 10px -20px 0;
  padding: 8px 20px calc(10px + env(safe-area-inset-bottom));
}
.enq-foot .cta {
  margin: 0;
  grid-template-columns: 2fr 1fr;
}
.enq-status {
  margin: 0 0 8px;
  color: var(--no);
  font-weight: 700;
  font-size: 14px;
}
.enq-mode {
  margin: 0 0 8px;
  font-size: 12.5px;
  color: #7a4b00;
  background: #fff6e0;
  padding: 5px 8px;
}
#enq-done {
  padding-bottom: 20px;
}
@media (max-width: 900px) {
  .enq-foot .cta {
    grid-template-columns: 2fr 1fr;
  }
  .enq .sheet-head h2 {
    font-size: 24px;
  }
  .enq-lead {
    font-size: 13.5px;
    margin: 6px 0;
  }
}

/* ---- trim comparison (SU-15) */
.gd-k {
  margin: 8px 0 2px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink2);
}
.gd-k-t {
  color: var(--warn);
}
.gd ul {
  margin: 0 0 4px 18px;
  padding: 0;
  font-size: 14px;
}
.gd-trade li::marker {
  color: var(--warn);
}
.gd-all {
  margin: 6px 0 2px;
  font-size: 13px;
}
.gd-all summary {
  cursor: pointer;
  color: var(--ink2);
  min-height: 32px;
  display: flex;
  align-items: center;
}
.gd-all table {
  width: 100%;
  border-collapse: collapse;
  margin: 4px 0 8px;
}
.gd-all th,
.gd-all td {
  text-align: left;
  padding: 4px 6px 4px 0;
  border-bottom: 1px solid var(--line);
  font-weight: 400;
  vertical-align: top;
}
.gd-all thead th {
  font-weight: 700;
  font-size: 12px;
}

/* ---- no 3D (SU-22): nothing that needs the 3D scene stays visible or focusable */
body.no3d .dz3d-overlay,
body.no3d .dz3d-hs,
body.no3d #podium-keys,
body.no3d .tools,
body.no3d .stage-size,
body.no3d .stage-note,
body.no3d .sim [data-view],
body.no3d .sim .pk-views,
body.no3d .sim #sim-tailgate,
body.no3d .sim .sim-lede-short,
body.no3d .sim #sim-edit .pad {
  display: none !important;
}
body.no3d .sim .sim-row:has(> .seg-row [data-view]) {
  display: none;
}
body.no3d .dz3d-load {
  display: none;
}
.fallback {
  overflow: auto;
  align-content: center;
  gap: 8px;
}
.fallback figure {
  margin: 0;
}
.fallback img {
  max-height: 46vh;
  object-fit: contain;
}
@media (max-width: 900px) {
  .fallback {
    padding: 8px 12px;
    font-size: 12.5px;
  }
  .fallback img {
    max-height: 120px;
  }
  .fallback p {
    margin: 0;
  }
}
.crumb-back {
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.crumb-back:hover,
.crumb-back:focus-visible {
  text-decoration: underline;
}
.sum-notes {
  margin: 6px 0;
  padding-left: 18px;
}
.build-foot {
  margin: 10px 0 0;
  font-size: 11px;
}
@media (max-width: 600px) {
  .crumb {
    font-size: 13px;
  }
  .crumb #crumb-var,
  .build-id {
    display: none;
  }
  .brand {
    font-size: 22px;
  }
}
.paint-note {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--ink2);
}
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
  .buy-cta {
    display: flex !important;
    gap: 8px;
    align-items: center;
  }
  .buy-cta .btn-p {
    min-height: 44px;
    padding: 0 14px;
    white-space: nowrap;
  }
  .buy-cta .buy-sum-ls {
    border: 1px solid var(--ink);
    padding: 0 10px;
    min-height: 44px;
    text-decoration: none;
    font-weight: 700;
  }
  .buy-basis {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .buy-price {
    min-width: 0;
  }
}
@media (max-width: 900px) {
  summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .crumb {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .top {
    gap: 10px;
  }
}
@media (max-width: 900px) {
  summary::before {
    content: "▸";
    flex: none;
  }
  details[open] > summary::before {
    content: "▾";
  }
  summary::-webkit-details-marker {
    display: none;
  }
}
@media (min-width: 700px) and (max-width: 900px) and (orientation: portrait) {
  :root {
    --stage-h: clamp(360px, 44svh, 520px);
  }
}
/* parking result: verdict and table use the full column width, plan drawing below */
.pk-out {
  grid-template-columns: minmax(0, 1fr);
}
.pk-out #pk-res {
  order: -1;
}
.pk-out #pk-svg {
  max-width: 220px;
  justify-self: center;
}
@media (max-width: 900px) {
  .q {
    min-width: 44px;
    width: 44px;
  }
  .btn-s,
  .btn-p.sm,
  .btn-g.sm,
  .grade-cmp summary,
  .gd-all summary,
  .cmp summary,
  .tech summary,
  .picker summary {
    min-height: 44px !important;
  }
  .ip-x {
    width: 44px;
    height: 44px;
  }
  .enq form label.enq-check,
  .tog {
    min-height: 44px;
  }
  .enq-check input[type="checkbox"],
  .tog input[type="checkbox"] {
    width: 22px;
    height: 22px;
    flex: none;
  }
}
@media (max-width: 900px) {
  .cu-pax .seg-row.sm {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  .edit .x {
    min-width: 44px;
    min-height: 44px;
  }
}
/* short desktop / laptop (≤ 760 px high): model year, three trims and the colour swatches fit without scrolling (SU-23) */
@media (min-width: 901px) and (max-height: 760px) {
  .tabs [role="tab"] small {
    display: none;
  }
  .tabs [role="tab"] {
    padding: 12px 10px 10px;
  }
  #default-note {
    display: none;
  }
  #panel-config h2 {
    margin: 10px 0 6px;
    font-size: 20px;
  }
  .grades {
    gap: 6px;
  }
  .grade {
    padding: 6px 12px;
  }
  .grade-cmp {
    margin-top: 6px;
  }
  .buy {
    padding: 6px 22px 6px;
    gap: 4px;
  }
  .chips.swatches .chip {
    min-height: 56px;
    padding: 6px 2px 4px;
  }
}
@media (min-width: 901px) and (max-height: 760px) {
  #panel-config h1 {
    font-size: 26px;
    margin: 0 0 2px;
  }
  .paint-current {
    margin-top: 5px;
  }
}
/* O modeli: four headline facts (power in horsepower, driven axle, electric range, boot) in a 2 × 2 block */
.ip-facts:has(.ip-fact:nth-child(4)) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ip-facts:has(.ip-fact:nth-child(4)) .ip-fact:nth-child(odd) {
  border-left: 0;
}
.ip-facts:has(.ip-fact:nth-child(4)) .ip-fact:nth-child(n + 3) {
  border-top: 1px solid #343a40;
}

/* ===== A3 — interior tour and boot measurements (src/tour) ===== */
.a3-offer {
  position: absolute;
  left: 12px;
  top: 58px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.a3-offer button {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.a3-offer button + button {
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
}
.a3-offer button:hover,
.a3-offer button:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
.a3-card {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 4;
  width: min(330px, calc(100% - 24px));
  max-height: calc(100% - 96px);
  overflow: auto;
  overscroll-behavior: contain;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 10px 28px rgba(17, 18, 22, 0.18);
  padding: 14px 16px 12px;
  font-size: 14px;
  line-height: 1.45;
}
.a3-card h3 {
  margin: 2px 34px 6px 0;
  font-family: "Teko", "DM Sans", sans-serif;
  font-size: 26px;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.a3-card h3:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}
.a3-kicker {
  margin: 0 34px 0 0;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mut);
}
.a3-benefit {
  margin: 0 0 10px;
}
.a3-in {
  margin: 0 0 4px;
  font-size: 12.5px;
  color: var(--mut);
}
.a3-facts {
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.a3-facts li {
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-weight: 500;
}
.a3-facts em {
  font-style: normal;
  font-weight: 400;
  color: var(--mut);
}
.a3-note,
.a3-src,
.a3-small {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--mut);
}
.a3-note {
  color: var(--ink2);
  background: var(--est-bg);
  border-left: 3px solid var(--est);
  padding: 6px 8px;
}
.a3-x {
  position: absolute;
  right: 4px;
  top: 4px;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
}
.a3-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 10px 0 4px;
}
.a3-nav button {
  min-height: 44px;
  border: 1px solid var(--ink);
  background: #fff;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.a3-nav button:last-child {
  background: var(--ink);
  color: #fff;
}
.a3-nav button:focus-visible,
.a3-x:focus-visible,
.a3-back:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
.a3-back {
  min-height: 44px;
  padding: 0 2px;
}
.a3-count {
  align-self: center;
  padding: 0 6px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, 0.92);
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
}
/* feature hotspots: a quiet dot; the chosen one gets a ring the size of the highlighted region */
.dz3d-hs-feat i {
  width: 16px;
  height: 16px;
  background: #fff;
  border: 3px solid var(--ink);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.55);
}
.dz3d-hs-feat span {
  left: 40px;
  top: 10px;
}
.dz3d-hs-feat.on i {
  background: var(--red);
  border-color: #fff;
  box-shadow: 0 0 0 3px var(--red);
}
.dz3d-hs-feat.on::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 22px;
  width: calc(var(--r, 40px) * 2);
  height: calc(var(--r, 40px) * 2);
  margin: calc(var(--r, 40px) * -1) 0 0 calc(var(--r, 40px) * -1);
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow:
    0 0 0 2px var(--red),
    inset 0 0 0 2px var(--red);
  pointer-events: none;
}
.dz3d-hs-feat.dz3d-hs-area.on::before {
  border-style: dashed;
  box-shadow: none;
  border-color: var(--red);
  background: rgba(222, 38, 45, 0.06);
}
.dz3d-hs-feat:focus-visible {
  outline: none;
}
.dz3d-hs-feat:focus-visible i {
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 6px var(--red);
}
/* measurement overlay */
.a3-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.a3-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.a3-line line {
  stroke-linecap: round;
}
.a3-line .a3-halo {
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 7;
}
.a3-line .a3-hid {
  stroke: var(--est);
  stroke-width: 1.5;
  stroke-dasharray: 3 5;
  opacity: 0.8;
}
.a3-line .a3-vis {
  stroke: var(--est);
  stroke-width: 3.5;
}
.a3-line .a3-tick {
  stroke: var(--est);
  stroke-width: 2.5;
}
.a3-ml {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 3px;
  background: #fff;
  border: 1px solid var(--est);
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(17, 18, 22, 0.16);
}
.a3-ml b,
.a3-let {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  background: var(--est);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  flex: none;
}
.a3-ml span {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.a3-ml em {
  font-style: normal;
  font-size: 11px;
  color: var(--est);
}
.a3-mlist {
  list-style: none;
  margin: 6px 0 10px;
  padding: 0;
  border-top: 1px solid var(--line);
}
.a3-mlist li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}
.a3-mlist small {
  display: block;
  font-size: 11.5px;
  color: var(--mut);
}
.a3-mlist strong {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.a3-tag {
  display: inline-block;
  font-style: normal;
  font-size: 11px;
  padding: 1px 6px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.a3-tag-est {
  color: var(--est);
}
.a3-tag-mfr {
  color: var(--ink);
}
.a3-prov,
.a3-mfr {
  margin: 0 0 8px;
  font-size: 12.5px;
}
.a3-how summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: 13px;
}
.a3-how ul {
  margin: 0 0 6px;
  padding-left: 0;
  list-style: none;
  font-size: 12px;
  color: var(--ink2);
}
.a3-how li {
  margin-bottom: 4px;
}
body.no3d .a3-offer,
body.no3d .a3-card,
.sim-on .a3-offer {
  display: none !important;
}
@media (max-width: 900px) {
  .a3-offer {
    top: 8px;
    left: 8px;
    right: 96px;
  }
  .a3-offer button {
    font-size: 13px;
    padding: 6px 10px;
  }
  /* one card at a time, directly under the 3D view: it covers neither the highlighted part nor the toolbar or the price bar */
  .a3-card {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    max-height: calc(100svh - 100% - var(--buy-h, 96px) - 4px);
    max-height: min(46svh, calc(100svh - var(--stage-h, 300px) - var(--buy-h, 96px) - 4px));
    border-width: 0 0 1px;
    box-shadow: 0 12px 20px rgba(17, 18, 22, 0.16);
  }
  .stage-wrap.expanded .a3-card {
    top: auto;
    bottom: 64px;
    max-height: 40%;
    left: 8px;
    right: 8px;
    border-width: 1px;
  }
}
@media (orientation: landscape) and (max-height: 520px) {
  .a3-card {
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    bottom: var(--buy-h, 49px);
    width: 46%;
    max-height: none;
  }
  .a3-offer {
    top: 6px;
  }
}
/* explore mode: the few visible hotspots carry their name (no hover on touch); the chosen one is named by its card */
.dz3d-hs-feat.lbl span {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.dz3d-hs-feat.on span {
  display: none;
}
.a3-hint {
  position: absolute;
  left: 12px;
  top: 58px;
  z-index: 3;
  margin: 0;
  max-width: min(340px, calc(100% - 24px));
  padding: 8px 12px;
  background: rgba(17, 18, 22, 0.86);
  color: #fff;
  font-size: 13px;
  line-height: 1.35;
}
@media (max-width: 900px) {
  .a3-hint {
    top: 8px;
    left: 8px;
    right: 96px;
    font-size: 12.5px;
  }
}
.dz3d-hs-feat.lbl-left span {
  left: auto;
  right: 38px;
}
@media (max-width: 900px) {
  /* phone: the offer and the hint sit just above the toolbar, clear of “O modeli” and “Zväčšiť 3D” */
  .a3-offer,
  .a3-hint {
    top: auto;
    bottom: 56px;
    left: 6px;
    right: 6px;
  }
  .a3-hint {
    max-width: none;
  }
  /* the toolbar inside the 3D view already carries Predošlé / Ďalšie / Späť na interiér */
  .a3-card .a3-nav,
  .a3-card .a3-back {
    display: none;
  }
  .stage-wrap.expanded .a3-offer,
  .stage-wrap.expanded .a3-hint {
    bottom: 64px;
  }
}
@media (orientation: landscape) and (max-height: 520px) {
  .a3-offer,
  .a3-hint {
    bottom: 52px;
  }
}
@media (max-width: 900px) {
  /* small 3D view: names would cover each other and the hint — a tap opens the card with the name */
  .dz3d-hs-feat.lbl span {
    opacity: 0;
    visibility: hidden;
  }
}
/* SU-38: a control focused with the keyboard is scrolled clear of the fixed price bar and the sticky 3D view */
@media (max-width: 900px) {
  html {
    scroll-padding-bottom: calc(var(--buy-h, 96px) + 16px);
    scroll-padding-top: calc(var(--stage-h, 300px) + 8px);
  }
}

/* ---- showroom layer (src/info/showroom.js): toggle, cards, keyboard listbox, bottom sheet, data panel ---- */
.sr-toggle{position:absolute;right:12px;top:12px;z-index:4;display:inline-flex;align-items:center;gap:8px;min-height:40px;border:1px solid var(--line);background:rgba(255,255,255,.95);padding:7px 14px;cursor:pointer;font-size:13.5px;font-weight:700;color:var(--ink);border-radius:999px;box-shadow:0 4px 14px rgba(17,18,22,.08)}
.sr-toggle .sr-chev{display:inline-block;transform:rotate(180deg);transition:transform .25s;font-size:14px;line-height:1}
.sr-toggle.on .sr-chev{transform:none}
.sr-toggle:hover,.sr-toggle:focus-visible,.sr-toggle.on{border-color:var(--ink)}
.sr-card{position:absolute;z-index:8;background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:0 16px 40px rgba(17,18,22,.22);padding:14px 16px 12px;font-size:13.5px;line-height:1.4}
.sr-card h3{margin:0 26px 8px 0;font:600 22px/1.05 Teko,'DM Sans',sans-serif;text-transform:uppercase;letter-spacing:.01em}
.sr-card ul{margin:0 0 8px;padding-left:18px}.sr-card li{margin:2px 0}
.sr-card .sr-price{margin:6px 0 10px;font-weight:700}
.sr-card .sr-acts{display:flex;gap:8px;flex-wrap:wrap}.sr-card .sr-acts button{min-height:44px}
.sr-card .sr-x{position:absolute;right:6px;top:6px;width:36px;height:36px;border:0;background:none;font-size:22px;cursor:pointer;color:var(--mut)}
.sr-card .sr-more summary{cursor:pointer;font-weight:700;margin:4px 0 6px}.sr-card .sr-more ul{max-height:200px;overflow:auto}
.sr-list{position:absolute;left:12px;top:96px;z-index:6;background:#fff;border:1px solid var(--ink);padding:6px;min-width:220px;outline:none}
.sr-list:not(:focus-within):not(:focus){width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;padding:0;border:0}
.sr-list [role=option]{display:grid;padding:6px 10px;font:600 20px/1.05 Teko,sans-serif;cursor:pointer}
.sr-list [role=option] small{font:500 12px 'DM Sans',sans-serif;color:var(--mut)}
.sr-list [role=option][aria-selected=true]{background:#1b2a4a;color:#fff}.sr-list [role=option][aria-selected=true] small{color:#d7deea}
.sr-list [role=option].on{outline:2px solid var(--ink);outline-offset:-2px}
.sr-list .sr-hint{margin:6px 4px 0;font-size:11px;color:var(--mut)}
.sr-sheet .sr-grid{display:grid;grid-template-columns:1fr;gap:8px;padding:6px 0}
.sr-sheet .sr-opt{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:center;column-gap:12px;min-height:56px;text-align:left;border:1px solid var(--line);background:#fff;padding:8px 44px 8px 12px;cursor:pointer;color:var(--ink)}
.sr-sheet .sr-opt img{grid-row:1/3;width:84px;height:42px;object-fit:contain}
.sr-sheet .sr-opt b{font:600 22px/1 Teko,sans-serif;text-transform:uppercase}.sr-sheet .sr-opt small{color:var(--mut);font-size:13px}
.sr-sheet .sr-opt:not(:has(img)) b,.sr-sheet .sr-opt:not(:has(img)) small{grid-column:1/3}
.sr-sheet .sr-opt.on{background:#1b2a4a;color:#fff;border-color:#1b2a4a}.sr-sheet .sr-opt.on small{color:#d7deea}
.sr-sheet .sr-opt i{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-style:normal;font-weight:700}
.sr-sheet .sr-diff{justify-self:start;min-height:44px;margin:-4px 0 4px;border:0;background:none;color:var(--ink);text-decoration:underline;cursor:pointer;font-size:13px;padding:0 4px}
.sr-data{background:#fff;border:1px solid var(--line);margin:0 0 12px;padding:12px 14px}
@media (min-width:901px){.sr-data{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0;padding:0;border:0}
  .sr-data:focus-within{position:fixed;left:auto;right:calc(var(--panel-w) + 16px);top:calc(var(--top-h) + 64px);width:min(560px,40vw);height:auto;overflow:visible;clip-path:none;white-space:normal;z-index:9;padding:12px 14px;border:1px solid var(--ink);box-shadow:0 16px 40px rgba(17,18,22,.2)}}
.sr-d-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}.sr-d-t{margin:2px 0 8px;font-size:14px}
.sr-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin:0 -2px 8px;padding:2px}
.sr-tabs button{flex:none;min-height:44px;border:1px solid var(--line);background:#fff;padding:6px 12px;cursor:pointer;font-size:13px;color:var(--ink)}
.sr-tabs button[aria-selected=true]{background:#1b2a4a;color:#fff;border-color:#1b2a4a;font-weight:700}
.sr-page h3{margin:4px 0 8px;font:600 22px/1 Teko,sans-serif;text-transform:uppercase}.sr-page h3 .muted{font:500 13px 'DM Sans',sans-serif}
.sr-rows div,.sr-facts div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:6px 0}
.sr-rows dt,.sr-facts dt{color:var(--mut)}.sr-rows dd,.sr-facts dd{margin:0;font-weight:700;text-align:right}
.sr-facts dd{font:600 24px/1 Teko,sans-serif}
.sr-ul{margin:0;padding-left:18px;columns:1}.sr-ul li{margin:3px 0}.sr-ul.plus li::marker,.sr-ul li.plus::marker{content:"+ ";color:var(--ok);font-weight:700}
@media (min-width:600px){.sr-ul{columns:2;column-gap:24px}}
.sr-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin:10px 0 4px}
.sr-nav button{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ink);background:#fff;font-size:24px;line-height:1;cursor:pointer;color:var(--ink)}
.sr-nav button[disabled]{opacity:.3;cursor:default}
.sr-d-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}.sr-d-acts button{min-height:44px}
@media (max-width:900px){.sr-toggle{right:8px;top:58px;min-height:44px;padding:6px 12px}.sr-card{max-width:calc(100% - 16px)}}
@media (prefers-reduced-motion:reduce){.sr-toggle .sr-chev{transition:none}}

.sr-toggle .sr-t-s{display:none}
@media (max-width:600px){.sr-toggle .sr-t-l{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.sr-toggle .sr-t-s{display:inline}.sr-toggle{padding:6px 10px;gap:6px}}   /* audit R9-3: compact on phones, accessible name kept */
.sr-no3d{position:relative;z-index:5;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:10px 12px}.sr-no3d .sr-toggle{position:static}
.sr-data.flat{position:static!important;width:auto!important;height:auto!important;overflow:visible!important;clip-path:none!important;white-space:normal!important;margin:0 0 12px!important;padding:12px 14px!important;border:1px solid var(--line)!important;box-shadow:none!important}

/* cabin3d (shared module, same block in every configurator) — seat-entry tip + hotspot card */
.cab-tip{position:absolute;left:0;top:0;pointer-events:none;background:var(--ink,#111216);color:#fff;font-size:13px;font-weight:600;padding:5px 9px;white-space:nowrap;z-index:6}
.cab-card{max-width:340px;z-index:7}
.cab-card .cab-src{margin-top:8px;font-size:12px;color:#4f5560}
@media (max-width:900px){.cab-card{left:8px;right:8px;max-width:none;bottom:64px}}
@media (max-width:600px){.cab-card{top:56px;bottom:auto;padding:9px 34px 9px 12px}.cab-card h4{font-size:15px;margin-bottom:3px}.cab-card p{font-size:13px;line-height:1.35}
  .cab-card .cab-src{font-size:11px;margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.cab-card .dz3d-card-x{min-width:44px;min-height:44px;right:0;top:0}}
@media (prefers-reduced-motion:reduce){.cab-tip{transition:none}}

/* cabin3d points: clearly visible on the car (Peter 13. 10.: "I don't see them outside") — red dot with a white rim and a soft pulse;
   the name shows on hover / focus and on the chosen point */
.dz3d-hs-feat.cab-pin i{width:18px;height:18px;background:var(--red);border:3px solid #fff;box-shadow:0 0 0 2px rgba(17,18,22,.35),0 2px 8px rgba(0,0,0,.35)}
.dz3d-hs-feat.cab-pin::after{content:"";position:absolute;left:22px;top:22px;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;border:2px solid var(--red);opacity:0;animation:cab-pulse 2.6s ease-out infinite;pointer-events:none}
.dz3d-hs-feat.cab-pin.on::after{animation:none}
@keyframes cab-pulse{0%{transform:scale(.9);opacity:.85}70%,100%{transform:scale(2.2);opacity:0}}
.dz3d-hs-feat.cab-pin:focus-visible i{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--ink),0 2px 8px rgba(0,0,0,.35)}
@media (prefers-reduced-motion:reduce){.dz3d-hs-feat.cab-pin::after{animation:none;opacity:.6;transform:scale(1.4)}}
/* phones: interface equivalents of the podium hints when the 3D letters are too small or off screen */
.podium-hint-keys{position:absolute;left:8px;right:8px;bottom:56px;z-index:4;display:flex;gap:6px;pointer-events:none;max-width:560px;margin:0 auto}
.podium-hint-keys[hidden]{display:none}
.podium-hint-keys button{flex:1 1 0;min-width:0;pointer-events:auto;min-height:34px;padding:5px 8px 5px 22px;border:1px solid rgba(21,34,56,.22);background:rgba(255,255,255,.88);color:#152238;font:700 10.5px/1.18 "DM Sans",system-ui,sans-serif;letter-spacing:.03em;text-align:left;cursor:pointer;position:relative}
.podium-hint-keys button::before{content:"";position:absolute;left:9px;top:50%;width:5px;height:5px;margin-top:-3px;border-right:2px solid #152238;border-top:2px solid #152238;transform:rotate(-45deg)}
.podium-hint-keys button:hover,.podium-hint-keys button:focus-visible{border-color:#152238;outline:none;box-shadow:0 0 0 2px #152238}
body.no3d .podium-hint-keys{display:none}

/* ---- Priestor kufra: dimension lines (src/sim/measure.js, Phase 2 13. 10. 2026) ---- */
.dim-layer{position:absolute;inset:0;pointer-events:none;overflow:visible;transition:opacity .25s}
.dim-layer.flying{opacity:0;transition:none}
.dim-layer .dim-halo{stroke:#fff;stroke-width:6;stroke-linecap:round;opacity:.85}
.dim-layer .dim-l{stroke:#0b5cad;stroke-width:2.5;stroke-linecap:round}
.dim-layer .dim-t{stroke:#0b5cad;stroke-width:2.5;stroke-linecap:round}
.dim-layer .dim-hid{stroke:#0b5cad;stroke-width:2;stroke-dasharray:4 5;stroke-linecap:round;opacity:.4}
.dim-layer .dim.muted{opacity:.38}.dim-layer .dim.muted .dim-halo{stroke-width:4}
.dim-layer .dim-p{fill:#fff;stroke:#0b5cad;stroke-width:2}
.dim-layer .dim-bg{fill:#0b5cad}
.dim-layer .dim-txt{fill:#fff;font:700 12.5px/1 "DM Sans",system-ui,sans-serif}
.dim-layer .measured .dim-l,.dim-layer .measured .dim-t{stroke:#1d7f4e}.dim-layer .measured .dim-p{stroke:#1d7f4e}.dim-layer .measured .dim-bg{fill:#1d7f4e}
.dim-layer .unverified .dim-l,.dim-layer .unverified .dim-t{stroke:#5d646b;stroke-dasharray:6 5}.dim-layer .unverified .dim-p{stroke:#5d646b}.dim-layer .unverified .dim-bg{fill:#5d646b}
.dim-layer .on .dim-l{stroke-width:3.5}
#sim-space .space-prompt{margin:0;font-weight:700}
.dim-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.dim-row{width:100%;display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:baseline;text-align:left;background:#fff;border:1px solid var(--line);border-left:4px solid #0b5cad;padding:8px 10px;cursor:pointer;font:inherit;color:var(--ink);min-height:44px}
.dim-row.unverified{border-left-color:#8a9097}.dim-row.measured{border-left-color:var(--ok)}
.dim-row.on{background:#eef4fb;outline:2px solid #0b5cad;outline-offset:-2px}
.dim-row .dim-n{font-size:13.5px}.dim-row .dim-n small{display:block;color:var(--mut);font-size:11.5px}
.dim-row .dim-v{font-size:14px;white-space:nowrap}.dim-row.unverified .dim-v{font-size:12.5px;font-weight:600;color:var(--ink2)}
.dim-row .dim-k{grid-column:1/-1;color:var(--mut);font-size:11.5px}
.dim-more summary{cursor:pointer;font-size:13px;font-weight:700;margin:6px 0}
.dim-detail{border-top:1px solid var(--line);padding-top:8px;font-size:13px}.dim-detail p{margin:4px 0}
@media (max-width:560px){.dim-layer .dim-txt{font-size:12px}}
/* loading demonstration (Blender clip, src/sim/simulator.js demo player) */
#sim-demo .demo-ctl{display:flex;gap:10px;align-items:center}#sim-demo .demo-ctl input{flex:1;accent-color:#0b5cad}
#sim-demo .demo-head{margin:0;font-size:13.5px}
.demo-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.demo-list li{border-left:4px solid var(--ok);padding:4px 8px;background:#fff;font-size:13px}.demo-list li.warn{border-left-color:var(--warn)}
.demo-list li small{display:block;color:var(--ink2);font-size:12px}
.dim-row .dim-i{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#0b5cad;color:#fff;font:700 11px/1 "DM Sans",system-ui,sans-serif;font-style:normal;margin-right:6px;vertical-align:1px}
.dim-row.unverified .dim-i{background:#5d646b}.dim-row.measured .dim-i{background:var(--ok)}

/* --- assistance scenes ("Asistenti", src/assist/panel.js) — amber / red only for the warning states (brief §5) */
.sim-assist h3{margin-top:12px}
.as-group{margin:12px 0 4px}.as-group>.sim-lab{display:block;margin-bottom:6px;font-weight:600}
.as-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px}
.as-card{display:flex;flex-direction:column;gap:3px;text-align:left;border:1px solid var(--line);background:#fff;padding:9px 11px;cursor:pointer;font-size:13.5px;min-height:44px}
.as-card small{font-size:11.5px;color:var(--mut);line-height:1.3}
.as-card:hover,.as-card:focus-visible{border-color:var(--ink)}
.as-card.on{border-color:var(--ink);background:var(--ink);color:#fff}.as-card.on small{color:#d6d8de}
.as-card.off{cursor:default;background:var(--bg);color:var(--ink2)}.as-card.off:hover{border-color:var(--line)}
.as-player{border-top:1px solid var(--line);margin-top:14px;padding-top:4px}
.as-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0}.as-ctl input[type=range]{flex:1 1 160px;min-width:120px}
.as-status{margin:6px 0;padding:7px 10px;font-size:13.5px;background:var(--est-bg);color:var(--est);border-left:3px solid var(--est)}
.as-status.warn{background:#fff6e5;color:#7a4b00;border-left-color:#e3a21a}.as-status.alert{background:#fdecec;color:#8f1d22;border-left-color:var(--no)}
.as-steps{list-style:none;margin:8px 0;padding:0;display:grid;gap:4px}
.as-step{width:100%;text-align:left;border:1px solid var(--line);background:#fff;padding:7px 10px;cursor:pointer;font-size:13px;line-height:1.35}
.as-step b{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--mut)}
.as-step.on{border-color:var(--ink);box-shadow:inset 3px 0 0 var(--ink)}.as-step:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.as-notes{margin:10px 0 6px;padding-left:18px;color:var(--ink2)}.as-notes li{margin:2px 0}
.assist-hud{position:absolute;left:14px;top:60px;max-width:min(420px,calc(100% - 28px));display:grid;gap:6px;pointer-events:none}
.assist-hud p{margin:0}
.assist-hud .as-cap{background:rgba(255,255,255,.94);padding:8px 11px;font-size:13.5px;box-shadow:0 4px 18px rgba(0,0,0,.12)}
.assist-hud .as-cap b{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut)}
.assist-hud .as-pill{justify-self:start;padding:5px 10px;font-size:13px;font-weight:600;background:rgba(17,18,22,.82);color:#fff}
.assist-hud .as-pill.warn{background:#e3a21a;color:#1d1300}.assist-hud .as-pill.alert{background:var(--no);color:#fff}
/* F9 15. 10.: phones in landscape (a short stage): the caption over the scene covered ~half of it -> compact, two lines, narrower */
@media (max-height:480px) and (orientation:landscape){.assist-hud{top:50px;left:8px;max-width:min(330px,46%);gap:4px}.assist-hud .as-cap{padding:4px 8px;font-size:11.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.assist-hud .as-cap b{font-size:10px}.assist-hud .as-pill{font-size:11.5px;padding:3px 8px}}
@media (max-width:560px){.assist-hud{left:8px;right:8px;top:52px;gap:4px}.assist-hud .as-cap{padding:5px 8px;font-size:12px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;background:rgba(255,255,255,.9)}.assist-hud .as-cap b{display:inline;font-size:10px;margin-right:4px}.as-cards{grid-template-columns:1fr 1fr}}   /* phones: the caption explains the situation too (3 lines max) */
@media (prefers-reduced-motion:reduce){.as-card,.as-step{transition:none}}
.as-inputs{display:grid;gap:6px;margin:6px 0 4px}
.assist-hud .as-cluster{justify-self:start;display:flex;align-items:center;gap:8px;padding:5px 10px 5px 6px;font-size:12px;background:rgba(17,18,22,.82);color:#d6d8de}
.as-sign{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;border:5px solid #d4202c;color:#111;font:700 14px/1 system-ui,sans-serif}
.assist-hud .as-cluster.over .as-sign{box-shadow:0 0 0 3px #e3a21a}
.stage-wrap.assist-night{background:linear-gradient(#05070a,#11151b)}
/* the three experiences of „Hodí sa mi?“ (brief §5) */
.sim-exps{display:grid;gap:8px;margin:10px 0 6px}
.sim-exp{border-left:3px solid var(--line);padding:2px 0 2px 10px}
.sim-exp.on{border-left-color:var(--ink)}
.sim-exp-h{margin:0 0 5px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink2)}

/* V2 §5: compact playback bar on the 3D stage (assistance / manoeuvre scenes); details stay in the panel */
.assist-bar{position:absolute;left:50%;transform:translateX(-50%);bottom:60px;width:min(560px,calc(100% - 24px));display:flex;align-items:center;gap:10px;padding:7px 10px;background:rgba(17,18,22,.86);color:#fff;border-radius:999px;box-shadow:0 6px 22px rgba(0,0,0,.22);z-index:6}
.assist-bar[hidden]{display:none}
/* 16. 10. (found by the tech-platforms session with real mouse / touch input): the bar lives in .dz3d-overlay (pointer-events:none) and
   inherited it — real clicks and taps went through to the canvas; and the full-width #viewer-tools box lay over the docked bar.
   The bar takes input; the toolbar box lets it through, its buttons still take it. */
.assist-bar{pointer-events:auto}
.stage-wrap.assist-stage .tools{pointer-events:none}.stage-wrap.assist-stage .tools>*{pointer-events:auto}
.assist-bar.dock{bottom:9px}
@media (max-width:560px){.assist-bar.dock{bottom:5px}}   /* X1: low desktop stages — the player in the strip under the 3D picture (viewer inset), not over it */
.assist-bar .ab-play{flex:none;width:40px;height:40px;border-radius:50%;border:0;background:#fff;color:#111;font-size:15px;cursor:pointer}
.assist-bar .ab-play:focus-visible,.assist-bar .ab-more:focus-visible{outline:2px solid #6cc4ee;outline-offset:2px}
.assist-bar .ab-t{flex:1 1 auto;min-width:80px;accent-color:#2bb7e6;height:28px}
.assist-bar .ab-time{flex:none;font-size:12.5px;font-variant-numeric:tabular-nums;color:#d6d8de;white-space:nowrap}
/* FB-17: ‹ read the step again · play / pause · next step › — one group (the phone grid of the bar sees it as one cell) */
.assist-bar .ab-pc{display:inline-flex;align-items:center;gap:4px;flex:none}
.assist-bar .ab-step{flex:none;width:34px;height:40px;border:0;border-radius:50%;background:transparent;color:#fff;font-size:24px;line-height:1;cursor:pointer}
.assist-bar .ab-step:hover:not(:disabled){background:rgba(255,255,255,.14)}
.assist-bar .ab-step:disabled{opacity:.35;cursor:default}
.assist-bar .ab-step:focus-visible{outline:2px solid #6cc4ee;outline-offset:2px}
.assist-bar.ab-appdemo .ab-step{display:none!important}
@media (max-width:560px){.assist-bar .ab-step{width:28px;height:38px;font-size:22px}.assist-bar .ab-pc{gap:0}.assist-bar .ab-t{min-width:36px}.assist-bar .ab-back-c{max-width:118px}}   /* 360–430 px phones: back · ‹ ▶ › · slider · Kroky fit in one row */
.assist-bar .ab-more{flex:none;min-height:36px;padding:0 12px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:transparent;color:#fff;font-size:13px;cursor:pointer}
@media (max-width:560px){.assist-bar{bottom:52px;gap:6px;padding:3px 5px;width:calc(100% - 16px)}.assist-bar .ab-time{display:none}.assist-bar .ab-play{width:38px;height:38px;font-size:13px}.assist-bar .ab-more{min-height:32px;padding:0 10px;font-size:12.5px}.assist-bar .ab-t{height:24px}}
@media (max-width:900px){.stage-wrap.assist-stage:not(.expanded){height:clamp(300px,52svh,470px)}}
/* phones (X4, 14. 10.): the caption sits BELOW the 3D area, inside the stage box (fixed height: the canvas does not resize at every
   step) — over the canvas it covered a third of the scene and the key cars had to be shown tiny */
@media (max-width:560px){.stage-wrap.assist-stage{display:flex;flex-direction:column}.stage-wrap.assist-stage:not(.expanded):not(.sheet-open){height:clamp(380px,64svh,560px)}.stage-wrap.assist-stage #stage{flex:1 1 auto;height:auto;min-height:0}
  .assist-hud.below{position:static;flex:0 0 92px;max-width:none;margin:0 0 56px;padding:6px 10px;gap:4px;align-content:start;overflow:hidden;background:#fff;border-top:1px solid rgba(0,0,0,.08)}
  .assist-hud.below .as-cap{background:transparent;box-shadow:none;padding:0;-webkit-line-clamp:3}.assist-hud.below .as-pill{font-size:12px;padding:4px 8px}
  .assist-hud.below.wheel{flex-basis:112px}.assist-hud.below .as-wheel{min-height:15px;font-size:11.5px;line-height:15px;color:#0e6f86;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}   /* G1: simulated wheel angle (phones) */
@media (max-width:900px){.stage-wrap.assist-stage.sheet-open:not(.expanded){height:clamp(210px,34svh,300px)}}   /* sheet expanded: compact stage, details below */

/* V2 §5 technology discovery: highlights + „Všetky funkcie" by situation (src/assist/discovery.js) */
.as-all{margin:14px 0 6px}.as-all>.sim-lab{display:block;margin-bottom:6px;font-weight:600}
.as-sit{border-top:1px solid var(--line)}.as-sit:last-child{border-bottom:1px solid var(--line)}
.as-sit>summary{cursor:pointer;padding:11px 2px;min-height:44px;box-sizing:border-box;font-weight:600;font-size:14px;list-style-position:inside}
.as-sit>summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.fc-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;padding:2px 0 12px}
.fc{border:1px solid var(--line);background:#fff;padding:10px 12px;display:flex;flex-direction:column;gap:5px;font-size:13.5px}
.fc p{margin:0}.fc-h b{font-weight:600}.fc-acr{color:var(--mut);font-size:11px;letter-spacing:.04em}
.fc-b{color:var(--ink2);line-height:1.4}.fc-x{font-size:12px;color:var(--mut);line-height:1.35}
.fc-f{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.fc-badge{font-size:11px;padding:2px 7px;border-radius:999px;background:#eaf6ee;color:#1d5c34}
.fc-pres{font-size:11px;padding:2px 7px;border-radius:999px;background:var(--bg);color:var(--ink2)}
.fc-go{align-self:flex-start;margin-top:4px;min-height:36px;padding:0 12px;border:1px solid var(--ink);background:#fff;color:var(--ink);font-size:13px;cursor:pointer;text-align:left}
.fc-go:hover,.fc-go:focus-visible{background:var(--ink);color:#fff}.fc-go.on{background:var(--ink);color:#fff}
.as-card.hl small.fc-badge{align-self:flex-start;color:#1d5c34}.as-card.hl.on small.fc-badge{background:#2c3a31;color:#cfe9d7}
.as-sit.unv p{padding:0 2px 12px}
@media (max-width:560px){.fc-list{grid-template-columns:1fr}.as-cards .as-card.hl{grid-column:span 2}}

.cab-card .cab-demo{display:block;margin-top:8px;min-height:40px;padding:0 12px;border:1px solid currentColor;background:transparent;color:inherit;font:inherit;font-size:13px;cursor:pointer;border-radius:4px}
.cab-card .cab-demo:focus-visible{outline:2px solid #6cc4ee;outline-offset:2px}
.as-note{margin:6px 0 10px;padding:8px 10px;background:#fff7e6;border-left:3px solid #e0a020;font-size:13px}

/* G5: local review mode badge (src/review.js) — never shown to customers */
.review-chip{margin-left:auto;margin-right:10px;padding:3px 9px;border-radius:5px;background:#0e6f86;color:#fff;font:600 12px/1.4 system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.review-chip + .build-id{margin-left:0}
.review-chip .rc-short{display:none}
@media (max-width:560px){.review-chip{font-size:10.5px;padding:2px 6px;max-width:30vw}.review-chip .rc-long{display:none}.review-chip .rc-short{display:inline}}
/* C20-03 (15. 10.): edge arrow for a key car outside the visible band of the stage (phone RCTA) */
.as-edge-hint{position:absolute;transform:translate(-50%,-50%);background:#fff;color:#7a4300;border:2px solid #f0a020;border-radius:14px;padding:3px 10px 3px 7px;font:600 12px/1.3 system-ui,sans-serif;white-space:nowrap;box-shadow:0 1px 5px rgba(0,0,0,.28);pointer-events:none;z-index:6}
.as-edge-hint .arr{display:inline-block;margin-right:5px;color:#d07800}

/* ---- UX reorganisation (Peter 16. 10.): four sections, Exteriér / Interiér, catalogue vs active demo, one player ---- */
.tabs{grid-template-columns:repeat(4,1fr)}
.tabs [role=tab]{padding:13px 4px 10px;font-size:12.5px;line-height:1.2;min-width:0}
.tabs [role=tab] small{font-size:10.5px;line-height:1.25}
.tabs .t-l{display:block}
.tabs .t-short{display:none}
@media (max-width:560px){
  .tabs [role=tab]{font-size:12px;padding:6px 2px 5px}
  .tabs [role=tab] small{display:none}
  .tabs .t-full{display:none}
  .tabs .t-short{display:inline}
}
/* the simulator shows its cargo / parking chooser and lede only in „Hodí sa mi?“ */
.sim[data-section=assist] .sim-exps,.sim[data-section=tech] .sim-exps,
.sim[data-section=assist] .sim-lede,.sim[data-section=tech] .sim-lede,.sim[data-section=parking] .sim-lede,
.sim[data-section=assist] .sim-lede-short,.sim[data-section=tech] .sim-lede-short,.sim[data-section=parking] .sim-lede-short{display:none!important}
/* UI-5S: each section only its own modes — Priestor the cargo modes, Parkovanie its situations */
.sim[data-section=space] .sim-exp[data-exp=parking],.sim[data-section=parking] .sim-exp[data-exp=space]{display:none!important}
/* catalogue OR active demo */
#sim-assist.as-active .as-cat{display:none}
/* R04 (master brief 17. 10.): the way back to the catalogue is a real button next to the catalogue's name, clearly apart from
   „Späť na konfiguráciu“ (at the end of the panel) */
.as-back{display:inline-flex;align-items:center;min-height:44px;border:0;border-radius:6px;background:var(--red);color:#fff;font-weight:700;font-size:14px;padding:0 16px;cursor:pointer;white-space:nowrap}
.as-back:hover{filter:brightness(.94)}.as-back:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.as-catname{font-size:13px;font-weight:600;color:var(--mut)}
/* one player: with the stage bar on, the panel has no second set of play / slider controls and no second row of view buttons
   (the views are in the toolbar under the 3D); without 3D the panel controls stay the only player */
#sim-assist.as-bar-on .as-ctl,#sim-assist.as-bar-on .as-views{display:none}
/* Exteriér / Interiér */
.xi-switch{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:3;display:inline-flex;border:1px solid var(--line);background:rgba(255,255,255,.94);border-radius:999px;padding:3px;box-shadow:0 2px 10px rgba(17,18,22,.08)}
.xi-switch[hidden]{display:none}
.xi-switch button{border:0;background:none;border-radius:999px;padding:6px 14px;font-weight:700;font-size:12.5px;color:var(--mut);cursor:pointer;min-height:32px}
.xi-switch button[aria-pressed=true]{background:var(--ink);color:#fff}
.xi-switch button:focus-visible{outline:2px solid var(--red);outline-offset:1px}
@media (max-width:560px){.xi-switch{top:8px}.xi-switch button{padding:5px 10px;font-size:12px;min-height:30px}}
/* the way back to the catalogue stays reachable while the panel scrolls through the steps */
#sim-assist .as-nav{position:sticky;top:0;z-index:2;background:var(--card);display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 0 10px;margin-top:-8px}

/* R04: the way back at the player on every width — text, not an icon (a new customer finds it without knowing symbols); the catalogue's
   name under it; ≥ 44 × 44 CSS px */
.assist-bar .ab-back{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;flex:none;min-height:44px;min-width:44px;padding:3px 14px;border:0;border-radius:22px;background:var(--red);color:#fff;cursor:pointer;line-height:1.15;text-align:left}
.assist-bar .ab-back-l{font-size:13px;font-weight:700;white-space:nowrap}
.assist-bar .ab-back-c{font-size:11px;font-weight:500;opacity:.88;white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis}
.assist-bar .ab-back-c:empty{display:none}
.assist-bar .ab-back:focus-visible{outline:2px solid #6cc4ee;outline-offset:2px}
@media (max-width:560px){.assist-bar .ab-back{padding:2px 11px}.assist-bar .ab-back-l{font-size:12.5px}.assist-bar .ab-back-c{font-size:10.5px;max-width:120px}}
@media (max-width:360px){.assist-bar .ab-back-c{display:none}}

/* R03: the loading plate over the stage while a demo's world is prepared — opaque from its first frame (no unprepared or old world shows
   through), the function's name and a calm progress line fade in after a moment (cached scenes reveal before they appear) */
.as-plate{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:16px;background:radial-gradient(ellipse at 50% 42%,#f3f4f6 0%,#e3e6ea 70%,#d9dde2 100%);pointer-events:auto}
.as-plate[hidden]{display:none}
.as-plate-in{max-width:min(420px,92%);text-align:center;animation:asPlateIn .35s ease .25s both}
.as-plate.failed .as-plate-in{animation:none}
.as-plate-k{margin:0 0 4px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.as-plate-h{margin:0 0 10px;font-size:18px;font-weight:800;color:var(--ink);line-height:1.25}
.as-plate-t{margin:0 0 12px;font-size:13.5px;color:#3d424a;min-height:1.2em}
.as-plate-bar{display:block;width:180px;height:4px;margin:0 auto;border-radius:2px;background:rgba(17,18,22,.12);overflow:hidden}
.as-plate-bar[hidden]{display:none}
.as-plate-bar i{display:block;width:40%;height:100%;border-radius:2px;background:var(--ink);animation:asPlateBar 1.3s ease-in-out infinite}
.as-plate-fail p{margin:0 0 10px;font-size:14px;color:var(--ink)}
.as-plate-acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.as-plate-acts button{min-height:44px;padding:0 16px}
@keyframes asPlateIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes asPlateBar{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
@media (prefers-reduced-motion:reduce){.as-plate-in{animation:none}.as-plate-bar i{animation:none;width:100%;opacity:.35}}
@media (max-width:560px){.as-plate-h{font-size:16px}.as-plate-t{font-size:12.5px}}
.assist-hud.prep-hidden:not(.below){visibility:hidden}

/* phones / tablets during a demo: the stage is taller than --stage-h, so the sticky section tabs follow its real height (they slid under
   the stage and the stage bar covered them — real-tap journey 16. 10.); the sheet state keeps the compact stage */
@media (max-width:900px){body:has(.stage-wrap.assist-stage:not(.expanded):not(.sheet-open)) .tabs{top:clamp(300px,52svh,470px)}}
@media (max-width:560px){body:has(.stage-wrap.assist-stage:not(.expanded):not(.sheet-open)) .tabs{top:clamp(380px,64svh,560px)}}

/* one player: the loading replay on the stage bar; the panel play / slider only without 3D */
#sim-demo.bar-on .demo-ctl{display:none}

/* Pohon a nabíjanie: the per-version tree of powertrain demos and their modes (direct starts at the top of the section) */
.pw-tree{margin:4px 0 14px}
.pw-scene{border:1px solid var(--line);background:var(--card);padding:10px 12px;margin:6px 0}
.pw-h{margin:0 0 8px;font-size:14px}
.pw-modes{display:flex;flex-wrap:wrap;gap:6px}
.pw-go{border:1px solid var(--ink);background:#fff;color:var(--ink);font-weight:700;font-size:12.5px;padding:7px 11px;min-height:36px;cursor:pointer}
.pw-go:hover,.pw-go.on{background:var(--ink);color:#fff}

/* tree rows: start + one plain sentence; version facts */
.pw-modes{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pw-modes li{display:grid;gap:3px}
.pw-modes .pw-go{justify-self:start;text-align:left}
.pw-why{color:var(--mut);font-size:12.5px;line-height:1.35}
.pw-tech{font-weight:400;opacity:.75;margin-left:4px}
.pw-facts{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;margin:0 0 10px;font-size:12.5px}
.pw-facts div{display:contents}
.pw-facts dt{color:var(--mut)}
.pw-facts dd{margin:0;font-weight:600}
@media (max-width:560px){.pw-facts{grid-template-columns:1fr}.pw-facts dt{margin-top:4px}}
/* model completion 20. 10.: the version's technical data where no technology scene lists them (parameter-only, labelled as such) */
.pw-params{margin:10px 0 12px;border:1px solid var(--line);border-radius:8px;padding:0 12px 4px;background:#fff}
.pw-params>summary{min-height:44px;display:flex;align-items:center;gap:6px;font-weight:600;cursor:pointer}
.pw-params .pw-facts{font-size:13.5px}.pw-params-h{margin:8px 0 4px}

#as-lede .lede-s{display:none}
@media (max-width:560px){#as-lede .lede-l{display:none}#as-lede .lede-s{display:inline}#as-h{margin-bottom:2px}}

/* the no-cargo notice belongs to „Hodí sa mi?“ only (it pushed the Asistenti / Pohon starts off a phone screen — Juke, Townstar) */
.sim[data-section=assist] #sim-nocargo,.sim[data-section=tech] #sim-nocargo,.sim[data-section=space] #sim-nocargo,.sim[data-section=parking] #sim-nocargo{display:none}

/* Z6: the way back to the recommended view after the customer orbited during a demo */
.as-rec{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:4;border:1px solid var(--line);background:rgba(255,255,255,.95);border-radius:999px;padding:7px 14px;font-weight:700;font-size:12.5px;cursor:pointer;box-shadow:0 2px 10px rgba(17,18,22,.1);pointer-events:auto}
.as-rec[hidden]{display:none}
@media (max-width:560px){.as-rec{top:8px;font-size:12px;padding:6px 12px}}

/* Z4: the active demo — benefit, current step, result, main limitation; the full scenario and the method on request */
.as-benefit{margin:2px 0 10px;color:var(--ink2);font-size:13.5px}
.as-benefit:empty{display:none}
.as-now{border-left:3px solid var(--red);background:var(--card);padding:8px 10px;margin:8px 0;font-size:13.5px;min-height:2.6em}
.as-now:empty{display:none}
.as-now-k{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);margin-bottom:2px}
.as-result{border:1px solid var(--line);padding:8px 10px;margin:6px 0;font-size:13px}
.as-result b{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);margin-bottom:2px}
.as-limit{color:var(--mut);margin:6px 0}
.as-limit:empty{display:none}
.as-scenario summary{font-weight:700}

/* Z15 (17. 10.): during an open demo the price and contact stay compact — price line + offer + test drive; summary / save link return after the demo */
body:has(.stage-wrap.assist-stage) .buy .buy-basis,body:has(.stage-wrap.assist-stage) .buy .buy-meta,body:has(.stage-wrap.assist-stage) .buy .buy-sum-ls{display:none}
body:has(.stage-wrap.assist-stage) .buy{padding:6px 14px 8px;gap:5px}
body:has(.stage-wrap.assist-stage) .buy .buy-cta .btn-p,body:has(.stage-wrap.assist-stage) .buy .buy-cta .btn-g{min-height:38px;padding-top:6px;padding-bottom:6px}

/* Z3: demo cards — preview of the real scene, title, one sentence, clear start */
.as-card .as-thumb{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;margin:-2px 0 8px;background:#e6e8ec;border-radius:2px}
.as-card .as-go{display:inline-block;margin-top:8px;font-weight:700;font-size:12.5px;color:var(--red)}
.as-card.on .as-go{color:inherit}

/* phones: compact card rows — small preview left, title / sentence / start right (the full-width preview pushed the start off screen) */
@media (max-width:560px){#sim-assist .as-cards{grid-template-columns:1fr}
  .as-card.has-thumb{display:grid;grid-template-columns:116px minmax(0,1fr);column-gap:10px;align-items:start;text-align:left}
  .as-card.has-thumb .as-thumb{grid-row:1 / span 5;margin:0;width:116px}
  .as-card.has-thumb>b,.as-card.has-thumb>small,.as-card.has-thumb>.as-go{grid-column:2}
  .as-card.has-thumb .as-go{margin-top:4px}}

.int-view{margin:8px 0 0}
.int-view:empty{display:none}
body.no3d #int-enter{display:none}

/* Z10: waiting for the scene to be ready — the bar says so, the timeline does not run */
.assist-bar.prep .ab-play{font-size:0}
.assist-bar.prep .ab-play::after{content:"";width:16px;height:16px;border-radius:50%;border:3px solid rgba(17,18,22,.25);border-top-color:#111216;animation:abspin .8s linear infinite;display:block;margin:auto}
@keyframes abspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.assist-bar.prep .ab-play::after{animation:none}}

/* no 3D: the demo is its steps to read, no time player / live readout over the photo */
#sim-assist.no3d-demo .as-ctl,#sim-assist.no3d-demo #as-now,#sim-assist.no3d-demo #as-status,#sim-assist.no3d-demo .as-views,#sim-assist.no3d-demo #as-sound-row{display:none}

/* phones without 3D (data saver prompt / no WebGL): the photo, the message, „Načítať 3D model“ and the Údaje / Iný model bar need their own height —
   the fixed sticky 3D stage let them spill over the section tabs (all four covered; tech-platforms report 17. 10.) */
@media (max-width:900px){body.no3d .stage-wrap{position:relative!important;top:auto!important;height:auto!important;max-height:none!important;overflow:visible}
  body.no3d #stage-fallback{position:relative!important;inset:auto!important}body.no3d #stage{display:none}
  body.no3d .tabs{top:0}}

/* PARK-03 (Peter 17. 10.): „Pohľad kamery“ of a parking demo — a compact inset in a free corner of the stage (src/assist/camview.js
   places it against the car's screen box); phones: the full 3D area after „Kamera“ on the stage bar.  Only with a confirmed camera. */
.as-cam{position:absolute;z-index:4;display:flex;flex-direction:column;gap:6px;padding:8px;background:rgba(17,18,22,.88);color:#fff;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.28);pointer-events:auto}
.as-cam[hidden],.as-cam-chip[hidden],.ab-cam[hidden]{display:none}
.as-cam-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.as-cam-k{font-size:12.5px;font-weight:700}
.as-cam-min{min-height:32px;padding:0 10px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:none;color:#fff;font-size:12px;cursor:pointer}
.as-cam-min:focus-visible,.as-cam-chip:focus-visible,.ab-cam button:focus-visible{outline:2px solid #6cc4ee;outline-offset:2px}
.as-cam-trig{margin:0;font-size:12px;color:#d6d8de;line-height:1.3}
.as-cam-trig[hidden]{display:none}
.as-cam-pic{position:relative;aspect-ratio:16/10;border-radius:6px;overflow:hidden;background:#22262b}
.as-cam-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.as-cam-ill{position:absolute;left:6px;bottom:6px;padding:2px 7px;border-radius:4px;background:rgba(0,0,0,.62);font-size:11px;font-weight:600;letter-spacing:.02em}
.as-cam-off{position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center;padding:10px;text-align:center;font-size:12.5px;color:#d6d8de}
.as-cam-off[hidden]{display:none}
.as-cam-sens{display:grid;gap:3px}
.as-cam-sens[hidden]{display:none}
.as-cam-z{margin:0;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px;font-size:12px}
.as-cam-z b{font-weight:600}
.as-cam-lvs{display:flex;gap:3px}
.as-cam-lv{display:block;width:14px;height:6px;border-radius:2px;background:var(--lv);opacity:.28}
.as-cam-lv.on{opacity:1;box-shadow:0 0 0 1px #fff}
.as-cam-chip{position:absolute;z-index:4;width:150px;min-height:44px;border:0;border-radius:999px;background:rgba(17,18,22,.86);color:#fff;font-weight:700;font-size:12.5px;cursor:pointer}
/* phones: the camera picture over the whole 3D area (the bar, caption and tabs stay outside it) */
.as-cam.phone{border-radius:0;padding:8px 8px 6px;background:rgba(17,18,22,.94)}
.as-cam.phone .as-cam-min{display:none}
.as-cam.phone .as-cam-pic{flex:1 1 auto;aspect-ratio:auto;min-height:0}
/* the stage bar's Vonku / Kamera row (phones) */
.assist-bar:has(.ab-cam:not([hidden])){display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;border-radius:22px;row-gap:6px}   /* first row: back · play · time · Kroky; second row: the switch */
.assist-bar:has(.ab-cam:not([hidden])) .ab-time{display:none}
.assist-bar:has(.ab-cam:not([hidden])) .ab-t{min-width:0;width:100%}
.assist-bar:has(.ab-cam:not([hidden])) .ab-back-c{max-width:96px}
.ab-cam{grid-column:1 / -1;display:flex;gap:6px}
.ab-cam button{flex:1 1 50%;min-height:44px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:none;color:#fff;font-weight:700;font-size:13px;cursor:pointer}
.ab-cam button[aria-pressed=true]{background:#fff;color:#111216;border-color:#fff}

/* SCENE-TEXT-01 (variant A, Peter 17. 10.): the phase text laid on the road beside the car (src/assist/roadtext.js maps this block onto the
   road plane with a matrix3d); upright panel fallback; phones: the caption strip below the 3D picture carries it */
.as-rt{position:absolute;left:0;top:0;z-index:3;pointer-events:none;transform-origin:0 0}
.as-rt[hidden]{display:none}
.as-rt-in{display:inline-flex;flex-direction:column;align-items:flex-start;max-width:560px}
.as-rt-in.in{animation:asRtIn .38s ease-out both}
.as-rt-h{font:800 46px/1.02 'DM Sans',system-ui,sans-serif;text-transform:uppercase;letter-spacing:.01em;color:#fff;white-space:nowrap;text-shadow:0 0 2px rgba(0,0,0,.85),0 2px 4px rgba(0,0,0,.7),0 0 26px rgba(0,0,0,.55)}
.as-rt-l{display:block;width:132px;height:5px;margin:10px 0 9px;border-radius:3px;background:#2bb7e6;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.as-rt-s{font:600 22px/1.28 'DM Sans',system-ui,sans-serif;color:#fff;max-width:540px;text-shadow:0 0 2px rgba(0,0,0,.85),0 1px 4px rgba(0,0,0,.7),0 0 16px rgba(0,0,0,.5)}
.as-rt-s[hidden]{display:none}
.as-rt.rt-panel .as-rt-in{padding:10px 14px;border-radius:10px;background:rgba(17,18,22,.74);max-width:420px}
.as-rt.rt-panel .as-rt-h{font-size:22px;white-space:normal;text-shadow:none}
.as-rt.rt-panel .as-rt-l{width:64px;height:3px;margin:6px 0}
.as-rt.rt-panel .as-rt-s{font-size:14px;text-shadow:none}
@keyframes asRtIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.as-rt-in.in{animation:none}}
.assist-hud .as-rt-cap b{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink)}

/* Pohon a nabíjanie: "Technológie" (Blade / CTB / Tepelné čerpadlo of THIS version) as compact cards right under the heading, visible on
   opening the section (Peter 17. 10.: the heat pump was row 9 under the facts table); the version facts collapsed under the modes */
.pw-techs{margin:2px 0 14px}
.pw-tech-card:not(.as-card2){display:grid;gap:4px;align-content:start;text-align:left;border:1px solid var(--line);border-left:4px solid #2bb7e6;background:#fff;padding:9px 11px;min-height:44px;cursor:pointer;color:var(--ink)}
.pw-tech-card:not(.as-card2) b{font-size:14px}
.pw-tech-card:not(.as-card2) small{font-size:12px;color:var(--mut);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pw-tech-card .as-go{font-size:12px;font-weight:700;color:var(--red)}
.pw-tech-card:not(.as-card2).on,.pw-tech-card:not(.as-card2):hover{border-color:var(--ink);border-left-color:#2bb7e6}
.pw-tech-card:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.pw-facts-d{margin:4px 0 10px}
.pw-facts-d summary{cursor:pointer;font-size:12.5px;font-weight:700;color:var(--mut)}
.pw-facts-d[open] .pw-facts{margin-top:6px}
/* R10 (Peter 17. 10.): the section intro under the Technológie group (the group is the first thing seen); same long / short text as #as-lede */
.pw-lede{margin:0 0 12px;color:var(--ink2)}
.pw-lede .lede-s{display:none}
@media (max-width:560px){.pw-lede .lede-l{display:none}.pw-lede .lede-s{display:inline}}
/* camera inset: one short trigger line; the full confirmed wording only in the phone camera view (tooltip on desktop) */
.as-cam-trig{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.as-cam-trig-full{display:none;margin:0;font-size:12px;color:#d6d8de;line-height:1.3}
.as-cam.phone .as-cam-trig{display:none}.as-cam.phone .as-cam-trig-full{display:block}

/* ====================== UI-5S (Peter 17. 10., UI + 3D brief, design 01): one light header for every section, five-section navigation ====================== */
.top{background:#fff;color:var(--ink);border-bottom:1px solid var(--line);gap:14px;position:relative;z-index:8}
.top .brand{color:var(--ink)}
.top .crumb{color:var(--ink2)}.shell .top .crumb #crumb-var{color:var(--ink)}
.top .crumb-back{color:var(--ink2)}
.top .build-id{color:#8a9097}
.shell .top .mp-open{background:#fff;border-color:var(--line);color:var(--ink);border-radius:8px}
.shell .top .mp-open:hover,.shell .top .mp-open:focus-visible{border-color:var(--ink)}
.shell .top .mp-open-k{color:var(--mut)}
.secnav{display:flex;align-self:stretch;align-items:stretch;gap:2px;margin:0 auto;min-width:0}
.secnav [role=tab]{display:flex;align-items:center;gap:7px;border:0;border-bottom:3px solid transparent;border-top:3px solid transparent;background:none;padding:0 14px;cursor:pointer;color:var(--ink2);font:600 14.5px/1.1 'DM Sans',system-ui,sans-serif;white-space:nowrap;min-height:44px}
.secnav [role=tab]:hover{color:var(--ink);border-bottom-color:var(--line)}
.secnav [role=tab]:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}
.secnav [role=tab][aria-selected=true]{color:var(--red);border-bottom-color:var(--red)}
.secnav .t-ic{display:none;width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:1240px) and (min-width:901px){.secnav [role=tab]{padding:0 8px;font-size:13.5px}.top{gap:8px}.top .crumb .proto,.top .build-id{display:none}.top .crumb .crumb-back{font-size:12px}}
/* phones / tablets (≤ 900 px): the navigation sits at the top of the panel, sticky below the 3D like the former tabs, icon + short label */
.secnav.tabs{display:flex;margin:0;align-self:auto;gap:0;background:var(--card);border-bottom:1px solid var(--line)}
.secnav.tabs [role=tab]{flex:1 1 0;min-width:0;flex-direction:column;justify-content:center;gap:2px;padding:6px 2px 5px;min-height:52px;font-size:11.5px;color:var(--ink2);border-top:0}
.secnav.tabs .t-ic{display:block}
.secnav.tabs .t-l{max-width:100%;overflow:hidden;text-overflow:ellipsis}
@media (max-width:360px){.secnav.tabs [role=tab]{font-size:10.5px}}

/* ---- UI-5S Konfigurácia (design 01): "Vaše auto", compact trim selector, Exteriér / Interiér, swatches, rows; one main action */
#panel-config .lede{display:none}
#panel-config h1.cf-h{font-size:38px;margin:14px 0 2px}
#panel-config h2{font:700 16px/1.25 'DM Sans',system-ui,sans-serif;text-transform:none;letter-spacing:0;margin:20px 0 9px}
#panel-config .trim-pop h2{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);margin:12px 0 7px}
.cf-lab{margin:14px 0 6px;font-weight:700;font-size:16px}
.trim-sel{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:50px;padding:6px 14px;border:1.5px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;text-align:left}
.trim-sel:hover{border-color:var(--ink2)}.trim-sel:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.trim-sel[aria-expanded=true]{border-color:var(--red)}
.trim-sel span{display:flex;flex-direction:column;min-width:0}.trim-sel b{font-size:17px;font-weight:700;line-height:1.2}.trim-sel small{font-size:12.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trim-sel i{font-style:normal;font-size:14px;color:var(--ink2);transition:transform .15s}.trim-sel[aria-expanded=true] i{transform:rotate(180deg)}
.trim-pop{margin:6px 0 2px;padding:2px 12px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;box-shadow:0 10px 28px rgba(17,18,22,.10);max-height:min(62vh,560px);overflow:auto;overscroll-behavior:contain}
#panel-config .grade-cmp{margin:10px 0 4px;border:0}
#panel-config .grade-cmp>summary{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px;list-style:none}
#panel-config .grade-cmp>summary::-webkit-details-marker{display:none}#panel-config .grade-cmp>summary::before{content:none!important}
#panel-config .grade-cmp>summary .muted{text-decoration:none;font-weight:400;font-size:13px}
#panel-config .grade-cmp>summary::after{content:'›';color:var(--red);font-size:20px;line-height:1;text-decoration:none}
#panel-config .grade-cmp[open]>summary::after{transform:rotate(90deg)}
.cf-ic{width:20px;height:20px;flex:none;fill:none;stroke:var(--red);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cf-row-btn .cf-ic{stroke:var(--ink2)}
/* Exteriér / Interiér: one segmented switch in the panel (only with a 3D cabin) */
#panel-config .xi-switch{position:static;transform:none;display:flex;width:100%;margin:18px 0 0;padding:3px;border:0;border-radius:9px;background:#eef0f2;box-shadow:none}
#panel-config .xi-switch[hidden]{display:none}
#panel-config .xi-switch button{flex:1 1 0;min-height:44px;border-radius:7px;font-size:15px;font-weight:600;color:var(--ink2);padding:0 10px}
#panel-config .xi-switch button[aria-pressed=true]{background:var(--red);color:#fff}
/* colour swatches: round, the chosen one ringed (its name + price in the line below) */
#panel-config .chips.swatches .chip{border:0;background:none;box-shadow:none;padding:4px 0 2px;min-height:0}
#panel-config .chips.swatches .chip i{width:46px;height:46px;border:1px solid rgba(0,0,0,.18);box-shadow:0 0 0 3px #fff,0 0 0 4px transparent;transition:box-shadow .15s}
#panel-config .chips.swatches .chip.on i{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--red)}
#panel-config .chips.swatches .chip:hover i{box-shadow:0 0 0 3px #fff,0 0 0 4px var(--ink2)}
#panel-config .chips.swatches .chip.on:hover i{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--red)}
#panel-config .chips.swatches .chip:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.cf-row-btn{display:flex;align-items:center;gap:12px;width:100%;min-height:54px;margin:16px 0 0;padding:0 2px;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:none;cursor:pointer;font-weight:600;font-size:15.5px;text-align:left}
.cf-row-btn span{flex:1}.cf-row-btn i{font-style:normal;font-size:22px;color:var(--ink2)}
.cf-row-btn:hover span{text-decoration:underline}.cf-row-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
#panel-config .end-note{margin:14px 0 8px}

/* ---- seat block + boot-floor info pin (moved from the simulator's runtime injection, cargo agent's request 17. 10.) */
.sim .seats .seat-h{margin:0 0 .45rem}.sim .seats .seat-h small{display:block;font-weight:400;margin-top:.1rem}
.sim .seat-map{display:flex;gap:6px;margin:0 0 .55rem;padding:6px;border-radius:12px;background:#dfe5e3}
.sim .seat-part{min-height:62px;border:2px solid transparent;border-radius:9px;background:#93c9cd;color:#123;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:inherit;transition:background .2s,border-color .2s}
.sim .seat-part b{font-size:1.05rem}.sim .seat-part small{font-size:.75rem}
.sim .seat-part[aria-pressed="true"]{background:#f4f6f5;border-style:dashed;border-color:#7a8c88;color:#3d4a47}
.sim .seat-part:hover,.sim .seat-part:focus-visible,.sim .seat-part.hl{border-color:#0d7f8c;box-shadow:0 0 0 2px rgba(13,127,140,.25)}
.sim .seat-btns .seg{min-width:4.2rem}.sim .seat-left{margin:.45rem 0 0}.sim .seat-review{margin:.55rem 0 0}
.sim .dim-vol{margin:.6rem 0 0;padding:.55rem .7rem;border-radius:8px;background:#f3f5f4}.sim .dim-vol b{font-size:1.02rem}.sim .dim-vol p{margin:.15rem 0 0}.sim .floor-info span{font-weight:600}
.sim-on .dz3d-hs.sim-floor-pin{display:block!important}.dz3d-hs.sim-floor-pin i{background:#fff;border:2px solid #0d7f8c;box-shadow:0 0 0 4px rgba(13,127,140,.22);display:flex;align-items:center;justify-content:center}.dz3d-hs.sim-floor-pin i::after{content:'i';font:700 13px/1 Georgia,serif;font-style:italic;color:#0d7f8c}

/* ---- UI-5S shared section shell: back link, title, three-way switch, outlined action */
.sec-back{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0;border:0;background:none;color:var(--ink2);font-weight:600;font-size:14.5px;cursor:pointer}
.sec-back:hover{color:var(--ink);text-decoration:underline}.sec-back:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sec-h{font:800 30px/1.1 'DM Sans',system-ui,sans-serif;text-transform:none;letter-spacing:-.01em;margin:2px 0 14px}
.seg3{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin:0 0 6px}
.seg3 button{flex:1 1 0;min-height:46px;border:0;border-left:1px solid var(--line);background:#fff;font-weight:600;font-size:14.5px;color:var(--ink2);cursor:pointer;padding:0 8px}
.seg3 button:first-child{border-left:0}.seg3 button[aria-pressed=true]{background:var(--red);color:#fff}
.seg3 button:disabled{color:#a7adb3;cursor:not-allowed;background:#f6f7f8}
.seg3 button:focus-visible{outline:2px solid var(--ink);outline-offset:-3px}
.btn-o{display:flex;align-items:center;justify-content:center;width:100%;min-height:50px;margin:16px 0 4px;border:2px solid var(--red);border-radius:8px;background:#fff;color:var(--red);font-weight:700;font-size:16px;cursor:pointer}
.btn-o:hover{background:#fdf1f1}.btn-o:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* ---- UI-5S Priestor a kufor (design 03) */
.space-ui{margin:0 0 6px}
.sim:not([data-section=space]) #space-ui{display:none!important}
.sp-why{margin:2px 0 0}
.btn-s.sm{margin-top:6px;min-height:44px}
.sp-h{font:700 19px/1.2 'DM Sans',sans-serif;margin:16px 0 8px}.sp-storage{list-style:none;margin:10px 0;padding:0}.sp-storage li{padding:8px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.35}
.sp-seats{margin:18px 0 0;padding:14px 0 0;border-top:1px solid var(--line)}
.sp-sh{display:flex;align-items:center;gap:10px;margin:0 0 10px}.sp-sh h3{font:700 19px/1.2 'DM Sans',system-ui,sans-serif;margin:0}.sp-sh .sp-reset{margin-left:auto;min-height:40px}
.sp-tiles{display:flex;gap:10px}
.sp-tile{display:flex;align-items:center;gap:10px;min-height:76px;padding:10px 12px;border:1.5px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;text-align:left}
.sp-tile:hover,.sp-tile:focus-visible,.sp-tile.hl{border-color:var(--ink2)}.sp-tile:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sp-tile.folded{border-color:var(--red);background:#fff6f6}
.sp-tile span{display:flex;flex-direction:column}.sp-tile b{font-size:22px;line-height:1.1}.sp-tile small{font-size:13px;color:var(--ink2)}
.sp-seat-ic{width:40px;height:30px;flex:none;fill:#dfe3e6;stroke:#59616a;stroke-width:1.4;stroke-linejoin:round}.sp-tile.folded .sp-seat-ic{fill:#f3c9cb;stroke:var(--red)}
.sp-left{margin:8px 0 0}.sp-review{margin:8px 0 0}
.sp-dims{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.sp-dim{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:6px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;text-align:left}
.sp-dim:hover,.sp-dim:focus-visible{border-color:var(--ink2)}.sp-dim[aria-pressed=true]{border-color:#2b7bbf;box-shadow:inset 0 0 0 1px #2b7bbf}
.sp-n{display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:50%;background:#59616a;color:#fff;font-size:13px;font-weight:700}
.sp-dim[aria-pressed=true] .sp-n{background:#2b7bbf}
.sp-l{flex:1;font-size:15.5px;display:flex;flex-direction:column}.sp-l small{font-size:12px;color:var(--mut)}
.sp-v{display:flex;flex-direction:column;align-items:flex-end;font-weight:700;font-size:17px;white-space:nowrap}.sp-v small{font-weight:500;font-size:11.5px;color:var(--mut)}
.sp-dim.k-measured .sp-v small{color:var(--ok)}
.sp-dim.k-estimate .sp-v{color:var(--est)}
.sp-dim.k-unverified .sp-v{color:var(--mut);font-weight:600;font-style:italic;font-size:15px}
.sp-dim-d{margin:6px 4px 2px;color:var(--ink2)}
.sp-more{margin:8px 0 0;border:1px solid var(--line);border-radius:8px;padding:0 10px}.sp-more>summary{min-height:46px;display:flex;align-items:center;justify-content:center;gap:6px;font-weight:600;cursor:pointer}
.sp-more[open]{padding-bottom:10px}
.sp-note{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0;color:var(--ink2)}
.sp-i{display:grid;place-items:center;width:18px;height:18px;flex:none;border-radius:50%;background:#9aa1a8;color:#fff;font:italic 700 12px/1 Georgia,serif;margin-top:1px}
.sp-vol{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:12px 0 0;padding:10px 12px;border-radius:8px;background:#f3f5f4}.sp-vol b{font-size:18px}.sp-vol small{color:var(--mut)}
.sp-vol-src,.sp-vol-none{margin:6px 0 0}
.sp-floor{margin:10px 0 0;border:1px solid var(--line);border-radius:8px;padding:0 12px}.sp-floor>summary{min-height:44px;display:flex;align-items:center;font-weight:600;cursor:pointer}
.sp-lug{margin:12px 0 0}
/* Priestor of a car without a 3D boot (model completion 20. 10.): verified manufacturer measurements + litres, a proportional schematic */
.spf{margin:14px 0 0;padding:12px;border:1px solid var(--line);border-radius:8px;background:#fff}.spf-h{margin:0 0 8px;font-size:16px}
.spf-fig{margin:0 0 6px}.spf-sketch{display:block;width:100%;max-width:340px;height:auto;margin:0 auto;font:600 11px/1 'DM Sans',sans-serif;fill:var(--ink2)}
.spf-body{fill:#e9ecee;stroke:#59616a;stroke-width:1.2}.spf-wheel{fill:#59616a}.spf-ground{stroke:#9aa1a8;stroke-width:1}
.spf-dim{stroke:var(--ink2);stroke-width:1;fill:none}.spf-sketch marker path{fill:var(--ink2)}
.spf-dims{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;margin:6px 0 0}.spf-dims div{display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid var(--line);padding:4px 0}
.spf-dims dt{color:var(--ink2);font-size:14px}.spf-dims dd{margin:0;font-weight:700;font-size:14.5px;white-space:nowrap}
.spf-comp{margin:4px 2px 0}.spf-src{margin:8px 0 0}.spf-pend{margin-top:12px}.spf-pend ul{margin:0 0 4px;padding-left:18px}
@media (max-width:420px){.spf-dims{grid-template-columns:1fr}}
/* the simulator's own blocks the shell replaces in Priestor (one control per function) */
.sim[data-section=space] .sim-exp[data-exp=space],.sim[data-section=space] #sim-seats,.sim[data-section=space] #sim-dims,.sim[data-section=space] .space-prompt,
.sim[data-section=space] .space-try,.sim[data-section=space] #sim-floor,.sim[data-section=space] #sim-dims-note,.sim[data-section=space] .demo-pick,
.sim[data-section=space] .seg-row:has(> [data-view]),.sim[data-section=space] .sim-row:has(> .seg-row > [data-view]) > .sim-lab{display:none!important}
.sim[data-section=space][data-mode=space] #sim-title,.sim[data-section=space][data-mode=space] .sim-lede,.sim[data-section=space] .sim-lede-short,.sim[data-section=space] .sim-exps{display:none!important}

/* ---- UI-5S catalogue: situation tabs + one card per offered function (designs 05 / 07) */
#as-h{font:800 30px/1.1 'DM Sans',system-ui,sans-serif;text-transform:none;letter-spacing:-.01em;margin:6px 0 6px}
.as-sits{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 12px}
.as-sit-t{min-height:44px;padding:0 14px;border:0;border-radius:8px;background:#eef0f2;color:var(--ink2);font-weight:600;font-size:14.5px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.as-sit-t[aria-selected=true]{background:var(--red);color:#fff}
.as-sit-t:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.as-sit-n{font-size:12px;opacity:.75;font-weight:500}
.as-cards2{display:grid;gap:10px}
.as-card2{display:grid;grid-template-columns:112px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;padding:8px 12px 8px 8px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;text-align:left;color:var(--ink)}
.as-card2:hover{border-color:var(--ink2);box-shadow:0 4px 14px rgba(17,18,22,.08)}.as-card2:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.as-card2.on{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.as-card2.prev{cursor:default;opacity:.85;background:#fafbfb}
.as-c2-pic{display:block;width:112px;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#e9edf0}
.as-c2-pic .as-thumb{display:block;width:100%;height:100%;object-fit:cover;margin:0;border-radius:0}
.as-c2-ic{display:grid;place-items:center;width:100%;height:100%;color:#3a4148}.as-c2-ic .ui-ic{width:34px;height:34px}
.ui-ic{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.as-c2-t{display:flex;flex-direction:column;gap:2px;min-width:0}.as-c2-t b{font-size:15.5px;line-height:1.25}.as-c2-t small{font-size:13px;color:var(--ink2);line-height:1.35}
.as-c2-tag{font-style:normal;font-size:12px;color:var(--est);margin-top:2px}
.as-c2-go{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13.5px;color:var(--ink)}
.as-c2-go i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--red);color:#fff;font-style:normal;font-size:12px}
.as-card2.own .as-c2-go i{background:var(--ink)}
@media (max-width:420px){.as-card2{grid-template-columns:88px minmax(0,1fr) auto;gap:10px}.as-c2-pic{width:88px}.as-c2-go{font-size:0;gap:0}}
.as-allfx{margin:18px 0 6px;border:1px solid var(--line);border-radius:10px;padding:0 12px}
.as-allfx>summary{min-height:48px;display:flex;align-items:center;font-weight:700;cursor:pointer}
.as-allfx[open]{padding-bottom:10px}

/* ---- UI-5S player panel (designs 05 / 07): title, benefit, place settings (collapsible), big start, steps, folds, next demo */
#sim-assist #as-title{font:800 26px/1.15 'DM Sans',system-ui,sans-serif;margin:4px 0 4px}
#sim-assist .as-benefit{font-size:15px;color:var(--ink2);margin:0 0 10px}
#sim-assist .as-now{display:none}
.as-set{margin:10px 0 6px;border:1px solid var(--line);border-radius:10px;padding:0 12px}
.as-set>summary{min-height:46px;display:flex;align-items:center;font-weight:700;cursor:pointer}
.as-set[open]{padding-bottom:10px}
.as-in{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:8px 0;border-top:1px solid #eef0f2}
.as-in:first-child{border-top:0}
.as-in-l{font-size:15px;font-weight:600}
.as-in .as-seg{flex:1 1 220px;margin:0}
.as-seg button{min-height:44px}
.as-stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.as-stepper button{width:44px;min-height:44px;border:0;background:#fff;font-size:20px;cursor:pointer;color:var(--ink)}
.as-stepper button:disabled{color:#c2c7cc;cursor:default}.as-stepper button:focus-visible{outline:2px solid var(--ink);outline-offset:-3px}
.as-stepper output{min-width:76px;text-align:center;font-weight:700;font-size:15.5px;border-left:1px solid var(--line);border-right:1px solid var(--line);line-height:44px}
.as-switch{position:relative;width:52px;height:30px;border:0;border-radius:999px;background:#c7ccd1;cursor:pointer;padding:0;flex:none}
.as-switch i{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .15s}
.as-switch[aria-checked=true]{background:#1aa3d9}.as-switch[aria-checked=true] i{left:25px}
.as-switch:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.as-start{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:54px;margin:12px 0 6px;border-radius:8px;font-size:17px}
.as-start i{font-style:normal;font-size:16px}
.as-stepsui{list-style:none;margin:12px 0 8px;padding:0;display:grid;gap:4px}
.as-stepsui li{display:flex;gap:12px;align-items:flex-start;padding:8px 10px;border-radius:8px}
.as-stepsui li.on{background:#fdecec}
.as-sn{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;border:1.5px solid #c2c7cc;color:var(--ink2);font-weight:700;font-size:14px;background:#fff}
.as-stepsui li.on .as-sn{background:var(--red);border-color:var(--red);color:#fff}
.as-stepsui li.done .as-sn{border-color:var(--ink2);color:var(--ink2)}
.as-st{display:flex;flex-direction:column;gap:1px}.as-st b{font-size:15px}.as-st small{font-size:13px;color:var(--ink2)}
.as-stepsui .as-sn-of{padding:0 10px}
.as-fold{border-top:1px solid var(--line);margin:0}.as-fold:last-of-type{border-bottom:1px solid var(--line)}
.as-fold>summary{min-height:48px;display:flex;align-items:center;gap:10px;font-weight:700;cursor:pointer}
.as-fold>summary .ui-ic{width:22px;height:22px}.as-fold ul{margin:0 0 10px;padding-left:20px}
.as-next{margin:14px 0 4px;padding:10px;border-radius:10px;background:#f1f4f7}.as-next:empty{display:none}
.as-next-k{margin:0 0 8px;font-weight:700}

/* ---- UI-5S fixes after the first browser pass */
.top .crumb{display:flex;align-items:center;gap:8px;white-space:nowrap;flex:none}
.shell .top .crumb #crumb-var{display:none}
.top .crumb .crumb-back{min-height:44px;font-size:13px}
.top .crumb .proto{margin:0}
.top .review-chip{max-width:min(240px,18vw);flex:0 1 auto;min-width:0}
.top .build-id{flex:none}
.as-sits{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;padding-bottom:4px;scroll-snap-type:x proximity}
.as-sit-t{flex:none;padding:0 11px;font-size:14px;scroll-snap-align:start}
.as-own{margin:12px 0 4px}
.sim[data-section=parking] .sim-exps{display:none!important}
#panel-config .grade-cmp>summary .muted{display:none}
/* Technológie: rows per mode, Celé auto / Detail systému */
.pw-tree .pw-tech-cards{margin:10px 0 16px}
.pw-tree .pw-ver{margin-top:14px}
.pw-scene{border:0;padding:0;background:none}
.pw-modes{list-style:none;margin:6px 0 8px;padding:0;display:grid;gap:0}
.pw-modes li{border-top:1px solid var(--line)}.pw-modes li:last-child{border-bottom:1px solid var(--line)}
.tech-row{display:flex;align-items:center;gap:12px;width:100%;min-height:54px;padding:8px 4px;border:0;background:none;cursor:pointer;text-align:left;color:var(--ink)}
.tech-row .ui-ic{width:26px;height:26px;flex:none;color:var(--ink2)}
.tech-row-t{flex:1;display:flex;flex-direction:column;gap:2px}.tech-row-t b{font-size:15.5px;font-weight:600}.tech-row-t small{font-size:13px;color:var(--ink2)}
.tech-row>i{font-style:normal;font-size:22px;color:var(--ink2)}
.tech-row:hover b{text-decoration:underline}.tech-row:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.tech-row.on b{color:var(--red)}
.pw-empty{margin:12px 0}
.as-pview{margin:10px 0 6px}

@media (min-width:1241px){.secnav [role=tab]{padding:0 12px}}
.top .review-chip{margin-left:0}
@media (max-width:1599px){.top .review-chip .rc-long{display:none}.top .review-chip .rc-short{display:inline}}

.as-chips{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 100%}
.as-chips button{min-height:40px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:#fff;font-weight:600;font-size:13.5px;color:var(--ink2);cursor:pointer}
.as-chips button[aria-pressed=true]{background:var(--red);border-color:var(--red);color:#fff}
.as-chips button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* phones during a demo (brief §09: never catalogue + parameters + player + sales panel at once): the stage bar is the one player (its ▶
   starts), the settings open on demand, the purchase bar steps aside until the customer returns to a catalogue */
@media (max-width:900px){
  .as-start{display:none!important}
  body:has(.stage-wrap.assist-stage) .buy{display:none!important}
  body:has(.stage-wrap.assist-stage){padding-bottom:0!important}
}
#panel-config .grade-cmp>summary::after{display:inline-block}
#panel-config .grade-cmp>summary{text-decoration:none}#panel-config .grade-cmp>summary .cmp-l{text-decoration:underline;text-underline-offset:3px}

/* ---- UI-5S phone cards (coordinator review 17. 10.): one column, icon / picture left, title + text action below it — never a round button
   over the title, no word-per-line wrapping (all catalogues: Parkovanie, Asistenti, Technológie); also the narrow panel of a short landscape phone */
@media (max-width:560px), (orientation:landscape) and (max-height:520px) and (max-width:1000px){
  .as-card2{grid-template-columns:72px minmax(0,1fr);grid-template-areas:"p t" "p g";column-gap:12px;row-gap:4px;align-items:start;padding:10px 12px 10px 10px}
  .as-c2-pic{grid-area:p;width:72px;align-self:center}
  .as-c2-t{grid-area:t;min-width:9em}
  .as-c2-t b{font-size:15px;overflow-wrap:normal;word-break:normal;hyphens:manual}
  .as-c2-go{grid-area:g;font-size:13.5px;gap:4px;color:var(--red)}
  .as-c2-go i{width:auto;height:auto;background:none;color:var(--red);border-radius:0;font-size:13px;order:2}
  .as-card2.own .as-c2-go i{background:none;color:var(--ink)}.as-card2.own .as-c2-go{color:var(--ink)}
}

/* ---- UI-5S phone purchase bar (coordinator review 17. 10., brief §1): ONE main action — Chcem ponuku large; Skúšobná jazda smaller
   secondary; Súhrn a cena a text link next to the price (portrait / tall phones; the short-landscape bar keeps its own one-row layout) */
@media (max-width:900px) and (min-height:521px){
  .buy{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"p s" "c c";row-gap:6px}
  .buy .buy-meta{grid-area:s;display:flex;align-items:center;justify-content:flex-end}
  .buy .buy-meta .price-valid{display:none}
  .buy .buy-sum{border:0!important;min-height:44px;padding:0 2px;text-decoration:underline;text-underline-offset:3px;font-weight:600;font-size:13.5px;align-self:center;background:none}
  .buy .buy-cta{grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:8px}
  .buy .buy-cta .btn-p{font-size:15.5px;min-height:48px}
  .buy .buy-cta .btn-g{font-size:12.5px;font-weight:600;min-height:48px;border-width:1px;border-color:#9aa1a8;color:var(--ink2)}
}

/* ---- UI-5S narrow header (≤ 380 px): the model name readable (brand prefix hidden), the review chip never squeezed to "…" */
@media (max-width:380px){
  .shell .top{gap:8px;padding:0 10px}
  .shell .top .mp-brand{display:none}
  .shell .top .mp-open{padding:4px 8px 4px 10px;min-width:0}
  .shell .top .mp-open b{font-size:19px}
  .top .review-chip{flex:none;max-width:none}
}
.as-rt.two .as-rt-h{white-space:normal;line-height:1.02}
.as-rt.rt-panel .as-rt-h{max-width:none!important}
.as-rt.two .as-rt-s{max-width:none}
.as-rt.rt-panel .as-rt-in{width:auto!important}

/* situation tabs: every tab visible — wrapped rows from 561 px; phones a scrollable row with a visible affordance (fade + partial tab) */
@media (min-width:561px){.as-sits{flex-wrap:wrap;overflow:visible;row-gap:6px}}
@media (max-width:560px){.as-sits{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);padding-right:28px}}

/* hotspot pins fanned out around a shared point (src/cabin3d/index.js declutter): the button moves by --dx/--dy, a leader line points back
   to the true anchor */
.cab-pin.fan{translate:var(--dx,0) var(--dy,0)}
.cab-pin .cab-lead{display:none}
.cab-pin.fan .cab-lead{display:block;position:absolute;left:22px;top:22px;width:var(--len,0);height:2px;margin-top:-1px;background:#fff;box-shadow:0 0 0 1px rgba(17,18,22,.45);transform-origin:0 50%;transform:rotate(var(--ang,0deg));pointer-events:none;z-index:-1}

/* phones: every tap target at least 44 px (QA rounds E–H: "▶ Pozrieť ukážku" in Všetky funkcie podľa výbavy was 36 px) */
@media (max-width:900px){
  .fc-go,.as-chips button,.sp-sh .sp-reset,.pw-facts-d summary,.as-card2.prev,.sec-back{min-height:44px}
  .fc-go{display:inline-flex;align-items:center}
  .as-switch::before{content:"";position:absolute;inset:-7px -4px}
}

/* ---- EV-02 / 03 journey: previous / next topic with its title, position, way back (shared, all widths) */
.as-next{background:none;padding:0}
.as-journey{margin:14px 0 6px;padding:12px;border-radius:10px;background:#f1f5f9;border:1px solid #d6e2ee}
/* Peter 19. 10.: related chapters of the technical platform (Blade → Teplota batérie / Tepelné čerpadlo, heat pump → back to the overview) */
.as-rel{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0 10px}
.as-rel-h{font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--est)}
.as-rel-go{min-height:44px;padding:6px 12px;border:1px solid #b9c8d6;border-radius:22px;background:#fff;color:var(--ink,#111216);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.as-rel-go:hover{border-color:#111216}.as-rel-go:focus-visible{outline:2px solid #111216;outline-offset:2px}
.as-rel-go.back{background:#111216;color:#fff;border-color:#111216}
.as-j-pos{margin:0 0 8px;font-size:13px;font-weight:700;color:var(--est);text-transform:uppercase;letter-spacing:.03em}
.as-j-btns{display:grid;grid-template-columns:1fr;gap:8px}
.as-j-btns button{display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 12px;border-radius:8px;cursor:pointer;text-align:left;font:inherit}
.as-j-btns button span{flex:1;display:flex;flex-direction:column;gap:1px;font-size:13px;color:var(--ink2)}
.as-j-btns button b,.as-j-btns button small{font-size:15px;font-weight:700;color:var(--ink)}
.as-j-btns button i{font-style:normal;font-size:22px;line-height:1}
.as-j-prev{border:1px solid var(--line);background:#fff}
.as-j-next{border:2px solid var(--red);background:#fff}.as-j-next i{color:var(--red)}
.as-j-btns button:hover{border-color:var(--ink)}.as-j-btns button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.as-next.ended .as-j-next{background:var(--red)}.as-next.ended .as-j-next span,.as-next.ended .as-j-next b,.as-next.ended .as-j-next i{color:#fff}
.as-j-all{margin-top:8px;min-height:44px;font-weight:600}
/* ---- EV-10 secondary technology entries: clearly clickable — tinted blue, icon, short benefit, visible arrow, selected state, ≥ 44 px */
.pw-modes{gap:6px}
.pw-modes li{border:0!important}
.tech-row{min-height:56px;padding:8px 12px;border:1px solid #b9d3ea;border-radius:10px;background:#f0f6fc}
.tech-row .ui-ic{color:#1f5f94}
.tech-row>i{color:#1f5f94;font-size:24px}
.tech-row:hover{background:#e3effa;border-color:#1f5f94}
.tech-row:hover b{text-decoration:underline}
.tech-row:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.tech-row.on{background:#1f5f94;border-color:#1f5f94}.tech-row.on b,.tech-row.on small,.tech-row.on .ui-ic,.tech-row.on>i{color:#fff}
.tech-row.on::after{content:'práve zobrazené';font-size:11px;font-weight:700;color:#fff;background:rgba(255,255,255,.18);border-radius:4px;padding:2px 6px;margin-left:4px}
.as-stepsui button.as-st{border:0;background:none;padding:0;text-align:left;cursor:pointer;font:inherit;color:inherit;min-height:44px;justify-content:center}
.as-stepsui button.as-st:hover b{text-decoration:underline}.as-stepsui button.as-st:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.as-guide{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:4px 0 6px}

/* ---- CONN: Konektivita a pohodlie na diaľku (Technológie entry; desktop + shared) */
.conn-card{margin:10px 0 14px;border:1px solid #b9d3ea;border-radius:10px;background:#f0f6fc;padding:0 12px}
.conn-card>summary{display:flex;align-items:center;gap:12px;min-height:60px;cursor:pointer;list-style:none}
.conn-card>summary::-webkit-details-marker{display:none}
.conn-card .as-c2-ic{width:48px;height:48px;border-radius:8px;background:#fff;color:#1f5f94;display:grid;place-items:center}
.conn-t{flex:1;display:flex;flex-direction:column;gap:2px}.conn-t b{font-size:15.5px}.conn-t small{font-size:13px;color:var(--ink2)}
.conn-demo{font-style:normal;font-size:11.5px;font-weight:700;color:#1f5f94;border:1px solid #1f5f94;border-radius:4px;padding:2px 6px;white-space:nowrap}
.conn-card[open]{padding-bottom:12px}
.conn-list{list-style:none;margin:6px 0 8px;padding:0;display:grid;gap:8px}
.conn-list li{background:#fff;border-radius:8px;padding:8px 10px}.conn-list p{margin:3px 0 0;font-size:13.5px}
.conn-m{font-size:12px;color:#1f5f94;font-weight:600}
.conn-go{margin:4px 0 8px;min-height:44px}

/* ---- range entry (Konfigurácia row + Technológie card) */
#cfg-range{margin-top:0;border-top:0}
.cf-row-btn span small{display:block;font-weight:400;font-size:12.5px;color:var(--mut);margin-top:1px}
.range-entry{margin:10px 0 12px}
.range-card{border-color:#b9d3ea;background:#f0f6fc}
/* ======================================================================================================================================
   MOB-01 phone layout (Peter 17. 10., unified EV + DM-i brief §15/16 — release blocker; Mobile UX agent, src/mobile/*).
   Scoped to body.mob, which src/mobile/phone.js sets ONLY while isPhoneLayout() is true (≤ 900 px / short landscape): desktop unchanged.
   Scene-first: compact header · the 3D stage = the unobstructed rectangle (--mob-st-*, computed from visualViewport + measured chrome)
   · ONE bottom sheet (the configurator panel itself: closed / collapsed / partial / expanded, --mob-sh-*) · ONE exploration control
   · slim bottom bar (price / enquiry row in the configurator + section navigation, safe-area aware).  The overrides are !important
   with a higher specificity than the older phone blocks above (sticky stage + scrolling page), which stay for ?mob=0 / no-JS.
   ====================================================================================================================================== */
.mob-bar,.mob-shead,.mob-edit,.mob-price,.mob-xbtn,.mob-xdrawer,.mob-model,.mob-model-lab,.mob-dtitle{display:none}
.boot-quick{display:none}
@media (max-width:900px),(orientation:landscape) and (max-height:520px) and (max-width:1000px),(orientation:landscape) and (pointer:coarse) and (max-height:600px) and (max-width:1400px){
  html:has(body.mob){overflow:hidden;height:100%;overscroll-behavior:none}
  body.mob{padding:0!important;overflow:hidden;height:100%;overscroll-behavior:none}
  /* compact header: brand, model picker, (review chip), price chip when the price row is not shown */
  body.mob header.top{position:fixed;left:0;right:0;top:0;z-index:25;height:auto;min-height:50px;padding:env(safe-area-inset-top) max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left));gap:8px;flex-wrap:nowrap}
  body.mob header.top .brand{font-size:22px;flex:none}
  body.mob.shell header.top .mp-open{min-height:38px;padding:2px 8px 2px 10px;flex:0 1 auto;min-width:0;max-width:none}
  body.mob.shell header.top .mp-open b{font-size:19px}
  body.mob header.top .crumb,body.mob header.top .build-id{display:none}
  body.mob .mob-price{display:none}
  body.mob.mob-chip .mob-price{display:inline-flex;align-items:center;margin-left:auto;flex:none;min-height:38px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);cursor:pointer;white-space:nowrap}
  body.mob .mob-price b{font:600 19px/1 Teko,sans-serif;padding-top:3px}
  body.mob.mob-chip header.top .review-chip{margin-left:0}
  body.mob:not(.mob-chip) header.top .review-chip{margin-left:auto}
  /* the scene: a fixed rectangle between the header and the bottom chrome (dvh fallback before the first measurement) */
  body.mob .layout{display:block!important;min-height:0!important;height:auto!important}
  body.mob .stage-wrap.stage-wrap{position:fixed!important;left:var(--mob-st-x,0px)!important;top:var(--mob-st-y,50px)!important;width:var(--mob-st-w,100vw)!important;height:var(--mob-st-h,calc(100dvh - 170px))!important;max-height:none!important;min-height:0!important;margin:0!important;z-index:1;box-shadow:none!important;transition:none!important;inset:auto}
  body.mob[data-mob-sheet=expanded] .stage-wrap.stage-wrap{visibility:hidden}
  body.mob.mob-covered .stage-wrap.stage-wrap{visibility:hidden}   /* 200 % zoom / tiny height: the open sheet covers the scene (src/mobile/framing.js MIN_SHEET) */
  body.mob.mob-covered .mob-size{display:none}
  body.mob .stage-wrap #stage{position:relative!important;top:auto!important;height:100%!important;min-height:0}
  body.mob .stage-wrap.assist-stage #stage{height:auto!important;flex:1 1 auto}
  body.mob .stage-wrap .dz3d-canvas{touch-action:none!important}
  /* first view without competing layers: info / NCAP / data move into the exploration control, model + trim into the header / sheet */
  body.mob #info-open,body.mob #stage-size,body.mob #sr-ncap-chip,body.mob #podium-hint-keys,body.mob #sr-toggle,body.mob .stage-wrap > #seat-bar{display:none!important}
  body.mob:not(.mob-markers) .dz3d-overlay .dz3d-hs{visibility:hidden!important;pointer-events:none!important}
  body.mob .stage-note{top:auto;bottom:62px;left:10px;right:10px;max-width:none;font-size:11.5px}
  body.mob .toast{bottom:calc(var(--mob-bar,110px) + 10px)!important}
  /* ONE bottom sheet = the configurator panel (same DOM, same state); landscape: a column on the right */
  body.mob .panel.panel{position:fixed!important;left:var(--mob-sh-x,0px)!important;top:var(--mob-sh-y,100dvh)!important;width:var(--mob-sh-w,100vw)!important;height:var(--mob-sh-h,0px)!important;max-height:none!important;z-index:15;display:flex!important;flex-direction:column;border:0!important;border-radius:14px 14px 0 0;background:#fff;box-shadow:0 -8px 26px rgba(17,18,22,.18);overflow:hidden!important}
  body.mob[data-mob-sheet=closed] .panel.panel{visibility:hidden}
  /* M-2: „O modeli“ on phones = the sheet rectangle (portrait: under the car, landscape: the right column); the car is reframed beside it */
  body.mob.mob-ip .ip.ip{left:var(--mob-sh-x,0px)!important;top:var(--mob-sh-y,50%)!important;width:var(--mob-sh-w,100vw)!important;height:var(--mob-sh-h,50%)!important;right:auto!important;bottom:auto!important;max-height:none!important;z-index:16;border-radius:14px 14px 0 0}
  body.mob.mob-ip.mob-land .ip.ip{border-radius:0;border-left:1px solid var(--line)}
  body.mob.mob-ip .panel.panel{visibility:hidden}
  body.mob[data-mob-sheet=expanded] .panel.panel{border-radius:0;box-shadow:none}
  body.mob.mob-land[data-mob-sheet=partial] .panel.panel{border-radius:0;box-shadow:-8px 0 22px rgba(17,18,22,.14);border-left:1px solid var(--line)!important}
  body.mob .panel .panel-scroll{flex:1 1 auto!important;min-height:0;overflow:auto!important;padding:6px 16px 20px!important;overscroll-behavior:contain}
  body.mob[data-mob-sheet=collapsed] .panel .panel-scroll{visibility:hidden}
  body.mob .mob-shead{display:flex;align-items:center;gap:6px;flex:none;order:-1;position:relative;min-height:54px;padding:10px 8px 4px 14px;border-bottom:1px solid var(--line);background:#fff;touch-action:none}
  body.mob .mob-handle{position:absolute;left:50%;top:0;transform:translateX(-50%);width:72px;height:22px;border:0;background:none;padding:0;cursor:pointer;display:grid;place-items:center}
  body.mob .mob-handle i{display:block;width:40px;height:4px;border-radius:2px;background:#c3c7cc}
  body.mob .mob-handle:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
  body.mob .mob-stitle{flex:1 1 auto;min-width:0;margin:4px 0 0;font:600 25px/1 Teko,sans-serif;text-transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;outline:none}
  body.mob .mob-size,body.mob .mob-close{flex:none;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font:700 13.5px/1.1 'DM Sans',system-ui,sans-serif;cursor:pointer}
  body.mob .mob-close span{font-size:18px;font-weight:400;margin-right:2px}
  body.mob .mob-size:focus-visible,body.mob .mob-close:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
  body.mob .panel > #sr-data{order:0}
  /* inside the sheet: no big „Vaše auto“ intro (the sheet title says it), compact first rows */
  body.mob #panel-config .cf-h,body.mob #panel-config > .lede{display:none}
  body.mob #panel-config #default-note{font-size:13px;margin:2px 0 8px}
  body.mob #panel-config .mob-model-lab{display:block;margin-top:6px}
  body.mob #panel-config .mob-model{display:flex}
  body.mob #panel-config .mob-model[hidden],body.mob #panel-config .mob-model-lab[hidden]{display:none}
  body.mob .toast{pointer-events:none}body.mob .toast button,body.mob .toast a{pointer-events:auto}   /* a status toast never swallows taps on the car / the podium */
  /* bottom bar: slim price / enquiry row (configurator) + section navigation, safe-area aware */
  body.mob .mob-bar{display:flex;flex-direction:column;position:fixed;left:0;right:0;bottom:0;z-index:20;background:#fff;border-top:1px solid var(--line);padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);box-shadow:0 -4px 14px rgba(17,18,22,.06)}
  body.mob .mob-bar .secnav.secnav{position:static!important;top:auto!important;display:flex;margin:0;border:0;box-shadow:none;background:#fff;order:2}
  body.mob .mob-bar .secnav [role=tab]{min-height:54px;padding:5px 2px 4px;border-top:3px solid transparent;border-bottom:0;font-size:11.5px}
  body.mob .mob-bar .secnav [role=tab][aria-selected=true]{border-top-color:var(--red);color:var(--red)}
  body.mob .mob-bar .buy.buy{position:static!important;display:none!important;order:1;grid-template-columns:minmax(0,1fr) auto auto!important;grid-template-areas:"e p c" "e s c"!important;align-items:center;column-gap:10px;row-gap:0;padding:6px 10px!important;border:0;border-bottom:1px solid var(--line);background:#fff;box-shadow:none}
  body.mob.mob-buy .mob-bar .buy.buy{display:grid!important}
  body.mob .mob-bar .buy .mob-edit{grid-area:e;display:flex;align-items:center;gap:8px;min-width:0;min-height:48px;padding:4px 10px 4px 8px;border:1px solid var(--line);border-radius:8px;background:#f6f7f8;color:var(--ink);cursor:pointer;text-align:left}
  body.mob .mob-edit svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
  body.mob .mob-edit-t{display:flex;flex-direction:column;min-width:0;line-height:1.15}
  body.mob .mob-edit-t b{font-size:14px;white-space:nowrap}
  body.mob .mob-edit-v{font-size:11.5px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.mob .mob-edit[aria-expanded=true]{border-color:var(--ink);background:#fff}
  body.mob .mob-bar .buy .buy-price{grid-area:p;display:block!important;text-align:right;min-width:0}
  body.mob .mob-bar .buy .buy-name,body.mob .mob-bar .buy .buy-basis{display:none!important}
  body.mob .mob-bar .buy .buy-price b{font-size:23px!important;line-height:1;white-space:nowrap}
  body.mob .mob-bar .buy .buy-meta{grid-area:s;display:flex!important;justify-content:flex-end}
  body.mob .mob-bar .buy .buy-meta #share-open,body.mob .mob-bar .buy .buy-meta .price-valid{display:none!important}
  body.mob .mob-bar .buy .buy-meta .buy-sum{position:relative;min-height:0!important;padding:1px 0!important;border:0!important;background:none;font-size:12.5px!important;font-weight:600;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
  body.mob .mob-bar .buy .buy-meta .buy-sum::after{content:"";position:absolute;inset:-12px -6px}
  body.mob .mob-bar .buy .buy-cta{grid-area:c;display:block!important}
  body.mob .mob-bar .buy .buy-cta .btn-g,body.mob .mob-bar .buy .buy-cta .buy-sum-ls{display:none!important}
  body.mob .mob-bar .buy .buy-cta .btn-p{min-height:48px!important;padding:0 12px!important;font-size:14px!important;white-space:nowrap}
  /* ONE exploration control: a button on the stage → a drawer with the app's own view / doors / boot / interior / reset buttons */
  body.mob .boot-quick:not([hidden]){display:inline-flex;align-items:center;position:absolute;right:10px;bottom:10px;z-index:7;min-height:44px;padding:0 16px;border:0;border-radius:22px;background:var(--ink);color:#fff;font:600 15px/1 'DM Sans',sans-serif}
  body.mob .boot-quick:focus-visible{outline:2px solid var(--red);outline-offset:2px}
  body.mob .mob-xbtn{display:inline-flex;position:absolute;left:10px;bottom:10px;z-index:7;align-items:center;gap:6px;min-height:44px;padding:0 15px 0 11px;border-radius:22px;border:1px solid rgba(17,18,22,.2);background:rgba(255,255,255,.95);color:var(--ink);font:700 14px/1 'DM Sans',system-ui,sans-serif;box-shadow:0 2px 10px rgba(17,18,22,.14);cursor:pointer}
  body.mob .mob-xbtn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}
  body.mob .mob-xbtn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  body.mob.mob-explore .mob-xbtn{display:none}
  body.mob .stage-wrap:has(.rx-stage:not([data-phase=closed])) .mob-xbtn,body.mob .stage-wrap:has(.rx-stage:not([data-phase=closed])) .mob-xdrawer{display:none!important}   /* range workspace (r-range) open: the map gets the whole safe rect */
  body.mob .stage-wrap.assist-stage .mob-xbtn{bottom:auto;top:10px;left:10px}
  /* the drawer is compact (two scrollable rows over the podium, never a panel over the car); the car keeps its size — no re-fit jump */
  body.mob .mob-xdrawer:not([hidden]){display:block;position:absolute;left:6px;right:6px;bottom:6px;z-index:9;max-height:calc(100% - 12px);overflow-y:auto;padding:6px 50px 6px 6px;border-radius:14px;background:rgba(255,255,255,.97);box-shadow:0 8px 26px rgba(17,18,22,.22)}
  body.mob .stage-wrap.assist-stage .mob-xdrawer:not([hidden]){bottom:auto;top:6px}
  body.mob .mob-xhead{position:absolute;right:3px;top:3px;min-height:0;padding:0}
  body.mob .mob-xhead b{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  body.mob .mob-xclose{min-width:44px;min-height:44px;border:0;border-radius:22px;background:#eef0f2;font-size:24px;line-height:1;cursor:pointer;color:var(--ink)}
  body.mob .mob-xclose:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
  body.mob .mob-xtools #viewer-tools,body.mob .mob-xmore{position:static!important;display:flex;flex-wrap:nowrap;gap:6px;left:auto;right:auto;bottom:auto;margin:0;overflow-x:auto!important;overflow-y:hidden;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);padding-right:18px}
  body.mob .mob-xtools #viewer-tools::-webkit-scrollbar,body.mob .mob-xmore::-webkit-scrollbar{display:none}
  body.mob .mob-xtools #viewer-tools[hidden]{display:none!important}
  body.mob .mob-xtools #viewer-tools > button,body.mob .mob-xtools #viewer-tools .tl-group{flex:0 0 auto;min-width:0;max-width:none}
  body.mob .mob-xtools #viewer-tools button,body.mob .mob-xmore button{min-height:44px;padding:0 13px;border:1px solid var(--line);border-radius:22px;background:#fff;color:var(--ink);font:600 13px/1.1 'DM Sans',system-ui,sans-serif;white-space:nowrap;cursor:pointer}
  body.mob .mob-xtools #viewer-tools button[aria-pressed=true]{border-color:var(--ink);background:var(--ink);color:#fff}
  /* an open „Pohľad“ list: the row wraps and the list is a row of its own (never clipped by the scrolling row) */
  body.mob .mob-xtools #viewer-tools:has(.tl-group.open){flex-wrap:wrap;overflow:visible!important;-webkit-mask-image:none;mask-image:none}
  body.mob .mob-xtools #viewer-tools .tl-group.open{flex:1 1 100%}
  body.mob .mob-xtools #viewer-tools .tl-toggle{width:auto}
  body.mob .mob-xtools #viewer-tools .tl-list{position:static;min-width:0;box-shadow:none;border:0;margin-top:6px;flex-direction:row;flex-wrap:wrap;gap:6px;background:none}
  body.mob .mob-xtools #viewer-tools .tl-list button{flex:0 0 auto;text-align:center}
  body.mob .mob-xmore{margin-top:6px;padding-top:0;border-top:0}
  body.mob .mob-xmore button{background:#f3f4f6}
  body.mob .mob-xmore button[hidden]{display:none}
  body.mob .mob-xmore button[aria-expanded=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
  body.mob .mob-xmore small{font-weight:400}
  body.mob .mob-xlist{list-style:none;margin:6px 0 0;padding:0;max-height:min(176px,40vh);overflow:auto;border:1px solid var(--line);border-radius:10px}
  body.mob .mob-xlist button{display:block;width:100%;min-height:44px;padding:6px 12px;border:0;border-bottom:1px solid var(--line);background:#fff;text-align:left;font-size:13.5px;cursor:pointer}
  body.mob .mob-xlist li:last-child button{border-bottom:0}
  body.mob .mob-xnone{padding:10px 12px;font-size:13px;color:var(--mut)}
  /* interior tour (Seal U): its offers live in the drawer, its card lies over the lower part of the scene (never below it / over the bar) */
  body.mob .stage-wrap > .a3-offer{display:none!important}
  body.mob .mob-xtools .a3-offer{position:static;display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;margin-top:6px;left:auto;right:auto;top:auto}
  body.mob .mob-xtools .a3-offer[hidden]{display:none}
  body.mob .mob-xtools .a3-offer button{flex:0 0 auto;border-radius:22px;font-size:13px;white-space:nowrap}
  body.mob .stage-wrap .a3-card{top:auto!important;bottom:62px!important;left:8px!important;right:8px!important;width:auto!important;max-height:calc(100% - 72px)!important;overflow:auto;border-width:1px!important;z-index:8}
  body.mob.mob-explore .stage-wrap .a3-card{display:none}
  /* demonstrations: the player bar owns the stage; nothing commercial around it (the header chip leads to the summary) */
  body.mob .stage-wrap.assist-stage{display:flex!important;flex-direction:column}
  /* no WebGL (CA-06): the stage holds the compact picture + colour gallery only (height from src/mobile/phone.js), the sheet follows under it */
  body.mob.no3d .stage-wrap.stage-wrap{overflow:hidden;background:#eef0f2}
  body.mob.no3d .stage-wrap #stage-fallback{position:relative!important;inset:auto!important;padding:8px 12px 4px}
  body.mob.no3d .stage-wrap{overflow-y:auto;overscroll-behavior:contain}   /* the dimensions card made the stage taller than its box, and the box did not scroll: the prompt to load 3D lay under the sheet, out of a finger's reach (1. 11.) */
  body.mob.no3d .stage-wrap #stage-fallback{display:flex;flex-direction:column;text-align:center}
  body.mob.no3d .stage-wrap #stage-fallback #fallback-retry{align-self:center;margin:6px 0}
  body.mob.no3d .stage-wrap #stage-fallback img{max-height:110px;margin:0 auto}
  body.mob.no3d .stage-wrap #stage-fallback figcaption{font-size:12px;line-height:1.3;padding:4px 8px}
  body.mob.no3d .stage-wrap #stage-fallback #fallback-msg{font-size:12px;line-height:1.3;margin:4px 0 0}
  body.mob.no3d .stage-wrap .sr-no3d{margin:4px 12px 6px}
  body.mob.no3d .stage-wrap .sr-no3d #sr-model{display:none}   /* the model picker is in the header */
  body.mob.no3d #sr-toggle{display:inline-flex!important}   /* no exploration control without 3D: the technical data stay one tap away */
  body.mob.no3d .panel.panel{box-shadow:0 -4px 14px rgba(17,18,22,.10)}
  body.mob .stage-wrap .assist-hud.below{margin:0!important}
  /* AUD-05: the mode / chapter name of a running demo over the scene, just above the player bar (src/mobile/phone.js syncTitle) */
  body.mob[data-mob=demo] .mob-dtitle:not(:empty){display:block;position:absolute;left:10px;right:auto;bottom:70px;z-index:7;max-width:calc(100% - 20px);margin:0;padding:4px 11px;border-radius:999px;background:rgba(17,18,22,.84);color:#fff;font:700 13px/1.25 'DM Sans',system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
  body.mob[data-mob=demo][data-mob-sheet=partial] .stage-wrap .assist-hud.below{display:none!important}   /* settings open: the steps in the sheet explain, the scene keeps its room */   /* the short current explanation directly under the scene (its 56 px gap was for the old page layout) */
  /* short landscape phone: every vertical pixel for the car — the navigation is a rail on the left, the price row the right end of the
     header row, an open sheet the right column (src/mobile/framing.js phoneLayout, landscape) */
  body.mob.mob-land header.top{min-height:48px;padding-right:calc(var(--mob-buy-w,0px) + max(8px,env(safe-area-inset-right)))}
  body.mob.mob-land .mob-bar{z-index:26;top:var(--mob-head,48px);right:auto;width:auto;flex-direction:column;border-top:0;border-right:1px solid var(--line);padding:0 0 env(safe-area-inset-bottom) env(safe-area-inset-left);box-shadow:4px 0 14px rgba(17,18,22,.05)}
  body.mob.mob-land .mob-bar .secnav.secnav{flex-direction:column;flex:1 1 auto;min-height:0}
  body.mob.mob-land .mob-bar .secnav [role=tab]{flex:1 1 0;width:78px;min-height:44px;padding:2px;border-top:0;border-left:3px solid transparent;font-size:10.5px;gap:1px}
  body.mob.mob-land .mob-bar .secnav [role=tab][aria-selected=true]{border-left-color:var(--red)}
  body.mob.mob-land .mob-bar .secnav .t-ic{width:20px;height:20px}
  body.mob.mob-land .mob-bar .buy.buy{position:fixed!important;top:0;right:0;left:auto!important;bottom:auto!important;width:auto!important;z-index:26;height:var(--mob-head,48px);padding:env(safe-area-inset-top) max(8px,env(safe-area-inset-right)) 0 8px!important;border:0;background:transparent;grid-template-columns:auto auto auto!important;grid-template-areas:"e p c" "e s c"!important;column-gap:8px}
  body.mob.mob-land .mob-bar .buy .mob-edit{min-height:40px;padding:2px 10px 2px 6px}
  body.mob.mob-land .mob-bar .buy .mob-edit-v{display:none}
  body.mob.mob-land .mob-bar .buy .buy-price b{font-size:20px!important}
  body.mob.mob-land .mob-bar .buy .buy-meta .buy-sum{font-size:11.5px!important}
  body.mob.mob-land .mob-bar .buy .buy-cta .btn-p{min-height:40px!important}
  body.mob.mob-land .mob-xbtn{bottom:calc(10px + env(safe-area-inset-bottom))}
  /* M-2 safe areas: a phone rotated with the notch on the right / the home indicator at the bottom — the right column (sheet, O modeli) keeps its content clear */
  body.mob.mob-land .panel.panel,body.mob.mob-land.mob-ip .ip.ip{padding-right:env(safe-area-inset-right)}
  body.mob.mob-land .panel .panel-scroll{padding-bottom:calc(20px + env(safe-area-inset-bottom))!important}
  body.mob.mob-land .mob-xdrawer:not([hidden]){bottom:calc(6px + env(safe-area-inset-bottom))}
  /* M-2: on a short landscape stage the drawer is ONE scrolling row (two rows covered the lower ~20 % of the car at 740 × 360) */
  body.mob.mob-land .mob-xdrawer:not([hidden]){display:flex;flex-wrap:nowrap;align-items:center;gap:6px;overflow-x:auto;overflow-y:hidden;padding:5px 52px 5px 6px;scrollbar-width:none}
  body.mob.mob-land .mob-xdrawer .mob-xtools,body.mob.mob-land .mob-xdrawer .mob-xmore,body.mob.mob-land .mob-xdrawer .mob-xtools #viewer-tools{flex:none;overflow:visible!important;-webkit-mask-image:none;mask-image:none;margin:0;padding-right:0}
  body.mob.mob-land .mob-xdrawer .mob-xtools{display:flex;gap:6px}
  body.mob.mob-land .mob-xdrawer .mob-xtools .a3-offer{margin-top:0}
  body.mob.mob-land .mob-xdrawer:has(.mob-xlist:not([hidden])),body.mob.mob-land .mob-xdrawer:has(.tl-group.open){flex-wrap:wrap;overflow:visible}
  body.mob.mob-land .mob-xdrawer .mob-xlist{flex:1 1 100%;max-height:min(140px,35vh)}
  body.mob.mob-land .mob-xhead{top:50%;transform:translateY(-50%)}
  body.mob.mob-land .mob-xdrawer:has(.mob-xlist:not([hidden])) .mob-xhead,body.mob.mob-land .mob-xdrawer:has(.tl-group.open) .mob-xhead{top:3px;transform:none}
}
@media (max-width:380px){
  body.mob header.top .brand{font-size:19px}
  body.mob.shell header.top .mp-open b{font-size:17px}
  body.mob .mob-bar .buy .buy-cta .btn-p{padding:0 10px!important;font-size:13px!important}
  body.mob .mob-bar .buy .buy-price b{font-size:21px!important}
}

/* ---- INT-HOT interior-feature list (Konfigurácia; desktop + shared) + the SEAL U tour offers retired (their points are in the list) */
.cab-feats{margin:14px 0 4px}
.cab-feat-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.cab-feat{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:6px 12px;border:1px solid #b9d3ea;border-radius:8px;background:#f0f6fc;cursor:pointer;text-align:left;color:var(--ink)}
.cab-feat b{flex:0 0 auto;font-size:14.5px}.cab-feat small{flex:1;font-size:12.5px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cab-feat i{font-style:normal;color:#1f5f94;font-size:20px}
.cab-feat:hover{border-color:#1f5f94}.cab-feat:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.cab-feat.on{background:#1f5f94;border-color:#1f5f94}.cab-feat.on b,.cab-feat.on small,.cab-feat.on i{color:#fff}
.cab-feat-nav{margin:0 0 8px;padding:10px;border-radius:8px;background:#f1f5f9}
.cab-feat-pos{margin:0 0 6px;font-weight:700;font-size:13.5px}
.cab-feat-btns{display:flex;gap:6px;flex-wrap:wrap}.cab-feat-btns .btn-g{min-height:44px}
.cab-feat-all{min-height:44px;font-weight:600}
/* MOB-01: 200 % zoom / text on a small phone (CSS viewport ~206 px): icon-only edit button, short enquiry label, no review badge — every control
   stays visible and reachable (accessible names unchanged) */
@media (max-width:300px){
  body.mob header.top{gap:6px}
  body.mob header.top .brand{font-size:16px}
  body.mob header.top .review-chip{display:none}
  body.mob.shell header.top .mp-open{min-width:72px;padding:2px 6px}
  body.mob.shell header.top .mp-open b{font-size:15px}
  body.mob .mob-bar .buy.buy{column-gap:6px;padding:4px 6px!important}
  body.mob .mob-bar .buy .mob-edit{padding:4px 8px;min-width:44px}
  body.mob .mob-bar .buy .mob-edit-t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  body.mob .mob-bar .buy .buy-price b{font-size:17px!important}
  body.mob .mob-bar .buy .buy-meta .buy-sum{font-size:10.5px!important}
  body.mob .mob-bar .buy .buy-cta .btn-p{font-size:0!important;padding:0 8px!important}
  body.mob .mob-bar .buy .buy-cta .btn-p::after{content:'Ponuka';font-size:13px}
  body.mob .mob-bar .secnav [role=tab]{font-size:9.5px}
}

/* ---- CA-06 (audit 18. 10.) no-3D fallback: a compact picture + this version's colour gallery; the interior features as 2D cards in the
   panel; every control that needs a visible 3D result is gated (shared rules + desktop; the phone layout stays with the Mobile agent) */
.fb-gallery{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;justify-content:flex-start;margin:6px auto 2px;padding:2px;max-width:100%;scrollbar-width:thin}
.fb-paint{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;width:96px;min-height:44px;padding:6px 4px;border:1px solid var(--line,#d5d9de);border-radius:8px;background:#fff;cursor:pointer;font:inherit;color:var(--ink,#111216)}
.fb-paint img{width:84px;height:46px;object-fit:contain}.fb-paint i{width:34px;height:34px;margin:6px 0;border-radius:50%;border:1px solid rgba(0,0,0,.2)}
.fb-paint span{font-size:12px;font-weight:600;text-align:center;line-height:1.2}.fb-paint small{font-size:11px;color:var(--ink2,#555)}
.fb-paint.on{border-color:#d81e2a;box-shadow:inset 0 0 0 1px #d81e2a}.fb-paint:hover{border-color:#8a9097}.fb-paint:focus-visible{outline:2px solid #111216;outline-offset:2px}
.cab-feats.flat .cab-feat-2d{cursor:default;display:block;min-height:0;padding:8px 12px;background:#fff;border-color:#d5d9de}
.cab-feats.flat .cab-feat-2d b{display:block}.cab-feats.flat .cab-feat-2d small{display:block;white-space:normal;margin-top:2px}
body.no3d .mob-xbtn,body.no3d .mob-xdrawer,body.no3d #xi-switch,body.no3d #viewer-tools,body.no3d .cab-pins{display:none!important}
@media (min-width:901px){body.no3d .fallback{place-content:center;justify-items:center;padding:18px 28px}body.no3d .fallback img{max-height:30vh;max-width:min(460px,70%)}body.no3d .fb-gallery{flex-wrap:wrap;justify-content:center;max-width:640px}}
/* KD-7 (Peter 18. 10.): the range workspace could not load — a clear card on the stage with „Skúsiť znova“ (shared: desktop + phone stage) */
.rx-fail{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:9;width:min(460px,calc(100% - 32px));box-sizing:border-box;background:#fff;border:1px solid #e6c3c3;border-left:4px solid #d81e2a;border-radius:8px;padding:14px 16px;box-shadow:0 8px 24px rgba(17,18,22,.14);text-align:left}
.rx-fail[hidden]{display:none}.rx-fail-h{margin:0 0 4px;font-size:15px}.rx-fail-p{margin:0 0 10px;font-size:13.5px;color:var(--ink2,#444)}
.rx-fail-btns{display:flex;gap:8px;flex-wrap:wrap}.rx-fail-btns .btn-p,.rx-fail-btns .btn-g{min-height:44px}

/* AUD-08 (reviewer audit bc310144, MOB-01 M-3): no-WebGL on desktop — the picture is secondary, the content gets the width (the phone fallback is the
   body.mob.no3d block above: compact picture + gallery on top, the sheet open right under it) */
@media (min-width:901px){
  body.no3d:not(.mob){--panel-w:clamp(560px,60vw,1000px)}
  body.no3d:not(.mob) .stage-wrap{min-height:0}
  body.no3d:not(.mob) .fallback{padding:16px 20px}
  body.no3d:not(.mob) .fallback img{max-height:24vh;max-width:min(380px,92%)}
  body.no3d:not(.mob) .fb-gallery{max-width:100%}
  body.no3d:not(.mob) .panel-scroll{padding:0 32px 28px}
  body.no3d:not(.mob) #panel-config .cfg-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 32px;align-items:start}
  body.no3d:not(.mob) #panel-config .cfg-cols>*{min-width:0}
  body.no3d:not(.mob) #panel-config .cfg-cols *{overflow-wrap:anywhere}
  /* the interior-feature list in the narrower right column (mob_overflow on U-1-e456204f: its cards were 426 px wide in a ~370 px column at
     1280 / 1400 and ran past the window edge) — the grid track and the card may shrink, the name wraps, the note keeps its ellipsis */
  body.no3d:not(.mob) #panel-config .cab-feat-list{grid-template-columns:minmax(0,1fr)}
  body.no3d:not(.mob) #panel-config .cab-feat-list>li,body.no3d:not(.mob) #panel-config .cab-feat{min-width:0;max-width:100%}
  body.no3d:not(.mob) #panel-config .cab-feat b{flex:0 1 auto;min-width:0;white-space:normal}
  body.no3d:not(.mob) #panel-config .cab-feat small{min-width:0}
}

/* UP-2 (EV-10, parity 19. 10.): the category tabs of Asistenti / Parkovanie are visibly selectable — a tinted blue chip with a border
   (not only a grey fill), the selected one red with a white bar under its label (shape + colour, not colour alone), 44 px targets */
.as-sit-t{border:1px solid #b9d3ea;background:#f0f6fc;color:#1f3f5f}
.as-sit-t:hover{border-color:#1f5f94;background:#e3effa}
.as-sit-t[aria-selected=true]{background:var(--red);border-color:var(--red);color:#fff;font-weight:700;box-shadow:inset 0 -3px 0 rgba(255,255,255,.85)}

/* CN (19. 10.): the interior connectivity entry = a heading + one row per customer situation (aplikácia / kľúč) into the player */
.cab-conn-h{margin:4px 0 6px;font-size:14px}.cab-conn-h small{color:var(--ink2);font-weight:600}
.cab-conn-sits{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:6px}
/* charging-port / filler flap actions on the exterior point card (Peter 19. 10. port brief §5, src/ports) */
.cab-card .cab-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.cab-card .cab-act{min-height:40px;padding:0 12px;border:1px solid currentColor;background:transparent;color:inherit;font:inherit;font-size:13px;cursor:pointer;border-radius:4px}
.cab-card .cab-act[aria-pressed="true"]{background:rgba(255,255,255,.14)}
.cab-card .cab-act:focus-visible{outline:2px solid #6cc4ee;outline-offset:2px}

/* podium dimensions (Peter 21. 10. 2026, src/dims/podiumDims.js): the small „Rozmery“ switch at the stage's top left (below „O modeli“),
   the optional detail list, the readable tags that replace a floor label seen too flat / too small, and the 2D card without WebGL */
.dims-ctl{position:absolute;left:12px;top:58px;z-index:4;display:flex;flex-direction:column;align-items:flex-start;gap:6px;max-width:min(270px,calc(100% - 24px));pointer-events:none}
.dims-ctl[hidden]{display:none}
.dims-ctl>*{pointer-events:auto}
.dims-sw{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:5px 9px 5px 9px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.95);box-shadow:0 2px 10px rgba(17,18,22,.08);font:700 13px/1 'DM Sans',system-ui,sans-serif;color:#152238;cursor:pointer}
.dims-sw svg{width:18px;height:18px;fill:none;stroke:#152238;stroke-width:1.6;stroke-linejoin:round}
.dims-sw .dims-st{font-weight:500;color:var(--mut)}
.dims-sw i{position:relative;display:inline-block;width:30px;height:18px;border-radius:9px;background:#c3c8ce;transition:background .15s}
.dims-sw i::after{content:'';position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.dims-ctl.on .dims-sw i{background:#152238}
.dims-ctl.on .dims-sw i::after{transform:translateX(12px)}
.dims-sw:hover,.dims-sw:focus-visible{border-color:#152238}
.dims-sw:focus-visible,.dims-more:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.dims-more{min-height:32px;padding:4px 11px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.95);font:600 12px/1 'DM Sans',system-ui,sans-serif;color:#152238;cursor:pointer}
.dims-more[aria-pressed=true]{background:#152238;color:#fff;border-color:#152238}
.dims-more[hidden],.dims-card[hidden]{display:none}
.dims-card{padding:8px 11px 9px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.96);box-shadow:0 2px 10px rgba(17,18,22,.08);font:12px/1.35 'DM Sans',system-ui,sans-serif;color:#152238;min-width:200px}
.dims-card-h,.dims-2d-h{margin:0 0 4px;font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.dims-card dl,.dims-2d dl{margin:0;display:grid;gap:2px}
.dims-card dl div,.dims-2d dl div{display:flex;justify-content:space-between;gap:12px}
.dims-card dt,.dims-2d dt{margin:0}
.dims-card dt small,.dims-2d dt small{color:var(--mut)}
.dims-card dd,.dims-2d dd{margin:0;font-weight:800;white-space:nowrap}
.dims-card-n{margin:5px 0 0;font-size:11px;color:var(--mut)}
.dims-tags{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden}
.dims-tag{position:absolute;transform:translate(-50%,-50%);padding:3px 8px;border:1px solid rgba(21,34,56,.28);border-radius:6px;background:rgba(255,255,255,.93);font:800 12px/1.2 'DM Sans',system-ui,sans-serif;color:#152238;white-space:nowrap;box-shadow:0 1px 6px rgba(17,18,22,.08)}
.dims-2d{margin:12px auto 4px;max-width:340px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;font:13px/1.4 'DM Sans',system-ui,sans-serif;color:#152238;text-align:left}
.dims-2d[hidden]{display:none}
.dims-2d-svg{display:block;width:100%;max-width:300px;height:auto;margin:2px auto 6px}
@media (max-width:900px){.dims-ctl{left:8px;top:52px}}
body.mob .dims-ctl{left:8px;top:8px;max-width:calc(100% - 16px)}
body.mob .dims-ctl{flex-direction:row;flex-wrap:wrap;align-items:center}body.mob .dims-ctl>.dims-vals,body.mob .dims-ctl>.dims-card{flex-basis:100%}   /* FB-15 follow-up: switch + „Výška a rázvor“ in one row; the wall title is framed below it (phone.js safe stage) */
body.mob .dims-sw{min-height:34px;font-size:12.5px;padding:4px 8px}
body.mob .dims-card{max-width:calc(100vw - 40px)}
body.no3d .dims-ctl,body.no3d .dims-tags{display:none!important}
body.mob .dims-tag{font-size:11.5px;padding:3px 7px}
.dims-vals{margin:0;padding:4px 9px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.95);font:800 12px/1.3 'DM Sans',system-ui,sans-serif;color:#152238;white-space:pre-wrap}
.dims-vals[hidden]{display:none}
.dims-lead{position:absolute;left:0;top:0;overflow:visible}
.dims-lead line{stroke:#152238;stroke-width:1.2;opacity:.75}
.dims-lead circle{fill:#152238}
body.mob .dims-card{font-size:11px;padding:6px 9px;min-width:0}

/* Peter 25. 10. 2026: illustrative luggage example (src/sim/presets.js badge_sk) — the label stays visible on the example button */
.seg .ill-badge { font-weight: 400; }   /* block line under the label (.seg small), same colours as the price line (axe contrast) */
.res-status[data-level="illustrative"] b { font-weight: 600; }
/* ---- ALCAR „Disky a zimné komplety“ (Peter 25. 10. 2026; src/alcar/ui.js) — the module inside Konfigurácia, a separate accessory line ---- */
.acc-entry[hidden],.panel-acc[hidden],.acc-stage[hidden],.acc-photo[hidden]{display:none!important}
.acc-own-link{display:inline-block;margin:8px 0 0 36px;font-size:14px}
#cfg-acc-note{margin:8px 0 0}
.acc-sep{color:var(--mut)}
.panel-acc{display:flex;flex-direction:column;min-height:100%;padding-bottom:0}
.acc-head{padding-top:4px}
.acc-back{font-size:14px;padding:6px 0}
.acc-kick{margin:6px 0 0;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--mut);font-weight:700}
.acc-h{margin:2px 0 8px}
.acc-h:focus,.acc-step-h:focus{outline:none}
.acc-fixture{margin:6px 0 10px;padding:7px 10px;border-left:3px solid var(--warn);background:#fff7e8;font-size:12.5px}
.acc-steps{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:5px}
.acc-st button{display:flex;align-items:center;gap:6px;min-height:36px;min-width:36px;justify-content:center;padding:0 4px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:12.5px;font-weight:600;white-space:nowrap;cursor:pointer;color:var(--ink2)}
.acc-st button i{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#eef0f2;font-style:normal;font-size:12px;font-weight:800}
.acc-st.acc-st-done button i{background:var(--ink);color:#fff}
.acc-st.cur button{padding:0 11px 0 4px;border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red);color:var(--ink)}
.acc-st.cur button i{background:var(--red);color:#fff}
.acc-st button:disabled{cursor:default;opacity:.55}
.acc-st.acc-st-skip button span{text-decoration:line-through}
.acc-st button:focus-visible,.acc-pick:focus-visible,.acc-tog button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.acc-note{margin:0 0 10px}.acc-note p{margin:0}
.acc-body{flex:1 0 auto}
.acc-step-h{font-size:18px;margin:4px 0 4px}
.acc-step-sub{margin:0 0 10px}
.acc-sub-h{font-size:14px;margin:14px 0 6px}
.acc-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:6px 0 4px}
.acc-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);background:#fff;border-radius:8px;overflow:hidden}
.acc-card.on{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.acc-pick{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;padding:10px 12px;border:0;background:none;text-align:left;cursor:pointer;font:inherit;color:var(--ink)}
.acc-pick b{font-size:14.5px;line-height:1.25}.acc-pick span{font-size:12.5px;color:var(--ink2)}.acc-pick em{font-style:normal;font-size:12.5px;color:var(--mut);margin-top:auto;padding-top:4px}
.acc-card.on .acc-pick em{color:var(--ink)}
.acc-img{display:grid;place-items:center;align-self:stretch;aspect-ratio:4/3;margin:-10px -12px 6px;background:#f1f3f5;position:relative}
.acc-img img{width:100%;height:100%;object-fit:contain}
.acc-ph svg{width:56px;height:56px;fill:none;stroke:#aeb4ba;stroke-width:1.6}
.acc-ph-t{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-size:11px;color:var(--mut)}
.acc-more{align-self:flex-start;margin:0 12px 10px;font-size:13px}
.acc-badge{display:inline-block;margin-top:3px;padding:2px 7px;border-radius:4px;font-size:11.5px;font-weight:700;line-height:1.35}
.acc-badge.acc-ok{background:#e5f3ec;color:#145c39}.acc-badge.acc-mid{background:#fff3dd;color:#7a4a00}.acc-badge.acc-no{background:#fde8e8;color:#9b1c22}
.acc-chips{display:flex;flex-wrap:wrap;gap:8px}.acc-chip{grid-template-columns:1fr;grid-template-areas:"n"}
.acc-own{display:grid;gap:10px;margin:12px 0 0}
.acc-own label{display:grid;gap:4px;font-size:13.5px;font-weight:600}
.acc-own select{min-height:44px;padding:0 10px;border:1px solid var(--ink2);border-radius:6px;background:#fff;font:inherit;font-weight:400}
.acc-excl{margin:12px 0 0;font-size:13px}.acc-excl summary{cursor:pointer;color:var(--ink2);min-height:32px;display:flex;align-items:center}.acc-excl ul{margin:4px 0 0;padding-left:18px}
.acc-sum-top{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;align-items:start}
.acc-sum-top .acc-img{margin:0;border-radius:6px;width:120px;height:90px;align-self:start;aspect-ratio:auto}
.acc-sum-n{font-size:16px;line-height:1.25}
.acc-sum-top p{margin:3px 0 4px}
.acc-compat{margin:10px 0 2px}.acc-cond{margin:4px 0 0;padding-left:18px}
.acc-list{margin:0;padding-left:18px;font-size:13.5px}.acc-list li{margin:2px 0}
.acc-svc{margin:12px 0 0;padding:8px 10px;border:1px solid var(--line);border-radius:6px}.acc-svc legend{font-size:13.5px;font-weight:700;padding:0 4px}
.acc-chk{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:start;margin:6px 0;font-size:13.5px;font-weight:400;cursor:pointer}.acc-chk input{width:18px;height:18px;margin:1px 0 0}
.acc-price{margin:12px 0 0;padding:10px 12px;background:#f6f7f8;border-radius:6px}
.acc-price p{margin:2px 0}
.acc-price-main,.acc-price-tot{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.acc-price-main b,.acc-price-tot b{font-family:Teko,sans-serif;font-size:28px;line-height:1}
.acc-ext{margin:6px 0 0;padding-left:18px}
.acc-notes{margin:10px 0 4px;padding-left:18px}
.acc-remove{font-size:13px;margin:4px 0 0}
.acc-foot{position:sticky;bottom:0;z-index:2;margin:14px 0 0;padding:10px 0 calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:2px solid var(--ink);display:grid;gap:6px;box-shadow:0 -8px 18px rgba(17,18,22,.06)}
.acc-foot-sum{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:10px}
.acc-foot-l{font-size:13px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acc-foot-sum b{font-family:Teko,sans-serif;font-size:28px;line-height:1;grid-row:span 2}
.acc-foot-sum small{font-size:11.5px;color:var(--mut)}
.acc-primary{width:100%}.acc-primary[aria-disabled=true]{opacity:.5;cursor:not-allowed}
.acc-need{margin:0}.acc-need.flash{color:var(--no);font-weight:700}
body.acc-open .buy{display:none!important}
/* stage: what is on the car + the factory / selected switch; the photo when no 3D; the cover for another car */
.acc-stage{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:6px;max-width:calc(100% - 24px);pointer-events:none}
.acc-stage>*{pointer-events:auto}
.acc-tog{display:inline-flex;border:1px solid var(--line);background:rgba(255,255,255,.95);border-radius:999px;padding:3px;box-shadow:0 2px 10px rgba(17,18,22,.1)}
.acc-tog button{border:0;background:none;border-radius:999px;padding:6px 14px;min-height:34px;font-weight:700;font-size:13px;color:var(--ink2);cursor:pointer}
.acc-tog button[aria-pressed=true]{background:var(--ink);color:#fff}
.acc-tog button:disabled{opacity:.45;cursor:default}
.acc-oncar{margin:0;padding:4px 10px;border-radius:6px;background:rgba(255,255,255,.92);font-size:12.5px;text-align:center;max-width:560px}
.acc-photo{position:absolute;right:14px;top:104px;z-index:4;width:min(260px,38%);padding:10px;background:rgba(255,255,255,.97);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(17,18,22,.14);font-size:13px}
.acc-photo figure{margin:0}
.acc-photo figcaption{font-size:12px;font-weight:600;color:var(--ink2);margin-top:6px}
.acc-photo .acc-fig{display:grid;place-items:center;aspect-ratio:4/3;background:#f1f3f5;border-radius:6px;position:relative;overflow:hidden}
.acc-photo .acc-fig img{width:100%;height:100%;object-fit:contain}
.acc-photo p{margin:8px 0 0}
.acc-photo.acc-cover{inset:0;width:auto;top:0;right:0;border-radius:0;display:grid;place-content:center;justify-items:center;padding:24px;background:rgba(244,245,246,.985);border:0;box-shadow:none;z-index:6}
.acc-photo.acc-cover figure{width:min(360px,70vw)}
.acc-photo.acc-cover p{max-width:420px;text-align:center;font-size:14px}
.sum-acc{margin:12px 0 0;padding-top:10px;border-top:1px solid var(--line)}.sum-acc .acc-sum-k{margin:0 0 4px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--mut)}
dialog.acc-detail .acc-d-img{display:grid;place-items:center;aspect-ratio:16/9;max-height:260px;background:#f1f3f5;border-radius:8px;margin:0 0 12px;position:relative}
dialog.acc-detail .acc-d-img img{max-width:100%;max-height:100%;object-fit:contain}
dialog.acc-detail h3{font-size:14.5px;margin:14px 0 4px}
.acc-tbl{width:100%;border-collapse:collapse;font-size:13.5px}.acc-tbl th,.acc-tbl td{text-align:left;padding:5px 6px;border-bottom:1px solid var(--line);vertical-align:top}.acc-tbl th{font-weight:600;color:var(--ink2);width:45%}
@media (max-width:900px){
  .acc-foot{padding:8px 0 calc(8px + env(safe-area-inset-bottom))}
  .acc-photo{top:auto;bottom:62px;right:10px;width:min(220px,46%);padding:8px;font-size:12px}
  .acc-tog button{padding:5px 11px;font-size:12.5px;min-height:32px}
  .acc-oncar{font-size:11.5px}
}
body.acc-open .panel .panel-scroll,body.mob.acc-open .panel .panel-scroll,body.mob.mob-land.acc-open .panel .panel-scroll{padding-bottom:0!important}
body.mob.mob-buy.acc-open .mob-bar .buy.buy{display:none!important}   /* one primary button per step: the module footer */
body.mob .acc-stage{top:8px;bottom:auto;left:auto;right:8px;transform:none;align-items:flex-end;max-width:58%}
body.mob .acc-tog button{padding:4px 10px;font-size:12px;min-height:30px;white-space:nowrap}
body.mob .acc-oncar{font-size:11px;text-align:right;padding:3px 8px}
body.mob .acc-photo:not(.acc-cover){top:auto;bottom:10px;right:8px;width:min(230px,56%);display:grid;grid-template-columns:64px minmax(0,1fr);gap:8px;align-items:center;padding:6px 8px;font-size:11.5px}
body.mob .acc-photo:not(.acc-cover) figcaption,body.mob .acc-photo:not(.acc-cover) .acc-ph-t{display:none}
/* Peter 25. 10. part 2 §4: the reason stays readable on phones too (never a silent factory wheel) */
body.mob .acc-photo:not(.acc-cover) .acc-ph-more{display:block;font-size:10.5px;margin-top:2px;color:var(--ink2)}
body.mob .acc-photo:not(.acc-cover) .acc-ph svg{width:36px;height:36px}
body.mob .acc-photo:not(.acc-cover) p{margin:0}
body.mob .acc-h{display:none}   /* the sheet header names the module */
body.mob .acc-kick{margin-top:2px}
body.mob .acc-fixture{padding:5px 8px;font-size:11.5px}
body.mob.mob-land .acc-foot-sum small,body.mob.mob-land .acc-need{display:none}
body.mob.mob-land .acc-foot{padding:6px 0;gap:4px}
body.mob.mob-land .acc-foot-sum b{font-size:22px}
body.mob.mob-land .acc-primary{min-height:40px}
body.mob .acc-sum-top{grid-template-columns:88px minmax(0,1fr)}
body.mob .acc-sum-top .acc-img{width:88px;height:66px}
.acc-sum-top .acc-ph-t{display:none}.acc-sum-top .acc-ph svg{width:40px;height:40px}
body.mob .acc-cards{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
body.mob.mob-land .acc-photo{width:min(200px,34%)}
/* enquiry rows the form hides on purpose (an .enq-check display rule overrode [hidden]; ALCAR dopyt has no own-items row) */
#enq-own-wrap[hidden],#enq-prac-wrap[hidden],#enq-ico-wrap[hidden],#enq-company-note[hidden]{display:none!important}
/* ALCAR on a phone in landscape: the stage is short — compact switch + photo chip, nothing over the dimension chips */
body.mob.mob-land .acc-stage{max-width:44%}
body.mob.mob-land .acc-tog button{padding:3px 8px;font-size:11px;min-height:28px}
body.mob.mob-land .acc-oncar{font-size:10.5px;padding:2px 6px}
body.mob.mob-land .acc-photo:not(.acc-cover){width:min(240px,46%);grid-template-columns:48px minmax(0,1fr);font-size:11px;padding:4px 6px}
body.mob.mob-land .acc-photo:not(.acc-cover) .acc-fig{aspect-ratio:1}
/* QA D3 (24. 10. 2026): on phones the switch sits in the row BELOW the dimension switch, never over it */
body.mob:has(.dims-ctl:not([hidden])) .acc-stage{top:50px}
body.mob.mob-land:has(.dims-ctl:not([hidden])) .acc-stage{top:44px}
body.mob .acc-oncar{max-width:100%}
/* QA D4: short landscape — compact sheet header, one-line kicker, one row of steps, one-row footer: the option cards keep the room */
body.mob.mob-land.acc-open .mob-shead{min-height:42px;padding-top:4px;padding-bottom:2px}
body.mob .acc-kick{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.mob .acc-steps{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:1px 2px}
body.mob.mob-land .acc-kick{margin:0;font-size:10.5px}
body.mob.mob-land .acc-steps{margin:2px 0 4px}
body.mob.mob-land .acc-back{font-size:13px;padding:2px 0}
body.mob.mob-land .acc-st button{min-height:30px;min-width:30px}
body.mob.mob-land .acc-st button i{width:20px;height:20px;font-size:11px}
body.mob.mob-land .acc-step-sub{display:none}
body.mob.mob-land .acc-step-h{font-size:16px;margin:0 0 2px}
body.mob.mob-land .acc-foot{grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:10px;margin-top:6px}
body.mob.mob-land .acc-foot-sum{grid-template-columns:minmax(0,1fr) auto;align-items:center}
body.mob.mob-land .acc-foot-sum b{grid-row:auto;font-size:20px}
body.mob.mob-land .acc-primary{width:auto;min-height:38px;padding:0 14px;font-size:14px;white-space:nowrap}

/* Peter 25. 10. 2026 §3: separate boot-equipment controls (cover, under-floor storage) */
.sp-equip { display: grid; gap: 8px; margin: 10px 0; }
.sp-eq { border: 1px solid var(--line, #d9dce1); border-radius: 8px; padding: 8px 10px; }
.sp-eq-h { margin: 0 0 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sp-chip { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: #eef0f3; color: #2a2d33; }
.sp-eq.on .sp-chip { background: #1f2329; color: #fff; }
.sp-eq .small { margin: 6px 0 0; }
/* ALCAR final-QA view (review builds + ?qa=1 only; src/alcar/qa_view.js) — read-only, out of the way of the stage controls */
.acc-qa{position:fixed;left:8px;bottom:8px;z-index:60;max-width:min(560px,calc(100vw - 16px));background:rgba(255,255,255,.97);border:1px dashed #8a6d00;border-radius:8px;padding:4px 8px;font:12px/1.35 system-ui,sans-serif;color:#222}
.acc-qa summary{cursor:pointer;font-weight:700}.acc-qa summary small{font-weight:400;color:#6b5600}
.acc-qa-t{border-collapse:collapse;margin:6px 0}.acc-qa-t th,.acc-qa-t td{border-bottom:1px solid #ddd;padding:2px 6px;text-align:left;white-space:nowrap}
.acc-qa label{display:flex;gap:6px;align-items:center;margin:2px 0}.acc-qa input[type=range]{width:180px}

/* ENG (stage ENG 26. 10. 2026, brief §4 / §10): hybrid entry + guided tour card — paragraph 18–20 px desktop / 16–18 px phone, heading
   28–36 / 24–28 px, controls ≥ 44 px; dark text on the light panel, no text over the engine */
.pw-hybrid{border:1px solid var(--line);border-left:5px solid #f08c00;background:linear-gradient(180deg,#fffaf3,#fff);padding:14px 14px 12px;margin:0 0 14px}
.pw-hybrid h4{font-size:22px;line-height:1.2;margin:0 0 4px;color:var(--ink)}
.pw-hy-sub{font-size:16px;margin:0 0 10px;color:var(--ink2)}
.pw-hy-go{min-height:46px;font-size:16px;padding:10px 18px;margin:0 0 12px}
.pw-hy-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pw-hy-card{display:grid;gap:4px;align-content:start;text-align:left;border:1px solid var(--line);background:#fff;padding:10px;min-height:96px;cursor:pointer;color:var(--ink)}
.pw-hy-card b{font-size:15px;line-height:1.25}.pw-hy-card small{font-size:13px;color:var(--mut);line-height:1.3}
.pw-hy-card.on{outline:2px solid #f08c00;outline-offset:-2px}
.pw-hy-ic svg{width:26px;height:26px}
.pw-conn-d{border:1px solid var(--line);margin:0 0 12px;background:#fff}.pw-conn-d>summary{padding:10px 12px;min-height:44px;font-weight:600;cursor:pointer;font-size:15px}
.pw-conn-d[open]>summary{border-bottom:1px solid var(--line)}
.as-tour{margin:6px 0 12px}
.as-tour-k{font-size:14px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:#b85c00;margin:0 0 4px}
.as-tour-h{font-size:30px;line-height:1.15;margin:0 0 10px;color:var(--ink)}
.as-tour-p{font-size:19px;line-height:1.5;margin:0 0 10px;color:var(--ink)}
.as-tour-p b{font-weight:700}
.as-tour-more{margin:0 0 10px;font-size:17px;line-height:1.5}.as-tour-more>summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:600;font-size:17px}
.as-tour-more p{margin:4px 0 0;color:var(--ink2)}
.as-tour-cta{min-height:46px;font-size:16px;padding:10px 16px;margin:4px 0 10px}
.as-tour-auto{display:flex;align-items:center;gap:10px;min-height:44px;font-size:16px;cursor:pointer}.as-tour-auto input{width:22px;height:22px}
.as-tourmode #as-benefit,.as-tourmode #as-now,.as-tourmode #as-stepsui{display:none}
.assist-bar.ab-tour .ab-t{display:none}
@media (max-width:560px){.as-tour-h{font-size:24px}.as-tour-p{font-size:17px}.pw-hy-cards{grid-template-columns:1fr}.pw-hy-card{min-height:0;grid-template-columns:30px 1fr;align-items:center}.pw-hy-card small{grid-column:2}.pw-hybrid h4{font-size:20px}
}
/* DM-i demos (Peter 29. 10.): ONE player bar for Spaľovací motor / Elektrický pohon a batéria / Spolupráca pohonov (ab-tour = the scenes with a
   guide).  The bar sizes to its content (every control inside its background; it wraps instead of clipping), controls share one height
   (40 px, the round play button 44 px = the main action), regular gaps; the exit is a quiet one-line pill (its destination stays in its
   aria-label); the position reads the real structure (Kapitola c z C · krok s z S).  Phones: two rows — ‹ Späť · ▶ · Ďalej › · Kroky /
   ✕ Ukončiť ukážku · position — every touch target 44 px.  body.ehs-exploring still hides the bar (playback locked while the EHS is apart). */
.assist-bar.ab-tour{left:0;right:0;transform:none;margin:0 auto;width:fit-content;max-width:calc(100% - 24px);flex-wrap:wrap;justify-content:center;gap:8px;padding:6px 8px;border-radius:28px}
.assist-bar.ab-tour .ab-back{flex-direction:row;align-items:center;min-height:40px;height:40px;padding:0 14px;border:1px solid rgba(255,255,255,.32);border-radius:20px;background:transparent}
.assist-bar.ab-tour .ab-back:hover{background:rgba(255,255,255,.12)}.assist-bar.ab-tour .ab-back-c{display:none}
.assist-bar.ab-tour .ab-back-l{font-size:13px;font-weight:600}.assist-bar.ab-tour .ab-back-l::first-letter{color:#ff7a7a}
.assist-bar.ab-tour .ab-pc{gap:6px}
.assist-bar.ab-tour .ab-step{width:auto;min-width:40px;height:40px;padding:0 12px;border-radius:20px;font-size:14px;font-weight:600;white-space:nowrap}
.assist-bar.ab-tour .ab-play{width:44px;height:44px;min-width:44px;padding:0;border-radius:50%;font-size:16px}
.assist-bar.ab-tour .ab-time{flex:0 1 auto;min-width:0;padding:0 2px;font-size:13px;font-weight:600;color:#e3e5ea;overflow:hidden;text-overflow:ellipsis}
.assist-bar.ab-tour .ab-more{min-height:40px;height:40px;padding:0 14px;border-radius:20px}
@media (max-width:560px){
  .assist-bar.ab-tour{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"pc more" "back time";align-items:center;width:calc(100% - 16px);max-width:none;gap:4px 6px;padding:5px 6px;border-radius:18px}
  .assist-bar.ab-tour .ab-pc{grid-area:pc;justify-self:start}.assist-bar.ab-tour .ab-more{grid-area:more;justify-self:end;display:inline-flex;align-items:center;min-height:44px;height:44px;font-size:13px}
  .assist-bar.ab-tour .ab-back{grid-area:back;justify-self:start;min-height:44px;height:44px;padding:0 12px}.assist-bar.ab-tour .ab-back-c{display:none}
  .assist-bar.ab-tour .ab-time{grid-area:time;display:block;justify-self:end;text-align:right;font-size:12.5px;white-space:nowrap}
  .assist-bar.ab-tour .ab-step{height:44px;min-width:44px;padding:0 10px;font-size:14px}.assist-bar.ab-tour .ab-play{width:44px;height:44px}
  .as-ex-dock:not(.open){bottom:160px}}   /* the „Preskúmať EHS“ button above the two-row bar */
/* EH-02 / 03 (brief 27. 10. v2): beat caption, schematic figures of the engine tour (one legend with the 3D detail), continuation button */
.assist-hud .as-cap .as-stroke b{display:inline;font-size:inherit;text-transform:none;letter-spacing:0;color:inherit}.assist-hud .as-cap .as-beat{display:block;font-size:18px;line-height:1.3;font-weight:700;margin-top:4px;color:var(--ink,#16181d)}.assist-hud .as-cap.has-beat{display:block;-webkit-line-clamp:unset;overflow:visible}
.as-tour-jump{min-height:46px;font-size:16px;padding:10px 16px;margin:4px 8px 10px 0}
.as-tour-fig{margin:4px 0 12px;padding:10px 10px 6px;border:1px solid var(--line,#d9dbe0);border-radius:10px;background:#fbfbfc;--u:0}
.as-tour-fig svg{display:block;width:100%;height:auto;max-height:230px}
.ef-w{font-size:15px;fill:var(--ink,#16181d);font-family:inherit}
.ef-box{fill:#eef0f3;stroke:#5c6270;stroke-width:1.6}.ef-cool{fill:#e3eefc}
.ef-air,.ef-hot,.ef-cooled{fill:none;stroke-width:6;stroke-linecap:round}.ef-air{stroke:#3f7fd8}.ef-hot{stroke:#d9662a}.ef-cooled{stroke:#7a9fd6}
.ef-flow{stroke-dasharray:14 8;stroke-dashoffset:calc(var(--u) * -660)}.ef-dense{stroke-dasharray:8 4}
.ef-spin{transform:rotate(calc(var(--u) * 1440deg))}.ef-blade{fill:none;stroke:#5c6270;stroke-width:3;stroke-linecap:round}.ef-hub{fill:#5c6270}.ef-shaft{stroke:#c77a12;stroke-width:5}
.ef-vanes>g>rect{fill:#8a8f99;transform-box:fill-box;transform-origin:center;transform:rotate(calc(-20deg + var(--u) * 40deg))}
.ef-fuel{fill:#5c6270}.ef-work{fill:#e8a33a}.ef-loss{fill:#e9b9a1}.ef-pulse{stroke:#fff;stroke-width:3;stroke-dasharray:3 24;stroke-dashoffset:calc(var(--u) * -540);opacity:.85}.ef-pulse-l{opacity:.6}
.ef-leg{font-size:15px;line-height:1.5;margin:6px 0 0;color:var(--ink2,#4a4f5a)}.ef-k{display:inline-block;width:14px;height:10px;border-radius:2px;margin:0 6px 0 10px;vertical-align:baseline}.ef-k:first-child{margin-left:0}
.ef-k-air{background:#3f7fd8}.ef-k-hot{background:#d9662a}.ef-k-cool{background:#7a9fd6}.ef-k-work{background:#e8a33a}.ef-k-loss{background:#e9b9a1}.ef-legn{display:block}
.ef-mechl{fill:none;stroke:#c77a12;stroke-width:5;stroke-linecap:round}.ef-elec{fill:none;stroke:#2a8fd6;stroke-width:5;stroke-linecap:round;stroke-dasharray:10 6;stroke-dashoffset:calc(var(--u) * -400)}.ef-mach{fill:#eef3f8}.ef-oilp{fill:none;stroke:#c8892e;stroke-width:4;stroke-linecap:round}.ef-sm{font-size:13px}.ef-role{opacity:.55;transition:opacity .3s}.ef-ehsroles[data-role=""] .ef-role,.ef-ehsroles[data-role="gen"] .ef-r-gen,.ef-ehsroles[data-role="mot"] .ef-r-mot,.ef-ehsroles[data-role="oil"] .ef-r-oil{opacity:1}.ef-ehsroles[data-role="gen"] .ef-r-gen rect,.ef-ehsroles[data-role="mot"] .ef-r-mot rect{stroke:#2a8fd6;stroke-width:3}
@media (max-width:560px){.ef-w{font-size:17px}.ef-leg{font-size:16px}.assist-hud .as-cap .as-beat{font-size:16px}}
@media (prefers-reduced-motion:reduce){.as-tour-fig{--u:0 !important}}
/* Pohon v činnosti (DM-i, supervised session 27. 10.): status + controls of the powertrain scene */
.as-tour.drv .as-tour-h{font-size:26px}.as-tour.drv .as-tour-p{font-size:17px}
.drv-status{border:1px solid var(--line,#d9dbe0);border-radius:10px;padding:10px 12px;margin:4px 0 12px;background:#fbfbfc}
.drv-mode{font-weight:800;font-size:18px;margin:0 0 6px;color:var(--ink)}
.drv-status dl{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:0;font-size:15.5px;line-height:1.35}
.drv-status dt{color:var(--ink2);font-weight:600}.drv-status dd{margin:0;font-weight:700;color:var(--ink)}
.as-tour.drv[data-battery="charge"] [data-k="battery"]{color:#2b8a3e}.as-tour.drv[data-battery="discharge"] [data-k="battery"]{color:#b85c00}
.drv-idle{font-size:14px;color:#6c757d;margin:6px 0 0;min-height:1em}.drv-rpm{font-size:13px;line-height:1.4;color:#6c757d;margin:6px 0 0}
.drv-lbl{font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:#495057;margin:8px 0 4px}.drv-lbl small{text-transform:none;font-weight:500;letter-spacing:0}
.drv-ops{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px}.drv-ops button{min-height:44px;padding:6px 10px;border:1px solid var(--line,#cfd4da);border-radius:8px;background:#fff;font-weight:600;font-size:14px;color:var(--ink2);cursor:pointer}
.drv-ops button[aria-pressed="true"]{background:#111216;border-color:#111216;color:#fff}.drv-ops button:focus-visible,.drv-row button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.drv-levels button{font-size:14px}
/* „Preskúmať EHS“ — entry in the card + ONE stage dock (controls + info card) that replaces the player bar while exploring */
.drv-explore{margin:4px 0 10px}.drv-ex-open{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;border:0;border-radius:10px;background:#d1202a;color:#fff;font-weight:700;font-size:15px;cursor:pointer}
.drv-ex-open:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.drv-ex-note{margin:0;padding:8px 10px;border-left:3px solid #19c3d6;background:#f4f8f9;font-size:14px;line-height:1.4}
body.ehs-exploring .assist-bar,body.ehs-exploring .mob-dtitle{display:none!important}
.as-ex-dock{position:absolute;right:16px;bottom:116px;z-index:7;pointer-events:none;font-size:14px}.as-ex-dock[hidden]{display:none}
.as-ex-dock button,.as-ex-dock input{pointer-events:auto}.as-ex-dock button:focus-visible,.as-ex-dock input:focus-visible{outline:2px solid #19c3d6;outline-offset:2px}
.exd-enter{min-height:44px;padding:0 16px;border:0;border-radius:999px;background:#d1202a;color:#fff;font-weight:700;font-size:14px;box-shadow:0 6px 18px rgba(0,0,0,.2);cursor:pointer}
.as-ex-dock.open{left:50%;right:auto;transform:translateX(-50%);bottom:60px;width:min(640px,calc(100% - 24px))}
.exd-open{display:grid;gap:6px;pointer-events:auto;background:rgba(255,255,255,.96);border:1px solid #d7dce1;border-radius:14px;padding:8px;box-shadow:0 6px 22px rgba(0,0,0,.16)}
.exd-info{border-left:3px solid #19c3d6;padding:2px 0 2px 9px}.exd-h{display:flex;align-items:center;justify-content:space-between;gap:8px}.exd-h b{font-size:15px}
.exd-info p{margin:2px 0;line-height:1.35;color:#2a2d33}.exd-r span{font-weight:600}
.exd-detail{min-height:36px;padding:0 12px;border:1px solid #111216;border-radius:999px;background:#fff;font-weight:600;font-size:13px;white-space:nowrap;cursor:pointer}.exd-detail[aria-pressed="true"]{background:#111216;color:#fff}
.exd-groups{display:flex;flex-wrap:wrap;gap:6px}.exd-groups button{flex:none;min-height:40px;padding:0 11px;border:1px solid #cfd4da;border-radius:8px;background:#fff;font-weight:600;font-size:13.5px;color:#2a2d33;cursor:pointer}
.exd-groups button[aria-pressed="true"]{background:#111216;border-color:#111216;color:#fff}.as-ex-dock.detail .exd-groups{display:none}
.exd-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.exd-row>button{min-height:40px;padding:0 12px;border:1px solid #cfd4da;border-radius:8px;background:#fff;font-weight:600;font-size:13.5px;cursor:pointer}
.exd-row .exd-close{margin-left:auto;background:#111216;border-color:#111216;color:#fff}
.exd-sl{display:flex;align-items:center;gap:6px;flex:1 1 140px;min-width:120px;color:#4a4f57}.exd-sl input{flex:1 1 auto;min-width:60px;accent-color:#d1202a;height:28px}.exd-pct{min-width:38px;text-align:right;font-variant-numeric:tabular-nums;font-size:13px}
.exd-c-s{display:none}
/* Phones (Peter 31. 10.): the part stays above the dock — the dock keeps only the controls at the stage edge, the explanation moves to the caption under the stage, the flow chain and legend step aside (no flows while the EHS is apart). */
@media (max-width:560px){.exd-groups{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;padding-bottom:2px}.as-ex-dock{right:8px;bottom:104px}.as-ex-dock.open{bottom:8px;width:calc(100% - 16px)}.exd-open{padding:6px;gap:5px;grid-template-columns:minmax(0,1fr)}.exd-sl-l,.exd-info p{display:none}.exd-h b{font-size:14px}.exd-row{flex-wrap:nowrap}.exd-row>button{flex:none;padding:0 9px}.exd-sl{flex:1 1 0;min-width:0}.exd-sl input{min-width:0}.exd-row .exd-close{margin-left:0}.exd-c-l{display:none}.exd-c-s{display:inline}
  body.ehs-exploring .tpl-chain,body.ehs-exploring .tpl-legend{display:none!important}.assist-hud .as-cap .as-beat.as-exnote{font-size:13.5px;line-height:1.28;font-weight:500}}
@media (max-width:380px){.exd-pct{display:none}}
.drv-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0 8px}.drv-row .seg3{margin:0;flex:0 0 auto}.drv-row .seg3 button{min-height:44px;flex:0 0 auto;padding:0 10px}
.drv-cut,.drv-restart{min-height:44px}.drv-cut[aria-pressed="true"]{background:#111216;color:#fff;border-color:#111216}
.drv-legend{font-size:13px;line-height:1.9;color:#495057;margin:4px 0 8px}.drv-legend .tpl-gl{margin:0 2px 0 0}
.drv-more p{font-size:14px}
@media (max-width:560px){.as-tour.drv .as-tour-h{font-size:21px}.drv-status dl{font-size:14.5px}.drv-ops button{flex:1 1 calc(50% - 6px)}}
.as-tour-views{margin:0 0 12px}.as-tour-views button{min-height:44px;font-size:15px}.as-tour-views button[aria-pressed="true"]{background:#111216;color:#fff}

/* Modera options and packages (a2/options.js) */
#opts .chips{grid-template-columns:1fr}
.opt{display:flex;flex-direction:column;gap:2px}
.opt-more{font-size:12.5px;color:var(--muted,#5b6270);padding:0 4px 4px 42px}
.opt-more summary{cursor:pointer;min-height:24px}
.opt-more ul{margin:4px 0 0;padding-left:16px}