/* shrifty */

@font-face {
  font-family: "Onest";
  src: url("assets/fonts/onest-300-cyrillic-ext.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: "Onest";
  src: url("assets/fonts/onest-300-cyrillic.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Onest";
  src: url("assets/fonts/onest-300-latin-ext.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Onest";
  src: url("assets/fonts/onest-300-latin.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Onest";
  src: url("assets/fonts/onest-400-cyrillic-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: "Onest";
  src: url("assets/fonts/onest-400-cyrillic.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Onest";
  src: url("assets/fonts/onest-400-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Onest";
  src: url("assets/fonts/onest-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* /shrifty */
/* Bonet — «Свет становится формой». Все числа — из арт-направления Астры:
   biblioteka-promptov/30-sborka/ochki-salon/bonet-v2-artdirekciya.md (токены, сетка, раскадровка).
   Движение включается только при метке .motion-ok (скрипт жив и не выбрано «меньше движения»):
   без неё сайт — обычная статичная страница, где всё видно и работает. */

:root {
  --bumaga: #F3F0E8;
  --chernila: #20241F;
  --bronza: #73533F;
  --poverh-1: #E6E4DC;          /* чернила 6% поверх бумаги */
  --poverh-2: #DAD8D0;          /* чернила 12% поверх бумаги */
  --studiya: #E7E2D8;           /* тёплый фон предметной съёмки: главы 3D и линз, фон кадра линзы подогнан под него */
  --studiya-svet: #F8F5EF;      /* световое пятно за предметом */
  --chernila-75: rgba(32, 36, 31, .75);   /* подписи и пояснения: контраст 6,4 */
  --chernila-60: rgba(32, 36, 31, .6);    /* только декор: 4,0 — не для смыслового текста */
  --liniya: rgba(32, 36, 31, .16);

  --shrift: "Onest", "Segoe UI", system-ui, sans-serif;
  --h1: clamp(44px, 7.2222vw, 120px);
  --h2: clamp(36px, 4.4444vw, 80px);
  --h3: clamp(24px, 2.2222vw, 34px);
  --tekst: clamp(16px, 1.25vw, 18px);

  --krivaya: cubic-bezier(.22, 1, .36, 1);
  --pole: 64px;
  --zazor: 24px;
  --kolonka: calc((100vw - var(--pole) * 2 - var(--zazor) * 11) / 12);
  --shapka: 96px;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
}
@media (min-width: 1680px) { :root { --pole: 96px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bumaga); color: var(--chernila);
  font: 400 var(--tekst)/1.6 var(--shrift); overflow-x: clip;
}
img, video, canvas { display: block; max-width: 100%; }
img { height: auto; }   /* иначе атрибут height работает как высота и ломает aspect-ratio */
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3 { margin: 0; font-weight: 300; text-wrap: balance; hyphens: none; }
h1 { font-size: var(--h1); line-height: .95; letter-spacing: -.035em; }
h2 { font-size: var(--h2); line-height: 1; letter-spacing: -.025em; }
h3 { font-size: var(--h3); line-height: 1.1; letter-spacing: -.02em; font-weight: 400; }
p { margin: 0; max-width: 52ch; text-wrap: pretty; }
.stroka { display: block; white-space: nowrap; }   /* переносы заголовков заданы вручную */
.metka { font-size: 12px; line-height: 1.8; letter-spacing: .16em; text-transform: uppercase; color: var(--chernila-75); }
.podpis { font-size: 13px; line-height: 1.6; color: var(--chernila-75); }
.skrytyj { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--bronza); outline-offset: 3px; }
.pole { padding-inline: var(--pole); }
a[href^="tel:"] { white-space: nowrap; }

/* ——— Индикатор чтения: 2px, нативная анимация по прокрутке (CSS scroll-driven), без поддержки — скрипт ——— */
.indikator {
  position: fixed; inset: 0 0 auto 0; z-index: 40; height: 2px;
  background: var(--bronza); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .indikator { animation: indikator linear both; animation-timeline: scroll(root block); }
  @keyframes indikator { to { transform: scaleX(1); } }
}

/* ——— Шапка ——— */
.shapka {
  position: absolute; inset: 0 0 auto 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s5);
  height: var(--shapka); padding-inline: var(--pole);
}
.shapka--vnutr { position: sticky; top: 0; background: var(--bumaga); border-bottom: 1px solid var(--liniya); height: 72px; }
.logo { font-size: 24px; font-weight: 400; letter-spacing: -.01em; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.menyu { display: flex; align-items: center; gap: var(--s6); margin-left: auto; }
.menyu a { font-size: 16px; line-height: 1.25; text-decoration: none; min-height: 48px; display: inline-flex; align-items: center; position: relative; }
.menyu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 12px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--krivaya); }
.menyu a:hover::after, .menyu a[aria-current="page"]::after { transform: scaleX(1); }
.knopka-menyu { display: none; width: 44px; height: 44px; border: 0; background: none; padding: 10px; margin-left: auto; }
.knopka-menyu svg { width: 24px; height: 24px; }

/* ——— Кнопки: bronze с бумажным текстом без рамки; прозрачная с рамкой 1px (CTA-01, радиус 0) ——— */
.knopka {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s3);
  min-height: 56px; padding: 0 28px; border: 0; border-radius: 0;
  background: var(--bronza); color: var(--bumaga); font-size: 16px; line-height: 1.25; text-decoration: none; white-space: nowrap;
  transition: color 320ms var(--krivaya);
}
.knopka::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--chernila);
  transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--krivaya);
}
.knopka:hover::before { transform: scaleX(1); }
.knopka svg { width: 18px; height: 18px; transition: transform 520ms var(--krivaya); }
.knopka:hover svg { transform: translateX(6px); }
.knopka--kontur { background: transparent; color: var(--chernila); box-shadow: inset 0 0 0 1px var(--chernila); }
.knopka--kontur:hover { color: var(--bumaga); }
.poyasnenie { font-size: 13px; line-height: 1.6; color: var(--chernila-75); }
.deystvie { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; }
.ssylka { min-height: 44px; display: inline-flex; align-items: center; gap: var(--s2); text-underline-offset: 5px; text-decoration-thickness: 1px; }

/* ——— Подсказка прокрутки: конец каждой главы ——— */
.podskazka { display: inline-flex; align-items: center; gap: var(--s3); font-size: 13px; color: var(--chernila-75); }
.podskazka::before { content: ""; width: 1px; height: 32px; background: currentColor; transform-origin: top; }
.motion-ok .podskazka::before { animation: podskazka 1600ms var(--krivaya) 2 both; }
@keyframes podskazka { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: .4; } }

/* ——— Глава 1. Свет и оправа: кадры ролика во весь экран, текст в свободной нижней левой области ——— */
.glava1 { position: relative; }
.glava1__scena { position: relative; height: 100svh; min-height: 560px; overflow: hidden; }
.glava1__kadr, .glava1__holst { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.glava1__holst { opacity: 0; }
.film--risuet .glava1__holst { opacity: 1; }
.glava1__tekst { position: absolute; left: var(--pole); bottom: 0; width: calc(var(--kolonka) * 6 + var(--zazor) * 5); padding-bottom: 111px; z-index: 2; }
.glava1 h1 { margin-bottom: var(--s5); }
.glava1__pod { font-size: clamp(18px, 1.5vw, 22px); color: var(--chernila-75); margin-bottom: var(--s6); }
.glava1 .deystvie { flex-direction: column; align-items: flex-start; gap: var(--s3); }   /* пояснение под кнопкой: рядом с ней оно ложилось на волосы девушки */
.glava1 .podskazka { position: absolute; left: var(--pole); bottom: 40px; z-index: 2; }
.motion-ok .glava1 { height: 850svh; }   /* фильм из восьми сцен, около 320 кадров: около 4 с ролика на экран прокрутки */
/* Полоса трёх оправ из истории — под девушкой, на её тёмном топе (просьба владельца, 2026-09-30). Видна, когда
   на ней первая пара; подсвечена та, что сейчас на лице (классы ставит script.js по долям из data-pary) */
.glava1__pary { display: none; }
.motion-zhiv .glava1__pary { position: absolute; z-index: 2; left: 58%; bottom: 40px; translate: -50% 0; display: flex; gap: var(--s3);
  opacity: 0; visibility: hidden; filter: blur(14px); transform: translateY(16px);
  transition: opacity 900ms var(--krivaya), filter 900ms var(--krivaya), transform 900ms var(--krivaya), visibility 0s 900ms; }
.motion-zhiv .glava1--pary .glava1__pary { opacity: 1; visibility: visible; filter: none; transform: none; transition-delay: 0s; }
.glava1__pary li { width: 140px; }
.glava1__pary a { display: block; color: var(--bumaga); opacity: .5; transition: opacity 500ms var(--krivaya), transform 620ms var(--krivaya); }
.glava1__pary img { display: block; width: 100%; height: auto; }
.glava1__pary span { display: block; padding-top: var(--s2); font-size: 12px; line-height: 1.5; border-top: 1px solid transparent; margin-top: var(--s2); transition: border-color 320ms var(--krivaya); }
.glava1__pary .aktivna a { opacity: 1; transform: translateY(-4px); }
.glava1__pary .aktivna span { border-top-color: currentColor; }
.glava1__pary a:hover { opacity: 1; transform: translateY(-4px); }
.motion-ok .glava1__scena { position: sticky; top: 0; }

/* ——— Глава 2. Форма в деталях: живая 3D-оправа на поверхности 1 ——— */
/* световое пятно предметной съёмки за моделью; холст 3D прозрачный, фон рисует CSS — без тональной коррекции */
.glava2 { position: relative; background: var(--studiya); }
.glava2__scena { background: radial-gradient(ellipse 58% 70% at 64% 52%, var(--studiya-svet), var(--studiya)); }   /* пятно на прилипающей сцене, а не на длинной секции: не уезжает при прокрутке */
.glava2__scena { position: relative; min-height: 100svh; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--zazor); padding: 128px var(--pole) 96px; }
.glava2__tekst { grid-column: 1 / span 5; display: flex; flex-direction: column; }
.glava2__tekst h2 { margin-bottom: var(--s6); }
.glava2__tekst .poyasnenie-bolshoe { font-size: clamp(18px, 1.5vw, 22px); color: var(--chernila-75); max-width: 30ch; }
.glava2__niz { margin-top: auto; display: flex; flex-direction: column; gap: var(--s5); align-items: flex-start; padding-top: var(--s8); }
.glava2__vid { grid-column: 7 / span 6; position: relative; align-self: center; aspect-ratio: 756 / 520; }
.glava2__vid img, .glava2__vid canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.glava2__vid canvas { opacity: 0; transition: opacity 600ms var(--krivaya); }
/* Когда 3D готово, холст занимает всю сцену: модель крупная, заушникам есть куда раскрыться, текст поверх */
.oprava3d-gotova .glava2__vid {
  position: absolute; inset: 0; aspect-ratio: auto; margin: 0; z-index: 0;
  grid-column: auto; grid-row: auto; align-self: stretch;   /* иначе рамкой служит ячейка сетки с нулевой высотой */
}
.oprava3d-gotova .glava2__tekst, .oprava3d-gotova .glava2__tekst > * { position: relative; z-index: 1; }   /* на телефоне блок раскрыт в сетку (display: contents) — поднимаем каждый элемент */
.oprava3d-gotova .glava2__vid canvas { opacity: 1; }
.oprava3d-gotova .glava2__vid img { visibility: hidden; }
/* выноски деталей: точка на детали, волосная линия, подпись; --v — видимость по фазе разборки (ставит script.js) */
.vynoski { display: none; }
.oprava3d-gotova .vynoski { display: block; position: absolute; inset: 0; pointer-events: none; }
.vynoska { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: var(--v, 0); }
.vynoska::before { content: ""; position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--bronza); }
.vynoska::after { content: ""; position: absolute; left: 0; bottom: 0; width: 1px; height: 56px; background: var(--chernila); opacity: 0.45;
  transform-origin: 50% 100%; transform: scaleY(var(--v, 0)); }
.vynoska > span { position: absolute; left: 0; bottom: 64px; font-size: 13px; line-height: 1.3; white-space: nowrap; color: var(--chernila); }
.vynoska--niz::after { bottom: auto; top: 0; transform-origin: 50% 0; }
.vynoska--niz > span { bottom: auto; top: 64px; }
.vynoska--vlevo > span { left: auto; right: 0; }
.motion-ok .glava2 { height: 200svh; }   /* 240 давали пустую прокрутку (ревью Астры) */
.motion-ok .glava2__scena { position: sticky; top: 0; height: 100svh; }

/* ——— Глава 3. Коллекция: асимметричный разворот на бумаге ——— */
.glava3 { padding: 96px var(--pole) 128px; }
.glava3 h2 { margin-bottom: 80px; }   /* фото коллекции начинаются на y = 240 (ревью Астры) */
.razvorot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--zazor); row-gap: var(--s8); }
.tovar { display: flex; flex-direction: column; gap: var(--s4); text-decoration: none; transition: transform 620ms var(--krivaya); }
.tovar:hover { transform: translateY(-6px); }
.tovar__foto { position: relative; overflow: hidden; background: var(--poverh-1); }
.tovar__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--krivaya); }
.tovar__foto img.parallaks { position: absolute; inset: -20px 0; height: calc(100% + 40px); }   /* запас под ход параллакса */
.tovar:hover .tovar__foto img { transform: scale(1.025); }
.tovar__imya { font-size: var(--h3); line-height: 1.1; letter-spacing: -.02em; }
.tovar--vedushchij { grid-column: 1 / span 6; grid-row: 1 / span 2; }
.tovar--vedushchij .tovar__foto { aspect-ratio: 644 / 805; }
.tovar--malyj-1 { grid-column: 7 / span 3; }
.tovar--malyj-2 { grid-column: 10 / span 3; }
.tovar--malyj-1 .tovar__foto, .tovar--malyj-2 .tovar__foto { aspect-ratio: 310 / 388; }
.tovar--shirokij { grid-column: 7 / span 6; }
.tovar--shirokij .tovar__foto { aspect-ratio: 644 / 483; }
.tovar--makro { grid-column: 1 / span 6; margin: 0; display: flex; flex-direction: column; gap: var(--s4); }
.tovar--makro .tovar__foto { aspect-ratio: 644 / 483; }
.glava3__niz { grid-column: 8 / span 5; align-self: end; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s6); }
.glava3__niz h3 { white-space: nowrap; }   /* две строки почти равной длины, перенос задан вручную (BRK-03, BRK-04) */
.parallaks { will-change: auto; }

/* ——— Глава 4. Линзы и зрение: схема слева, три строки справа, поверхность 2 ——— */
.glava4 { background: var(--studiya); padding: 104px var(--pole) 96px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--zazor); }
.glava4 h2 { grid-column: 1 / span 6; margin-bottom: var(--s8); }
.shema { grid-column: 1 / span 5; }
/* кадр линзы под векторной схемой: стекло — фотография, лучи — Lottie поверх (ревью Астры) */
/* кадр линзы: фон подогнан под фон главы, края растушёваны — стекло без рамки-квадрата (IMG-04); лучи — Lottie поверх */
.shema__holst { position: relative; width: min(100%, clamp(420px, 36vw, 720px)); aspect-ratio: 1; }
.shema__holst::before { content: ""; position: absolute; inset: 0; background: url("assets/img/linza-sechenie.webp") center / cover no-repeat;
  -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent); mask-image: radial-gradient(closest-side, #000 70%, transparent); }
.shema__holst > * { position: relative; }
.shema__holst svg { display: block; }
.shema .podpis { margin-top: var(--s4); }
.shema .pripiska { margin-top: var(--s5); font-size: 13px; color: var(--chernila-75); max-width: 44ch; }
.uslugi { grid-column: 7 / span 6; align-self: center; list-style: none; margin: 0; padding: 0; }   /* по центру схемы: на широких экранах под списком не остаётся пустоты */
.uslugi li { display: grid; grid-template-columns: var(--ikonka, 48px) minmax(0, 1fr); gap: var(--s5); align-items: start; min-height: 156px; padding-block: var(--s6); border-top: 1px solid var(--liniya); }
.uslugi li:last-child { border-bottom: 1px solid var(--liniya); }
.uslugi__ikonka { width: var(--ikonka, 48px); height: var(--ikonka, 48px); }
.uslugi h3 { margin-bottom: var(--s2); }
.uslugi p { color: var(--chernila-75); }
.glava4 .podskazka { grid-column: 7 / span 6; margin-top: var(--s7); }
/* широкие экраны: схема растёт до 720 px, список услуг растёт вместе с ней, иначе глава выглядит разреженной (ревью Астры) */
@media (min-width: 1680px) {
  .uslugi { --ikonka: 64px; }
  .uslugi li { min-height: 200px; }
  .uslugi h3 { font-size: clamp(34px, 1.9vw, 48px); }
  .uslugi p { font-size: clamp(17px, 0.85vw, 21px); }
}

/* ——— Глава 5. В салоне Bonet: настоящая фотография и финал ——— */
.glava5 { display: grid; grid-template-columns: minmax(0, 708fr) minmax(0, 732fr); min-height: 100svh; }
.glava5__foto { position: relative; overflow: hidden; min-height: 900px; }
.glava5__foto img { position: absolute; inset: -20px 0; width: 100%; height: calc(100% + 40px); object-fit: cover; }
.glava5__tekst { padding: 144px var(--pole) 40px 88px; display: flex; flex-direction: column; justify-content: flex-end; }   /* текст в нижней трети над подвалом (CMP-02, схема C): на широких экранах между кнопкой и подвалом не остаётся провала */
.glava5__tekst h2 { margin-bottom: var(--s8); }
.adres { font-size: var(--h3); line-height: 1.25; letter-spacing: -.01em; font-weight: 300; margin-bottom: var(--s6); }
.telefony { list-style: none; margin: 0 0 var(--s7); padding: 0; font-size: 20px; }
.telefony a { text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.telefony a:hover { text-decoration: underline; text-underline-offset: 5px; }
.podval { margin-top: clamp(64px, 9vh, 144px); padding-top: var(--s6); border-top: 1px solid var(--liniya); display: grid; grid-template-columns: auto 1fr auto; gap: var(--s5); align-items: center; }
.podval__logo { width: 180px; height: 48px; }
.podval__logo svg { display: block; }
.podval__pravo { font-size: 13px; color: var(--chernila-75); }

/* ——— Коллекция: страница ——— */
.stranica { padding: 128px var(--pole) 128px; }
.stranica h1 { font-size: var(--h2); line-height: 1; margin-bottom: var(--s5); }
.stranica__vvod { color: var(--chernila-75); margin-bottom: var(--s8); }
.filtry { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); align-items: center; padding-bottom: var(--s6); margin-bottom: var(--s8); border-bottom: 1px solid var(--liniya); }
.filtry__gruppa { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.filtry__gruppa .metka { margin-right: var(--s2); }
.fishka { min-height: 44px; padding: 0 18px; border: 0; border-radius: 0; background: transparent; box-shadow: inset 0 0 0 1px var(--liniya); font-size: 15px; transition: background-color 320ms var(--krivaya), color 320ms var(--krivaya); }
.fishka:hover { box-shadow: inset 0 0 0 1px var(--chernila); }
.fishka[aria-pressed="true"] { background: var(--chernila); color: var(--bumaga); box-shadow: none; }
.sbros { min-height: 44px; border: 0; background: none; text-decoration: underline; text-underline-offset: 5px; }
.setka { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--zazor); row-gap: var(--s8); }
.setka .tovar__foto { aspect-ratio: 4 / 5; }
.setka .tovar__foto img + img { position: absolute; inset: 0; opacity: 0; transition: opacity 700ms var(--krivaya), transform 800ms var(--krivaya); }
.setka .tovar:hover .tovar__foto img + img { opacity: 1; }
.pusto { padding-block: var(--s8); color: var(--chernila-75); }
.obrazec { font-size: 13px; color: var(--chernila-75); margin-top: var(--s8); }
html.js:not(.filtry-gotovy) .filtry { visibility: hidden; }   /* место занято, пока скрипт не оживил фильтры */
html:not(.js) .filtry { display: none; }
.motion-ok:not(.motion-zhiv) .poyav { animation: poyavit-bez-skripta 0s 2.5s forwards; }
@keyframes poyavit-bez-skripta { to { opacity: 1; transform: none; filter: none; } }

/* ——— Страница оправы ——— */
.kroshki { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; padding: var(--s5) var(--pole) 0; font-size: 13px; color: var(--chernila-75); }
.kroshki a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; text-decoration: none; }
.kroshki a:hover { text-decoration: underline; }
.oprava { display: grid; grid-template-columns: minmax(0, 755fr) minmax(0, 533fr); gap: var(--zazor); padding: var(--s6) var(--pole) 128px; align-items: start; }
.galereya { display: grid; gap: var(--zazor); }
.galereya img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 46%; background: var(--poverh-1); }   /* горизонтально: оправа в первом экране, а не бумага */
.galereya img.kvadrat { aspect-ratio: 1; }
.opisanie { position: sticky; top: 104px; display: flex; flex-direction: column; gap: var(--s5); }
.opisanie h1 { font-size: var(--h2); line-height: 1; }
.harakteristiki { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s2) var(--s5); margin: 0; padding-top: var(--s5); border-top: 1px solid var(--liniya); }
.harakteristiki dt { color: var(--chernila-75); }
.harakteristiki dd { margin: 0; }

/* ——— Появления: лесенка с размытием (MOT-01, MOT-02), только при движении ——— */
.motion-ok .poyav { opacity: 0; transform: translateY(28px); filter: blur(14px); }
.motion-ok .poyav.vidno {
  opacity: 1; transform: none; filter: blur(0);
  transition: opacity 900ms var(--krivaya) var(--d, 0ms), transform 900ms var(--krivaya) var(--d, 0ms), filter 900ms var(--krivaya) var(--d, 0ms);
}
.motion-ok .poyav.gotovo { filter: none; transition: none; }

/* ——— Телефон 390: 4 колонки, поля 24, зазор 12 ——— */
@media (max-width: 760px) {
  :root { --pole: 24px; --zazor: 12px; --shapka: 72px; --kolonka: calc((100vw - 48px - 36px) / 4); }
  .menyu { display: none; }
  .js .knopka-menyu { display: inline-flex; }
  html:not(.js) .menyu { display: flex; gap: var(--s4); flex-wrap: wrap; }
  .shapka { flex-wrap: wrap; }
  .shapka.otkryto .menyu { display: flex; position: fixed; inset: 72px 0 0 0; z-index: 30; background: var(--bumaga); flex-direction: column; align-items: flex-start; padding: var(--s6) var(--pole); gap: var(--s3); }
  .shapka.otkryto .menyu a { font-size: 32px; font-weight: 300; }
  .knopka { min-height: 52px; }

  .glava1__scena { background: #F9F3EE; }   /* цвет фона кадров ролика: полосы над и под кадром сливаются */
  .glava1__kadr { object-position: 50% 50%; }   /* кадры телефона сложены под экран: поля и наезд — при сборке */
  .glava1__tekst { width: auto; right: var(--pole); padding-bottom: 88px; }
  .glava1 .deystvie .knopka { width: 100%; }
  .glava1 .podskazka { bottom: 24px; }
  .motion-ok .glava1 { height: 760svh; }
  /* полоса оправ — над кнопкой, на месте ушедшего заголовка; высоту блока кнопки меряет script.js */
  .motion-zhiv .glava1__pary { left: var(--pole); right: var(--pole); bottom: var(--niz-par, 200px); translate: none; justify-content: space-between; gap: var(--s2); }
  .glava1__pary li { width: auto; flex: 1 1 0; }
  /* девушка входит в кадр — внизу её тёмный топ: текст первого экрана светлеет (класс ставит script.js по доле прокрутки) */
  .glava1__tekst, .glava1 .podskazka, .glava1__pod, .glava1 .poyasnenie { transition: color 600ms var(--krivaya); }
  .glava1--svetlo .glava1__tekst, .glava1--svetlo .podskazka { color: var(--bumaga); }
  .glava1--svetlo .glava1__pod, .glava1--svetlo .poyasnenie { color: rgba(243, 240, 232, .82); }
  /* девушка входит в кадр — заголовок и подзаголовок уходят, кнопка остаётся (HERO-02) */
  /* сильнее правил появления (.motion-ok .poyav.vidno / .gotovo), иначе уже появившийся заголовок не уходил */
  .glava1 h1.poyav.gotovo, .glava1 .glava1__pod.poyav.gotovo { transition: opacity 600ms var(--krivaya), transform 600ms var(--krivaya); }
  .glava1.glava1--bez-zagolovka h1.poyav, .glava1.glava1--bez-zagolovka .glava1__pod.poyav { opacity: 0; transform: translateY(-12px); }

  .glava2__scena { grid-template-columns: minmax(0, 1fr); padding: 104px var(--pole) 40px; }
  .glava2__tekst, .glava2__vid { grid-column: 1; }
  .glava2__tekst { display: contents; }
  .glava2__tekst h2 { order: 1; margin-bottom: var(--s4); }
  .glava2__vid { order: 2; margin-inline: calc(-1 * var(--pole)); aspect-ratio: 390 / 344; }
  .glava2__tekst .poyasnenie-bolshoe { order: 3; margin-top: var(--s4); font-size: 16px; }
  .glava2__niz { order: 4; padding-top: var(--s5); margin-top: 0; }
  .motion-ok .glava2 { height: 180svh; }
  .glava2__scena { background: radial-gradient(ellipse 90% 40% at 50% 44%, var(--studiya-svet), var(--studiya)); }
  .vynoska > span { font-size: 12px; }
  .vynoska::after { height: 40px; }
  .vynoska > span { bottom: 46px; }
  .vynoska--niz > span { bottom: auto; top: 46px; }
  /* с живой моделью — три яруса: заголовок сверху, модель в середине (холст на всю сцену), описание и действие внизу */
  .oprava3d-gotova .glava2__scena { display: flex; flex-direction: column; }
  .oprava3d-gotova .glava2__tekst h2 { margin-bottom: auto; }
  .oprava3d-gotova .glava2__tekst .poyasnenie-bolshoe { margin-top: 0; }

  .glava3 { padding: 80px var(--pole) 96px; }
  .glava3 h2 { margin-bottom: var(--s7); }
  .razvorot { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--zazor); row-gap: var(--s7); }
  .tovar--vedushchij, .tovar--shirokij { grid-column: 1 / -1; grid-row: auto; }
  .tovar--malyj-1 { grid-column: 1; }
  .tovar--malyj-2 { grid-column: 2; }
  .tovar--malyj-1 .tovar__imya, .tovar--malyj-2 .tovar__imya { font-size: 20px; }
  .tovar--makro, .glava3__niz { grid-column: 1 / -1; }

  .glava4 { grid-template-columns: minmax(0, 1fr); padding: 80px var(--pole) 80px; }
  .glava4 h2, .shema, .uslugi, .glava4 .podskazka { grid-column: 1; }
  .glava4 h2 { margin-bottom: var(--s6); }
  .uslugi { margin-top: var(--s6); }
  .uslugi li { min-height: 140px; }

  .glava5 { grid-template-columns: minmax(0, 1fr); }
  .glava5__foto { min-height: 0; aspect-ratio: 390 / 292; }
  .glava5__tekst { padding: 48px var(--pole) 32px; }
  .podval { grid-template-columns: minmax(0, 1fr); }

  .stranica { padding: 112px var(--pole) 96px; }
  .setka { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s6); }
  .oprava { grid-template-columns: minmax(0, 1fr); padding: var(--s4) 0 96px; }
  .oprava .galereya { grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0; }
  .oprava .galereya img { scroll-snap-align: start; aspect-ratio: 1; }
  .filtry { flex-direction: column; align-items: stretch; gap: var(--s3); }
  .filtry__gruppa { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--pole)); padding-inline: var(--pole); scrollbar-width: none; }
  .filtry__gruppa .fishka { flex: none; }
  .sbros { align-self: flex-start; }
  .opisanie { position: static; padding-inline: var(--pole); }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .setka { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .glava5__tekst { padding-left: var(--pole); }
}
@media (hover: none) {
  .tovar:hover { transform: none; }
  .tovar:hover .tovar__foto img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation: none !important; }
}