/* =====================================================================
   ГЛАВНАЯ — секции под hero (из prototypes/home.html), приведены к системе hero v4 без редизайна:
   светлые секции #D6D6D9 (бумага hero), текст #161615, вторичный #3B3B39 (8,1:1);
   тёмные #161615, текст #EDEDEA, вторичный #A3A39F (7,4:1). Шрифт, сетка 60 | 292:491:234:619:165 | 60, поля 60 / 20 — те же.
   Углы квадратные, как у CTA и линий hero (было 6 px). Плашек нет: «Sold out» — строка текста.
   ===================================================================== */
:root {
  --c-card: #EEEEEE;            /* фон студийных фото товаров: полосы при contain совпадают с кадром */
  --c-on-dark: #EDEDEA;
  --c-on-dark-strong: #F5F5F2;
  --c-on-dark-2: #A3A39F;       /* 7,4:1 на #161615 */
  --c-on-photo-2: #C4C4C4;
  --c-line: rgb(255 255 255 / .09);
  --fs-d2: clamp(56px, 12.014vw, 231px);
  --lh-footer: 2;
  --drop: clamp(48px, 13.4vw, 257px);
  --pad-top: calc(var(--head-h) + var(--sp-head));
  --btn-w-sm: 188px;
  --ease-card: cubic-bezier(.16, 1, .3, 1);
  --t-rise: 1100ms; --t-hover: 600ms;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (max-width: 767px) { :root { --drop: 48px; } }

h1, h2, h3, p, ul, figure { margin: 0; }
input { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
::selection { background: var(--ink); color: var(--paper); }
.vm-dark ::selection { background: var(--c-on-dark); color: var(--ink); }
[id] { scroll-margin-top: var(--head-h); }

/* Скроллбар сайта (правка заказчика 25.09). Только мышь/трекпад — на тач системный. Ползунок 4 px без стрелок и радиуса
   (углы в системе квадратные), при наведении 8 px и плотнее. Трек в цвет секции под шапкой (html[data-sb] ставит home.js
   вместе с тоном шапки): прозрачный трек у классической полосы показывал бы фон страницы светлой полосой рядом с тёмными секциями. */
@media (hover: hover) and (pointer: fine) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-button { display: none; }
  ::-webkit-scrollbar-track { background: var(--paper); }
  ::-webkit-scrollbar-thumb { min-height: 48px; border: solid transparent; border-width: 0 3px; background: rgb(22 22 21 / .35) padding-box; }
  ::-webkit-scrollbar-thumb:hover { border-width: 0 1px; background-color: rgb(22 22 21 / .6); }
  ::-webkit-scrollbar-thumb:active { background-color: rgb(22 22 21 / .75); }
  ::-webkit-scrollbar-corner { background: transparent; }
  html[data-sb="dark"] ::-webkit-scrollbar-track { background: var(--ink); }
  html[data-sb="dark"] ::-webkit-scrollbar-thumb { background-color: rgb(237 237 234 / .4); }
  html[data-sb="dark"] ::-webkit-scrollbar-thumb:hover { background-color: rgb(237 237 234 / .7); }
  @supports not selector(::-webkit-scrollbar) {           /* Firefox: без ширины по наведению, только тонкая полоса и цвета */
    html { scrollbar-width: thin; scrollbar-color: rgb(22 22 21 / .35) var(--paper); }
    html[data-sb="dark"] { scrollbar-color: rgb(237 237 234 / .4) var(--ink); }
  }
}

/* Роли */
.vm-h1 { font-weight: 400; font-size: var(--fs-h1); line-height: var(--lh-head); letter-spacing: var(--tr-display); text-wrap: balance; }
.vm-h3 { text-wrap: balance; }
.vm-reply { font-size: var(--fs-label); line-height: 1.1; letter-spacing: 0; color: var(--c-ink-2); max-width: 36ch; }
.vm-head .vm-label + .vm-h3, .vm-head .vm-label + .vm-h1 { margin-top: var(--sp-24); }
.vm-dark .vm-label, .vm-dark .vm-reply { color: var(--c-on-dark-2); }

/* Секции: экран минимум, фон на секции (шапка берёт его), содержимое от линии под шапкой */
.vm-sec { position: relative; min-height: var(--screen); display: flex; flex-direction: column;
  padding: var(--pad-top) 0 var(--sp-head); background: var(--paper); color: var(--ink); }
.vm-sec > .vm-grid { flex: 1; }
.vm-dark { background: var(--ink); color: var(--c-on-dark); }

/* Шапка (утверждено 25.09): фона нет нигде, только буквы, иконки и логотип (currentColor).
   Тон — по секции под горизонтальной серединой шапки (home.js), смена цвета 300 мс */
.vm-header { background: none; transition: color .3s var(--ease-out); }
.vm-menu { overflow-y: auto; overscroll-behavior: contain; }

/* Кнопка и ссылка */
.vm-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8); height: var(--btn-h); padding-inline: var(--sp-24);
  border: 0; border-radius: 0; background: var(--ink); color: var(--paper); font-size: var(--fs-label); letter-spacing: 0; cursor: pointer;
  transition: background-color .2s var(--ease-out), transform .16s var(--ease-out); }
.vm-btn--light { width: var(--btn-w-sm); height: var(--btn-h-sm); padding: 0; background: var(--paper); color: var(--ink); }
.vm-btn svg, .vm-link svg { width: 14px; height: 14px; flex: none; transition: transform .2s var(--ease-out); }
.vm-btn:active { transform: scale(.98); }
.vm-btn:focus-visible { outline-color: var(--ink); border-radius: 0; }   /* currentColor у тёмной кнопки = цвет бумаги: кольцо фокуса пропадало на светлом фоне */
.vm-link { display: inline-flex; align-items: center; gap: var(--sp-8); min-height: 44px; font-size: var(--fs-label); letter-spacing: 0; }
@media (hover: hover) and (pointer: fine) {
  .vm-btn--light:hover { background: var(--c-on-dark-strong); }
  .vm-btn:hover svg, .vm-link:hover svg { transform: translateX(3px); }
  .vm-link:hover { opacity: .6; }
}

/* Зерно (Statement): SVG feTurbulence тайлом 180 px, overlay 12 %, 8 кадров/с */
.vm-grain { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.vm-grain::after { content: ""; position: absolute; inset: -50%; background: var(--grain); opacity: .12; mix-blend-mode: overlay;
  animation: vm-grain 1s steps(8) infinite; }
@keyframes vm-grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-7%, 4%); } 50% { transform: translate(5%, -6%); } 75% { transform: translate(-3%, -9%); } 100% { transform: translate(8%, 3%); } }

/* =====================================================================
   НАЕЗД СЕКЦИЙ. Каждая секция sticky, следующая поднимается поверх; верхний край — лесенка по линиям сетки,
   к верху экрана выпрямляется (clip-path по view-timeline). Высокая секция прилипает низом (JS).
   Футер лежит под main и открывается, когда main уезжает.
   ===================================================================== */
main { position: relative; z-index: 1; }
main.vm-stack > :not(.vm-hero):not(.vm-new) { position: sticky; top: 0; }   /* hero и новинки уезжают сами: за ними светлые секции, светлое на светлом наезжало бы без видимой кромки */
.vm-tl { position: absolute; top: 0; left: 0; width: 1px; height: var(--screen); pointer-events: none; view-timeline-name: --rise; }
/* «Пауза + лесенка» — утверждено заказчиком 27.09 («Оставь лесенку»), вариант «цельный край» удалён.
   ПАУЗА — перед каждой наезжающей секцией отступ --dwell (35svh ≈ 3 щелчка колеса): досмотренная секция стоит одна, следующая
   не показывается, пока не прокрутили ещё треть экрана. Зазор не виден — его закрывает прилипшая предыдущая секция.
   ЛЕСЕНКА выпрямляется за первые 35 % подъёма — зубцы видны только у самого низа экрана. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.still) main.vm-stack > .vm-rise { --dwell: 35svh; margin-top: var(--dwell); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.still) .vm-rise { timeline-scope: --rise; animation: vm-rise linear both; animation-timeline: --rise; animation-range: entry 0% entry 35%; }
  }
}
@keyframes vm-rise {
  from { clip-path: polygon(0 10svh, var(--L2) 10svh, var(--L2) 2svh, var(--L3) 2svh, var(--L3) 6svh, var(--L4) 6svh, var(--L4) 14svh, var(--L5) 14svh, var(--L5) 4svh, 100% 4svh, 100% 100%, 0 100%); }
  to   { clip-path: polygon(0 0, var(--L2) 0, var(--L2) 0, var(--L3) 0, var(--L3) 0, var(--L4) 0, var(--L4) 0, var(--L5) 0, var(--L5) 0, 100% 0, 100% 100%, 0 100%); }
}
.vm-footer { position: sticky; bottom: 0; z-index: 0; }
/* ?still (скриншоты) и reduced motion: без наезда, секции идут подряд, Statement — один экран */
.still main.vm-stack > *, .still .vm-footer { position: relative; top: auto !important; }
.still .vm-statement { height: var(--screen); }
.still .vm-statement__steps { display: none; }
@media (prefers-reduced-motion: reduce) { main.vm-stack > *, .vm-footer { position: relative; top: auto !important; } }

/* ── Карточка товара ── */
.vm-card__a { display: block; }
.vm-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.vm-card__img--hover { opacity: 0; transition: opacity var(--t-hover) var(--ease-card); }
@media (hover: hover) and (pointer: fine) { .vm-card__a:hover .vm-card__img--hover { opacity: 1; } }
.vm-card__a:focus-visible .vm-card__img--hover { opacity: 1; }
.vm-card__info { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-12); margin-top: var(--sp-24); }
.vm-card__brand { font-size: var(--fs-body); font-weight: 400; }
.vm-card__name { grid-column: 1; margin-top: var(--sp-8); font-size: var(--fs-label); line-height: var(--lh-desc); letter-spacing: 0; color: var(--c-ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Цена (ответ клиента 26.09): крупно цена Viamanzoni27, под ней «Retail Price $X» — справочная, без зачёркивания и без вида скидки */
.vm-price { grid-column: 2; grid-row: 1 / 3; text-align: right; font-variant-numeric: tabular-nums; font-size: var(--fs-h3); line-height: 1; letter-spacing: var(--tr-h3); white-space: nowrap; }
.vm-price__retail { display: block; margin-top: var(--sp-8); font-size: var(--fs-label); line-height: 1.1; letter-spacing: 0; color: var(--c-ink-2); }
.vm-badge { font-size: var(--fs-label); line-height: 1.1; letter-spacing: var(--tr-caption); color: var(--c-ink-2); }

/* ── 2. НОВИНКИ — в css/new.css (прототип трёх композиций, ?layout=a|b|c) ── */

/* ── 3. STATEMENT PIECES (тёмн.): 3 экрана прокрутки, сцена закреплена ── */
.vm-statement { height: calc(var(--screen) * 3); }
.vm-statement__stage { position: sticky; top: 0; height: var(--screen); min-height: 560px; overflow: hidden; isolation: isolate; }
.vm-statement__ph { position: absolute; inset: 0; z-index: -3; clip-path: inset(100% 0 0 0); transition: clip-path var(--t-rise) var(--ease-out); }
.vm-statement__ph.is-active { z-index: -2; clip-path: inset(0); }
.vm-statement__ph.is-prev { clip-path: inset(0); transition: none; }
.vm-statement__ph img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); filter: brightness(var(--dim, .5)) saturate(.85);
  transform: scale(1.06); transition: transform 1600ms var(--ease-out); }
.vm-statement__ph.is-active img { transform: none; }
.vm-statement__stage > .vm-grain { z-index: -1; }
.vm-statement__lines { position: absolute; inset: 0; z-index: -1; pointer-events: none; display: grid; grid-template-columns: var(--margin) var(--cols) var(--margin); }
.vm-statement__lines i { border-right: 1px solid var(--c-line); }
.vm-statement__lines i:last-child { border-right: 0; }
.vm-statement__grid { height: 100%; grid-template-rows: auto 1fr auto; padding-top: var(--pad-top); padding-bottom: var(--sp-head); }
.vm-statement__title { grid-column: 1 / -1; grid-row: 1; position: relative; }
.vm-statement__title .vm-h1 { position: absolute; inset: 0 0 auto; opacity: 0; transition: opacity 400ms var(--ease-out); }
.vm-statement__title .vm-h1.is-active { position: relative; opacity: 1; }
.vm-statement__title .l { display: block; }
.vm-statement__title .l + .l { text-align: right; }
.vm-statement__nav { grid-column: 5; grid-row: 2; align-self: end; justify-self: end; text-align: right; margin-bottom: var(--sp-24); }
.vm-statement__nav button { display: block; margin-left: auto; min-height: 32px; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: var(--fs-label); letter-spacing: var(--tr-caption); color: var(--c-on-photo-2); text-decoration: underline 1px transparent; text-underline-offset: 6px;
  transition: color .3s var(--ease-out), text-decoration-color .3s var(--ease-out); }
.vm-statement__nav button[aria-current="true"] { color: var(--c-on-dark-strong); text-decoration-color: currentColor; }
@media (hover: hover) and (pointer: fine) { .vm-statement__nav button:hover { color: var(--c-on-dark-strong); } }
.vm-statement__brand { grid-column: 1 / -1; grid-row: 3; position: relative; font-weight: 400; font-stretch: 83%; font-size: var(--fs-d2);
  line-height: .74; letter-spacing: var(--tr-display); white-space: nowrap; }
.vm-statement__brand > a { display: block; padding-top: .1em; transition: opacity 400ms var(--ease-out); }
.vm-statement__brand > a:not(.is-active) { position: absolute; left: 0; bottom: 0; opacity: 0; pointer-events: none; }
.vm-statement__brand > a.is-active { opacity: 1; }
/* Прогресс сцены (правка заказчика 25.09): 1 px от поля до поля в нижнем поле, под словом бренда (слово кончается на --sp-head
   от низа, линия — на половине поля). Трек и заполнение как у строки прогресса hero на тёмном: белый 24 % и #F5F5F2.
   0 → 100 % за время закрепления сцены: CSS scroll-driven по view-timeline секции (contain = ровно закреплённый отрезок);
   без поддержки — JS (home.js); reduced motion — по шагу 1/3 · 2/3 · 1 */
.vm-statement { view-timeline: --vm-st block; }
.vm-statement__prog { position: absolute; z-index: 1; left: var(--margin); right: var(--margin); bottom: calc(var(--sp-head) / 2); height: 1px;
  background: rgb(255 255 255 / .24); pointer-events: none;
  /* три отрезка под три кадра: маска режет трек и заполнение зазорами 8 px на 1/3 и 2/3 */
  --g: 4px; -webkit-mask: linear-gradient(90deg, #000 calc(100% / 3 - var(--g)), #0000 0 calc(100% / 3 + var(--g)), #000 0 calc(200% / 3 - var(--g)), #0000 0 calc(200% / 3 + var(--g)), #000 0);
  mask: linear-gradient(90deg, #000 calc(100% / 3 - var(--g)), #0000 0 calc(100% / 3 + var(--g)), #000 0 calc(200% / 3 - var(--g)), #0000 0 calc(200% / 3 + var(--g)), #000 0); }
.vm-statement__prog > i { position: absolute; inset: 0; background: var(--c-on-dark-strong); transform: scaleX(0); transform-origin: left; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.still) .vm-statement__prog > i { animation: vm-st-prog linear both; animation-timeline: --vm-st; animation-range: contain 0% contain 100%; }
  }
}
@keyframes vm-st-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.still .vm-statement__prog > i { transform: scaleX(.3334); }
.vm-statement__steps { margin-top: calc(-1 * var(--screen)); }
.vm-statement__steps > div { height: var(--screen); }
@media (max-width: 767px) {
  .vm-statement__lines { grid-template-columns: var(--margin) 1fr 1fr var(--margin); }
  .vm-statement__lines i:nth-child(n+5) { display: none; }
  .vm-statement__lines i:nth-child(4) { border-right: 0; }
  .vm-statement__title .l + .l { text-align: left; }
  .vm-statement__nav { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .vm-statement__nav button { margin-left: 0; min-height: 44px; }
  .vm-statement__brand { white-space: normal; line-height: .84; }
}

/* ── 4. ВЕЩЬ НЕДЕЛИ «Натюрморт» (утверждён B, 26.09). Сумка-вырезка целиком прямо на бумаге, без подложки и тени:
   левый край на L2, дно на линии над именем (одна ось L2 у сумки, подписи и имени). Низ: покупка C1 | имя L2–L5, низы на одной линии.
   ≥1024 — один экран (--ch), сумка занимает весь остаток высоты; 768–1023 и <768 — вертикаль по той же оси ── */
.vm-piece { --ch: calc(var(--screen) - var(--pad-top) - var(--sp-head)); }
.vm-piece__grid { align-items: start; align-content: space-between; row-gap: var(--sp-48); }   /* <1024: остаток экрана поровну между блоками, кнопка на нижней линии */
.vm-piece__grid > * { margin-right: 0; }
.vm-piece__head, .vm-piece__buy { display: grid; justify-items: start; }
.vm-piece__title { margin-top: var(--sp-24); font-weight: 400; font-size: var(--fs-h1); line-height: var(--lh-head); letter-spacing: var(--tr-display); text-wrap: balance; }
.vm-piece__title > span { display: block; margin-bottom: var(--sp-16); font-size: var(--fs-h3); line-height: 1; letter-spacing: var(--tr-h3); }
.vm-piece__f { grid-area: 1 / 2 / 2 / 5; margin: 0; --m-pos: 0 100%; --m-size: 101% 0%; }       /* раскрытие от линии дна вверх */
.vm-piece__f img { display: block; width: 100%; height: auto; }
.vm-piece__buy { grid-area: 2 / 1 / 3 / 2; align-self: end; padding-right: var(--gut); }
.vm-piece__head { grid-area: 2 / 2 / 3 / 5; align-self: end; }
@media (min-width: 1024px) {
  .vm-piece > .vm-piece__grid { grid-template-rows: minmax(0, 1fr) auto; height: var(--ch); flex: none; }   /* flex:1 секции растянул бы ряд по высоте снимка */
  .vm-piece__f { align-self: stretch; min-height: 0; }
  .vm-piece__f picture { display: block; height: 100%; }
  .vm-piece__f img { width: 100%; height: 100%; object-fit: contain; object-position: 0 100%; }   /* по высоте ряда; узкий экран — по ширине L2–L5 */
}
.vm-piece__price { font-size: var(--fs-h3); line-height: 1; letter-spacing: var(--tr-h3); font-variant-numeric: tabular-nums; }
.vm-piece__price + .vm-label { margin-top: var(--sp-16); }
.vm-piece__spec { justify-self: stretch; margin: var(--sp-24) 0 0; font-size: var(--fs-label); line-height: 1.1; letter-spacing: 0; }
.vm-piece__spec > div { display: flex; justify-content: space-between; gap: var(--sp-12); padding: var(--sp-12) 0; border-top: 1px solid rgb(22 22 21 / .18); }
.vm-piece__spec dt { color: var(--c-ink-2); }
.vm-piece__spec dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.vm-piece__btn { justify-self: stretch; margin-top: var(--sp-24); }
@media (prefers-reduced-motion: no-preference) {
  .rv .vm-piece__f[data-reveal] { opacity: 1; transform: none; }
  .rv .vm-piece__f > * { -webkit-mask: linear-gradient(#000, #000) var(--m-pos) / var(--m-size) no-repeat; mask: linear-gradient(#000, #000) var(--m-pos) / var(--m-size) no-repeat; }
  .rv .vm-piece__f img { transform: scale(1.04); transform-origin: 0 100%; }   /* садится на L2 и линию дна, не сдвигая их */
  .rv .vm-piece__f.is-in > * { -webkit-mask-size: 101% 101%; mask-size: 101% 101%; transition: -webkit-mask-size 1250ms ease-in-out, mask-size 1250ms ease-in-out; transition-delay: var(--d, 0ms); }
  .rv .vm-piece__f.is-in img { transform: none; transition: transform 1600ms var(--ease-out) var(--d, 0ms); }
}

/* ── 7. ПОДЛИННОСТЬ И СОСТОЯНИЕ (светл.): текстовая секция без фото и плашек, держится на линиях.
   Ряд 1: подпись C1 | заголовок L2–L6. Ряд 2–3: вводная L2–L4 и «в коробке» под ней | 8 проверок L4–L6 в две колонки.
   Ряд 4: подпись шкалы C1 | три оценки строками L2–L6 (оценка C2, описание L4–L6), линейка над каждой. Ряд 5: CTA от L4 ── */
.vm-auth__grid { align-content: start; grid-template-rows: repeat(5, auto); }
.vm-auth ul { list-style: none; margin: 0; padding: 0; }
.vm-auth__kicker { grid-area: 1 / 1 / 2 / 2; }
.vm-auth__title { grid-area: 1 / 2 / 2 / -1; margin-right: 0; }
.vm-auth__title > span { display: block; }
.vm-auth__intro { grid-area: 2 / 2 / 3 / 4; margin-top: var(--sp-72); line-height: var(--lh-desc); max-width: 44ch; }
.vm-auth__box { grid-area: 3 / 2 / 4 / 4; margin-top: var(--sp-48); }
.vm-auth__checks { grid-area: 2 / 4 / 4 / 6; margin: var(--sp-72) 0 0; }
.vm-auth__checks ul, .vm-auth__box ul { margin-top: var(--sp-16); }
.vm-auth__checks ul { columns: 2; column-gap: var(--gut); }
.vm-auth__checks li, .vm-auth__box li { break-inside: avoid; padding: var(--sp-12) 0; border-top: 1px solid rgb(22 22 21 / .18); line-height: var(--lh-desc); }
.vm-auth__scale-h { grid-area: 4 / 1 / 5 / 2; margin-top: var(--sp-72); }
.vm-auth__grades { grid-area: 4 / 2 / 5 / -1; margin: var(--sp-72) 0 0; display: grid; grid-template-columns: subgrid; }
.vm-auth__grades > div { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; padding: var(--sp-16) 0 var(--sp-24);
  border-top: 1px solid var(--ink); }
.vm-auth__grades dt { grid-column: 1 / 3; font-size: var(--fs-h3); line-height: 1; letter-spacing: var(--tr-h3); }
.vm-auth__grades dd { grid-column: 3 / -1; margin: 0; font-size: var(--fs-label); line-height: var(--lh-desc); letter-spacing: 0; color: var(--c-ink-2); max-width: 48ch; }
.vm-auth__btn { grid-area: 5 / 4 / 6 / 5; justify-self: start; margin-top: var(--sp-24); }

/* ── 5. INSTAGRAM (тёмн.): 4 равных кадра L1–L6 (аудит 25.09: ≥234 px на кадр; по колонкам C3 давал 148, C5 — 121).
   Внешние края на L1/L6, внутренние — равное деление: 4 кадра ≥234 px одним рядом по линиям сетки не раскладываются ── */
.vm-ig .vm-grid { align-content: space-between; row-gap: var(--sp-48); }
.vm-ig__head { grid-column: 1 / -1; }
.vm-ig__head a { display: inline-block; }
@media (hover: hover) and (pointer: fine) { .vm-ig__head a:hover { opacity: .7; } }
.vm-ig__row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gut); margin-right: 0; }
.vm-ig__row > a { display: block; overflow: hidden; background: #0E0E0D; }
.vm-ig__row img { width: 100%; aspect-ratio: 3 / 4; max-height: 60svh; object-fit: cover; transition: transform 1.2s var(--ease-card); }
@media (hover: hover) and (pointer: fine) { .vm-ig__row a:hover img { transform: scale(1.03); } }

/* ── 6. БРЕНДЫ (тёмн.), вариант B «Обложка» — утверждён 26.09, A и C удалены.
   Слово дома от поля до поля (кегль LOUIS VUITTON = 4,49 em при wdth 75 вписан в L1–L6), кадр L2–L4, указатель 11 домов L4–L6.
   Мышь ≥1024: наведение/фокус на строке меняет слово (буквы снизу вверх) и кадр (шторка от L4). <1024: обложка прилипает под шапкой,
   дом меняется от прокрутки — строка указателя пересекает линию под кадром (приём варианта C). Миниатюр нет ── */
.vm-houses { --ease-mask: cubic-bezier(.65, 0, .35, 1); --t-mask: 1250ms; --t-swap: 380ms; --fs-idx: clamp(16px, 1.389vw, 27px); }
.vm-houses__grid > * { margin-right: 0; }
.vm-houses__h { grid-area: 1 / 1 / 2 / -1; margin-bottom: var(--sp-24); color: var(--c-on-dark-2); }
.vm-houses__list { list-style: none; margin: 0; padding: 0; container-type: inline-size; border-top: 1px solid rgb(237 237 234 / .16); }
.vm-houses__list li { border-bottom: 1px solid rgb(237 237 234 / .16); }
.vm-houses__list a { display: flex; align-items: baseline; gap: var(--sp-8); padding: 6px 0; color: var(--c-on-dark-2); transition: color .3s var(--ease-out); }
.vm-houses__list li.is-on a { color: var(--c-on-dark-strong); }
.vm-houses__n { overflow: clip; font-weight: 400; font-size: var(--fs-idx); line-height: 1.1; letter-spacing: var(--tr-text); white-space: nowrap; }
.vm-houses__n > span { display: block; }
.vm-houses__list sup { margin: 0 0 0 auto; font-size: var(--fs-label); line-height: 1; letter-spacing: 0; color: var(--c-on-dark-2); font-variant-numeric: tabular-nums; }
.vm-houses__th { display: none; }
.vm-houses__legal { margin-top: var(--sp-32); color: var(--c-on-dark-2); }
@media (prefers-reduced-motion: no-preference) {
  .rv .vm-houses__list li[data-reveal] { opacity: 1; transform: none; }
  .rv .vm-houses__n > span { transform: translateY(110%); }
  .rv .vm-houses__list li.is-in .vm-houses__n > span { transform: none; transition: transform var(--t-mask) var(--ease-mask) var(--d, 0ms); }
}

.vm-houses__mast { display: block; position: relative; overflow: clip; height: .9em; margin: 0;
  font-size: calc(100cqi / 4.49); font-weight: 400; font-stretch: 75%; line-height: .8;
  letter-spacing: var(--tr-display); white-space: nowrap; color: var(--c-on-dark-strong); }
.vm-houses__mast .w { position: absolute; left: 0; bottom: 0; }
.vm-houses__mast .c { display: inline-block; transition: transform 460ms var(--ease-rise) calc(var(--i) * 18ms); }
.vm-houses__mast .w.is-pre .c { transform: translateY(1.15em); transition: none; }
.vm-houses__mast .w.is-out .c { transform: translateY(-.5em); opacity: 0; transition: transform 260ms var(--ease-out), opacity 180ms var(--ease-out); }
.vm-houses__mast .w.is-first .c { transition: transform var(--t-mask) var(--ease-mask) calc(var(--i) * 45ms); }
@media (prefers-reduced-motion: reduce) { .vm-houses__mast .c { transition: none !important; } .vm-houses__mast .w.is-out { visibility: hidden; } }
.vm-houses__view { display: block; position: relative; overflow: hidden; background: var(--c-card); }
.vm-houses__view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; clip-path: inset(0 0 0 100%); background: var(--c-card);   /* иначе у contain-кадра по бокам просвечивает прошлый cover-кадр (LV) */
  transition: clip-path var(--t-swap) var(--ease-out); }
.vm-houses__view img:not(.is-on):not(.is-prev) { transition: none; }   /* позапрошлый кадр гаснет сразу, не закрывается поверх прошлого */
.vm-houses__view img.is-on { z-index: 1; clip-path: inset(0); }
.vm-houses__view img.is-prev { clip-path: inset(0); transition: none; }
.vm-houses__view.is-first img.is-on { transition: clip-path var(--t-mask) var(--ease-mask); }
.vm-houses__view img[data-fit="cover"] { object-fit: cover; }   /* LV Blue Marine: свой бежевый фон, кадр достроен до 4:5 */
@media (prefers-reduced-motion: reduce) { .vm-houses__view img { transition: opacity 200ms ease-out; clip-path: none !important; opacity: 0; } .vm-houses__view img.is-on { opacity: 1; } }
@media (min-width: 1024px) {
  .vm-houses__grid { align-content: stretch; grid-template-rows: auto minmax(300px, 1fr) auto; }
  .vm-houses__list { grid-area: 2 / 4 / 3 / 6; align-self: start; }
  .vm-houses__side { grid-area: 2 / 1 / 3 / 4; display: grid; grid-template-columns: subgrid; }
  .vm-houses__view { grid-area: 1 / 2 / 2 / 4; }
  .vm-houses__legal { grid-area: 1 / 1 / 2 / 2; align-self: end; margin: 0; padding: 0 var(--gut) 0 0; }
  .vm-houses__mast { grid-area: 3 / 1 / 4 / -1; margin-top: var(--sp-24); }
}
/* <1024: слово (кегль LOUIS VUITTON = поле–поле, любое имя влезает) и кадр прилипают под шапкой, указатель проезжает под ними.
   Линия чтения — 24 px под кадром (home.js). Тень вверх закрывает полосу под прозрачной шапкой и зазор слово–кадр */
@media (max-width: 1023px) {
  .vm-houses { --view-h: 38svh; --mast-h: calc(100cqi / 4.49 * .9); --fs-idx: 20px; }
  .vm-houses__grid { display: flex; flex-direction: column; }
  .vm-houses__side { display: contents; }
  .vm-houses__mast { order: 1; position: sticky; z-index: 2; top: var(--head-h); background: var(--ink); box-shadow: 0 calc(-1 * var(--head-h)) 0 var(--ink); }
  .vm-houses__view { order: 2; position: sticky; z-index: 2; top: calc(var(--head-h) + var(--mast-h) + var(--sp-24)); height: var(--view-h);
    margin-top: var(--sp-24); box-shadow: 0 calc(-1 * var(--sp-24) - 1px) 0 var(--ink); }   /* +1 px: дробная высота слова оставляла щель с линейкой строки */
  .vm-houses__list { order: 3; margin-top: var(--sp-24);
    padding-bottom: max(0px, calc(var(--screen) - var(--head-h) - var(--mast-h) - var(--view-h) - 3 * var(--sp-24) - 48px - var(--sp-head) - 24px)); }   /* последняя строка (Miu Miu) доходит до линии; замер 390×844 */
  .vm-houses__list a { min-height: 48px; align-items: center; padding: 0;
    scroll-margin-top: calc(var(--head-h) + var(--mast-h) + var(--view-h) + 2 * var(--sp-24)); }   /* фокус с клавиатуры не прячется под обложкой */
  .vm-houses__legal { order: 4; }
}

/* ── 3. КАТЕГОРИИ (светл., сразу после новинок): 3 входа. Women’s bags (43) L1–L4 на два ряда, справа L4–L6 Men’s bags над Men’s shoes.
   Высота двух рядов = высота большой плитки: ряд = (экран − шапка − подпись − гаттер) / 2 ── */
.vm-cats { --cat-row: clamp(240px, calc((var(--screen) - var(--pad-top) - var(--sp-head) - var(--sp-48) - var(--gut)) / 2), 400px); }
.vm-cats__grid { align-content: start; row-gap: var(--gut); grid-template-rows: auto var(--cat-row) var(--cat-row); }
.vm-cats__h { grid-area: 1 / 1 / 2 / -1; margin-bottom: var(--sp-24); }
.vm-cat { --cat-fs: clamp(28px, 3.334vw, 64px); position: relative; display: block; overflow: hidden; background: var(--c-card); }
.vm-cat--1 { grid-area: 2 / 1 / 4 / 4; }
.vm-cat--2 { grid-area: 2 / 4 / 3 / 6; margin-right: 0; }
.vm-cat--3 { grid-area: 3 / 4 / 4 / 6; margin-right: 0; }
/* кадр начинается под подписью (24 + строка .9 em + 24), фигура стоит на нижнем крае, тень по ступням как в hero */
.vm-cat img { position: absolute; inset: calc(var(--sp-48) + .9 * var(--cat-fs)) 0 0; width: 100%; height: calc(100% - var(--sp-48) - .9 * var(--cat-fs));
  object-fit: contain; object-position: 50% 100%; transform-origin: 50% 100%; transition: transform 1.2s var(--ease-card);
  background: radial-gradient(closest-side, rgb(22 22 21 / .24), rgb(22 22 21 / .08) 55%, transparent) 50% 98.4% / 22% 3% no-repeat; }
.vm-cat--3 img { background-size: 40% 3%; }
.vm-cat__name { position: absolute; left: var(--sp-24); top: var(--sp-24); z-index: 1; display: flex; align-items: flex-start; gap: var(--sp-8);
  font-size: var(--cat-fs); line-height: .9; letter-spacing: var(--tr-h3); color: var(--ink); }
.vm-cat__name sup { font-size: var(--fs-label); line-height: 1; letter-spacing: 0; color: var(--c-ink-2); font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .vm-cat:hover img { transform: scale(1.03); } }
.vm-cat:focus-visible { outline-offset: -4px; }
@media (prefers-reduced-motion: no-preference) {
  .rv .vm-cat[data-reveal] { opacity: 1; transform: none; }
  .rv .vm-cat > picture, .rv .vm-cat > img { display: block; position: absolute; inset: 0; -webkit-mask: linear-gradient(#000, #000) 0 100% / 101% 0% no-repeat; mask: linear-gradient(#000, #000) 0 100% / 101% 0% no-repeat; }
  .rv .vm-cat.is-in > picture, .rv .vm-cat.is-in > img { -webkit-mask-size: 101% 101%; mask-size: 101% 101%; transition: -webkit-mask-size 1250ms ease-in-out, mask-size 1250ms ease-in-out; transition-delay: var(--d, 0ms); }
}

/* ── 7. ПОДПИСКА + СЕРВИС (тёмн.): ступенька (2-я строка с L3), фото C1, форма C3–C4, сервис по линиям внизу ── */
.vm-news .vm-grid { grid-template-rows: auto 1fr auto; row-gap: var(--sp-48); }
.vm-news__title { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: subgrid; margin-right: 0; }
.vm-news__title > span { grid-column: 1 / -1; }
.vm-news__title > span + span { grid-column: 3 / -1; }
.vm-news__label { grid-area: 1 / 5; justify-self: end; align-self: start; }
.vm-news__photo { grid-area: 2 / 1; align-self: end; }
.vm-news__photo img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.vm-news__form { grid-area: 2 / 3 / 3 / 5; align-self: end; position: relative; }
.vm-news__lede { max-width: 26ch; }
.vm-field { display: block; margin-top: var(--sp-48); }
.vm-field .vm-label { display: block; }
/* Подписка светлая с 26.09 (между тёмными Instagram и футером): поле и кнопка в чернилах #161615 */
.vm-field input { display: block; width: 100%; height: var(--btn-h); padding: 0; border: 0; border-bottom: 1px solid var(--c-ink-2); border-radius: 0;
  background: none; font-size: max(16px, var(--fs-body)); text-transform: none; letter-spacing: 0; color: var(--ink); caret-color: currentColor; }
.vm-field input:focus { outline: none; border-bottom-color: var(--ink); }
.vm-field input:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.vm-field input[aria-invalid="true"] { border-bottom-color: #9E2A1E; }   /* 5,2:1 на #D6D6D9 */
.vm-news__form .vm-btn { margin-top: var(--sp-48); width: var(--btn-w-sm); height: var(--btn-h-sm); padding: 0; }
@media (hover: hover) and (pointer: fine) { .vm-news__form .vm-btn:hover { background: #2E2E2C; } }
.vm-news__status { position: absolute; top: 100%; left: 0; right: 0; margin-top: var(--sp-16); font-size: var(--fs-label); letter-spacing: 0; }
/* Сервис: 3 равные ячейки L1–L6 (аудит: по колонкам было 550/148/575, «Free returns» в 148 px ломало строку).
   Строки заголовков общие (subgrid) — описания стартуют на одной высоте, даже если заголовок перенесётся */
.vm-usps { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto;
  column-gap: var(--gut); margin: var(--sp-48) 0 0; }
.vm-usp { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: var(--sp-12); }
.vm-usp .vm-label { letter-spacing: 0; max-width: 28ch; }

/* ── 8. ФУТЕР (тёмн.): колонки по линиям L1 · L3 · L4 · L5, слово от поля до поля внизу ── */
/* 27.09 (аудит): Shop и Help стопкой в C3, © поднята к ссылкам (72 px), пустота 1fr ушла под неё — логотип остаётся внизу */
.vm-footer .vm-grid { grid-template-rows: auto auto auto 1fr auto; font-size: var(--fs-label); letter-spacing: 0; }
.vm-footer__about { grid-column: 1 / 3; grid-row: 1 / 3; }
.vm-footer__about p { max-width: 44ch; margin-top: var(--sp-16); line-height: 1.5; color: var(--c-on-dark-2); text-transform: none; }
.vm-footer__col:nth-of-type(1) { grid-area: 1 / 3; } .vm-footer__col:nth-of-type(2) { grid-area: 2 / 3; margin-top: var(--sp-32); }
.vm-footer__col:nth-of-type(3) { grid-area: 1 / 4; } .vm-footer__col:nth-of-type(4) { grid-area: 1 / 5; }
.vm-footer__col summary, .vm-footer__about h2 { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-label); font-weight: 400; color: var(--c-on-dark-strong); list-style: none; }
.vm-footer__col summary::-webkit-details-marker { display: none; }
.vm-footer__col summary svg { display: none; width: 20px; height: 20px; transition: transform .3s var(--ease-out); }
.vm-footer__col ul { margin-top: var(--sp-16); }
.vm-footer__col li a { display: inline-block; line-height: var(--lh-footer); color: var(--c-on-dark-2); transition: color .2s; }
@media (hover: hover) and (pointer: fine) { .vm-footer__col li a:hover { color: var(--c-on-dark-strong); } }
.vm-footer__legal { grid-column: 1 / -1; grid-row: 3; margin-top: var(--sp-72); display: grid; grid-template-columns: subgrid; color: var(--c-on-dark-2); margin-right: 0; }
.vm-footer__legal > :nth-child(1) { grid-column: 1 / 3; } .vm-footer__legal > :nth-child(2) { grid-column: 3; } .vm-footer__legal > :nth-child(3) { grid-column: 4; }
.vm-footer__mark { grid-column: 1 / -1; grid-row: 5; margin: var(--sp-48) 0 0; color: var(--c-on-dark-strong); }
.vm-footer { padding-bottom: 0; }
.vm-footer__mark > span { margin-bottom: var(--sp-32); }
@media (min-width: 768px) { .vm-footer__col summary { pointer-events: none; } }

/* =====================================================================
   768–1279: те же линии и поля 60; блоки собираются в две группы: A = L1–L3, B = L3–L6
   ===================================================================== */
@media (min-width: 768px) and (max-width: 1279px) {
  .vm-news__photo { grid-area: 2 / 1 / 3 / 3; max-width: 240px; }
  .vm-news__form { grid-area: 2 / 3 / 3 / 6; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .vm-ig__row { display: flex; gap: var(--gut); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--margin)); padding-inline: var(--margin); scroll-padding-inline: var(--margin); }
  .vm-ig__row::-webkit-scrollbar { display: none; }
  .vm-ig__row > a { flex: 0 0 38%; margin: 0; scroll-snap-align: start; }
  .vm-footer .vm-grid { grid-template-rows: auto auto auto auto 1fr auto; }
  .vm-footer__about { grid-column: 1 / -1; grid-row: 1; margin-bottom: var(--sp-48); }
  .vm-footer__col:nth-of-type(1) { grid-area: 2 / 1; } .vm-footer__col:nth-of-type(2) { grid-area: 3 / 1; }
  .vm-footer__col:nth-of-type(3) { grid-area: 2 / 2 / 3 / 4; } .vm-footer__col:nth-of-type(4) { grid-area: 2 / 4 / 3 / 6; }
  .vm-footer__legal { grid-row: 4; } .vm-footer__mark { grid-row: 6; }
  .vm-statement__nav { grid-column: 4 / 6; }
  /* вещь недели, планшет: всё на оси L2, C1 — пауза. Сумка L2–L6, под ней имя L2–L6, покупка L2–L4 */
  .vm-piece__grid { row-gap: var(--sp-32); }
  .vm-piece__f { grid-area: 1 / 2 / 2 / 6; }
  .vm-piece__head { grid-area: 2 / 2 / 3 / 6; }
  .vm-piece__buy { grid-area: 3 / 2 / 4 / 4; padding-right: 0; }
}

/* =====================================================================
   <768: 2 колонки, поля 20. Все блоки на всю ширину, пары — явно. Hero не трогаем (у него своя раскладка)
   ===================================================================== */
@media (max-width: 767px) {
  body .vm-sec .vm-grid > *:nth-child(n), body .vm-statement .vm-grid > *:nth-child(n) { grid-column: 1 / -1; grid-row: auto; margin-right: 0; }
  .vm-statement__grid { row-gap: var(--sp-24); }
  /* вещь недели: имя → сумка во всю ширину колонок → покупка (порядок DOM) */
  .vm-piece__grid { row-gap: var(--sp-32); }
  .vm-piece__buy { padding-right: 0; }
  body .vm-grid > .vm-ig__row:nth-child(n) { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--margin)); padding-inline: var(--margin); scroll-padding-inline: var(--margin); }
  .vm-ig__row::-webkit-scrollbar { display: none; }
  .vm-ig__row > a { flex: 0 0 68%; margin: 0; scroll-snap-align: start; }   /* 390: 238 px ≥ 234 (аудит), следующий кадр виден краем */
  .vm-ig__row img { max-height: none; }
  /* Instagram: без высоты в экран — иначе space-between даёт 391 px пустоты между заголовком и лентой */
  .vm-ig { min-height: 0; }
  .vm-ig .vm-grid { align-content: start; row-gap: var(--sp-32); }
  .vm-auth__grid { grid-template-rows: none; }
  .vm-auth__title { margin-top: var(--sp-16); }
  .vm-auth__intro, .vm-auth__checks { margin-top: var(--sp-32); }
  .vm-auth__scale-h { margin-top: var(--sp-48); }
  .vm-auth__grades { display: block; margin-top: var(--sp-16); }
  .vm-auth__grades > div { display: block; }
  .vm-auth__grades dd { margin-top: var(--sp-8); }
  .vm-auth__btn { width: 100%; margin-top: var(--sp-24); }
  .vm-houses__h { margin-bottom: var(--sp-24); }
  .vm-cats__grid { grid-template-rows: none; }
  .vm-cat { height: clamp(260px, 64vw, 420px); }
  .vm-cat__name { left: var(--sp-16); top: var(--sp-16); }
  .vm-news .vm-grid { grid-template-rows: none; }
  .vm-news__title > span + span { grid-column: 1 / -1; padding-left: 25%; }
  .vm-news__label { justify-self: start; order: -1; }
  .vm-news__photo { display: none; }
  .vm-news__form .vm-btn { width: 100%; height: 56px; }
  .vm-usps { display: grid; grid-template-columns: 1fr; row-gap: var(--sp-32); }
  .vm-usps { grid-template-rows: none; }
  body .vm-usps > .vm-usp:nth-child(n) { grid-column: 1 / -1; grid-row: auto; display: block; margin: 0; }
  .vm-usp .vm-label { margin-top: var(--sp-12); }
  .vm-footer .vm-grid { grid-template-rows: none; }
  .vm-footer__about { margin-bottom: var(--sp-32); }
  .vm-footer__col summary { min-height: 56px; }
  .vm-footer__col:nth-of-type(2) { margin-top: 0; }
  .vm-footer__col summary svg { display: block; }
  .vm-footer__col[open] summary svg { transform: rotate(180deg); }
  .vm-footer__col ul { margin: 0 0 var(--sp-16); }
  .vm-footer__col li a { display: flex; align-items: center; min-height: 44px; line-height: 1; }
  .vm-footer__legal { margin-top: var(--sp-48); row-gap: var(--sp-12); }
  body .vm-footer__legal > :nth-child(n) { grid-column: 1 / -1; }
}

/* ── Появление при прокрутке ── */
.rv [data-reveal] { opacity: 0; transform: translateY(32px); }
.rv [data-reveal].is-in { opacity: 1; transform: none; transition: opacity 700ms var(--ease-out) var(--d, 0ms), transform var(--t-rise) var(--ease-out) var(--d, 0ms); }
.rv [data-split]:not(.vm-hero__title) .w > span { opacity: .3; filter: blur(8px); color: #7F7F7F; }
.rv [data-split].is-in:not(.vm-hero__title) .w > span { opacity: 1; filter: none; color: inherit;
  transition: opacity 600ms var(--ease-out), filter 600ms var(--ease-out), color 900ms var(--ease-out); transition-delay: var(--d); }

.still .vm-grain::after { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .vm-grain::after { animation: none; }
  .rv [data-reveal] { transform: none !important; }
  .rv [data-split] .w > span { filter: none !important; color: inherit !important; }
  .rv [data-reveal].is-in, .rv [data-split].is-in .w > span { transition: opacity 200ms ease-out !important; transition-delay: 0ms !important; }
  .vm-statement__ph { transition: opacity 200ms ease-out; clip-path: none !important; opacity: 0; }
  .vm-statement__ph.is-active, .vm-statement__ph.is-prev { opacity: 1; }
  .vm-statement__ph img { transform: none; transition: none; }
  .vm-cat img, .vm-ig__row img { transition: none; }
}