/* «До / После»: ползунок сравнения, карточки блока и окно просмотра (V2, тёмный и светлый режимы) */
.ba{position:relative;overflow:hidden;--pos:50%;aspect-ratio:4/3;border-radius:18px;background:#0E0E0C;border:1px solid var(--bd);user-select:none;-webkit-user-select:none;touch-action:pan-y;cursor:ew-resize;isolation:isolate;-webkit-tap-highlight-color:transparent}
.ba-layer{position:absolute;inset:0;overflow:hidden}
.ba-layer::before{content:"";position:absolute;inset:-30px;background:var(--bg) center/cover no-repeat;filter:blur(22px) brightness(.55) saturate(.9);transform:translateZ(0)}
.ba-layer img{position:relative;display:block;width:100%;height:100%;object-fit:contain;max-width:none;pointer-events:none}
.ba-b{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba--one{cursor:default;touch-action:auto}
.ba-line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:var(--och);box-shadow:0 0 0 1px rgba(0,0,0,.25);pointer-events:none;z-index:2}
.ba-handle{position:absolute;top:50%;left:var(--pos);width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;z-index:3;touch-action:none;cursor:ew-resize;outline:none}
.ba-knob{position:absolute;inset:0;border-radius:50%;background:var(--och);box-shadow:0 0 0 7px rgba(197,155,63,.22),0 6px 18px rgba(0,0,0,.45);transition:transform .15s}
.ba-knob::before,.ba-knob::after{content:"";position:absolute;top:50%;width:8px;height:8px;border:solid #141412;border-width:0 0 2px 2px;margin-top:-4px}
.ba-knob::before{left:12px;transform:rotate(45deg)}
.ba-knob::after{right:12px;transform:rotate(-135deg)}
.ba-handle:hover .ba-knob{transform:scale(1.06)}
.ba-handle:focus-visible .ba-knob{box-shadow:0 0 0 3px #141412,0 0 0 6px var(--och),0 6px 18px rgba(0,0,0,.45)}
.ba-tag{position:absolute;top:14px;z-index:2;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:7px 11px;border-radius:999px;line-height:1;pointer-events:none}
.ba-tag-b{left:14px;background:rgba(14,14,12,.72);color:#EFE9DE;border:1px solid rgba(239,233,222,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ba-tag-a{right:14px;background:var(--och);color:#141412;font-weight:600}
.ba--one .ba-tag{left:14px;right:auto}

/* блок «До и после» */
.ba-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.ba-card{margin:0;padding:10px 10px 0;border-radius:26px;background:var(--card);border:1px solid var(--bd);display:flex;flex-direction:column}
.ba-card figcaption{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:16px 10px 18px}
.ba-card h3{font-family:var(--serif);font-weight:500;font-size:26px;line-height:1.15;margin:0;color:var(--iv)}
.ba-card p{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--mut)}
.ba-card .ba-num{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--och);display:block;margin-bottom:6px}
.ba-zoom{flex:0 0 auto;width:42px;height:42px;border-radius:50%;border:1px solid var(--bd2);background:transparent;color:var(--iv);font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s,border-color .2s}
.ba-zoom:hover{border-color:var(--och);background:rgba(197,155,63,.12)}
@media (max-width:860px){.ba-grid{grid-template-columns:1fr;gap:16px}.ba-card h3{font-size:23px}}

/* окно */
html.ba-lock,html.ba-lock body{overflow:hidden}
.ba-modal{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center}
.ba-modal[hidden]{display:none}
.ba-m-back{position:absolute;inset:0;background:rgba(8,8,7,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ba-m-box{position:relative;width:min(1240px,94vw);height:min(900px,92vh);height:min(900px,92dvh);display:flex;flex-direction:column;gap:12px;padding:18px 20px 16px;border-radius:28px;background:var(--frame,#141412);border:1px solid var(--bd);box-shadow:0 30px 80px -20px rgba(0,0,0,.7);opacity:0;transform:translateY(10px) scale(.985);transition:opacity .22s ease,transform .22s ease}
.ba-modal.is-open .ba-m-box{opacity:1;transform:none}
.ba-m-head{display:flex;align-items:center;gap:14px}
.ba-m-h{flex:1;min-width:0}
.ba-m-k{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--och)}
.ba-m-h h3{margin:4px 0 0;font-family:var(--serif);font-weight:500;font-size:30px;line-height:1.1;color:var(--iv);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ba-m-nav{display:flex;align-items:center;gap:8px}
.ba-m-nav[hidden]{display:none}
.ba-m-n{font-family:var(--mono);font-size:12px;color:var(--mut);min-width:44px;text-align:center}
.ba-m-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--bd2);background:transparent;color:var(--iv);font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s,border-color .2s}
.ba-m-btn:hover{border-color:var(--och);background:rgba(197,155,63,.12)}
.ba-m-x{font-size:26px}
.ba-m-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.ba-m-stage .ba{aspect-ratio:auto;max-width:100%;max-height:100%}
.ba-m-cap{margin:0;font-size:15px;line-height:1.5;color:var(--iv2);text-align:center}
.ba-m-cap[hidden],.ba-m-hint[hidden]{display:none}
.ba-m-hint{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--mut);text-align:center}
@media (max-width:760px){
  .ba-m-box{width:100vw;height:100vh;height:100dvh;border-radius:0;border:0;padding:12px 8px calc(10px + env(safe-area-inset-bottom));gap:8px}
  .ba-m-head{padding:0 4px;gap:8px}
  .ba-m-h h3{font-size:22px}
  .ba-m-btn{width:40px;height:40px}
  .ba-m-n{min-width:34px}
  .ba-m-hint{display:none}
  .ba-tag{top:10px;font-size:10px;padding:6px 9px}
  .ba-tag-b{left:10px}.ba-tag-a{right:10px}
}
@media (prefers-reduced-motion:reduce){.ba-m-box{transition:none}}

/* светлый режим */
html[data-mode=light] .ba{background:#E6E0D4}
html[data-mode=light] .ba-layer::before{filter:blur(22px) brightness(1.05) saturate(.8);opacity:.85}
html[data-mode=light] .ba-tag-b{background:rgba(255,253,249,.88);color:#1D1C19;border-color:rgba(48,40,26,.18)}
html[data-mode=light] .ba-tag-a{background:var(--och-bg,#C9A04A);color:#1D1C19}
html[data-mode=light] .ba-line{background:var(--och-bg,#C9A04A)}
html[data-mode=light] .ba-knob{background:var(--och-bg,#C9A04A);box-shadow:0 0 0 7px rgba(201,160,74,.25),0 6px 16px rgba(60,50,30,.35)}
html[data-mode=light] .ba-handle:focus-visible .ba-knob{box-shadow:0 0 0 3px #fff,0 0 0 6px #7F5E17}
html[data-mode=light] .ba-m-back{background:rgba(236,231,221,.9)}
html[data-mode=light] .ba-m-box{background:#F8F5EF;box-shadow:0 30px 80px -24px rgba(60,50,30,.45)}
html[data-mode=light] .ba-zoom:hover,html[data-mode=light] .ba-m-btn:hover{background:rgba(201,160,74,.16)}

/* маркеры точек на 3D-модели: на телефоне — номер вместо подписи (подписи не наезжают друг на друга) */
.m3d-hot-dot i{display:none;font-style:normal}
@media (max-width:760px){
  .m3d-hot.has-n .m3d-hot-label{display:none}
  .m3d-hot.has-n .m3d-hot-dot{left:10px;top:10px;width:24px;height:24px;border-width:2px;display:flex;align-items:center;justify-content:center}
  .m3d-hot.has-n .m3d-hot-dot::after{inset:-6px}
  .m3d-hot.has-n .m3d-hot-dot i{display:block;font:700 12px/1 var(--sans);color:#141412}
}