/* liars collective — демо-стенд магазина.
   Масштаб: 1rem = 10px макета (десктоп 1920, мобилка 430) — см. скрипт в index.html.
   Все размеры из Figma переведены делением на 10: 16px → 1.6rem.
   Тексты режутся по высоте прописных (text-box), поэтому отступы из макета
   ставятся напрямую: «top: 24px до верха букв» = top: 2.4rem.
   Один перелом — 1024px: ниже уходим в мобильную раскладку. */

@font-face { font-family: Favorit; src: url(../assets/fonts/ABCFavoritCYR-Book-Trial.woff2) format('woff2'); font-weight: 350; font-display: swap; }
@font-face { font-family: Favorit; src: url(../assets/fonts/ABCFavoritCYR-Regular-Trial.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Favorit; src: url(../assets/fonts/ABCFavoritCYR-Medium-Trial.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: Favorit; src: url(../assets/fonts/ABCFavoritCYR-Bold-Trial.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: Pinyon; src: url(../assets/fonts/PinyonScript-Regular.ttf) format('truetype'); font-display: swap; }
@font-face { font-family: HNC; src: url(../assets/fonts/HelveticaNeueCyr-Roman.ttf) format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: HNC; src: url(../assets/fonts/HelveticaNeueCyr-Bold.ttf) format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: HNC; src: url(../assets/fonts/HelveticaNeueCyr-Heavy.ttf) format('truetype'); font-weight: 800; font-display: swap; }

:root {
  --blue: #2255ee;
  --line: #e8e8e8;
  --line2: #ebebeb;
  --pill: #e8e8e8;
  --gray: #a6a6a6;
  --dim: .35;
  /* единая система таймингов (скилл motion): приходит медленно, уходит быстро — keep in sync с app.js */
  --in: cubic-bezier(.22, 1, .36, 1);   /* «домашняя пружина», ~780ms */
  --out: cubic-bezier(.55, 0, .55, .2); /* уход, ~300ms */
  --t-in: .78s;
  --t-out: .3s;
  --ease: var(--in);
  --ease-io: cubic-bezier(.7, 0, .2, 1);
  font-size: calc(100vw / 192);
}
@media (max-width: 1023px) { :root { font-size: min(calc(100vw / 43), 13px); } }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; background: #fff; }
html.is-bottom, html.menu-open { background: var(--blue); } /* перескролл под футером и открытое меню — синий */
/* меню открыто: Safari красит полосу под островом по фону страницы и верхним fixed-слоям — всё синее, шапка прячется */
html.menu-open body { background: var(--blue); }
html.menu-open .hdr, html.menu-open .ctools, html.menu-open .mslot__top { visibility: hidden; }
body {
  background: #fff; color: #000;
  font: 400 1.6rem/1.2 Favorit, Arial, sans-serif;
  letter-spacing: -.03em;
  font-feature-settings: "dlig" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 { font: inherit; letter-spacing: inherit; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; color: inherit; letter-spacing: inherit; border: 0; outline: 0; background: none; border-radius: 0; }
img { display: block; max-width: none; }
.u { text-decoration: underline; text-decoration-thickness: from-font; text-underline-position: from-font; }
.dim { opacity: var(--dim); }
.old { color: rgba(0, 0, 0, .35); text-decoration: line-through; text-decoration-thickness: from-font; }

/* обрезка строки по прописным — как в Figma */
p, h1, h2, h3, button, .tb, .hdr__link, .pill, label, .price { text-box: trim-both cap alphabetic; }
@supports not (text-box: trim-both cap alphabetic) {
  .pill, .btn, .hdr__link, .size { line-height: .74; }
}

/* ---------- пилюли и кнопки ---------- */
.pill {
  display: inline-block; text-align: center;
  padding: 1rem; border-radius: 1rem; background: var(--pill);
  font-weight: 500; font-size: 1.6rem; letter-spacing: -.03em; white-space: nowrap;
  transition: background-color .25s, color .25s, opacity .25s;
}
.pill > span { transition: opacity .25s; }
.pill.is-off > span, .pill.is-off { color: rgba(0, 0, 0, .35); }
.pill.is-on { text-decoration: underline; text-decoration-thickness: from-font; text-underline-position: from-font; }
.pill--blue { background: var(--blue); color: #fff; }
.pill--black { background: #000; color: #fff; }
.pill--line { background: none; box-shadow: inset 0 0 0 1px var(--blue); }
.pill--line.is-on { background: var(--blue); color: #fff; }
.pill--line.is-off { color: rgba(0, 0, 0, .35); }
.pill svg { display: inline-block; vertical-align: baseline; margin-left: .45em; width: 1.15cap; height: 1.05cap; overflow: visible; transition: transform .3s var(--ease); }
/* плюс — по высоте прописных, центр на середине строки: не зависит от кегля и браузера */
.pill svg:not(.chev) { width: .72cap; height: .72cap; margin-bottom: .14cap; }
.pill.is-open svg { transform: rotate(45deg); }
.pill.is-open .chev { transform: rotate(180deg); }

.btn {
  display: flex; align-items: center; justify-content: center;
  padding: 1rem; border-radius: 1rem; box-shadow: inset 0 0 0 1px var(--blue);
  color: var(--blue); font-weight: 500; font-size: 1.6rem; letter-spacing: -.005em;
  transition: background-color .25s, color .25s;
}
.btn:hover, .btn:focus-visible { background: var(--blue); color: #fff; }
.btn[disabled] { box-shadow: inset 0 0 0 1px var(--line); color: var(--gray); background: none; cursor: default; }
.btn > span { text-box: trim-both cap alphabetic; }

/* ---------- шапка ---------- */
.hdr {
  position: fixed; inset: 0 0 auto; height: 5.6rem; z-index: 50;
  color: #fff; mix-blend-mode: difference; pointer-events: none;
}
.hdr > * { pointer-events: auto; }
.hdr__logo {
  position: absolute; left: 2.02rem; top: 1.035rem; width: 16.91rem; height: 2.61rem;
  background: currentColor;
  -webkit-mask: url(../assets/logo.svg) no-repeat 0 0 / contain; mask: url(../assets/logo.svg) no-repeat 0 0 / contain;
}
.hdr__link {
  position: absolute; top: 2.4rem;
  font-weight: 700; font-size: 1.4rem; letter-spacing: -.005em; white-space: nowrap;
  opacity: var(--dim); transition: opacity .25s;
}
.hdr__link:hover, .hdr__link.is-active { opacity: 1; }
.hdr__link.is-active { text-decoration: underline; text-decoration-thickness: from-font; text-underline-position: from-font; }
.hdr__catalog { left: calc(50% - 2.681rem); }
.hdr__nav { display: contents; }
.hdr__nav a:nth-child(1) { left: 144.6rem; }
.hdr__nav a:nth-child(2) { left: 153.1rem; }
.hdr__nav a:nth-child(3) { left: 164.6rem; }
.hdr__nav a:nth-child(4) { left: 174.9rem; }
.hdr__cart { right: 2.1rem; }
.hdr__view, .hdr__chip, .hdr__burger { display: none; }

/* главная: все пункты белые, счётчик приглушён */
[data-page="home"] .hdr__link { opacity: 1; }
[data-page="home"] .hdr__count { opacity: var(--dim); }
[data-page="home"] .hdr__nav a:nth-child(1) { left: 141.8rem; }
[data-page="home"] .hdr__nav a:nth-child(2) { left: 150.3rem; }
[data-page="home"] .hdr__nav a:nth-child(3) { left: 161.8rem; }
[data-page="home"] .hdr__nav a:nth-child(4) { left: 172.1rem; }

/* каталог: сплошная белая шапка с переключателем вида */
.hdr--solid { mix-blend-mode: normal; color: #000; background: #fff; }
.hdr--solid .hdr__catalog { display: none; }
.hdr--solid .hdr__view { display: flex; gap: 1rem; position: absolute; left: 89.4rem; top: 1.3rem; }
.hdr__view .pill { font-size: 1.6rem; letter-spacing: -.005em; }
.hdr__view .pill.is-on { color: var(--blue); }


/* ---------- смена страниц ---------- */
#app { min-height: 100vh; }
#app.is-leaving { opacity: 0; transition: opacity var(--t-out) var(--out); }
#app.is-entering { animation: pageIn var(--t-in) var(--in) both; }
@keyframes pageIn { from { opacity: 0; } }

/* маска строк: строка выезжает снизу из-под своей обрезки, нижние догоняют */
.ml { display: block; clip-path: inset(-.6em -1em -.18em -1em); } /* маска без полей: раскладку не трогает */
.ml__in {
  display: block; transform: translateY(108%); opacity: 0;
  transition: transform calc(780ms + var(--i, 0) * 150ms) var(--in) calc(var(--i, 0) * 110ms),
              opacity calc(780ms + var(--i, 0) * 150ms) var(--in) calc(var(--i, 0) * 110ms);
}
.is-in > .ml > .ml__in { transform: none; opacity: 1; }
.mw { white-space: nowrap; }
/* одиночная строка из-под маски — для коротких надписей */
.rise { clip-path: inset(-.6em -1em -.25em -1em); }
.rise > span { display: block; text-box: trim-both cap alphabetic; animation: riseIn calc(780ms + var(--i, 0) * 150ms) var(--in) calc(200ms + var(--i, 0) * 110ms) both; }
@keyframes riseIn { from { transform: translateY(108%); opacity: 0; } }

/* ---------- главная ---------- */
.home { position: fixed; inset: 0; overflow: hidden; background: #d8d8d8; }
.home.is-enter { background: transparent; z-index: 45; } /* наплыв со внутренней страницы — поверх неё */
/* титр, карточка и миниатюры приходят, когда фото уже закрыло прошлую страницу */
.home.from-inner .rise > span { animation-delay: calc(950ms + var(--i, 0) * 110ms); }
.home.from-inner .hcard { animation-delay: 1.15s; }
.home.from-inner .home__thumbs { animation: fadeIn .6s var(--in) 1s both; }
@keyframes fadeIn { from { opacity: 0; } }
.home__slide { position: absolute; inset: 0; will-change: transform; }
.home__slide img { width: 100%; height: 100%; object-fit: cover; }
.home__slide::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .1); }
.home__title { position: absolute; inset: 0; color: #fff; pointer-events: none; z-index: 3; }
.home__lcdd {
  position: absolute; left: 85.737rem; top: 76.4rem;
  font: 700 9.4151rem/1 HNC, Helvetica, Arial, sans-serif; letter-spacing: -.096em; /* Neue шире Now — поджато до ширины макета */ white-space: nowrap;
  text-box: trim-both cap alphabetic;
}
.home__lcdd i { font-style: normal; }
.home__co { position: absolute; left: 78.618rem; top: 86.526rem; transform: translateY(-100%); font: 400 2.6642rem/1 HNC, Helvetica, Arial, sans-serif; letter-spacing: -.01em; white-space: nowrap; text-box: trim-both cap alphabetic; }
.home__dd { position: absolute; left: 101.37rem; top: 85.255rem; transform: translateX(-50%); font: 400 3.3755rem/1 Pinyon, cursive; letter-spacing: 0; -webkit-text-stroke: .018em currentColor; white-space: nowrap; text-box: trim-both cap alphabetic; }
.home__sense {
  position: absolute; left: 96.753rem; top: 88.06rem; transform: translateX(-50%); text-align: center;
  font: 800 2.2959rem/.79 HNC, Helvetica, Arial, sans-serif; letter-spacing: -.066em; white-space: nowrap;
}
.home__thumbs {
  position: absolute; right: 2rem; top: calc(50% + 13.2rem); transform: translateY(-50%); z-index: 3;
  display: flex; flex-direction: column; gap: .5rem;
}
.home__thumb { position: relative; width: 6rem; height: 7.5rem; border: 1px solid #a8a8a8; overflow: hidden; }
.home__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--ease); }
.home__thumb.is-on { border-color: transparent; }
.home__thumb.is-on img { opacity: 1; }
.home__thumb:hover img { opacity: .6; }
.home__thumb.is-on:hover img { opacity: 1; }

.hcard {
  position: absolute; left: 2.019rem; bottom: 2rem; width: 29.6rem; height: 42.2rem; z-index: 3;
  background: #fff; border-radius: 1rem; overflow: hidden; display: block;
  transition: width .6s var(--ease), height .6s var(--ease);
}
.hcard:hover { width: 38rem; height: 52rem; }
.hcard { animation: cardIn 1s var(--in) .45s both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(3rem); } }
.hcard__media { position: absolute; left: 0; right: 0; top: 0; bottom: 10.3rem; overflow: hidden; }
.hcard__strip {
  position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  scroll-snap-type: y mandatory; transition: transform .9s var(--ease-io);
}
.hcard__strip::-webkit-scrollbar { display: none; }
.hcard__strip img { display: block; width: 100%; height: calc(100% - 5.1rem); object-fit: cover; margin-bottom: .4rem; scroll-snap-align: start; }
.hcard__info { position: absolute; left: 0; bottom: 0; width: 100%; height: 10.3rem; background: #fff; overflow: hidden; }
.hcard__name { position: absolute; left: 1.5rem; top: 1.5rem; white-space: nowrap; }
.hcard__price { position: absolute; left: 1.5rem; top: 3.7rem; }
.hcard__sizes { position: absolute; right: 1.5rem; top: 7.7rem; opacity: .3; }
.hcard__f { --t: .16em; --b: .26em; height: 1cap; text-box: none; clip-path: inset(calc(-1 * var(--t)) -1em calc(-1 * var(--b)) -1em); } /* окно = строка + выносные */
.hcard__f .reel { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--t) + var(--b)); }
.hcard__sizes.hcard__f .reel { align-items: flex-end; } /* ряд размеров прижат вправо — не скачет при смене */
.hcard__f .reel > span { display: block; text-box: trim-both cap alphabetic; white-space: nowrap; }

/* курсор-точка на главной */
.cursor {
  position: fixed; left: 0; top: 0; width: 1.6rem; height: 1.6rem; margin: -.8rem 0 0 -.8rem; border-radius: 50%;
  background: #fff; mix-blend-mode: difference; pointer-events: none; z-index: 100;
  opacity: 0; transition: opacity .3s, width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease);
}
.cursor.is-on { opacity: 1; }
.menu.is-open ~ .cursor { display: none; }
.cursor.is-link { width: 3.2rem; height: 3.2rem; margin: -1.6rem 0 0 -1.6rem; }
@media (hover: none) { .cursor { display: none; } }
@media (hover: hover) and (min-width: 1024px) { [data-page="home"], [data-page="home"] a, [data-page="home"] button { cursor: none; } }

/* ---------- каталог: общее ---------- */
.ctools { position: fixed; top: 7.6rem; right: 2.7rem; z-index: 40; display: flex; gap: 1.5rem; align-items: flex-start; }
.ctools__btns { display: flex; gap: .4rem; position: relative; }
.ctools__cats { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.ctools__cats .pill { opacity: 1; }
.ctools__cats .pill:not(.is-on) { color: rgba(0, 0, 0, .35); }
.ctools__cats .pill:not(.is-on):hover { color: #000; }
.cview--module .ctools__btns .pill--blue { background: #000; }

.drop {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 2; width: 34rem;
  background: #fff; border-radius: 1rem; box-shadow: 0 0 0 1px var(--line);
  padding: 1.6rem; display: grid; gap: 1.6rem;
  opacity: 0; visibility: hidden; transform: translateY(-.6rem);
  transition: opacity .25s, transform .35s var(--ease), visibility 0s .35s;
}
.drop.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .35s var(--ease); }
.drop__title { font-weight: 500; letter-spacing: -.035em; }
.drop__row { display: flex; flex-wrap: wrap; gap: .5rem; }
.drop__row .pill { background: none; box-shadow: inset 0 0 0 1px var(--blue); color: rgba(0, 0, 0, .35); }
.drop__row .pill.is-on { background: var(--blue); color: #fff; }
.drop__foot { display: flex; justify-content: space-between; align-items: center; }
.drop__reset { opacity: var(--dim); text-decoration: underline; text-underline-position: from-font; }
.drop__reset:hover { opacity: 1; }

.cempty { padding: 30rem 2rem 0; text-align: center; opacity: var(--dim); min-height: 80vh; }

/* ---------- каталог: список ---------- */
.clist { padding: 6.6rem 2rem 4rem; }
.crow { border-top: 1px solid var(--line); transition: border-color .25s; }
.crow__head {
  display: grid; grid-template-columns: 31.5rem 31.5rem 1fr; height: calc(4.2rem - 1px); padding-top: calc(1rem - 1px);
  transition: color .25s;
}
.crow__head p { white-space: nowrap; }
.crow.is-open { border-top-color: var(--blue); }
.crow.is-open .crow__head { color: var(--blue); }
.crow.is-open .crow__head .old { color: rgba(34, 85, 238, .45); }
.crow__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.crow.is-open .crow__panel { grid-template-rows: 1fr; }
.crow__inner { overflow: hidden; min-height: 0; }
.crow__stage { position: relative; height: 60.8rem; }
.crow__img {
  position: absolute; top: -1rem; left: 0; width: 62.5rem; height: 60.8rem;
  mix-blend-mode: multiply; will-change: transform;
}
.crow__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .25s; }
.crow__img img.is-on { opacity: 1; }
.crow__go { position: absolute; inset: 0; }
.crow:last-child { border-bottom: 1px solid var(--line); }

/* ---------- каталог: список с управляющей позицией ---------- */
.slot { position: fixed; inset: 0; overflow: hidden; }
.slot__row {
  position: absolute; left: 2rem; right: 2rem; top: 0; height: 4.2rem;
  display: grid; grid-template-columns: 31.5rem 31.5rem 1fr; padding-top: calc(1rem - 1px);
  border-top: 1px solid var(--line); background: #fff;
  transition: transform var(--row-dur, .45s) var(--row-ease, var(--in)), color .25s, border-color .25s;
}
.slot-reel .slot__row { transition: color .25s, border-color .25s; } /* лента двигает строки каждый кадр — без transition */
.slot__row p { white-space: nowrap; }
.slot__row.is-on { color: var(--blue); border-top-color: var(--blue); }
.slot__row.is-on .old { color: rgba(34, 85, 238, .45); }
/* наведение: синяя линия проявляется фейдом; уход быстрее прихода */
.slot__row::after {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--blue);
  opacity: 0; transition: opacity var(--t-out) var(--out);
}
.slot__row:hover::after { opacity: 1; transition: opacity .5s var(--in); }
.slot__row.is-on::after { display: none; }
/* вход списка и прибытие строки в позицию */
.slot__row p { transition: transform var(--t-in) var(--in) var(--d, 0ms), opacity var(--t-in) var(--in) var(--d, 0ms); }
.slot__row.is-pre p { transform: translateY(1.4rem); opacity: 0; transition: none; }
.slot__row.is-arrive p { animation: rowArrive .7s var(--in) both; }
@keyframes rowArrive { from { transform: translateY(1rem); opacity: 0; } }
.slot__thumb {
  position: fixed; left: 0; top: 0; height: var(--thumb-h, 18rem); z-index: 30; pointer-events: none;
  opacity: 0; transition: opacity var(--t-out) var(--out);
}
.slot__thumb.is-on { opacity: 1; transition: opacity .5s var(--in); }
.slot__thumb img {
  position: absolute; left: 0; top: 0; height: var(--thumb-h, 18rem); width: auto; max-width: none;
  opacity: 0; transform: scale(.94); transform-origin: 0 0;
  transition: opacity .35s var(--out), transform .35s var(--out);
}
.slot__thumb img.is-in { opacity: 1; transform: none; transition: opacity .5s var(--in), transform var(--t-in) var(--in); }
.slot__stage { position: absolute; left: 2rem; right: 2rem; top: 36rem; height: 60.8rem; z-index: 1; }
.slot__img { position: absolute; left: 0; top: -1rem; width: 62.5rem; height: 60.8rem; will-change: transform; }
.slot__layer { position: absolute; inset: 0; opacity: 0; transform: translateY(1.5rem); mix-blend-mode: multiply; transition: opacity .45s var(--in), transform var(--t-in) var(--in); }
.slot__layer.is-in { opacity: 1; transform: none; }
.slot__layer.is-out { opacity: 0; transform: none; transition: opacity var(--t-out) var(--out); }
.slot__layer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .25s; }
.slot__layer img.is-on { opacity: 1; }

/* ---------- каталог: модули ---------- */
.cgrid { padding: 0 2rem 20rem; }
.cgrid__title { text-align: center; padding-top: 34.7rem; height: 65.9rem; font-weight: 700; font-size: 1.4rem; letter-spacing: -.005em; }
.cgrid__list { display: flex; flex-wrap: wrap; gap: 22rem 6.9rem; align-items: flex-start; }
.gcard { position: relative; width: 28rem; display: block; }
.gcard.rv { opacity: 0; transform: translateY(5rem); transition: opacity var(--t-in) var(--in), transform 1s var(--in); }
.gcard.rv.is-in { opacity: 1; transform: none; }
.gcard--wide { width: 38rem; }
.gcard__name { white-space: nowrap; }
.gcard__row { display: flex; justify-content: space-between; margin-top: 1.5rem; }
.gcard__sizes { opacity: 0; transform: translateX(-.6rem); transition: opacity .3s, transform .4s var(--ease); }
.gcard:hover .gcard__sizes { opacity: 1; transform: none; }
.gcard__media { position: relative; margin-top: 1.5rem; height: 40rem; border-top: 1px solid var(--line2); }
.gcard--wide .gcard__media { height: 43.2rem; }
.gcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; transition: opacity .45s var(--ease), filter .45s var(--ease); }
.gcard__media img.is-look { object-fit: cover; } /* человек — во всю карточку; предметка — целиком, без обрезки краёв */
.gcard__media img + img { opacity: 0; filter: blur(.4rem); }
.gcard:hover .gcard__media img + img { opacity: 1; filter: none; }
.gcard__soldout { position: absolute; left: 0; bottom: -2.5rem; opacity: var(--dim); }

/* ---------- товар ---------- */
.pg { position: fixed; left: 0; top: 0; width: 100%; height: 97.2rem; z-index: 5; }
.pg__clip { position: absolute; inset: 0; overflow: hidden; background: #fff; }
.pg__item { position: absolute; left: 0; top: 0; width: 97.2rem; height: 97.2rem; will-change: transform; }
.pg__item img { width: 100%; height: 100%; object-fit: cover; }
.pg__item img { animation: pgIn 1.1s var(--in) both; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes pgIn { from { opacity: 0; transform: scale(1.04); } }
.pspace { height: 97.2rem; }
.pinfo { position: relative; display: grid; grid-template-columns: 118.8rem 1fr; padding: 0 2rem 0 0; }
.pinfo__main { position: sticky; top: 12.8rem; align-self: start; padding: 2rem 0 6rem 2rem; }
.pinfo__head { display: flex; align-items: center; height: 3.2rem; position: relative; }
.pinfo__title { display: flex; gap: 2rem; font-size: 2.4rem; letter-spacing: -.035em; white-space: nowrap; }
.pinfo__sizes { position: absolute; left: 51.2rem; top: 0; display: flex; gap: .5rem; }
.size {
  width: 3.2rem; height: 3.2rem; border-radius: 1.0667rem; box-shadow: inset 0 0 0 1.067px var(--blue);
  color: var(--blue); font-weight: 350; font-size: 1.6rem; letter-spacing: -.005em;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .2s, color .2s;
}
.size:hover { background: rgba(34, 85, 238, .08); }
.size.is-on { background: var(--blue); color: #fff; font-weight: 500; }
.size.size--os { width: auto; padding: 0 1rem; white-space: nowrap; }
.size[disabled] { box-shadow: inset 0 0 0 1.067px var(--line); color: var(--gray); text-decoration: line-through; cursor: default; background: none; }
.pinfo__guide { position: absolute; left: 109.3rem; top: 1.1rem; font-weight: 500; letter-spacing: -.005em; opacity: var(--dim); text-decoration: underline; text-underline-position: from-font; transition: opacity .2s; }
.pinfo__guide:hover { opacity: 1; }
.ptext { width: 116.8rem; font-weight: 350; letter-spacing: -.04em; line-height: 1.1; }
.ptext p + p { margin-top: .5rem; }
.ptext--ru { margin-top: 2rem; }
.ptext--en { margin-top: 1.5rem; opacity: var(--dim); }
.ptext__meta { margin-left: 47.5rem; }
.pinfo__cta { margin: 5rem 0 0 47.5rem; width: 21.8rem; }
.pinfo__note { margin: 1.5rem 0 0 47.5rem; color: var(--gray); min-height: 1.2rem; }

.pother { padding-top: 2.7rem; }
.pother__title {
  position: sticky; top: 10.8rem; z-index: 2; font-size: 2.4rem; letter-spacing: -.005em;
  padding-left: 26.7rem; height: 5rem; margin-bottom: -2rem;
}
.pother__title::before {
  /* растушёвка только для колонки товаров: в покое кончается до первой линии и ничего не задевает */
  content: ''; position: absolute; left: 0; right: 0; top: -2.7rem; bottom: -1.6rem; z-index: -1;
  background: linear-gradient(#fff 72%, rgba(255, 255, 255, 0));
}
.pother { position: relative; }
.pitem:first-of-type { margin-top: 2rem; }
.pitem.rv { opacity: 0; transform: translateY(3rem); transition: opacity var(--t-in) var(--in), transform 1s var(--in); }
.pitem.rv.is-in { opacity: 1; transform: none; }
.pitem { display: grid; grid-template-columns: 26.7rem 1fr auto; border-top: 1px solid var(--line2); height: 26.1rem; padding-top: .8rem; }
.pitem__img { width: 25.1rem; height: 23.1rem; position: relative; }
.pitem__img img { width: 100%; height: 100%; object-fit: contain; transition: transform .6s var(--ease); }
.pitem:hover .pitem__img img { transform: scale(1.04); }
.pitem__name { padding-top: .2rem; }
.pitem__sizes { margin-top: 1.1rem; opacity: var(--dim); }
.pitem__price { padding-top: .2rem; text-align: right; white-space: nowrap; }

/* ---------- подвал ---------- */
.foot { box-shadow: 0 50vh 0 50vh var(--blue); }
.foot { position: relative; background: var(--blue); color: #fff; height: 20.8rem; overflow: hidden; z-index: 6; }
.foot__col { position: absolute; top: 2rem; font-weight: 350; letter-spacing: -.05em; line-height: 1; }
.foot__col p:first-child { margin-bottom: 1rem; }
.foot__col p + p { font-weight: 500; }
.foot__col--l { left: 2rem; width: 35.4rem; }
.foot__col--c { left: 50%; transform: translateX(-50%); text-align: center; }
.foot__col--r { right: 2rem; text-align: right; }
.foot__big {
  position: absolute; left: 2.2rem; right: 2rem; bottom: 1.5rem; display: flex; justify-content: space-between; align-items: flex-end;
  font: 700 7.1188rem/1 HNC, Helvetica, Arial, sans-serif; letter-spacing: -.05em;
}
.foot__big span { text-box: trim-both cap alphabetic; display: block; }

/* ---------- корзина ---------- */
.cart { position: relative; min-height: 100vh; padding: 9.6rem 2rem 10rem; display: grid; grid-template-columns: 116.8rem 1fr; }
.citems { display: flex; flex-direction: column; gap: 2rem; }
.citem { position: relative; border-top: 1px solid var(--line2); height: 35.5rem; }
.citem__img { position: absolute; left: 0; top: 1rem; width: 40.3rem; height: 34.5rem; display: block; }
.citem__img img { width: 100%; height: 100%; object-fit: contain; }
.citem__name { position: absolute; left: 47.5rem; top: 1rem; }
.citem__size { position: absolute; right: 0; top: 1rem; display: flex; gap: 2rem; }
.citem__size span:first-child { color: var(--gray); }
.citem__mid { position: absolute; left: 73.6rem; top: 16.5rem; width: 17.1rem; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; text-align: center; }
.citem__qty { display: flex; gap: 1rem; align-items: center; letter-spacing: -.005em; }
.citem__qty button { color: var(--blue); width: 1.4rem; text-align: center; font-family: Arial, sans-serif; }
.citem__qty button:hover { opacity: .6; }
.citem__del { position: absolute; left: 73.6rem; width: 17.1rem; text-align: center; top: 34.3rem; color: var(--gray); letter-spacing: -.005em; transition: color .2s; }
.citem__del:hover { color: #000; }
.citem.is-removing { animation: rm .35s var(--ease) forwards; }
@keyframes rm { to { opacity: 0; transform: translateX(-2rem); } }
.cart__empty { padding-top: 2.4rem; }
.cart__empty a { color: var(--blue); text-decoration: underline; text-underline-position: from-font; }

.cform { position: sticky; top: 9.6rem; align-self: start; width: 45.5rem; margin-left: auto; }
.cform__head { display: flex; justify-content: space-between; font-size: 2.4rem; letter-spacing: -.035em; padding-bottom: 0; height: 2.7rem; border-bottom: 1px solid var(--line); }
.cform__head p { padding-top: 0; }
.cform__sub { font-weight: 500; letter-spacing: -.035em; margin-top: 3.9rem; }
.field { display: block; border-bottom: 1px solid var(--line); padding-bottom: 1rem; margin-top: 1.9rem; transition: border-color .2s; }
.field:first-of-type { margin-top: 1.9rem; }
.field input { width: 100%; letter-spacing: -.03em; line-height: 1; height: 1.2rem; text-box: trim-both cap alphabetic; }
.field input::placeholder { color: rgba(0, 0, 0, .35); opacity: 1; }
.field:focus-within { border-color: #000; }
.field.is-bad { border-color: #e5484d; }
.field__hint { display: block; font-size: 1.2rem; color: var(--blue); margin-top: .6rem; }
.cform__del { display: flex; gap: .5rem; margin-top: 1.9rem; flex-wrap: wrap; }
.cform__note { font-weight: 350; font-size: 1.4rem; line-height: 1.2; letter-spacing: -.03em; margin-top: 1.9rem; }
.cform__note p + p { margin-top: 1.7rem; }
.cform__sum { border-top: 1px solid var(--line); margin-top: 3.9rem; padding-top: 1rem; display: flex; gap: 1.5rem; }
.cform__sum span:last-child { opacity: var(--dim); }
.cform__total { display: flex; justify-content: space-between; font-size: 2.4rem; letter-spacing: -.035em; margin-top: 2rem; }
.cform__disc { margin-top: .8rem; color: var(--blue); font-size: 1.4rem; }
.cform .btn { margin-top: 2rem; width: 100%; }

/* ---------- о нас ---------- */
.about__fixed { position: fixed; inset: 0; }
.about { position: relative; padding-top: 92.7rem; }
.about__set { position: relative; height: 240rem; } /* период ленты — keep in sync с about2 в app.js (меряется по DOM) */
.about__manifest {
  position: absolute; left: 2rem; right: 2rem; top: 26.6rem; text-align: center;
  font-size: 4.8rem; line-height: 1; letter-spacing: -.03em;
}
.about__manifest em { font: 400 7.2rem/0 Pinyon, cursive; color: #003cff; letter-spacing: .02em; font-style: normal; }
.about__lead { position: absolute; left: 0; right: 0; top: 51.6rem; text-align: center; font-weight: 350; line-height: 1.1; }
.about__contacts { position: absolute; left: 50%; top: 55.7rem; transform: translateX(-50%); text-align: center; }
.about__contacts h3 { font-weight: 350; font-size: 1.6rem; line-height: 1.1; letter-spacing: -.03em; }
.about__contacts p { font-weight: 500; line-height: 1; }
.about__contacts h3 + p { margin-top: 1.45rem; }
.about__contacts p + p { margin-top: 1rem; }
.about__contacts p + h3 { margin-top: 3.3rem; }
.about__contacts a:hover { color: var(--blue); }
.about__img { position: absolute; mix-blend-mode: multiply; }
.about__img img { width: 100%; height: 100%; object-fit: cover; }
.about__img--game { left: calc(50% - 37.1rem); top: 0; width: 74.1rem; height: 51.7rem; }
.about__img--nice { left: 129rem; top: 44.8rem; width: 59.66rem; height: 37.5rem; }
.about__img--draw { left: 2.2rem; top: 94.8rem; width: 62.21rem; height: 43.4rem; }
.about__img--goals { left: 95.9rem; top: 142.2rem; width: 95.75rem; height: 66rem; }


/* появление по скроллу */
.rv { opacity: 0; transform: translateY(6rem); transition: opacity .9s var(--ease), transform 1.1s var(--ease); }
.rv.is-in { opacity: 1; transform: none; }

/* ---------- архив ---------- */
.arch { padding: 9.6rem 2rem 10rem; } /* место под подпись первого ряда */
.arch__row { display: flex; justify-content: space-between; }
.arch__item { position: relative; display: block; mix-blend-mode: multiply; outline: 1px solid transparent; outline-offset: -1px; transition: outline-color var(--t-out) var(--out); }
.arch__row--big .arch__item { width: 47.44rem; height: 59.3rem; }
.arch__row--small .arch__item { width: 31.68rem; height: 39.6rem; }
.arch__item img { width: 100%; height: 100%; object-fit: contain; }
/* наведение: синяя обводка контейнера, над ним — год, название и цена (макет «архив», 197:1314) */
.arch__item:hover, .arch__item.is-on { outline-color: var(--blue); transition: outline-color .5s var(--in); }
.arch__cap {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 1rem); z-index: 2; color: var(--blue);
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translateY(.6rem); transition: opacity var(--t-out) var(--out), transform var(--t-out) var(--out);
}
.arch__cap p { white-space: nowrap; } /* одна линия: название · год · цена; год — в середине свободного места */
.arch__item:hover .arch__cap, .arch__item.is-on .arch__cap { opacity: 1; transform: none; transition: opacity .5s var(--in), transform var(--t-in) var(--in); }

/* ---------- текстовые страницы ---------- */
.info { padding: 26.6rem 2rem 20rem; text-align: center; min-height: 100vh; }
.info__big { font-size: 4.8rem; line-height: 1; letter-spacing: -.03em; max-width: 160rem; margin: 0 auto; }
.info__big em { font: 400 7.2rem/0 Pinyon, cursive; color: #003cff; font-style: normal; }
.info__cols { display: flex; justify-content: center; gap: 12rem; margin-top: 8rem; text-align: left; }
.info__cols h3 { font-weight: 500; letter-spacing: -.035em; margin-bottom: 1.6rem; }
.info__cols p { font-weight: 350; line-height: 1.2; max-width: 40rem; }
.info__cols p + p { margin-top: 1rem; }
.info__cols a { color: var(--blue); }

/* ---------- всплывашки ---------- */
.toast {
  position: fixed; right: 2rem; top: 7.6rem; z-index: 90;
  background: var(--blue); color: #fff; border-radius: 1rem; padding: 1rem 1.2rem; font-weight: 500;
  display: flex; gap: 1.2rem; align-items: center;
  opacity: 0; transform: translateY(-1rem); pointer-events: none;
  transition: opacity .3s, transform .45s var(--ease);
}
.toast.is-on { opacity: 1; transform: none; pointer-events: auto; }
.toast a { text-decoration: underline; text-underline-position: from-font; }
.toast > * { text-box: trim-both cap alphabetic; }

.modal {
  position: fixed; inset: 0; z-index: 95; background: rgba(255, 255, 255, .7); backdrop-filter: blur(6px);
  display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s;
}
.modal.is-on { opacity: 1; visibility: visible; transition: opacity .3s; }
.modal__box {
  background: #fff; border-radius: 1rem; box-shadow: 0 0 0 1px var(--line); width: 56rem; max-width: calc(100vw - 2rem);
  padding: 2.4rem; transform: translateY(1.5rem); transition: transform .45s var(--ease);
}
.modal.is-on .modal__box { transform: none; }
.modal__title { font-size: 2.4rem; letter-spacing: -.035em; display: flex; justify-content: space-between; }
.modal__x { opacity: var(--dim); font-size: 1.6rem; }
.modal__x:hover { opacity: 1; }
.modal__text { margin-top: 2rem; font-weight: 350; line-height: 1.2; }
.modal__text p + p { margin-top: 1rem; }
.modal table { width: 100%; border-collapse: collapse; margin-top: 2rem; }
.modal td, .modal th { text-align: left; font-weight: 400; padding: 1rem 0; border-top: 1px solid var(--line); }
.modal th { opacity: var(--dim); }
.modal .btn { margin-top: 2.4rem; }

.menu { display: none; }

/* =====================================================================
   МОБИЛЬНАЯ РАСКЛАДКА (< 1024px). 1rem = 10px макета 430.
   Перелом качественный: шапка уходит в бургер, колонки складываются.
   ===================================================================== */
@media (max-width: 1023px) {
  body { font-size: 1.4rem; letter-spacing: -.03em; }

  .hdr { height: 5.6rem; }
  .hdr__logo { left: 1rem; top: 1.6rem; width: 8.367rem; height: 2.613rem; -webkit-mask-image: url(../assets/logo-m.svg); mask-image: url(../assets/logo-m.svg); }
  .hdr__link, .hdr__nav, .hdr--solid .hdr__view { display: none !important; }
  .hdr__burger {
    display: block; position: absolute; right: 1.05rem; top: 1.9rem; width: 1.932rem; height: 1.979rem;
    background: currentColor; -webkit-mask: url(../assets/burger.svg) no-repeat center / contain; mask: url(../assets/burger.svg) no-repeat center / contain;
  }
  .hdr--solid .hdr__chip { display: inline-block; white-space: nowrap; position: absolute; left: 50%; top: 1.6rem; transform: translateX(-50%); font-size: 1.4rem; padding: .8rem 1rem; }


  .pill { font-size: 1.4rem; padding: .9rem 1rem; }
  .btn { font-size: 1.6rem; }

  /* меню */
  .menu {
    display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 80;
    background: var(--blue); color: #fff; padding: 1.6rem 1rem 3rem;
    clip-path: inset(0 0 100% 0); transition: clip-path .6s var(--ease-io); visibility: hidden;
  }
  .menu.is-open { clip-path: inset(0); visibility: visible; }
  .menu__close { position: absolute; right: 1rem; top: 1.6rem; width: 2rem; height: 2rem; }
  .menu__logo {
    position: absolute; left: 1rem; top: 1.6rem; width: 8.367rem; height: 2.613rem; background: #fff;
    -webkit-mask: url(../assets/logo-m.svg) no-repeat 0 0 / contain; mask: url(../assets/logo-m.svg) no-repeat 0 0 / contain;
  }
  .menu__close::before, .menu__close::after { content: ''; position: absolute; left: 50%; top: 50%; width: 2.4rem; height: .36rem; background: #fff; transform: translate(-50%, -50%) rotate(45deg); }
  .menu__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
  .menu__nav { display: flex; flex-direction: column; align-items: center; gap: 3rem; margin-top: 8.6rem; }
  .menu__nav a { font-size: 3.2rem; letter-spacing: -.03em; text-box: trim-both cap alphabetic; opacity: 0; transform: translateY(2rem); transition: opacity .4s, transform .6s var(--ease); }
  .menu.is-open .menu__nav a { opacity: 1; transform: none; }
  .menu.is-open .menu__nav a:nth-child(2) { transition-delay: .05s; }
  .menu.is-open .menu__nav a:nth-child(3) { transition-delay: .1s; }
  .menu.is-open .menu__nav a:nth-child(4) { transition-delay: .15s; }
  .menu.is-open .menu__nav a:nth-child(5) { transition-delay: .2s; }
  .menu__info { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem 2rem; font-size: 1.3rem; line-height: 1.1; }
  .menu__info p:first-child { margin-bottom: 1rem; }
  .menu__showroom { grid-column: 1 / -1; text-align: center; padding: 0 2rem; }

  /* главная */
  .home__title { display: none; }
  .home__thumbs { right: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); gap: 0; }
  .home__thumb { display: none; border: 0; }
  .home__thumb.is-on { display: block; }
  .home__thumb img { transition: none; }
  .hcard, .hcard:hover { left: 2.8rem; right: 2.8rem; width: auto; top: auto; bottom: 3.6rem; height: 7.9rem; }
  .hcard__media { display: none; }
  .hcard__info { top: 0; height: 100%; }
  .hcard__name { left: 1.5rem; top: 1.7rem; }
  .hcard__price { left: 1.5rem; top: 3.7rem; }
  .hcard__sizes { right: 1.5rem; top: auto; bottom: 1.5rem; }

  /* каталог */
  .ctools { top: auto; bottom: 1.2rem; left: 1rem; right: 1rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0; }
  .ctools__btns > [data-open="filter"] { grid-column: 1; justify-self: start; }
  .ctools__view { grid-column: 2; }
  .ctools__btns > [data-open="sort"] { grid-column: 3; justify-self: end; } /* Module / List — ровно по центру */
  .ctools__cats { display: none; }
  .ctools__btns { display: contents; }
  .ctools__view { display: flex; gap: .6rem; }
  .ctools__btns > .pill:first-child { order: -1; }
  .ctools__btns > .pill:last-of-type { order: 2; }
  .drop { position: fixed; left: 1rem; right: 1rem; width: auto; top: auto; bottom: 6rem; transform: translateY(1rem); }
  .drop--cats { top: 6rem; bottom: auto; }

  .clist { padding: 6.6rem 0 10rem; }
  .crow__head { grid-template-columns: minmax(0, 1fr) 7rem 14rem; column-gap: 1rem; height: 3.45rem; padding: 1.1rem 1rem 0; font-size: 1.3rem; }
  .crow__head p:nth-child(2) { text-align: center; }
  .crow__head p:nth-child(3) { text-align: right; }
  .crow__stage { height: 24rem; }
  .crow__img { width: 100%; height: 22rem; top: 1rem; transform: none !important; }
  .crow:last-child { border-bottom: 0; }

  .cgrid { padding: 6.6rem 1rem 10rem; }
  .cgrid__title { display: none; }
  .cgrid__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 1rem; }
  .gcard__name { white-space: normal; }
  .gcard, .gcard--wide { width: auto; }
  .gcard--wide { grid-column: 1 / -1; }
  .gcard__row { margin-top: .9rem; }
  .gcard__media { margin-top: .8rem; height: 23rem; }
  .gcard--wide .gcard__media { height: 44rem; }
  .gcard__sizes { display: none; }

  /* товар */
  .pg { position: relative; height: auto !important; z-index: 1; }
  .pg__fade { display: none; }
  .pg__clip { position: static; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0; padding: 5.6rem 0 0; scrollbar-width: none; }
  .pg__clip::-webkit-scrollbar { display: none; }
  .pg__item { position: relative; transform: none !important; flex: 0 0 82%; width: auto !important; height: 32rem !important; scroll-snap-align: center; }
  .pg__item[data-dup] { display: none !important; }
  .pg__item:first-child { margin-left: 9%; }
  .pg__item:last-child { margin-right: 9%; }
  .pg__item img { object-fit: contain; }
  .pspace { display: none; }
  .pinfo { display: block; padding: 0 1rem 10rem; }
  .pinfo__main { position: static; min-height: 0; padding: 2.6rem 0 0; }
  .pinfo__head { display: block; height: auto; }
  .pinfo__title { font-size: 2.2rem; gap: 2rem; }
  .pinfo__sizes { position: static; margin-top: 1.4rem; }
  .size { width: 2.8rem; height: 2.8rem; font-size: 1.5rem; border-radius: .9rem; }
  .pinfo__guide { position: absolute; left: auto; right: 0; top: 4.6rem; font-size: 1.4rem; }
  .ptext { width: auto; font-size: 1.3rem; }
  .ptext--ru { margin-top: 3rem; }
  .ptext__meta { margin-left: 0; margin-top: 1rem !important; }
  .pinfo__cta { position: fixed; left: 50%; bottom: 1.6rem; transform: translateX(-50%); width: 20.6rem; margin: 0; background: #fff; z-index: 20; }
  .pinfo__note { margin: 1rem 0 0; }
  .pother { padding-top: 4rem; }
  .pother__title { position: static; margin: 0; padding: 0; font-size: 2.2rem; height: 3.6rem; }
  .pother__title::before { display: none; }
  .pitem:first-of-type { margin-top: 0; }
  .pitem { grid-template-columns: 19rem 1fr; grid-template-rows: auto 1fr; height: 24.7rem; padding-top: 1.6rem; }
  .pitem__img { grid-row: 1 / 3; width: 18rem; height: 20rem; }
  .pitem__name { font-size: 1.3rem; }
  .pitem__price { grid-column: 2; align-self: end; text-align: left; padding-bottom: 3rem; font-size: 1.3rem; }
  .pitem__sizes { font-size: 1.3rem; }

  .foot { height: auto; padding: 2rem 1rem 9rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem 1rem; font-size: 1.3rem; }
  .foot__col { position: static; transform: none !important; text-align: left !important; width: auto !important; }
  .foot__col--l { grid-column: 1 / -1; }
  .foot__big { left: 1rem; right: 1rem; bottom: 1rem; font-size: 4.4rem; }

  /* корзина */
  .cart { display: block; padding: 5.6rem 1rem 6rem; }
  .cart__top { display: flex; justify-content: space-between; font-size: 2.2rem; letter-spacing: -.035em; padding: 2rem 0 1rem; border-bottom: 1px solid var(--line); }
  .citems { gap: 0; }
  .citem { height: 25.5rem; border-top: 0; border-bottom: 1px solid var(--line2); }
  .citem__img { top: 2rem; width: 50%; height: 21.5rem; }
  .citem__name, .citem__size, .citem__mid, .citem__del { left: 50%; right: 0; width: 50%; text-align: center; justify-content: center; }
  .citem__name { top: 3.2rem; font-size: 1.3rem; }
  .citem__size { top: 5.2rem; gap: .4rem; font-size: 1.3rem; }
  .citem__mid { top: 12rem; font-size: 1.3rem; }
  .citem__del { top: 23.2rem; font-size: 1.3rem; }
  .cform { position: static; width: auto; margin-top: 3rem; }
  .cform__head { display: none; }
  .cform__sub { margin-top: 3rem; }
  .cform__del .pill { font-size: 1.3rem; }

  /* о нас */
  .about__fixed { padding: 8rem 1rem 0; }
  .about { padding: 75vh 1rem 0; }
  .about__set { height: auto; padding-bottom: 4rem; }
  .about__manifest, .about__lead, .about__contacts { position: static; transform: none; }
  .about__manifest { font-size: 2rem; }
  .about__manifest em { font-size: 2.6rem; }
  .about__lead { margin-top: 2.6rem; font-size: 1.3rem; padding: 0 1rem; }
  .about__contacts { margin-top: 3rem; font-size: 1.3rem; }
  .about__contacts h3 { font-size: 1.3rem; }
  .about__img { position: relative; left: auto !important; top: auto !important; width: 100% !important; height: auto !important; margin-top: 4rem; }
  .about__img img { height: auto; }

  /* архив */
  .arch { padding: 6.6rem 1rem 6rem; }
  .arch__row { display: contents; }
  .arch__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; }
  .arch__item, .arch__row--big .arch__item, .arch__row--small .arch__item { width: auto; height: 24rem; }
  .arch__list { row-gap: 5.4rem; padding-top: 4rem; }
  .arch__item { cursor: pointer; }
  .arch__cap { display: grid; font-size: 1.2rem; row-gap: .6rem; bottom: calc(100% + .8rem); grid-template-columns: minmax(0, 1fr) auto; }
  .arch__cap p:first-child { white-space: normal; }
  .arch__year { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
  .arch__item:hover:not(.is-on) { outline-color: transparent; }
  .arch__item:hover:not(.is-on) .arch__cap { opacity: 0; } /* на таче — только по тапу */
  .arch__row > span { display: none; }

  .info { padding: 9rem 1rem 6rem; }
  .info__big { font-size: 2.2rem; }
  .info__big em { font-size: 2.8rem; }
  .info__cols { flex-direction: column; gap: 3rem; margin-top: 4rem; }

  .toast { top: auto; bottom: 7rem; left: 1rem; right: 1rem; justify-content: space-between; }
}
@media (min-width: 1024px) {
  .cart__top, .ctools__view { display: none; }
}

/* панель подбора (stand/) — только в каталоге и только на десктопе */
body:not([data-page="catalog"]) .st-gear, body:not([data-page="catalog"]) .st-panel { display: none !important; }
@media (max-width: 1023px) { .st-gear, .st-panel { display: none !important; } }

/* ===== мобилка: правки по ревью с телефона ===== */
@media (max-width: 1023px) {
  /* главная: фото на весь экран, под панели Safari; карточка — над нижней панелью */
  .home { top: calc(-1 * env(safe-area-inset-top)); bottom: auto; height: calc(100lvh + env(safe-area-inset-top) + env(safe-area-inset-bottom)); }
  .hcard, .hcard:hover { bottom: calc(100lvh - 100dvh + env(safe-area-inset-bottom) + 3.6rem); }
  /* миниатюра по центру меняется в маске, тем же движением, что и фон */
  .home__thumbs { width: 6rem; height: 7.5rem; overflow: hidden; }
  .home__thumb, .home__thumb.is-on { display: block; position: absolute; inset: 0; width: auto; height: auto; }
  .home__thumb:not(.is-on) { transform: translateY(100%); }
  .home__thumb img { opacity: 1 !important; }

  /* список: управляющая позиция сверху */
  .mslot__top { position: fixed; left: 0; right: 0; top: 5.6rem; z-index: 30; background: #fff; padding: 0 1rem; }
  .mslot__head, .mslot__row {
    display: grid; grid-template-columns: minmax(0, 1fr) 7rem 14rem; column-gap: 1rem;
    height: 3.45rem; padding-top: 1.1rem; font-size: 1.3rem; border-top: 1px solid var(--line);
  }
  /* без обрезки выносных: строка не режется по прописным, бокс в полную высоту */
  .mslot__head p, .mslot__row p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-box: none; line-height: 1.3; margin-top: -.3em; }
  .mslot__head p:nth-child(2), .mslot__row p:nth-child(2) { text-align: center; }
  .mslot__head p:nth-child(3), .mslot__row p:nth-child(3) { text-align: right; }
  .mslot__head { color: var(--blue); border-top-color: var(--blue); }
  .mslot__head .old { color: rgba(34, 85, 238, .45); }
  .mslot__head.is-tick p { animation: rowArrive .6s var(--in) both; }
  .mslot__gal { position: relative; height: 28rem; overflow: hidden; margin-bottom: 1rem; }
  .mslot__strip {
    position: absolute; inset: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    transition: transform .9s cubic-bezier(.7, 0, .2, 1), opacity .5s;
  }
  .mslot__strip.is-out { opacity: 0; }
  .mslot__strip::-webkit-scrollbar { display: none; }
  .mslot__strip a { flex: 0 0 82%; scroll-snap-align: center; }
  .mslot__strip a:first-child { margin-left: 9%; }
  .mslot__strip a:last-child { margin-right: 9%; }
  .mslot__strip img { width: 100%; height: 100%; object-fit: contain; }
  /* список не крутится нативно: шагает на строку; активная прячется ровно под позицией */
  .mslot { position: fixed; inset: 0; overflow: hidden; touch-action: none; }
  .mslot__gal { touch-action: pan-x; }
  .mslot__list {
    position: absolute; left: 1rem; right: 1rem; top: calc(5.6rem + 29rem);
    transform: translateY(calc(var(--k, 0) * -3.45rem)); transition: transform .55s var(--in);
  }
  .mslot__row.is-on { visibility: hidden; }

  /* модули: последняя одиночная узкая карточка — на всю строку, дыр нет */
  .cgrid__list { grid-auto-flow: row dense; } /* узкие карточки подтягиваются в пропуски перед широкими */
  /* соседи по строке делят дорожки (subgrid): название в 2 строки у одного — линия и фото у обоих на одной высоте */
  .cgrid__list { row-gap: 0; }
  .gcard { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .gcard__name { align-self: end; }
  .gcard__media { margin-bottom: 3rem; }
  .gcard--mfill { grid-column: 1 / -1; }

  /* товар: кнопка прилипает к низу, пока идут товары, и встаёт перед подвалом */
  .pinfo { display: flex; flex-direction: column; padding-bottom: 3rem; }
  .pinfo__main { display: contents; }
  .pother { order: 5; }
  .pinfo__cta { order: 10; position: sticky; left: auto; bottom: calc(1.6rem + env(safe-area-inset-bottom)); transform: none; align-self: center; margin-top: 3rem; }
  .pinfo__note { order: 11; text-align: center; }

  /* корзина: итог и кнопка всегда у нижнего края */
  .cart { display: flex; flex-direction: column; padding-bottom: 0; }
  .cform { display: contents; }
  .cform__bar { order: 99; position: sticky; bottom: 0; z-index: 5; background: #fff; margin: 3rem -1rem 0; padding: 1.4rem 1rem calc(1.4rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
  .cform__bar .cform__total { margin-top: 0; font-size: 2rem; }
  .cform__bar .btn { margin-top: 1.2rem; }
}