/* Второй дизайн: тот же чёрно-белый стиль и те же шрифты, крупная типографика и движение. Подключается поверх site.css. */
body.motion{
  --ink:#09090b;--paper:#f5f4f0;--on-ink:#f5f4f0;--on-ink-muted:#a1a1aa;
  --bg:var(--paper);--line:#d9d8d2;--wash:#e9e8e3;
  --ease:cubic-bezier(.16,1,.3,1);
  background:var(--paper);overflow-x:clip;
}
@view-transition{navigation:auto}
::view-transition-old(root){animation:m-vt-out .32s ease both}
::view-transition-new(root){animation:m-vt-in .6s var(--vt-ease,cubic-bezier(.16,1,.3,1)) both}
@keyframes m-vt-out{to{opacity:0;transform:translateY(-12px)}}
@keyframes m-vt-in{from{opacity:0;transform:translateY(22px)}}
body.motion .segment a[aria-current]{view-transition-name:section-pill}
::view-transition-group(section-pill){animation-duration:.6s;animation-timing-function:cubic-bezier(.16,1,.3,1)}

body.motion .demo{position:fixed;inset:auto 0 0;z-index:60;padding:3px 16px;font-size:.75rem;pointer-events:none}

.m-progress{position:fixed;inset:0 0 auto;height:2px;z-index:55;background:#fff;mix-blend-mode:difference;transform:scaleX(0);transform-origin:left;pointer-events:none}

/* Заголовки по словам и буквам */
.m-word{display:inline-block;white-space:nowrap}
.m-clip{display:inline-block;overflow:hidden;vertical-align:top;padding-block:.08em .24em;margin-block:-.08em -.24em}
.m-clip>span{display:inline-block;will-change:transform}

/* Шапка: один цвет на тёмном и светлом за счёт режима наложения */
.m-top{position:absolute;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));color:#fff;mix-blend-mode:difference}
.m-top .brand__mark{border-color:currentColor}
.m-top__nav{display:none;gap:24px}
.m-top__nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-size:.9375rem}
.m-top__nav a::after{content:"";position:absolute;inset:auto 0 10px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.m-top__nav a:hover::after{transform:scaleX(1);transform-origin:left}

/* Заставка: на случай сбоя скрипта уходит сама */
.m-intro{position:fixed;inset:0;z-index:70;display:grid;place-items:center;background:var(--ink);color:var(--on-ink);animation:m-intro-out .4s 2.4s forwards}
.m-intro.is-js{animation:none}
.m-intro__mark{border:1px solid currentColor;padding:6px 16px;letter-spacing:.14em;font-size:.875rem}
@keyframes m-intro-out{to{opacity:0;visibility:hidden}}

.m-home{display:flex;flex-direction:column;background:var(--ink)}

/* Первый экран */
.m-hero{position:relative;order:0;display:grid;align-items:end;min-height:78svh;overflow:hidden;color:var(--on-ink);
  background:radial-gradient(90% 70% at 50% 35%,#2a2a2e 0%,#111113 45%,var(--ink) 100%);
  padding:88px max(16px,env(safe-area-inset-right,0px)) 40px max(16px,env(safe-area-inset-left,0px))}
.m-hero__gl{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.m-hero__content{position:relative;display:grid;gap:18px;width:100%;max-width:1500px;margin-inline:auto}
.m-eyebrow{font:500 .8125rem/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--on-ink-muted);margin:0}
.m-hero__title{font-size:clamp(3.25rem,15.5vw,14rem);line-height:.92;letter-spacing:-.02em;color:#fff;mix-blend-mode:difference}
.m-hero__actions{display:flex;flex-wrap:wrap;gap:10px}
.m-pill{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 30px;border:1px solid rgb(245 244 240 / .45);border-radius:999px;color:var(--on-ink);text-decoration:none;transition:background-color .35s,color .35s,border-color .35s}
.m-pill:hover{background:var(--on-ink);color:var(--ink);border-color:var(--on-ink)}
.m-pill--solid{background:var(--on-ink);color:var(--ink);border-color:var(--on-ink)}
.m-pill--solid:hover{background:transparent;color:var(--on-ink)}
.m-hero__hint{display:none;position:absolute;right:max(16px,env(safe-area-inset-right,0px));bottom:44px;font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--on-ink-muted);writing-mode:vertical-rl}

/* Бегущая строка */
.m-marquee{order:2;overflow:hidden;background:var(--ink);color:var(--on-ink);padding-block:18px;border-block:1px solid #26262a}
.m-marquee__track{display:flex;width:max-content;will-change:transform;font:400 clamp(3rem,11vw,10rem)/1.05 var(--display);white-space:nowrap}
.m-marquee__track span{padding-right:.5em}
.m-marquee__alt{color:transparent;-webkit-text-stroke:1px #71717a}

/* О нас */
.m-about{order:3;background:var(--ink);color:var(--on-ink);
  padding:72px max(16px,env(safe-area-inset-right,0px)) 88px max(16px,env(safe-area-inset-left,0px))}
.m-about__inner{display:grid;gap:22px;max-width:1240px;margin-inline:auto;transform-origin:50% 100%}
.m-about__text{font:400 clamp(1.875rem,5.4vw,4.75rem)/1.12 var(--display);display:grid;gap:.5em}
.m-about__text p{margin:0}
.m-w{color:#3f3f46;transition:color .35s}
.m-w.is-lit{color:var(--on-ink)}
/* Без скрипта текст не разбит на слова и читается целиком */
.m-about__text h2{font-size:inherit}

/* Каталог */
.m-catalog{order:1;position:relative;z-index:2;background:var(--paper);color:var(--fg);border-radius:28px 28px 0 0;margin-top:-20px;padding-block:32px 40px;scroll-margin-top:0}
.m-catalog__head{display:grid;gap:14px;max-width:1240px;margin-inline:auto;padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px));margin-bottom:22px}
.m-catalog__title{font-size:clamp(3rem,9vw,8rem);line-height:1}
.m-catalog .search{background:transparent}
.m-rail{padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px))}
.m-rail__track{display:grid;gap:12px}
.m-panel{position:relative;display:block;aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:#1b1b1d;color:#fff;text-decoration:none}
.m-panel__media{position:absolute;inset:0;overflow:hidden}
.m-panel__media img{width:116%;max-width:none;height:116%;margin:-8% 0 0 -8%;object-fit:cover;filter:saturate(0);transition:scale 1.2s var(--ease)}
.m-panel:hover .m-panel__media img{scale:1.06}
.m-panel::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgb(9 9 11 / .72),rgb(9 9 11 / .05) 55%)}
.m-panel__text{position:absolute;inset:auto 20px 18px;z-index:1;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px}
.m-panel__name{font:400 clamp(2.25rem,8vw,3.25rem)/1.05 var(--display)}
.m-panel__count{font-size:.875rem;color:#e4e4e7}
.m-rail__progress{display:none}

/* Подвал */
.m-foot{position:relative;z-index:2;background:var(--ink);color:var(--on-ink);overflow:hidden;display:grid;gap:30px;
  padding:56px max(16px,env(safe-area-inset-right,0px)) 36px max(16px,env(safe-area-inset-left,0px))}
.m-foot__links{display:flex;flex-wrap:wrap;gap:10px;max-width:1500px;width:100%;margin-inline:auto}
.m-foot__links a{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border:1px solid #3f3f46;border-radius:999px;text-decoration:none;transition:background-color .35s,color .35s}
.m-foot__links a:hover{background:var(--on-ink);color:var(--ink)}
.m-foot__name{font:400 clamp(2.75rem,13.5vw,13rem)/1 var(--display);letter-spacing:-.02em;margin:0;max-width:1500px;width:100%;margin-inline:auto}

/* Курсор: только с мышью, обычный курсор остаётся на месте */
.m-cursor{position:fixed;top:0;left:0;z-index:58;display:none;pointer-events:none}
.m-cursor span{position:absolute;display:grid;place-items:center;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff;mix-blend-mode:difference;color:transparent;font-size:.8125rem;overflow:hidden;white-space:nowrap;transition:width .45s var(--ease),height .45s var(--ease),margin .45s var(--ease),background-color .3s,color .3s}
.m-cursor.has-label span{width:92px;height:92px;margin:-46px 0 0 -46px;background:var(--ink);color:var(--on-ink);mix-blend-mode:normal}
@media (hover:hover) and (pointer:fine){.m-cursor.is-on{display:block}}

/* Внутренние страницы */
body.motion .wrap{max-width:1240px}
body.motion .wrap--narrow{max-width:620px}
body.motion .top{position:sticky;top:0;z-index:40;margin-inline:-16px;padding:8px 16px;background:rgb(245 244 240 / .82);backdrop-filter:blur(14px)}
body.motion .brand__mark{border-color:currentColor}
body.motion .segment{background:var(--wash)}
body.motion .segment a[aria-current]{background:var(--ink);color:var(--paper);box-shadow:none}
body.motion .search{background:transparent}
body.motion .listhead h1{font-size:clamp(3rem,10vw,8rem);line-height:1}
body.motion .textpage h1{font-size:clamp(2.75rem,9vw,5rem);line-height:1.02}
body.motion .card__media{border-radius:14px}
body.motion .card__photos img{transition:scale 1.1s var(--ease)}
body.motion .card:hover .card__photos img{scale:1.05}
body.motion .card__brand{font:400 1.375rem/1.15 var(--display)}
body.motion .btn--primary{background:var(--ink);border-color:var(--ink);color:var(--paper)}
body.motion .btn--primary:hover{background:#3f3f46;border-color:#3f3f46}
body.motion .check input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* Окно вещи */
body.motion .sheet{background:var(--paper)}
body.motion .sheet[open]{animation:m-sheet .75s var(--ease)}
body.motion .sheet::backdrop{background:rgb(9 9 11 / .62);backdrop-filter:blur(6px);animation:m-fade .5s ease}
@keyframes m-sheet{from{transform:translateY(100%)}}
@keyframes m-fade{from{opacity:0}}
body.motion .sheet .item>*{animation:m-rise .85s var(--ease) backwards}
body.motion .sheet .item>:nth-child(2){animation-delay:.08s}
body.motion .sheet .item>:nth-child(3){animation-delay:.16s}
body.motion .sheet .item>:nth-child(4){animation-delay:.2s}
body.motion .sheet .item>:nth-child(5){animation-delay:.24s}
body.motion .sheet .item>:nth-child(n+6){animation-delay:.28s}
@keyframes m-rise{from{opacity:0;transform:translateY(26px)}}
body.motion .sheet .item__photos img{animation:m-zoom 1.3s var(--ease)}
@keyframes m-zoom{from{transform:scale(1.14)}}
body.motion .item__title{font-size:clamp(2rem,6vw,2.75rem);line-height:1.05}

@media (min-width:600px){
  .m-rail__track{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:900px){
  .m-top{position:fixed;padding-block:14px}
  .m-top__nav{display:flex}
  .m-hero{min-height:100svh;padding-bottom:44px}
  .m-hero__hint{display:block}
  /* На компьютере сначала «О нас», потом каталог: просьба клиентки. На телефоне порядок обратный. */
  .m-marquee{order:1}
  .m-about{order:2;padding-block:128px 168px}
  .m-catalog{order:3;margin-top:-48px;border-radius:40px 40px 0 0;padding-block:64px 0}
  .m-catalog__head{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);align-items:end;gap:20px;margin-bottom:44px}
  .m-catalog__head .segment,.m-catalog__head .search{margin-bottom:12px}
  .m-rail{padding-inline:max(32px,calc((100vw - 1240px) / 2));overflow-x:auto;padding-bottom:40px}
  .m-rail__track{display:flex;width:max-content;gap:18px}
  .m-panel-wrap{width:clamp(320px,29vw,480px)}
  .m-panel{aspect-ratio:4/5}
  .m-panel__name{font-size:clamp(2.5rem,3.6vw,3.75rem)}
  /* Лента закреплена скриптом: занимает весь экран и едет сама */
  .m-rail.is-pinned{display:flex;flex-direction:column;justify-content:center;gap:22px;height:100svh;overflow:hidden;padding-bottom:0;background:var(--paper)}
  .m-rail.is-pinned .m-panel-wrap{width:auto;height:min(72svh,calc(29vw * 1.25));aspect-ratio:4/5}
  .m-rail.is-pinned .m-panel{height:100%;aspect-ratio:auto}
  .m-rail.is-pinned .m-rail__progress{display:block;height:2px;width:min(100%,1240px);flex:none;background:var(--line);overflow:hidden}
  .m-rail__progress i{display:block;height:100%;background:var(--ink);transform:scaleX(0);transform-origin:left}
  .m-foot{padding-block:96px 44px;gap:48px}
  /* Окно вещи на компьютере: фото слева, цена и кнопки менеджеров сразу видны справа */
  body.motion .sheet{max-width:1040px;width:calc(100% - 64px)}
  body.motion .sheet .item{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);column-gap:32px;align-content:start;padding:20px}
  body.motion .sheet .item__grip{display:none}
  body.motion .sheet .item__media{grid-column:1;grid-row:1 / span 6;align-self:start}
  body.motion .sheet .item__photos{aspect-ratio:4/5}
  body.motion .sheet .item>:not(.item__media):not(.item__grip){grid-column:2}
}
@media (prefers-reduced-motion:reduce){
  .m-intro{display:none}
  body.motion *,body.motion *::backdrop{animation:none!important}
  @view-transition{navigation:none}
  .m-w{color:inherit}
}