/* ============================================================
   ILCATO — home page
   ============================================================ */

/* ---- HERO: full-screen swiper "перелистывание" -------------------- */
/* pull the hero up under the transparent sticky header (topbar stays above) */
body.transparent-header .hero{margin-top:calc(-1 * var(--header-h))}
.hero{position:relative;height:100svh;min-height:600px;background:var(--ink)}
/* Полноэкранное «перелистывание» экранов колёсиком (десктоп): hero↔showcase
   меняются ОДНИМ слайдом за жест — тем же движением (1100ms slide), что и слайды
   hero-карусели. Класс .is-pager вешает JS только на desktop pointer:fine; на
   тач/мобайл его нет → там обычный нативный скролл (iOS-safe). На последнем экране
   колесо «отпускается» в нативный скролл к ticker и остальной странице. */
.deck{position:relative}
/* Полноэкранный COVER-пейджер (десктоп): каждый экран — абсолютный слой во весь
   экран; следующий НАЕЗЖАЕТ поверх текущего (translateY 100%→0, тем же движением
   1100ms slide, что и hero-карусель). z-index по порядку задаёт JS. Подвал — вне
   .deck, скроллится обычным нативным скроллом. Мобайл/тач: класс НЕ вешается. */
.deck.is-pager{height:100svh;overflow:hidden;margin-top:calc(-1 * var(--header-h))}
.deck.is-pager > section{
  position:absolute;inset:0;height:100svh;overflow:hidden;
  transition:transform 1100ms ease;will-change:transform;
  /* каждая секция уже имеет свой непрозрачный фон (cream/paper/ink) — им и перекрывают */
}
.deck.is-pager > .hero{margin-top:0}
.deck.is-pager > .ticker{display:none}
/* контентные экраны: центрируем содержимое по вертикали во весь экран,
   срезаем «скролловые» вертикальные отступы (панель фиксированной высоты 100svh) */
.deck.is-pager > section.section{display:flex;flex-direction:column;justify-content:center;padding-top:var(--header-h);padding-bottom:0}
.deck.is-pager > section.section > .container{width:100%}
@media (prefers-reduced-motion:reduce){ .deck.is-pager > section{transition:none} }
body.deck-pager .topbar{display:none}
/* (экран lookbook удалён по просьбе юзера 2026-07-02) */
/* мобайл: ОБЫЧНЫЙ нативный скролл по всему сайту (финал 2026-07-04, просьба
   юзера). Никаких пейджеров/sticky/scroll-snap/touch-action — все секции в
   обычном потоке. .is-snap остался только чтобы спрятать ticker на мобиле. */
@media (max-width:820px){
  .deck.is-snap > .ticker{display:none}
}
/* в pager-режиме категории всегда в одну строку из 4 — иначе 2×2 не влезает в 100svh
   (только десктоп: на мобиле панель скроллится и сетка остаётся 2×2) */
@media (min-width:821px){
  .deck.is-pager > .cats .cats__grid{grid-template-columns:repeat(4,1fr)}
  /* карточки категорий крупнее: контейнер секции шире стандартного (просьба юзера, ×2) */
  .deck.is-pager > .cats > .container{max-width:min(1850px, 100%)}
}
/* на коротких экранах чуть скромнее, чтобы секция влезла в 100svh */
@media (min-width:821px) and (max-height:840px){
  .deck.is-pager > .cats > .container{max-width:1450px}
}
/* showcase: карточки-фото без подписей (как у emka) — карусель почти во всю
   ширину колонки (крупные карточки, узкие боковые поля как в референсе) */
@media (min-width:821px){
  .deck.is-pager > .showcase .showcase__panel{
    padding-left:clamp(1.2rem,1.6vw,2.2rem);
    padding-right:clamp(1.2rem,1.6vw,2.2rem);
    transform:translateY(60px); /* весь блок ниже: 30px + ещё 30px (просьбы юзера) */
  }
}
/* editorial: высоту фото на десктопе задаёт V1-блок ниже (img height 58vh);
   на мобиле — лок-правило в конце файла */
/* на коротких экранах ужимаем текстовую колонку editorial, чтобы секция влезла в 100svh */
@media (max-height:840px){
  .deck.is-pager > .editorial .editorial__copy p{font-size:1rem;margin-bottom:.8rem}
  .deck.is-pager > .editorial .editorial__copy h2{margin-bottom:1rem}
  .deck.is-pager > .editorial .editorial__sign{margin-top:1rem;font-size:1.3rem}
  .deck.is-pager > .editorial .editorial__stats{margin-top:1.4rem;padding-top:1.2rem}
}
.hero .swiper{width:100%;height:100%}
.hero .swiper-slide{position:relative;overflow:hidden;background:var(--cream-3)}
.hero__media{position:absolute;inset:0;overflow:hidden}
.hero__media img,.hero__media video{
  position:absolute;top:50%;left:50%;width:100%;height:100%;
  transform:translate(-50%,-50%) scale(1.06);object-fit:cover;
}
/* фото-фоны на всех разрешениях; top-якорь бережёт голову модели при вертикальном кропе
   (ультраширокие мониторы), на мобиле окно смещено вправо — к модели */
.hero__pic{
  display:block;position:absolute;top:50%;left:50%;width:100%;height:100%;
  transform:translate(-50%,-50%) scale(1.08);
  background-size:cover;background-position:center top;
}
.hero__pic[data-hero="beige"]{background-image:url(../img/hero/hero-beige.jpg)}
.hero__pic[data-hero="blue"]{background-image:url(../img/hero/hero-blue.jpg)}
.hero__pic[data-hero="blackbag"]{background-image:url(../img/hero/hero-blackbag.jpg)}
.hero__pic[data-hero="blackmaxi"]{background-image:url(../img/hero/hero-blackmaxi.jpg)}
.hero__pic[data-hero="navy"]{background-image:url(../img/hero/hero-navy.jpg)}
.hero__pic[data-hero="brown"]{background-image:url(../img/hero/hero-brown.jpg)}
.hero__pic[data-hero="red"]{background-image:url(../img/hero/hero-red.jpg)}
@media (max-width:820px){
  .hero__pic{background-position:68% top}
  /* контентные слайды hero (все кроме визитки ILCATO): на мобиле остаётся ТОЛЬКО
     кнопка в рамке — заголовки/надписи скрыты (просьба юзера 2026-07-04).
     История 2026-07-07: текст возвращали (hero «как savage»: фото 62% + белая
     текст-зона под ним) — юзер посмотрел на реальном iPhone (фото кропалось
     слишком крупно) и выбрал «вернуть как было» в тот же день */
  .hero__inner:not(.hero__inner--brand) .hero__eyebrow,
  .hero__inner:not(.hero__inner--brand) .hero__title,
  .hero__inner:not(.hero__inner--brand) .hero__sub{display:none}
  /* убираем осветление слайдов в районе кнопок на мобиле — показываем фото как есть
     (текст скрыт, кнопки тёмные и читаются сами; юзер 2026-07-07).
     .hero-префикс поднимает специфичность выше базового правила ниже по файлу */
  .hero .hero__media::after{background:none}
}
@media (min-width:821px){
  .hero__vid,.hero__pic-mob{display:none}
}
/* CMS-hero: видео из Редактора показывается на ОБОИХ брейкпоинтах (в отличие от старого .hero__vid) */
.hero__cfgvid{display:block}
/* CMS-hero фото из Редактора — вертикальные мобильные кадры уже правильно скадрированы,
   не сдвигаем их вправо (68% — эвристика для широких статичных десктоп-фото на мобиле) */
@media (max-width:820px){ .hero__pic--cfg{background-position:center top} }
/* CMS-hero: ссылка на весь слайд — прозрачный слой поверх фото; текст hero кликов не ловит
   (pointer-events:none), а кнопка/ссылки внутри — ловят, поэтому работают поверх слоя */
.hero__slidelink{position:absolute;inset:0;z-index:2;display:block}
.hero__inner{pointer-events:none}
.hero__inner a,.hero__inner button,.hero__inner .btn{pointer-events:auto}

/* film-grain «рябь» overlay over each hero photo (like the competitor) — sits over
   the image but under the text (.hero__inner z:2 is a sibling of .hero__media) */
.hero__media::before{
  content:"";position:absolute;inset:-12%;z-index:2;pointer-events:none;
  opacity:.5;mix-blend-mode:overlay;will-change:transform;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='2.2' intercept='-0.6'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:150px 150px;
  animation:hero-grain .5s steps(4) infinite;
}
@keyframes hero-grain{
  0%{transform:translate(0,0)}
  25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)}
  75%{transform:translate(-2%,3%)}
  100%{transform:translate(3%,-2%)}
}
@media (prefers-reduced-motion:reduce){ .hero__media::before{animation:none} }
/* light wash for legibility of DARK hero text (bottom + left), model side stays clear */
.hero__media::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg, transparent 52%, rgba(247,244,239,.42) 100%),
  linear-gradient(90deg, rgba(247,244,239,.5) 0%, rgba(247,244,239,.08) 38%, transparent 58%);}
.hero__inner{
  position:absolute;left:0;right:0;bottom:0;top:0;z-index:2;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 var(--gutter) clamp(4.5rem,3rem + 6vw,9rem);
  max-width:var(--container);margin-inline:auto;color:var(--ink);
}
.hero__eyebrow{color:rgba(27,25,22,.66);letter-spacing:0.36em}
.hero__title{
  font-family:var(--display);font-weight:400;line-height:0.98;
  font-size:var(--fs-mega);letter-spacing:0.01em;margin:0.22em 0 0.35em;
  max-width:16ch;
}
.hero__sub{font-size:var(--fs-lead);font-weight:300;color:rgba(27,25,22,.8);max-width:42ch;margin-bottom:2rem}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap}
/* slide 1 — PDF-style layout: ILCATO block centered vertically, tagline pinned to the bottom */
.hero__inner--brand{justify-content:flex-start;padding-top:clamp(3.5rem,0.5rem + 15vh,13rem);padding-bottom:0}
.hero__brandblock{display:flex;flex-direction:column}
.hero__brand{font-family:var(--display);font-weight:400;line-height:.9;font-size:min(8vw + .4rem, 15.5vh, 9.6rem);letter-spacing:0.16em;margin:0;text-indent:.16em}
.hero__eyebrow--brand{position:relative;display:block;margin-top:clamp(1.5rem,1rem + 1.4vw,2.4rem);padding-top:1.35rem;padding-left:.42em;text-transform:uppercase;font-size:clamp(.9rem,.72rem + .45vw,1.15rem);letter-spacing:0.42em;color:rgba(27,25,22,.66)}
.hero__eyebrow--brand::before{content:"";position:absolute;top:0;left:.42em;width:46px;height:1px;background:rgba(27,25,22,.42)}
.hero__brandfoot{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(3.2rem,2rem + 4vw,6.5rem);display:flex;flex-direction:column;align-items:flex-start}
.hero__tagline{margin:0;text-transform:uppercase;font-size:clamp(.78rem,.66rem + .35vw,.95rem);letter-spacing:0.22em;line-height:1.85;color:rgba(27,25,22,.74);font-weight:500}
.hero__cta--brand{margin-top:clamp(1.4rem,.9rem + 1.6vw,2.2rem)}
/* swiper parallax data hooks animate via translate on inner */
.hero .swiper-slide .hero__inner>*{will-change:transform}

/* desktop: раскладка текста как в PDF-референсе — блок по вертикали ближе к центру,
   слоган прижат к нижнему краю; мобильная раскладка не меняется */
@media (min-width:821px){
  /* текст всех слайдов сдвинут правее, ближе к моделям (просьба юзера 2026-07-03) */
  .hero__inner{justify-content:center;padding-bottom:6vh;padding-left:calc(var(--gutter) + clamp(1.5rem, 4vw, 4.6rem))}
  .hero__inner--brand{justify-content:center;padding-top:0;padding-bottom:12vh}
  /* лого-«плашка»: SPRING и линия центрируются относительно слова ILCATO */
  .hero__brandblock{align-self:flex-start;align-items:center}
  .hero__eyebrow--brand{align-self:center;padding-left:0;text-indent:.42em;margin-top:clamp(2.4rem,1.6rem + 2.4vw,4rem)}
  .hero__eyebrow--brand::before{left:50%;transform:translateX(-50%);width:clamp(150px,13vw,220px)}
  /* нижний блок (кнопка + слоган) идёт сразу под лого-«плашкой» по её оси;
     ширину плашки задаёт JS в --brandlock-w */
  .hero__brandfoot{position:static;margin-top:clamp(2rem,1.4rem + 1.8vw,3.2rem);flex-direction:column-reverse;gap:1.1rem;align-self:flex-start;width:var(--brandlock-w,auto);align-items:center;text-align:center}
  .hero__cta--brand{margin-top:0}
}
/* мобила: тексты слайдов выше строки управления; лого-плашка по центру + вуаль сверху.
   ВАЖНО: блок стоит ПОСЛЕ базовых правил hero-текстов, иначе проиграет каскаду */
@media (max-width:820px){
  .hero__inner{padding-bottom:8.4rem}
  /* слайд 1: весь текст одной группой внизу (лого-плашка + слоган + кнопка), без вуали на лице */
  .hero__inner--brand{justify-content:flex-end;padding-top:0}
  .hero__brand{font-size:clamp(2.6rem,11.5vw,4.5rem)}
  .hero__brandblock{align-self:center;align-items:center;text-align:center}
  .hero__eyebrow--brand{padding-left:0;text-indent:.42em;align-self:center;margin-top:1.2rem}
  .hero__eyebrow--brand::before{left:50%;transform:translateX(-50%)}
  .hero__brandfoot{position:static;margin-top:1.5rem;align-items:center;text-align:center}
}

/* убрали плёночное зерно с hero ПОЛНОСТЬЮ — на светлых фото читалось как «рябь»
   (мобила: фидбэк клиента 2026-07-05; десктоп: 2026-07-06). Блок ПОСЛЕ base-правила
   .hero__media::before, иначе каскад вернёт анимацию */
.hero__media::before{display:none}

/* мобила: кнопки контентных слайдов hero — тёмная заливка + светлый текст, чтобы
   читались на любом (в т.ч. светлом) фото; раньше прозрачная ghost-кнопка сливалась */
@media (max-width:820px){
  .hero__inner:not(.hero__inner--brand) .hero__cta .btn{--bg:rgba(27,25,22,.72);--fg:#f6f1e9;--bd:rgba(27,25,22,.28)}
  .hero__inner:not(.hero__inner--brand) .hero__cta .btn:hover{--bg:var(--accent);--bd:var(--accent)}
}

/* Стрелки по бокам слайдов «как на savage.ru»: голые шевроны, по центру
   вертикали, слева/справа у краёв. Счётчик 01/06 и полоски удалены (юзер 2026-07-07). */
.hero__arw{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:clamp(46px,3.6vw,64px);height:clamp(46px,3.6vw,64px);display:grid;place-items:center;color:var(--ink);background:none;border:0;cursor:pointer;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.hero__arw--prev{left:clamp(4px,1.2vw,26px)}
.hero__arw--next{right:clamp(4px,1.2vw,26px)}
.hero__arw svg{width:clamp(26px,2.1vw,40px);height:clamp(26px,2.1vw,40px);stroke:currentColor;fill:none;stroke-width:1.3;filter:drop-shadow(0 1px 10px rgba(247,244,239,.6))}
.hero__arw:hover{opacity:.55}
.hero__arw--prev:hover{transform:translateY(-50%) translateX(-3px)}
.hero__arw--next:hover{transform:translateY(-50%) translateX(3px)}

/* слайд 1 (десктоп): весь текст лок-апа на 2px крупнее (просьба юзера 2026-07-02).
   ILCATO масштабируется от ширины И высоты окна — раньше упирался в фикс-кэп 9.6rem
   и на средних/коротких экранах выглядел огромным (просьба юзера 2026-07-03) */
@media (min-width:821px){
  .hero__brand{font-size:calc(min(8vw + .4rem, 15.5vh, 9.6rem) + 2px)}
  .hero__eyebrow--brand{font-size:clamp(.9rem + 2px, .72rem + .45vw + 2px, 1.15rem + 2px)}
  .hero__tagline{font-size:clamp(.78rem + 2px, .66rem + .35vw + 2px, .95rem + 2px)}
  .hero__cta--brand .btn{font-size:calc(var(--fs-xs) + 2px)}
}

/* ---- SCREEN 4 (десктоп): аккордеон-витрина новинок (вариант 7 галереи) ----
   мобайл не трогаем: там остаётся prod-swiper карусель */
.prod-acc{display:none}
@media (min-width:821px){
  /* !important — у кнопок inline display:grid, иначе их не спрятать */
  .prod-swiper{display:none}
  [data-prod-prev],[data-prod-next]{display:none!important}
  .prod-acc{display:flex;gap:10px;width:100%;height:clamp(400px, 56svh, 620px)}
  .prod-acc__col{position:relative;flex:1 1 0;overflow:hidden;background:var(--cream-2);cursor:pointer;opacity:0;transform:translateY(28px);transition:flex .8s var(--ease)}
  .prod-acc:hover .prod-acc__col:hover{flex:2.9 1 0}
  .products.is-in .prod-acc__col{animation:prodRise .85s var(--ease) forwards}
  .products.is-in .prod-acc__col:nth-child(1){animation-delay:.05s}
  .products.is-in .prod-acc__col:nth-child(2){animation-delay:.12s}
  .products.is-in .prod-acc__col:nth-child(3){animation-delay:.19s}
  .products.is-in .prod-acc__col:nth-child(4){animation-delay:.26s}
  .products.is-in .prod-acc__col:nth-child(5){animation-delay:.33s}
  .products.is-in .prod-acc__col:nth-child(6){animation-delay:.4s}
  .products.is-in .prod-acc__col:nth-child(7){animation-delay:.47s}
  .products.is-in .prod-acc__col:nth-child(8){animation-delay:.54s}
  .products.is-in .prod-acc__col:nth-child(9){animation-delay:.61s}
  /* в pager колонки стартуют ПОСЛЕ приезда cover-панели (как шторки категорий) */
  .deck.is-pager .products.is-in .prod-acc__col:nth-child(1){animation-delay:1s}
  .deck.is-pager .products.is-in .prod-acc__col:nth-child(2){animation-delay:1.07s}
  .deck.is-pager .products.is-in .prod-acc__col:nth-child(3){animation-delay:1.14s}
  .deck.is-pager .products.is-in .prod-acc__col:nth-child(4){animation-delay:1.21s}
  .deck.is-pager .products.is-in .prod-acc__col:nth-child(5){animation-delay:1.28s}
  .deck.is-pager .products.is-in .prod-acc__col:nth-child(6){animation-delay:1.35s}
  .deck.is-pager .products.is-in .prod-acc__col:nth-child(7){animation-delay:1.42s}
  .deck.is-pager .products.is-in .prod-acc__col:nth-child(8){animation-delay:1.49s}
  .deck.is-pager .products.is-in .prod-acc__col:nth-child(9){animation-delay:1.56s}
  .prod-acc__ph{position:absolute;inset:0;overflow:hidden}
  /* «окно»: фото фиксированного размера по центру колонки — при раскрытии колонка
     просто показывает больше кадра, БЕЗ приближения (просьба юзера);
     --imgh выравнивает «рост» девушек между разными кадрировками */
  .prod-acc__ph img{position:absolute;top:50%;left:50%;width:auto;height:var(--imgh,100%);max-width:none;transform:translate(-50%, var(--imgy,-50%))}
  .prod-acc__col:nth-child(1) .prod-acc__ph img{--imgh:145%;--imgy:-53%}
  .prod-acc__col:nth-child(2) .prod-acc__ph img{--imgh:105%}
  .prod-acc__col:nth-child(3) .prod-acc__ph img{--imgh:135%;--imgy:-51%}
  .prod-acc__col:nth-child(5) .prod-acc__ph img{--imgh:150%;--imgy:-52%}
  .prod-acc__col:nth-child(6) .prod-acc__ph img{--imgh:122%;--imgy:-52%}
  .prod-acc__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(27,25,22,0) 52%,rgba(27,25,22,.5));pointer-events:none}
  .prod-acc__col::after{content:"";position:absolute;inset:0;background:var(--cream);opacity:0;transition:opacity .6s var(--ease);pointer-events:none}
  .prod-acc:hover .prod-acc__col:not(:hover)::after{opacity:.38}
  .prod-acc__tag{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);writing-mode:vertical-rl;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--paper);opacity:.92;transition:opacity .4s var(--ease);white-space:nowrap}
  .prod-acc__col:hover .prod-acc__tag{opacity:0}
  .prod-acc__meta{position:absolute;left:20px;right:20px;bottom:20px;color:var(--paper);opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease) .18s,transform .5s var(--ease) .18s}
  .prod-acc__col:hover .prod-acc__meta{opacity:1;transform:none}
  .prod-acc__new{display:inline-block;margin-bottom:.55rem;font-size:.56rem;letter-spacing:.24em;padding:.45em .75em .35em;border:1px solid rgba(253,251,247,.5)}
  .prod-acc__name{display:block;font-family:var(--display);font-size:1.35rem;line-height:1.12;font-weight:500}
  .prod-acc__price{display:block;margin-top:.35rem;font-size:.85rem;color:rgba(253,251,247,.88)}
  .prod-acc__price s{color:rgba(253,251,247,.55);margin-right:.55em}
}
@keyframes prodRise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .prod-acc__col{opacity:1;transform:none;animation:none!important}
}

/* ---- SCREEN 2: split showcase — animated reveal after hero --------- */
.showcase{position:relative;display:grid;grid-template-columns:1.02fr 0.98fr;min-height:100svh;background:var(--cream)}
.showcase__media{position:relative;overflow:hidden;min-width:0;background:var(--cream-3);clip-path:inset(0 0 8% 0);opacity:0;transition:clip-path 1.25s var(--ease),opacity 1s var(--ease)}
.showcase.is-in .showcase__media{clip-path:inset(0);opacity:1}
.showcase__media-fig{position:absolute;inset:-7%;will-change:transform}
.showcase__media-fig img{width:100%;height:100%;object-fit:cover;transform:scale(1.14);transition:transform 1.7s var(--ease)}
.showcase.is-in .showcase__media-fig img{transform:scale(1)}
/* фото 2-го экрана — квадрат 1:1 с запасом над головой: cover не режет модель
   ни при какой пропорции колонки; параллакс-зум не нужен (отключён в pager) */
.showcase__media-fig{inset:0}
.showcase__media-fig img{object-position:center}
.showcase__media::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(20,18,15,.12) 0%,transparent 40%,rgba(20,18,15,.55) 100%)}
.showcase__cats{position:absolute;left:0;bottom:0;z-index:2;display:flex;gap:clamp(1rem,.5rem + 1.4vw,2rem);flex-wrap:wrap;padding:clamp(1.4rem,1rem + 2vw,2.8rem)}
.showcase__cats a{color:var(--paper);font-family:var(--display);font-size:clamp(1.1rem,.9rem + .6vw,1.55rem);position:relative;padding-bottom:5px}
.showcase__cats a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:rgba(247,244,239,.55);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.showcase__cats a:hover::after{transform:scaleX(1)}

.showcase__panel{display:flex;flex-direction:column;justify-content:center;min-width:0;gap:clamp(1.6rem,1rem + 2vw,2.8rem);padding:clamp(2.4rem,1.4rem + 4vw,5.5rem) clamp(1.4rem,.6rem + 3vw,4.5rem);text-align:center}
.showcase-swiper{overflow:hidden;width:100%;min-width:0}
/* полноэкранная фото-карусель во 2 экране — только мобайл (см. @media ниже) */
.showcase-media-swiper{display:none}
/* чистая фото-карточка (стиль emka): модель в полный рост, без бейджей/подписей */
.sc-card{display:block;background:var(--cream-2)}
.sc-card img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform 1.1s var(--ease)}
.sc-card:hover img{transform:scale(1.03)}
/* полоски-прогресс под счётчиком (как у emka) */
.showcase__bars{display:flex;justify-content:center;gap:12px}
.showcase__bars .swiper-pagination-bullet{display:block;width:52px;height:2px;border-radius:0;background:var(--line-2);opacity:1;margin:0!important;cursor:pointer;transition:background .4s var(--ease)}
.showcase__bars .swiper-pagination-bullet-active{background:var(--ink)}
/* стрелки как у emka: простые шевроны без кружков, «4 / 9» между ними */
.showcase__nav{display:flex;align-items:center;justify-content:center;gap:1.6rem;color:var(--ink);font-size:var(--fs-xs);letter-spacing:.24em;font-variant-numeric:tabular-nums}
.showcase__nav b{color:var(--ink);font-weight:600}
.showcase__nav button{display:grid;place-items:center;color:var(--ink);opacity:.75;transition:opacity .3s var(--ease)}
.showcase__nav button:hover{opacity:1}
.showcase__nav svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.4}
/* «посмотреть все» с постоянным подчёркиванием (как в референсе) */
.showcase__head .link::after{transform:scaleX(1)}
.showcase__head{display:flex;flex-direction:column;align-items:center;gap:.7rem}
.showcase__title{font-size:var(--fs-h2);line-height:1}
/* staggered reveal of the right panel as screen 2 enters */
.showcase__panel>*{opacity:0;transform:translateY(38px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.showcase.is-in .showcase__panel>*{opacity:1;transform:none}
.showcase.is-in .showcase__panel>*:nth-child(2){transition-delay:.14s}
.showcase.is-in .showcase__panel>*:nth-child(3){transition-delay:.26s}
.showcase.is-in .showcase__panel>*:nth-child(4){transition-delay:.38s}
.showcase__bars{margin-top:calc(-1 * clamp(.8rem,.5rem + 1vw,1.6rem))}
@media (prefers-reduced-motion:reduce){
  .showcase__media,.showcase__media-fig img,.showcase__panel>*{transition:none!important;opacity:1!important;transform:none!important;clip-path:none!important}
}

/* ---- SECTION shell ------------------------------------------------- */
.section{padding-block:var(--section-y)}
.section--tight{padding-block:clamp(2.6rem,1.6rem + 3vw,4.6rem)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;margin-bottom:clamp(1.8rem,1rem + 2vw,3rem)}
.sec-head__l{max-width:40ch}
.sec-head h2{font-size:var(--fs-h2);margin-top:.5rem}
.sec-head p{color:var(--muted);margin-top:.7rem}

/* ---- marquee ticker ------------------------------------------------ */
.ticker{border-block:1px solid var(--line);background:var(--paper);overflow:hidden;padding-block:18px}
.ticker__track{display:flex;gap:3rem;white-space:nowrap;animation:ticker 34s linear infinite;width:max-content}
.ticker span{font-family:var(--display);font-size:clamp(1.3rem,0.9rem + 1.4vw,2rem);color:var(--ink-2);display:inline-flex;align-items:center;gap:3rem}
.ticker span::after{content:"—";color:var(--accent)}
@keyframes ticker{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker__track{animation:none}}

/* ---- CATEGORIES rail (loverepublic vibe) --------------------------- */
.cats{background:var(--cream)}
.cats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,0.4rem + 0.7vw,18px)}
.cat-card{position:relative;display:block;overflow:hidden;border-radius:var(--radius);aspect-ratio:3/4.1;background:var(--cream-3)}
.cat-card img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
/* v13 «шторки»: карточки категорий раскрываются сверху вниз каскадом (вместо общего fade);
   inline transition-delay (i*0.08s) ставит initReveal из site.js */
.cats__grid > .cat-card{
  opacity:1;transform:none;
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.1s var(--ease);
}
.cats__grid.is-in > .cat-card{clip-path:inset(0 0 0 0)}
.cats__grid > .cat-card img{transform:scale(1.12);transition:transform 1.4s var(--ease)}
.cats__grid.is-in > .cat-card img{transform:scale(1)}
.cats__grid.is-in > .cat-card:hover img{transform:scale(1.06)}
/* в pager-режиме экран «наезжает» 1100ms — шторки ждут приезда и только потом
   раскрываются каскадом; !important перебивает inline transition-delay из initReveal */
.deck.is-pager .cats__grid > .cat-card{transition-duration:1.15s}
.deck.is-pager .cats__grid > .cat-card:nth-child(1){transition-delay:1s !important}
.deck.is-pager .cats__grid > .cat-card:nth-child(2){transition-delay:1.22s !important}
.deck.is-pager .cats__grid > .cat-card:nth-child(3){transition-delay:1.44s !important}
.deck.is-pager .cats__grid > .cat-card:nth-child(4){transition-delay:1.66s !important}
.deck.is-pager .cats__grid > .cat-card img{transition-delay:1s}
@media (prefers-reduced-motion:reduce){
  .cats__grid > .cat-card{clip-path:none;transition:none}
  .cats__grid > .cat-card img{transform:none;transition:none}
}
.cat-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,15,0) 45%,rgba(20,18,15,.55) 100%)}
.cat-card:hover img{transform:scale(1.06)}
.cat-card__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px;color:var(--paper)}
.cat-card__cap h3{font-size:clamp(1.3rem,1rem + 1vw,1.9rem);font-weight:500}
.cat-card__cap span{font-size:var(--fs-xs);letter-spacing:.18em;text-transform:uppercase;opacity:.85;display:inline-flex;align-items:center;gap:.5em;margin-top:6px}
.cat-card__cap span::after{content:"→";transition:transform .5s var(--ease)}
.cat-card:hover .cat-card__cap span::after{transform:translateX(6px)}

/* ---- PRODUCT carousel (card component now lives in site.css) ------- */
.products{background:var(--paper)}
.prod-swiper{overflow:visible}

/* ---- EDITORIAL split ----------------------------------------------- */
.editorial{background:var(--cream)}
.editorial__grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:clamp(1.5rem,0.6rem + 3vw,5rem);align-items:center}
.editorial__media{position:relative;overflow:hidden;border-radius:var(--radius);aspect-ratio:4/4.6}
.editorial__media img,.editorial__media video{width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.editorial__copy .eyebrow{margin-bottom:1.2rem;display:block}
.editorial__copy h2{font-size:var(--fs-h1);line-height:1.02;margin-bottom:1.4rem}
.editorial__copy p{color:var(--ink-2);font-weight:300;margin-bottom:1.1rem;max-width:46ch;font-size:var(--fs-lead)}
.editorial__sign{font-family:var(--display);font-size:1.5rem;color:var(--accent);margin-top:1.4rem}
.editorial__stats{display:flex;gap:clamp(1.4rem,0.6rem + 2vw,3.4rem);margin-top:2.2rem;padding-top:2rem;border-top:1px solid var(--line)}
.editorial__stats b{font-family:var(--display);font-size:clamp(2rem,1.4rem + 1.8vw,3rem);font-weight:500;display:block;line-height:1}
.editorial__stats small{font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:8px;display:block}
/* подпись под фото: на мобиле скрыта (база ДО @media — иначе перебьёт desktop-правило) */
.editorial__cap{display:none}
/* ---- editorial ДЕСКТОП = «Вариант 1: сплит с оверлапом» из screen5-variants.html
   (просьба юзера 2026-07-04): текст-панель слева на var(--paper) с рамкой, фото
   справа НАЕЗЖАЕТ на панель (12-колоночный грид, оба в grid-row:1), статы с
   вертикальными разделителями, «История бренда» = подчёркнутая ссылка, подпись
   под фото. Мобильная раскладка (≤820) не тронута */
@media (min-width:821px){
  .editorial__grid{grid-template-columns:repeat(12,1fr);gap:0;max-width:1180px;margin-inline:auto}
  .editorial__copy{grid-column:1/8;grid-row:1;z-index:1;background:var(--paper);border:1px solid var(--line);padding:clamp(36px,4vw,58px);padding-right:clamp(110px,11vw,160px)}
  .editorial__copy h2{font-size:clamp(32px,3.1vw,44px);line-height:1.1;margin:14px 0 22px}
  .editorial__copy h2 br{display:none}
  .editorial__copy p{font-size:14.5px;line-height:1.75;max-width:52ch;margin-bottom:14px}
  .editorial__stats{margin:26px 0 0;padding-top:22px;gap:0}
  .editorial__stats > div{flex:1;padding:0 20px;border-left:1px solid var(--line)}
  .editorial__stats > div:first-child{padding-left:0;border-left:0}
  .editorial__stats b{font-size:clamp(26px,2.4vw,34px);margin-bottom:8px;font-weight:400}
  .editorial__stats small{font-size:10px;margin-top:0}
  .editorial__lnk{min-height:0;padding:0 0 8px;background:none;border:0;border-bottom:1px solid var(--ink);border-radius:0;color:var(--ink);font-weight:600;font-size:11px;letter-spacing:.18em}
  .editorial__lnk:hover{background:none;color:var(--accent);border-color:var(--accent)}
  .editorial__media{grid-column:7/13;grid-row:1;z-index:2;aspect-ratio:auto;overflow:visible;border-radius:0}
  .editorial__media img{height:clamp(420px,58vh,540px);width:100%;object-fit:cover;transform:none;box-shadow:0 34px 70px rgba(27,25,22,.14)}
  .editorial__cap{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-align:right;padding-top:12px}
}

/* ---- LOOKBOOK horizontal gallery ----------------------------------- */
.lookbook{background:var(--ink);color:var(--cream)}
.lookbook .sec-head h2{color:var(--paper)}
.lookbook .sec-head p{color:rgba(247,244,239,.6)}
.look-swiper{overflow:visible}
.look-card{position:relative;overflow:hidden;border-radius:var(--radius);aspect-ratio:3/4.2;background:#26241f}
.look-card img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.look-card:hover img{transform:scale(1.05)}
.look-card__cap{position:absolute;left:0;bottom:0;padding:22px;z-index:2;color:var(--paper)}
.look-card__cap span{font-size:var(--fs-xs);letter-spacing:.2em;text-transform:uppercase;opacity:.75}
.look-card__cap h3{font-size:1.5rem;font-weight:500;margin-top:6px}
.look-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.5))}
.look-controls{display:flex;gap:10px;align-items:center;margin-top:2rem}
.look-controls button{width:48px;height:48px;border:1px solid rgba(247,244,239,.3);border-radius:50%;display:grid;place-items:center;color:var(--paper);transition:background .4s var(--ease),color .4s,border-color .4s}
.look-controls button:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.look-controls svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5}
.look-progress{flex:1;height:1px;background:rgba(247,244,239,.2);position:relative;margin-left:1rem;max-width:280px}
.look-progress i{position:absolute;left:0;top:0;height:100%;background:var(--paper);width:20%;transition:left .5s var(--ease),width .5s var(--ease)}

/* ---- ADVANTAGES ---------------------------------------------------- */
.adv{background:var(--paper)}
.adv__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,0.4rem + 1.4vw,2.4rem)}
.adv__cell{padding:2rem 1.6rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--cream);transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.adv__cell:hover{transform:translateY(-4px);box-shadow:0 22px 40px -30px rgba(27,25,22,.4)}
.adv__ico{width:40px;height:40px;color:var(--accent);margin-bottom:1.2rem}
.adv__ico svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.3}
.adv__cell h4{font-family:var(--display);font-size:1.35rem;font-weight:500;margin-bottom:.5rem}
.adv__cell p{font-size:var(--fs-sm);color:var(--muted)}

/* ---- SUBSCRIBE ----------------------------------------------------- */
.subscribe{background:var(--cream-3)}
.subscribe__in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,0.6rem + 3vw,4rem);align-items:center}
.subscribe h2{font-size:var(--fs-h1);line-height:1.02}
.subscribe p{color:var(--ink-2);margin-top:1rem;max-width:44ch}
.sub-form{display:flex;gap:12px;flex-wrap:wrap;margin-top:1.4rem}
.sub-form input{flex:1;min-width:220px;height:54px;padding:0 1.2rem;background:var(--paper);border:1px solid var(--line-2);border-radius:var(--radius);font-size:var(--fs-body)}
.sub-form input:focus{outline:none;border-color:var(--accent)}
.sub-note{font-size:var(--fs-xs);color:var(--muted);margin-top:12px}
/* высокий формат (как раньше), кроп ручным позиционированием по СЕТКЕ ленты
   collection-strip.jpg (1536×675: 6 панелей с шагом 256, зазоры на 248–256…,
   нижняя кремовая полоса с y≈578): окно = img x 252→1020, y 0→578 — три ЦЕЛЫЕ
   модели (панели 2–4), рез по серединам зазоров, полоса снизу отрезана */
.subscribe__art{position:relative;aspect-ratio:768/578;overflow:hidden;border-radius:var(--radius);background:var(--cream-2)}
.subscribe__art img{position:absolute;top:0;left:-32.8%;width:200%;height:auto;max-width:none}

/* ---- responsive ---------------------------------------------------- */
@media (max-width:1080px){
  .cats__grid{grid-template-columns:repeat(2,1fr)}
  .adv__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .editorial__grid{grid-template-columns:1fr}
  .editorial__media{aspect-ratio:4/4.4;max-height:70svh}
  .subscribe__in{grid-template-columns:1fr}
  .subscribe__art{order:-1}
  .sec-head{flex-direction:column;align-items:flex-start}
  .hero__title{max-width:100%}
  /* мобайл: 3-й экран (категории) всегда помещается в один слайд — сетка 2×2
     занимает ровно остаток экрана после заголовка (просьба юзера) */
  .deck.is-pager > .cats .cats__grid{
    grid-template-rows:repeat(2, minmax(0,1fr));
    height:calc(100svh - var(--header-h) - 250px);
  }
  .deck.is-pager > .cats .cat-card{aspect-ratio:auto;height:100%}
  .deck.is-pager > .cats .cat-card img{object-position:center top}
  /* мобайл: 2-й слайд = полноэкранная фото-карусель платьев (плавное
     перелистывание) + кнопки категорий поверх; панель с текстом скрыта */
  .showcase{grid-template-columns:1fr;min-height:auto}
  .showcase__media{min-height:100svh}
  .showcase__panel{display:none}
  .showcase__media-fig{display:none}
  .showcase-media-swiper{display:block;position:absolute;inset:0;height:100%}
  .showcase-media-swiper .swiper-slide{overflow:hidden}
  .showcase-media-swiper .swiper-slide img{width:100%;height:100%;object-fit:cover}
}
@media (max-width:520px){
  .cats__grid{grid-template-columns:1fr 1fr;gap:8px}
  .adv__grid{grid-template-columns:1fr}
}

/* ---- iOS Safari: pixel-lock высот на мобиле (рецепт ios-hero-scroll-fix) ----
   100svh репейнтится при сворачивании адресбара → дёргания при скролле.
   --lockvh ставит home.js при загрузке (re-lock только на orientationchange);
   блок в САМОМ КОНЦЕ файла — перебивает базовые svh-правила каскадом */
@media (max-width:820px){
  .hero{height:var(--lockvh, 100svh)}
  .showcase{min-height:var(--lockvh, 100svh)}
  .showcase__media{min-height:var(--lockvh, 100svh)}
  .editorial__media{max-height:calc(var(--lockvh, 100svh) * 0.7)}
  /* (правила .deck.is-pager на мобиле удалены 2026-07-03: пейджер здесь больше
     не включается — экраны 1–2 листает нативный .is-snap, остальное вне колоды) */
}

/* ==== МОБИЛЬНЫЕ ВЕРСИИ ЭКРАНОВ 3–6 (выбор юзера из вариантов, 2026-07-04):
   экран 3 = «полароиды» (v8), экран 4 = «колода карт» (v6),
   экран 5 = «бирка одежды» (v16), экран 6 = «конверт с маркой» (v2).
   Десктоп НЕ тронут: блоки .mv-* скрыты вне мобайла, оригинальная вёрстка
   секций скрывается только внутри @media ≤820 */
.mv-cats,.mv-deck,.mv-tag,.mv-env,.mv-rail{display:none}
@media (max-width:820px){
  /* экран 2: старая мобильная фото-карусель и десктоп-панель скрыты, вместо них рейл */
  .showcase{display:block;min-height:auto;padding:calc(var(--header-h) + 1.6rem) 0 3rem}
  .showcase__media,.showcase__panel{display:none}
  .mv-rail{display:block}
  .mv-rhd h2{font-size:2.5rem;margin-top:10px}
  .mv-rsub{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:8px}
  .mv-rline{position:relative;height:12px;margin:14px 2px 0}
  .mv-rline::before{content:'';position:absolute;left:0;right:0;top:4px;height:3px;border-radius:3px;background:linear-gradient(90deg,#b8a98d,#8f7d5e 50%,#b8a98d)}
  .mv-rline::after{content:'';position:absolute;left:-2px;top:1px;width:9px;height:9px;border-radius:50%;background:#8f7d5e}
  .mv-rline b{position:absolute;right:-2px;top:1px;width:9px;height:9px;border-radius:50%;background:#8f7d5e}
  .mv-rrow{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:46px 8px 14px;scrollbar-width:none}
  .mv-rrow::-webkit-scrollbar{display:none}
  .mv-tagw{flex:0 0 176px;scroll-snap-align:center;position:relative;opacity:0}
  .mv-tagw::before{content:'';position:absolute;left:50%;top:-42px;width:1px;height:52px;background:var(--accent);transform-origin:top center;transform:rotate(3.5deg);z-index:1}
  .mv-tagw:nth-child(even)::before{transform:rotate(-3deg)}
  .mv-rail.is-in .mv-tagw{animation:mvRailSw 1.1s var(--ease) both}
  .mv-rail.is-in .mv-tagw:nth-child(2){animation-delay:.1s}
  .mv-rail.is-in .mv-tagw:nth-child(3){animation-delay:.2s}
  .mv-rail.is-in .mv-tagw:nth-child(4){animation-delay:.3s}
  .mv-rail.is-in .mv-tagw:nth-child(5){animation-delay:.4s}
  .mv-rail.is-in .mv-tagw:nth-child(6){animation-delay:.5s}
  @keyframes mvRailSw{0%{opacity:0;transform:translateY(26px) rotate(-7deg)}60%{opacity:1}100%{opacity:1;transform:none}}
  .mv-rtag{display:block;background:var(--paper);border:1px solid var(--line);padding:24px 12px 12px;box-shadow:0 16px 30px -18px rgba(27,25,22,.45);transform:rotate(-2.2deg);position:relative;transition:transform .5s var(--ease)}
  .mv-tagw:nth-child(even) .mv-rtag{transform:rotate(2deg)}
  .mv-rtag::before{content:'';position:absolute;top:9px;left:50%;transform:translateX(-50%);width:11px;height:11px;border-radius:50%;background:var(--cream);border:1px solid var(--line-2);box-shadow:inset 0 1px 2px rgba(27,25,22,.35)}
  .mv-rtag .mv-ph{display:block;height:168px;overflow:hidden}
  .mv-rtag .mv-ph img{width:100%;height:100%;object-fit:cover;object-position:center top}
  .mv-rtag .mv-name{display:block;margin-top:10px;min-height:38px}
  .mv-rtag .mv-price{display:block;margin-top:2px}
  .mv-rart{display:block;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:9px;border-top:1px dashed var(--line);padding-top:7px}
  .mv-rnew{position:absolute;top:22px;right:-6px;z-index:3;background:var(--accent);color:var(--paper);font-size:7.5px;letter-spacing:.26em;text-transform:uppercase;padding:4px 8px 3px;transform:rotate(2deg)}
  .mv-rmeta{display:flex;justify-content:space-between;align-items:center;padding:16px 2px 0}
  .mv-rcnt{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
  .mv-rfoot{padding:18px 0 0}
  .mv-rfoot .btn{width:100%}
  .cats .sec-head,.cats .cats__grid{display:none}
  .products .sec-head,.products .prod-swiper{display:none}
  .editorial .editorial__grid{display:none}
  .subscribe .subscribe__in,.subscribe .sub-sa{display:none}
  .mv-cats,.mv-deck,.mv-tag,.mv-env{display:block}
  /* каскад-reveal внутри mv-блоков: элементы .mvr приходят, когда IO ставит
     is-in на контейнер с data-reveal; задержка — inline --d */
  .mvr{opacity:0;transform:translateY(22px);transition:opacity .85s var(--ease),transform .85s var(--ease);transition-delay:var(--d,0s)}
  [data-reveal].is-in .mvr{opacity:1;transform:translateY(0)}

  /* --- экран 3: полароиды --- */
  .section.cats{background:var(--cream-2)}
  .mv-hd{text-align:center;padding:0 12px}
  .mv-hd h2{font-size:1.8rem;margin-top:10px}
  .mv-board{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:30px 14px 6px}
  .mv-polw:nth-child(even){transform:translateY(26px)}
  .mv-polw.mvr{transform:translateY(48px)}                 /* 26 + reveal-сдвиг */
  [data-reveal].is-in .mv-polw.mvr:nth-child(even){transform:translateY(26px)}
  [data-reveal].is-in .mv-polw.mvr:nth-child(odd){transform:translateY(0)}
  .mv-pol{display:block;background:#fff;padding:9px 9px 62px; /* низ 62px: подпись НЕ наезжает на фото (просьба юзера 2026-07-04) */box-shadow:0 14px 30px -16px rgba(27,25,22,.4);position:relative;transition:transform .5s var(--ease)}
  .mv-polw:nth-child(1) .mv-pol{transform:rotate(-2.6deg)}
  .mv-polw:nth-child(2) .mv-pol{transform:rotate(2.2deg)}
  .mv-polw:nth-child(3) .mv-pol{transform:rotate(1.8deg)}
  .mv-polw:nth-child(4) .mv-pol{transform:rotate(-2.2deg)}
  .mv-pol::before{content:"";position:absolute;top:-9px;left:50%;width:64px;height:20px;transform:translateX(-50%) rotate(-3deg);background:rgba(238,231,214,.85);box-shadow:0 2px 5px rgba(27,25,22,.12);z-index:2}
  .mv-pol .mv-ph{display:block;aspect-ratio:3/3.7;overflow:hidden}
  .mv-pol img{width:100%;height:100%;object-fit:cover;object-position:center top}
  .mv-cap{position:absolute;left:0;right:0;bottom:9px;text-align:center;font-family:var(--display);font-style:italic;font-size:1.15rem;color:var(--ink-2)}
  .mv-cap small{font-family:var(--text);font-style:normal;font-size:.52rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);display:block;margin-top:1px}
  .mv-foot{text-align:center;padding-top:52px}
  .mv-all{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:4px;transition:color .3s,border-color .3s}
  .mv-all::after{content:"→"}
  .mv-all:hover{color:var(--accent);border-color:var(--accent)}

  /* --- экран 4: колода карт --- */
  .mv-dhead{margin-bottom:20px;text-align:center}
  .mv-dhead h2{font-weight:400;font-size:1.95rem;line-height:1.06;margin-top:8px}
  .mv-cards{position:relative;height:492px;margin:6px 14px 44px} /* низ 44px: повёрнутые карты не наезжают на кнопки */
  .mv-dcard{position:absolute;inset:0;background:var(--paper);padding:10px 10px 0;box-shadow:0 20px 44px -24px rgba(27,25,22,.5);transition:transform .55s var(--ease),opacity .55s var(--ease)}
  .mv-dcard .mv-ph{display:block;position:relative;height:388px;overflow:hidden}
  .mv-dcard img{width:100%;height:100%;object-fit:cover;object-position:center top}
  .mv-badge{position:absolute;top:10px;left:10px;z-index:2;font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;background:var(--paper);color:var(--ink);padding:5px 8px 4px}
  .mv-dmeta{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:12px 4px}
  .mv-name{font-family:var(--display);font-weight:400;font-size:16.5px;line-height:1.22;color:var(--ink)}
  .mv-price{font-size:11px;letter-spacing:.06em;color:var(--ink-2);white-space:nowrap}
  .mv-price s{color:var(--muted);margin-right:.5em;font-weight:400}
  .mv-price .now{color:var(--sale);font-weight:600}
  .mv-d0{transform:none;z-index:4;opacity:1}
  .mv-d1{transform:translate(12px,10px) rotate(3.2deg);z-index:3;opacity:1}
  .mv-d2{transform:translate(-12px,18px) rotate(-3.6deg);z-index:2;opacity:1}
  .mv-d3{transform:translateY(26px) scale(.94);z-index:1;opacity:0}
  .mv-dfoot{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:0 14px}
  .mv-dcur{font-family:var(--display);font-size:17px}
  .mv-dnav{display:flex;gap:10px}
  .mv-dbtn{width:46px;height:46px;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center;background:var(--paper);transition:.3s}
  .mv-dbtn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5}
  .mv-dbtn:active,.mv-dbtn:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
  .mv-dtail{margin-top:18px;text-align:center}

  /* --- экран 5: бирка одежды --- */
  .section.editorial{background:var(--cream-2)}
  .mv-cord{position:relative;height:118px;width:150px;margin:0 auto}
  .mv-cord svg{display:block;width:100%;height:100%}
  .mv-cord line{stroke:#a9987d;stroke-width:1.5}
  .mv-cord circle{fill:#8f7d5e}
  .mv-scene{position:relative;width:min(354px, 100%);margin:-10px auto 0}
  .mv-tagcard{width:100%;background:var(--paper);border:1px solid var(--line-2);padding:26px 24px 20px;box-shadow:0 24px 44px -22px rgba(27,25,22,.4);transform-origin:50% -104px}
  .mv-tagback{position:absolute;inset:0;background:var(--accent);border-color:var(--accent-dk);transform:rotate(7deg) translate(12px,8px);transition:transform 1.2s cubic-bezier(.34,1.56,.64,1);z-index:1}
  .mv-tag.is-in .mv-tagback{transform:rotate(4deg) translate(10px,6px)}
  .mv-tagfront{position:relative;z-index:2;transform:rotate(6deg);transition:transform 1.2s cubic-bezier(.34,1.56,.64,1) .1s}
  .mv-tag.is-in .mv-tagfront{transform:rotate(0)}
  .mv-hole{display:block;width:22px;height:22px;border-radius:50%;background:var(--cream-2);border:5px solid #bfb298;box-shadow:inset 0 1px 3px rgba(27,25,22,.35);margin:0 auto 12px}
  .mv-brand{font-family:var(--display);font-weight:500;font-size:34px;text-align:center;letter-spacing:.14em;margin-bottom:2px}
  .mv-tagfront .eyebrow{display:block;text-align:center;font-size:.58rem;margin-bottom:12px}
  .mv-th{font-family:var(--display);font-weight:400;font-size:24px;line-height:1.2;text-align:center;margin-bottom:12px}
  .mv-tagfront img{width:100%;height:192px;object-fit:cover;object-position:center top}
  .mv-tcap{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);text-align:center;margin:7px 0 10px}
  .mv-tp{font-size:13px;line-height:1.7;color:var(--ink-2);margin-bottom:12px}
  .mv-care{border-top:1px dashed var(--line-2);margin-bottom:12px}
  .mv-care div{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;border-bottom:1px dashed var(--line-2);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
  .mv-care b{font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:0;color:var(--ink)}
  .mv-bar{height:26px;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 5px,var(--ink) 5px 6px,transparent 6px 9px,var(--ink) 9px 12px,transparent 12px 14px);margin-bottom:5px}
  .mv-code{font-size:10.5px;letter-spacing:.4em;text-align:center;color:var(--muted);margin-bottom:12px}
  .mv-btn{width:100%;min-height:44px;padding:12px 10px}
  .mv-tp2{width:340px;max-width:calc(100vw - 56px);margin:30px auto 0;font-size:13px;line-height:1.7;color:var(--muted);text-align:center}

  /* --- экран 6: конверт с маркой --- */
  /* фон секции на мобиле = cream, как в варианте v2: иначе клапан конверта
     (cream-3) сливается с фоном секции (--cream-3) и конверт «исчезает» */
  /* верхний отступ секции «Рассылка» ужат до стандартного зазора между секциями
     (~40px, как везде между слайдами) — раньше падал на большой базовый --section-y (юзер 2026-07-07) */
  .section.subscribe{background:var(--cream);padding-top:clamp(30px,3vw,46px)}
  .mv-ehead{text-align:center;margin-bottom:69px} /* 64+5: не прилипает к клапану (юзер 2026-07-04) */
  .mv-eh{font-family:var(--display);font-weight:500;font-size:1.7rem;line-height:1.12;margin-top:10px}
  .mv-envelope{position:relative;width:100%;max-width:360px;margin:0 auto}
  .mv-flap{position:absolute;left:0;right:0;top:-72px;height:74px;background:var(--cream-3);clip-path:polygon(0 100%,100% 100%,50% 0);z-index:0;transform-origin:bottom;transform:scaleY(.2);opacity:0;transition:transform .9s var(--ease) .15s,opacity .6s .15s}
  .mv-env.is-in .mv-flap{transform:scaleY(1);opacity:1}
  .mv-letter{position:relative;z-index:1;background:var(--paper);border:1px solid var(--line);padding:28px 24px 118px;transform:translateY(96px);transition:transform 1.1s var(--ease) .35s;box-shadow:0 14px 30px -22px rgba(27,25,22,.4)}
  .mv-env.is-in .mv-letter{transform:translateY(0)}
  .mv-lh{font-family:var(--display);font-weight:500;font-size:1.55rem;line-height:1.12}
  .mv-ltxt{font-size:.84rem;line-height:1.75;color:var(--ink-2);margin-top:12px}
  .mv-from{font-family:var(--display);font-style:italic;font-size:1.12rem;margin-top:14px;color:var(--accent)}
  .mv-pocket{position:relative;z-index:2;margin-top:-84px;background:var(--cream-2);border:1px solid var(--line-2);padding:26px 22px 20px}
  .mv-stamp{position:absolute;top:-34px;right:14px;width:80px;background:#fff;border:1px dashed var(--line-2);padding:4px;transform:rotate(4deg);box-shadow:0 6px 14px -8px rgba(27,25,22,.35)}
  .mv-stamp img{height:92px;width:100%;object-fit:cover;object-position:center top}
  .mv-postmark{position:absolute;top:-18px;right:100px;width:54px;height:54px;border:1px solid var(--muted);border-radius:50%;display:grid;place-items:center;font-size:.46rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transform:rotate(-12deg);text-align:center;line-height:1.5;background:rgba(253,251,247,.6)}
  .mv-to{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
  .mv-pocket input{display:block;width:100%;background:none;border:0;border-bottom:1px solid var(--line-2);padding:12px 0;font-family:var(--display);font-size:1.12rem;font-style:italic;outline:none}
  .mv-pocket input:focus{border-color:var(--accent)}
  .mv-pocket .btn{width:100%;margin-top:16px}
  .mv-note{margin-top:12px;font-size:.68rem;line-height:1.7;color:var(--muted)}
  .mv-note a{text-decoration:underline;text-underline-offset:2px}
}

/* ============================================================
   Весь фон главной — БЕЛЫЙ (юзер 2026-07-07).
   Перекрывает cream/paper/ink-фоны секций и hero-подложку.
   Блок в самом конце файла + селекторы с body[data-page="home"] —
   чтобы победить и мобильные @media-переопределения (.section.cats и т.п.).
   Карточки-компоненты (cat-card, editorial__copy, subscribe__art) не трогаем. */
body[data-page="home"]{background:#fff}
body[data-page="home"] .hero{background:#fff}
body[data-page="home"] .hero .swiper-slide{background:#fff}
body[data-page="home"] .ticker{background:#fff}
body[data-page="home"] .cats,
body[data-page="home"] .section.cats{background:#fff}
body[data-page="home"] .products{background:#fff}
body[data-page="home"] .editorial,
body[data-page="home"] .section.editorial{background:#fff}
body[data-page="home"] .subscribe,
body[data-page="home"] .section.subscribe{background:#fff}

/* ============================================================
   Главная в стиле savage.ru (2026-07-07):
   Новинки — сетка карточек, Хиты — карусель, 2 баннера.
   ============================================================ */
.home-row .sec-head{margin-bottom:clamp(18px,2vw,32px)}
/* Новинки — первая секция после hero: прижимаем ближе к 1 слайду, зазор ~как у savage.ru (~40px) */
.home-row--first{padding-top:clamp(30px,3vw,46px);padding-bottom:clamp(20px,2vw,34px)}
/* Заголовки секций — по центру (просьба юзера 2026-07-07, как на savage.ru):
   eyebrow + h2 по центру, ссылка «Все …» и стрелки — центрированы под заголовком */
.home-row .sec-head,
.section.cats .sec-head{flex-direction:column;align-items:center;text-align:center;gap:1rem}
.home-row .sec-head__l,
.section.cats .sec-head__l{max-width:none}
.home-hits__ctl{justify-content:center}
/* Новинки, Хиты, Категории — во всю ширину экрана (как savage.ru): не капим на 1360,
   тянем на всю ширину с боковыми полями ~как у savage (≈60px при 1280, шире на широких). */
.home-row > .container,
.section.cats > .container{max-width:none;padding-inline:clamp(16px,4.7vw,110px)}
/* Новинки и Хиты — одинаковые карусели (Swiper): 4 на десктопе / 2 на мобиле, плавно */
.home-hits__sw,.home-new__sw{overflow:hidden}
.home-hits__sw .swiper-wrapper,.home-new__sw .swiper-wrapper{align-items:stretch}
.home-hits__sw .swiper-slide,.home-new__sw .swiper-slide{height:auto}
.home-hits__ctl{display:flex;align-items:center;gap:14px}
.home-arw{width:44px;height:44px;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center;color:var(--ink);background:none;transition:background .3s var(--ease),color .3s,border-color .3s}
.home-arw svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5}
.home-arw:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.home-arw.swiper-button-disabled{opacity:.35;pointer-events:none}

/* Светлая CTA поверх фото-баннеров */
.btn--light{background:#fff;color:var(--ink);border:0}
.btn--light:hover{background:var(--cream-2);color:var(--ink)}

/* Баннер на всю ширину */
/* margin уменьшен с обеих сторон — банер подтянут к карточкам сверху и к «Категориям» снизу (юзер 2026-07-07) */
.home-banner{position:relative;margin:clamp(10px,1.2vw,20px) 0}
/* Категории — верхний зазор до банера как между hero и Новинками (~40px) */
body[data-page="home"] .section.cats{padding-top:clamp(14px,1.4vw,22px)}
.home-banner__in{position:relative;display:block;overflow:hidden;min-height:clamp(300px,34vw,470px)}
.home-banner__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%;transition:transform 1.3s var(--ease)}
.home-banner__in:hover .home-banner__img{transform:scale(1.04)}
.home-banner__in::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,17,14,.6),rgba(20,17,14,.12) 55%,transparent)}
.home-banner__txt{position:absolute;z-index:2;left:clamp(24px,6vw,90px);top:50%;transform:translateY(-50%);color:#fff;max-width:560px}
.home-banner__txt .eyebrow{color:#e7ddca;display:block;margin-bottom:14px}
.home-banner__txt h2{font-size:clamp(2rem,1.2rem + 3vw,4rem);line-height:1.02;margin-bottom:12px;color:#fff}
.home-banner__txt p{font-size:var(--fs-lead);color:#efe8da;margin-bottom:24px}

/* Баннер на весь экран */
/* Хиты идут ПОД полноэкранным баннером — верхний зазор ужимаем как везде (~40px) */
body[data-page="home"] .section.home-hits{padding-top:clamp(30px,3vw,46px);padding-bottom:clamp(20px,2vw,34px)}
.home-banner-full{position:relative;height:100svh;min-height:520px;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center}
.home-banner-full__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%}
.home-banner-full::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,17,14,.4),rgba(20,17,14,.18) 42%,rgba(20,17,14,.55))}
.home-banner-full__txt{position:relative;z-index:2;color:#fff;padding:24px}
.home-banner-full__txt .eyebrow{color:#e7ddca;display:block;margin-bottom:16px}
.home-banner-full__txt h2{font-size:clamp(2.4rem,1.4rem + 4vw,5.5rem);line-height:1.03;margin-bottom:26px;color:#fff}
/* Баннер «Тихая роскошь»: единый заголовок «О бренде» + кнопка «История бренда»
   на десктопе и мобайле (юзер 2026-07-07). Мобильный кроп сдвинут вправо, чтобы
   в кадре была модель (она в правой части фото), а не пустая стена — как на десктопе. */
@media (max-width:820px){
  .home-banner-full__img{object-position:80% center}
}

/* ============================================================
   Рассылка — десктоп: центрированный минимал в стиле sashaostrov.ru
   (крупный заголовок → широкое подчёркнутое поле e-mail с круглой
   кнопкой-стрелкой → чекбокс согласия; без фото). Выбор юзера 2026-07-07.
   Только десктоп (min-width:821px); мобайл — «конверт» .mv-env (не трогаем).
   ============================================================ */
@media (min-width:821px){
  /* повышенная специфичность — перебиваем базовое body[data-page=home] .section.subscribe{background:#fff} */
  body[data-page="home"] .section.subscribe--v1{background:#f4f2ee}
  .subscribe--v1{padding-top:clamp(40px,6vh,84px);padding-bottom:clamp(48px,7vh,96px)}
  /* во всю ширину, как остальные слайды: без капы, боковые поля clamp(16px,4.7vw,110px) */
  .subscribe--v1 > .container{width:100%;max-width:none;padding-inline:clamp(16px,4.7vw,110px)}
  .subscribe--v1 .sub-sa{max-width:1180px;margin-inline:auto;text-align:center}
  .subscribe--v1 .sub-sa__title{font-size:clamp(2rem,1.1rem + 2.6vw,3.4rem);line-height:1.1;letter-spacing:-.005em;margin:0 auto .9rem;max-width:22ch}
  .subscribe--v1 .sub-sa__sub{color:var(--ink-2);font-size:1rem;line-height:1.65;font-weight:300;max-width:620px;margin:0 auto clamp(30px,5vh,52px)}
  /* форма: широкое подчёркнутое поле + круглая кнопка-стрелка */
  .subscribe--v1 .sub-sa__form{max-width:1000px;margin-inline:auto}
  .subscribe--v1 .sub-sa__field{display:flex;align-items:center;gap:16px;border-bottom:1.5px solid var(--ink);padding-bottom:14px}
  .subscribe--v1 .sub-sa__field input{flex:1;min-width:0;border:0;background:none;font-size:1.1rem;color:var(--ink);outline:none;padding:8px 2px}
  .subscribe--v1 .sub-sa__field input::placeholder{color:var(--muted)}
  .subscribe--v1 .sub-sa__arw{flex:0 0 auto;width:46px;height:46px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;background:none;color:var(--ink);cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease)}
  .subscribe--v1 .sub-sa__arw:hover{background:var(--ink);color:#fff}
  .subscribe--v1 .sub-sa__arw svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5}
  /* чекбокс согласия — слева под полем */
  .subscribe--v1 .sub-sa__consent{display:flex;align-items:flex-start;gap:12px;margin-top:20px;text-align:left;font-size:.82rem;line-height:1.5;color:var(--muted);cursor:pointer}
  .subscribe--v1 .sub-sa__consent input{flex:0 0 auto;width:17px;height:17px;margin-top:1px;accent-color:var(--ink);cursor:pointer}
  .subscribe--v1 .sub-sa__consent a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
  .subscribe--v1 .sub-sa__consent a:hover{color:var(--ink)}
}

/* ============================================================
   Мобайл (≤820px): Новинки и Хиты — одинаковые карусели (Swiper, см. home.js),
   шапка «как savage»: заголовок слева, длинная стрелка справа.
   ============================================================ */
@media (max-width:820px){
  /* шапка секции «как savage»: заголовок слева, длинная стрелка справа;
     текст «Все новинки/хиты» и круглые стрелки хитов на мобиле убираем — их роль
     берёт единая длинная стрелка (одинаковое перелистывание в Новинках и Хитах) */
  .home-row .sec-head{flex-direction:row;align-items:center;justify-content:space-between;text-align:left;gap:1rem;margin-bottom:clamp(16px,4vw,24px)}
  .home-row .sec-head__l{max-width:none}
  .home-row .sec-head .link{display:none}
  .home-hits__ctl{gap:0}
  .home-hits__ctl .home-arw{display:none}
  .home-row .home-row__arw{display:grid;place-items:center;flex:0 0 auto;width:52px;height:40px;color:var(--ink);background:none;border:0;padding:0;cursor:pointer}
  .home-row .home-row__arw svg{width:40px;height:16px;stroke:currentColor;fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
  .home-row .home-row__arw:active{opacity:.5}
}
/* длинная стрелка-листалка — только мобайл */
.home-row__arw{display:none}
@media (max-width:820px){
  .home-banner__in::after{background:linear-gradient(180deg,rgba(20,17,14,.12),rgba(20,17,14,.62))}
  .home-banner__txt{left:24px;right:24px;top:auto;bottom:26px;transform:none;max-width:none}
}

/* ==== ФИКС «зум/дёрганье фото при скролле» на iOS Safari (юзер 2026-07-07,
   правило 4.1 стандартов). Баннер «Тихая роскошь» .home-banner-full добавлен
   сегодня ПОСЛЕ pixel-lock блока (~стр. 500) и остался на 100svh — при
   сворачивании адресбара контейнер репейнтится и cover-фото «увеличивается».
   Лочим высоту пиксельной --lockvh (ставит lockVH() в home.js, re-lock только
   на orientationchange). Десктоп не трогаем — там адресбар не ездит.
   Блок должен оставаться ПОСЛЕ базового правила .home-banner-full. ==== */
@media (max-width:820px){
  .home-banner-full{height:var(--lockvh, 100svh)}
}