/* Мир Паркета v2: примерка рисунка пола (.mvz). Стили инструмента; общие токены и кнопки — core.css / ux.css */
.mvz{display:grid;gap:1.75rem;min-width:0}
@media (min-width:1024px){.mvz{grid-template-columns:minmax(0,7.4fr) minmax(0,4.6fr);gap:clamp(2rem,1rem + 3vw,3.5rem);align-items:start}}
.mvz__main{min-width:0}
@media (min-width:1024px) and (min-height:760px){.mvz--big .mvz__main{position:sticky;top:calc(var(--mp-header-h) + 16px)}}
.mvz__modes{display:flex;gap:1.5rem;margin:0 0 1rem;border-bottom:1px solid var(--mp-line);overflow-x:auto;scrollbar-width:none}
.mvz__modes::-webkit-scrollbar{display:none}
.mvz__mode{flex:none;position:relative;min-height:44px;padding:0 0 .55rem;border:0;background:none;color:var(--mp-muted);font:400 .8125rem/1.2 var(--mp-font-text);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:color .25s}
.mvz__mode::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--mp-ink);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--mp-ease)}
.mvz__mode:hover{color:var(--mp-ink)}
.mvz__mode.is-on{color:var(--mp-ink)}
.mvz__mode.is-on::after{transform:scaleX(1)}

.mvz__stage{position:relative;overflow:hidden;background:#2a2622;touch-action:pan-y;outline-offset:4px;-webkit-tap-highlight-color:transparent;isolation:isolate}
.mvz__poster,.mvz__poster picture,.mvz__poster img,.mvz__before,.mvz__canvas,.mvz__edit{position:absolute;inset:0;width:100%;height:100%;display:block}
.mvz__poster img,.mvz__before{object-fit:cover}
.mvz__before[hidden],.mvz__edit[hidden]{display:none}
.mvz__canvas{opacity:0;transition:opacity .4s var(--mp-ease)}
.mvz__stage.is-ready .mvz__canvas{opacity:1}
.mvz__canvas.is-pop{animation:mvz-in .45s var(--mp-ease) both}
@keyframes mvz-in{from{opacity:.55}to{opacity:1}}
.mvz__stage.is-busy .mvz__canvas{filter:saturate(.92)}
.mvz__busy{position:absolute;left:50%;top:1rem;transform:translateX(-50%);z-index:4;padding:.5rem .95rem;background:rgba(17,17,17,.72);color:#fff;font:400 .6875rem/1 var(--mp-font-text);letter-spacing:.16em;text-transform:uppercase;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none}
.mvz__busy[hidden]{display:none}
.mvz__busy span::after{content:"";display:inline-block;width:.9em;text-align:left;animation:mvz-dots 1.2s steps(4) infinite;overflow:hidden;vertical-align:bottom}
@keyframes mvz-dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.mvz__err{position:absolute;left:1rem;right:1rem;bottom:1rem;z-index:4;margin:0;padding:.75rem 1rem;background:rgba(17,17,17,.82);color:#fff;font-size:.875rem;line-height:1.5}
.mvz__err[hidden]{display:none}
.mvz__tip{position:absolute;left:0;right:0;bottom:0;z-index:3;margin:0;padding:1.75rem 1rem .7rem;background:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0));color:#fff;font-size:.75rem;letter-spacing:.04em;pointer-events:none;opacity:0;transition:opacity .6s var(--mp-ease) .4s}
.mvz__stage.is-ready .mvz__tip{opacity:1}
.mvz[data-mode-now=studio] .mvz__tip,.mvz[data-mode-now=own] .mvz__tip{display:none}

/* состояния сцены */
.mvz__stage.is-ready .mvz__poster{opacity:0;transition:opacity .01s linear .5s}
.mvz__stage.is-stale .mvz__canvas{opacity:0;transition:none}
.mvz__stage.is-own-edit .mvz__poster,.mvz__stage.is-own-edit .mvz__canvas,.mvz__stage.is-own-edit .mvz__before,.mvz__stage.is-own-edit .mvz__cmp,.mvz__stage.is-own-edit .mvz__tag,.mvz__stage.is-own-edit .mvz__tip,.mvz__stage.is-own-edit .mvz__busy{display:none}
.mvz__stage.is-own-edit{background:#e9e6df}
.mvz__stage.is-edit .mvz__edit{cursor:crosshair;touch-action:none}

/* шторка «до / после» */
.mvz__cmp{position:absolute;top:0;bottom:0;left:100%;z-index:5;width:44px;margin-left:-22px;padding:0;border:0;background:none;cursor:ew-resize;touch-action:none}
.mvz__cmp[hidden]{display:none}
.mvz__cmp span{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.mvz__cmp::after{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cpath d='M13 11l-6 6 6 6M21 11l6 6-6 6' fill='none' stroke='%23111' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/34px no-repeat;box-shadow:0 2px 14px rgba(0,0,0,.35)}
.mvz__cmp:focus-visible{outline:none}
.mvz__cmp:focus-visible::after{outline:2px solid var(--mp-accent);outline-offset:2px}
.mvz__tag{position:absolute;top:.85rem;z-index:3;padding:.35rem .6rem;background:rgba(17,17,17,.7);color:#fff;font:400 .625rem/1 var(--mp-font-text);letter-spacing:.18em;text-transform:uppercase;opacity:0;transition:opacity .3s;pointer-events:none}
.mvz__tag--b{left:.85rem}.mvz__tag--a{right:.85rem}
.mvz__stage.is-cmp .mvz__tag{opacity:1}

.mvz__under{margin-top:.9rem}
.mvz__under[hidden]{display:none}
.mvz__row{display:flex;align-items:center;gap:.75rem}
.mvz__row[hidden]{display:none}
.mvz__scenes{flex:1;min-width:0;display:flex;align-items:center;gap:.6rem;overflow-x:auto;scrollbar-width:none;padding:3px 3px 5px}
.mvz__scenes::-webkit-scrollbar{display:none}
.mvz__scene{flex:none;width:4.75rem;aspect-ratio:3/2;padding:0;border:0;background:#2a2622;cursor:pointer;opacity:.78;transition:opacity .25s,transform .3s var(--mp-ease)}
.mvz__scene img{display:block;width:100%;height:100%;object-fit:cover}
.mvz__scene:hover{opacity:1}
.mvz__scene[aria-checked=true]{opacity:1;outline:2px solid var(--mp-ink);outline-offset:2px}
@media (min-width:768px){.mvz__scene{width:6rem}}
.mvz__cmpbtn{flex:none;min-height:44px;padding:0 .2rem;border:0;border-bottom:1px solid currentColor;background:none;color:var(--mp-ink);font:400 .75rem/1.2 var(--mp-font-text);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.mvz__cmpbtn[aria-pressed=true]{background:var(--mp-ink);color:#fff;padding:0 .8rem;border-color:var(--mp-ink)}
.mvz__hint{margin:0;font-size:.875rem;color:var(--mp-muted)}
.mvz__cap{margin:.9rem 0 0;font-size:.8125rem;line-height:1.55;color:var(--mp-muted);max-width:46em}
.mvz__toast{margin:.6rem 0 0;font-size:.8125rem;color:var(--mp-ink)}
.mvz__toast[hidden]{display:none}

/* панель */
.mvz__panel{min-width:0}
.mvz__group{margin:0 0 1.4rem}
.mvz__label{display:flex;justify-content:space-between;gap:1rem;margin:0 0 .65rem;font:400 .6875rem/1.2 var(--mp-font-text);letter-spacing:.16em;text-transform:uppercase;color:var(--mp-muted)}
.mvz__label output{letter-spacing:.04em;text-transform:none;color:var(--mp-ink)}
.mvz__pats{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem;margin:0 0 .9rem}
.mvz__pats:last-child{margin-bottom:0}
.mvz__sub{margin:0 0 .5rem;font:400 .75rem/1.2 var(--mp-font-text);letter-spacing:.04em;color:var(--mp-ink-2)}
.mvz__more .mvz__sub{margin:.4rem 0 .9rem;padding-top:.9rem;border-top:1px solid var(--mp-line);letter-spacing:.12em;text-transform:uppercase;font-size:.6875rem;color:var(--mp-muted)}
.mvz__more .mvz__sub--first{border-top:0;padding-top:0}
.mvz-pat{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.35rem;min-height:4.4rem;padding:.6rem .25rem;border:1px solid var(--mp-line);background:#fff;color:var(--mp-ink);cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.mvz-pat svg{width:2.4rem;height:1.6rem}
.mvz-pat span{font:400 .6875rem/1.2 var(--mp-font-text);letter-spacing:.03em;text-align:center}
.mvz-pat:hover{border-color:var(--mp-ink)}
.mvz-pat[aria-checked=true]{background:var(--mp-ink);border-color:var(--mp-ink);color:#fff}
.mvz__sp{display:flex;align-items:center;gap:.9rem;margin:0 0 .55rem}
.mvz__spn{flex:0 0 7.2rem;font-size:.8125rem;line-height:1.3;color:var(--mp-ink-2)}
.mvz__tones{display:flex;flex-wrap:wrap;gap:.5rem}
.mvz-tone{position:relative;width:2.5rem;height:2.5rem;padding:0;border:1px solid rgba(0,0,0,.22);background-size:cover;background-position:left center;cursor:pointer;transition:transform .25s var(--mp-ease)}
.mvz-tone::before{content:"";position:absolute;inset:-6px}
.mvz-tone:hover{transform:translateY(-2px)}
.mvz-tone[aria-checked=true]{outline:2px solid var(--mp-ink);outline-offset:3px}
.mvz__more{margin:0 0 1.1rem;border-top:1px solid var(--mp-line)}
.mvz__more:last-of-type{border-bottom:1px solid var(--mp-line)}
.mvz__more>summary{display:flex;align-items:center;justify-content:space-between;min-height:3rem;list-style:none;cursor:pointer;font:400 .8125rem/1.2 var(--mp-font-text);letter-spacing:.12em;text-transform:uppercase;color:var(--mp-ink)}
.mvz__more>summary::-webkit-details-marker{display:none}
.mvz__more>summary::after{content:"";width:.55rem;height:.55rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--mp-ease)}
.mvz__more[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.mvz__more[open]{padding-bottom:.2rem}
.mvz__chips{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem}
.mvz-chip{min-height:2.75rem;min-width:2.75rem;padding:0 .9rem;border:1px solid var(--mp-line);background:#fff;color:var(--mp-ink);font:400 .8125rem/1 var(--mp-font-text);cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.mvz-chip:hover{border-color:var(--mp-ink)}
.mvz-chip[aria-checked=true]{background:var(--mp-ink);border-color:var(--mp-ink);color:#fff}
.mvz__unit{font-size:.8125rem;color:var(--mp-muted);margin-left:.15rem}
.mvz input[type=range]{width:100%;accent-color:var(--mp-ink);height:2.25rem;margin:0}
.mvz__lnk{min-height:44px;padding:0;border:0;background:none;color:var(--mp-ink);font:400 .75rem/1.2 var(--mp-font-text);letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid currentColor;cursor:pointer;margin-bottom:.6rem}
.mvz__now{margin:1.5rem 0 .25rem;font:400 1.375rem/1.25 var(--mp-font-display);color:var(--mp-ink)}
.mvz__src{margin:0 0 1.25rem;font-size:.8125rem;line-height:1.55;color:var(--mp-muted)}
.mvz__src .mp-link{margin-top:.5rem}
.mvz__cta{display:grid;gap:.6rem}
.mvz__cta .mp-btn{width:100%}
.mvz__acts{display:flex;flex-wrap:wrap;gap:.2rem 1.4rem;margin-top:.9rem}
.mvz__act{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:0;border:0;background:none;color:var(--mp-ink);font:400 .75rem/1.2 var(--mp-font-text);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.mvz__act svg{width:1.15rem;height:1.15rem}
.mvz__act:hover{text-decoration:underline;text-underline-offset:.3em}
.mvz__fine{margin:.9rem 0 0;font-size:.8125rem;line-height:1.6;color:var(--mp-muted)}
.mvz__a{text-decoration:underline;text-underline-offset:.2em;color:var(--mp-ink)}
.mvz__nojs{grid-column:1/-1;margin:0;color:var(--mp-muted)}
.mvz__stage:not(:focus-visible){outline:0}
.mvz__stage:focus-visible{outline:2px solid var(--mp-ink)}

/* «Своя комната» */
.mvz__own{border:1px solid var(--mp-line);background:#fff;padding:1.1rem 1.1rem 1.2rem}
.mvz__own[hidden]{display:none}
.mvz-own__steps{display:flex;gap:.4rem;margin:0 0 .8rem;padding:0;list-style:none}
.mvz-own__steps li{flex:1;height:3px;background:var(--mp-line)}
.mvz-own__steps li.is-on{background:var(--mp-ink)}
.mvz-own__h{margin:0 0 .35rem;font:400 1.125rem/1.3 var(--mp-font-display);color:var(--mp-ink)}
.mvz-own__p{margin:0 0 .9rem;font-size:.875rem;line-height:1.6;color:var(--mp-ink-2)}
.mvz-own__row{display:flex;flex-wrap:wrap;gap:.6rem}
.mvz-own__row .mp-btn{min-height:3rem;padding:0 1.3rem}
.mvz-own__file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.mvz-own__note{margin:.9rem 0 0;font-size:.8125rem;line-height:1.55;color:var(--mp-muted)}
.mvz-own__err{margin:.7rem 0 0;font-size:.875rem;color:#8a2a1b}
.mvz-own__tools{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 .8rem}
.mvz-own__tools .mvz-chip[aria-pressed=true]{background:var(--mp-ink);border-color:var(--mp-ink);color:#fff}
.mvz-own__size{display:flex;align-items:center;gap:.8rem;margin:0 0 .8rem}
.mvz-own__size label{font-size:.8125rem;color:var(--mp-ink-2);white-space:nowrap}
.mvz__stage.is-edit{cursor:crosshair;touch-action:none}
.mvz__stage.is-edit .mvz__edit{z-index:6}

@media (prefers-reduced-motion:reduce){
  .mvz__canvas,.mvz__tip,.mvz__mode::after,.mvz-tone,.mvz__scene,.mvz__more>summary::after{transition:none}
  .mvz__canvas.is-pop{animation:none}
  .mvz__busy span::after{animation:none}
}
.mvz__stage:not(.is-cmp) .mvz__cmp span{opacity:0}
body.v2 .mvz__cmp:focus-visible{outline:0}
/* без JavaScript: остаются фото и статичные примеры на странице, интерактивные элементы скрыты */
html:not(.mp-js) .mvz__modes,html:not(.mp-js) .mvz__under,html:not(.mp-js) .mvz__panel,html:not(.mp-js) .mvz__tip,html:not(.mp-js) .mvz__cap{display:none}