/* «Көз» — салон оптики (12.11.2026). Пастель, воздух, «оптическая лаборатория»:
   Spectral (тонкая антиква для заголовков и текста) + Martian Mono (рецептурные подписи, цены, кнопки). */
:root {
  --milk: #f7f3ef; --lilac: #ebe4f6; --sky: #e0e9f6; --peach: #f8e4d9; --rose: #f6dfe8; --mint: #dff0e7; --butter: #f3ecd0; --sand: #efe7dc;
  --ink: #23213f; --ink2: #5d5a78; --ink3: #9a97b0;
  --bg: var(--milk); --fg: var(--ink); --muted: var(--ink2); --line: rgba(35, 33, 63, .12); --soft: #efeaf4;
  --accent: var(--ink); --accent-ink: #fff; --sale: #c4405e; --ok: #2d7a5a; --card-bg: var(--lilac);
  --radius: 24px; --radius-btn: 999px; --wrap: 1400px; --pad: 40px; --gap: 22px; --hdr: 76px;
  --font-body: 'Martian Mono', ui-monospace, Menlo, monospace; --font-head: 'Spectral', Georgia, serif;
  --step--1: 11px; --step-0: 12.5px; --step-1: 14px; --step-2: 24px; --step-3: clamp(30px, 3.4vw, 46px); --step-4: clamp(46px, 6.4vw, 96px);
  --iri: linear-gradient(115deg, #e7d9ff 0%, #cfe6ff 32%, #d6f3e6 62%, #ffe0d2 90%);
  --ease: cubic-bezier(.2, .7, .2, 1); --ease2: cubic-bezier(.65, 0, .2, 1);
}
html { background: var(--milk); scroll-padding-top: calc(var(--hdr) + 70px); }
body { font: 400 var(--step-0)/1.65 var(--font-body); letter-spacing: -.01em; }
main { padding-top: var(--hdr); }
h1, h2, h3 { font-weight: 300; letter-spacing: -.025em; }
em { font-family: var(--font-head); font-style: italic; }
::selection { background: #d9ccf6; }
:focus-visible { outline: 2px solid #8b74d6; outline-offset: 3px; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--pad)); }

/* ——— текст ——— */
.kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font: 400 10.5px/1.4 var(--font-body); text-transform: uppercase; letter-spacing: .14em; color: var(--ink2); }
.dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--iri); box-shadow: 0 0 0 4px rgba(207, 230, 255, .55), inset 0 0 0 1px rgba(35, 33, 63, .15); }
.lead { font: 300 clamp(18px, 1.45vw, 22px)/1.45 var(--font-head); color: var(--ink2); max-width: 36ch; letter-spacing: 0; }
.sec-h { font: 200 clamp(42px, 5vw, 78px)/.98 var(--font-head); letter-spacing: -.045em; margin: 0 0 22px; }
.sec-h em, .h-hero em, .page-h em, .pd__h em { font-weight: 200; }
.page-h { font: 200 clamp(50px, 7vw, 112px)/.92 var(--font-head); letter-spacing: -.05em; margin: 0 0 24px; }
.page-title { font: 200 var(--step-4)/.95 var(--font-head); letter-spacing: -.045em; margin: 8px 0 30px; }
.link { font: 400 10.5px/1 var(--font-body); text-transform: uppercase; letter-spacing: .1em; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.small { font-size: 11px; }
.nums__note, .looks__note { font: 400 10px/1.5 var(--font-body); color: var(--ink3); margin: 18px 0 0; }

/* ——— кнопки: при наведении «покрытие линзы» переливается ——— */
.btn { position: relative; isolation: isolate; overflow: hidden; min-height: 50px; padding: 0 28px; font: 400 11px/1 var(--font-body); text-transform: uppercase; letter-spacing: .1em; border-radius: 999px; transition: color .35s, border-color .35s, transform .45s var(--ease); }
.btn::after { content: ''; position: absolute; inset: -2px; z-index: -1; border-radius: inherit; background: var(--iri); opacity: 0; transform: scale(.35); transition: opacity .45s var(--ease), transform .55s var(--ease); }
.btn:hover { filter: none; color: var(--ink); border-color: transparent; }
.btn:hover::after { opacity: 1; transform: scale(1); }
.btn--ghost { border-color: rgba(35, 33, 63, .28); }
.btn--ghost:hover { background: transparent; color: var(--ink); }
.btn--lg { min-height: 58px; padding: 0 34px; font-size: 11.5px; }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.chip { min-height: 38px; padding: 0 16px; border-radius: 999px; border-color: var(--line); background: transparent; font: 400 10.5px/1 var(--font-body); text-transform: uppercase; letter-spacing: .08em; transition: background .3s, color .3s, border-color .3s; }
.chip:hover { border-color: var(--ink); }
.chip.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip-r span { min-height: 42px; padding: 0 18px; border-radius: 999px; border-color: var(--line); background: rgba(255, 255, 255, .5); font: 400 11px/1.2 var(--font-body); transition: background .3s, color .3s, border-color .3s; }
.chip-r input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip-r:hover span { border-color: var(--ink); }

/* ——— прелоадер: наводка на резкость и раскрытие диафрагмы ——— */
@property --iris { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.pre { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: radial-gradient(110% 80% at 50% 42%, #efe8f8 0%, var(--milk) 62%); animation: pre-auto .45s ease 2.05s forwards; cursor: pointer; }
.pre-off .pre { display: none; }
.pre__in { display: grid; justify-items: center; gap: 14px; }
.pre__logo { display: flex; align-items: center; font: 200 clamp(110px, 17vw, 220px)/1 var(--font-head); letter-spacing: -.04em; color: var(--ink); animation: pre-focus 1s cubic-bezier(.3, .7, .2, 1) both; }
.pre__o { width: .72em; height: .72em; margin: .08em .02em 0; }
.pre__o .o-bar { transform-origin: 20px 21px; animation: pre-bar 1s var(--ease2) both; }
.pre__d { margin: 0; font: 400 15px/1 var(--font-body); color: var(--ink); font-variant-numeric: tabular-nums; }
.pre__d b { font-weight: 500; }
.pre__t { margin: 0; font: 400 10px/1 var(--font-body); text-transform: uppercase; letter-spacing: .2em; color: var(--ink3); }
.pre.is-out { animation: pre-iris .42s var(--ease2) forwards; -webkit-mask: radial-gradient(circle at 50% 46%, transparent var(--iris), #000 calc(var(--iris) + .6%)); mask: radial-gradient(circle at 50% 46%, transparent var(--iris), #000 calc(var(--iris) + .6%)); }
@keyframes pre-focus { 0% { filter: blur(26px); transform: scale(1.14); opacity: .2; } 45% { filter: blur(2px); transform: scale(.985); opacity: 1; } 62% { filter: blur(7px); } 82% { filter: blur(.6px); } 100% { filter: blur(0); transform: none; opacity: 1; } }
@keyframes pre-bar { from { transform: rotate(-90deg) scaleX(.2); } to { transform: none; } }
@keyframes pre-iris { from { --iris: 0%; } 80% { opacity: 1; } to { --iris: 80%; opacity: 0; visibility: hidden; } }
@keyframes pre-auto { to { opacity: 0; visibility: hidden; } }

/* ——— шапка ——— */
.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--hdr); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 0 var(--pad); transition: background .45s, box-shadow .45s, backdrop-filter .45s; view-transition-name: hdr; }
.hdr.is-scrolled { background: rgba(247, 243, 239, .74); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); box-shadow: 0 1px 0 var(--line); }
.hdr__nav { display: flex; gap: clamp(14px, 1.8vw, 30px); }
.hdr__nav a, .hdr__cta, .hdr__cart { font: 400 10.5px/1 var(--font-body); text-transform: uppercase; letter-spacing: .1em; text-decoration: none; }
.hdr__nav a { position: relative; padding: 8px 0; }
.hdr__nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.hdr__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.logo, .foot__logo, .mmenu__brand { display: inline-flex; align-items: center; font: 300 42px/1 var(--font-head); letter-spacing: -.04em; text-decoration: none; color: var(--ink); }
.logo { grid-column: 2; }
.logo__o, .foot__logo__o { width: .72em; height: .72em; margin: .1em .015em 0; overflow: visible; }
.logo .o-bar, .foot__logo .o-bar { transform-origin: 20px 21px; transition: transform .7s var(--ease); }
.logo:hover .o-bar { transform: rotate(180deg); }
.logo .o-fill { transition: opacity .4s; opacity: .9; }
.hdr__tools { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 6px; }
.hdr__cta { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; margin-right: 8px; border-radius: 999px; background: var(--iri); box-shadow: inset 0 0 0 1px rgba(35, 33, 63, .14); transition: transform .45s var(--ease), box-shadow .3s; }
.hdr__cta:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.hdr__ic { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; transition: background .3s; }
.hdr__ic:hover { background: rgba(35, 33, 63, .06); }
.hdr__ic svg, .hdr__menu svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.hdr__ic b, .hdr__cart b { position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--ink); color: #fff; font: 500 9.5px/17px var(--font-body); text-align: center; }
.hdr__cart { position: relative; display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; background: var(--ink); color: #fff; margin-left: 4px; }
.hdr__cart b { position: static; margin-left: 10px; background: #fff; color: var(--ink); }
.hdr__menu { display: none; align-items: center; gap: 10px; height: 44px; padding: 0 4px; border: 0; background: none; font: 400 10.5px/1 var(--font-body); text-transform: uppercase; letter-spacing: .1em; }
.hdr__menu svg { width: 32px; height: 20px; }

/* меню на телефоне — полноэкранное, пастельное */
.mmenu { width: 100%; background: var(--lilac); transform: translateY(-102%); transition: transform .6s var(--ease2); }
.mmenu.is-open { transform: none; }
.mmenu__top { border: 0; padding: 14px var(--pad); }
.mmenu__brand { font-size: 36px; }
.mmenu__search { padding: 6px var(--pad) 0; }
.mmenu__search input { height: 50px; border-radius: 999px; border: 1px solid rgba(35, 33, 63, .2); background: rgba(255, 255, 255, .6); font: 400 12px var(--font-body); padding: 0 20px; }
.mmenu nav { padding: 18px var(--pad); counter-reset: m; }
.mmenu nav a { display: flex; align-items: baseline; gap: 14px; font: 300 clamp(30px, 8vw, 46px)/1.1 var(--font-head); letter-spacing: -.03em; border-color: rgba(35, 33, 63, .14); padding: 12px 0; opacity: 0; transform: translateY(18px); transition: opacity .5s, transform .6s var(--ease); }
.mmenu nav a::before { counter-increment: m; content: '0' counter(m); font: 400 10px var(--font-body); color: var(--ink3); }
.mmenu.is-open nav a { opacity: 1; transform: none; }
.mmenu.is-open nav a:nth-child(2) { transition-delay: .05s; } .mmenu.is-open nav a:nth-child(3) { transition-delay: .1s; } .mmenu.is-open nav a:nth-child(4) { transition-delay: .15s; } .mmenu.is-open nav a:nth-child(5) { transition-delay: .2s; } .mmenu.is-open nav a:nth-child(6) { transition-delay: .25s; } .mmenu.is-open nav a:nth-child(n+7) { transition-delay: .3s; }
.mmenu__contacts { padding: 8px var(--pad) 30px; font: 400 11px/1.7 var(--font-body); }

/* ——— курсор-линза ——— */
.cursor { position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none; display: none; }
.is-fine .cursor { display: block; }
.cursor__ring { position: absolute; left: 0; top: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 1.5px solid var(--ink); opacity: 0; transition: width .4s var(--ease), height .4s var(--ease), margin .4s var(--ease), opacity .3s, background .3s, border-color .3s; }
.cursor.is-on .cursor__ring { opacity: .5; }
.cursor.is-link .cursor__ring { width: 54px; height: 54px; margin: -27px 0 0 -27px; border-color: transparent; background: rgba(199, 220, 255, .38); opacity: 1; }
.cursor.is-view .cursor__ring { width: 92px; height: 92px; margin: -46px 0 0 -46px; border: 0; background: var(--iri); opacity: .94; display: grid; place-items: center; }
.cursor.is-view .cursor__ring::after { content: 'смотреть'; font: 400 9.5px/1 var(--font-body); text-transform: uppercase; letter-spacing: .14em; color: var(--ink); }
.cursor.is-hide .cursor__ring, .cursor.is-loupe .cursor__ring { opacity: 0; }
.cursor__lens { position: absolute; left: 0; top: 0; width: 190px; height: 190px; border-radius: 50%; overflow: hidden; opacity: 0; transition: opacity .25s; box-shadow: 0 24px 60px rgba(35, 33, 63, .22), 0 0 0 1px rgba(35, 33, 63, .14); }
.cursor.is-loupe .cursor__lens { opacity: 1; }
.cursor__lens img { position: absolute; left: 0; top: 0; max-width: none; }
.cursor__lens::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .55), transparent 36%), radial-gradient(circle at 72% 80%, rgba(184, 240, 220, .3), transparent 42%); box-shadow: inset 0 0 0 7px rgba(255, 255, 255, .45), inset 0 0 0 8px rgba(35, 33, 63, .12); }
.is-fine [data-loupe], .is-fine [data-stage] { cursor: none; }

/* ——— подвал: таблица для проверки зрения ——— */
.foot { margin-top: 120px; padding: 90px var(--pad) 0; background: linear-gradient(180deg, var(--milk), #f1ebf6 70%); border-top: 1px solid var(--line); text-align: center; }
.foot__chart { max-width: 1180px; margin: 0 auto; display: grid; gap: 24px; }
.foot__row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 96px; align-items: center; gap: 18px; }
.foot__row > :nth-child(2) { justify-self: center; }
.foot__lbl { font: 400 9.5px/1 var(--font-body); color: var(--ink3); text-align: left; white-space: nowrap; }
.foot__lbl:last-child { text-align: right; }
.foot__logo { font-size: clamp(120px, 19vw, 270px); font-weight: 200; line-height: .85; letter-spacing: -.05em; }
.foot__row nav, .foot__row p { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 1.1em; margin: 0; }
.foot__row a { text-decoration: none; }
.foot__row a:hover { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.foot__row--2 nav { font: 300 clamp(26px, 2.7vw, 40px)/1.1 var(--font-head); letter-spacing: -.03em; }
.foot__row--3 nav { font: 300 clamp(19px, 1.9vw, 26px)/1.2 var(--font-head); }
.foot__row--4 p { font: 400 13px/1.4 var(--font-body); }
.foot__row--5 p { font: 400 11px/1.4 var(--font-body); color: var(--ink2); }
.foot__row--6 { grid-template-columns: 1fr; padding: 20px 0 12px; border-top: 1px solid var(--line); }
.foot__row--6 p { font: 400 10px/1.5 var(--font-body); color: var(--ink2); gap: 4px 2em; }
.foot__duo { display: grid; grid-template-columns: 1fr 1fr; height: 12px; margin: 0 calc(-1 * var(--pad)); }
.foot__duo i:first-child { background: #f6c9cf; } .foot__duo i:last-child { background: #cfeedd; }

/* ——— главная: разделённый экран ——— */
.split { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); }
.split__stage { position: relative; }
.stage { position: sticky; top: calc(var(--hdr) + 4px); height: calc(100svh - var(--hdr) - 20px); margin-left: 16px; border-radius: 30px; overflow: hidden; background: linear-gradient(135deg, #ece4f7, #f4eef3 55%, #f9e4d9); box-shadow: inset 0 0 0 1px rgba(35, 33, 63, .06); touch-action: pan-y; }
.stage__cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage__fb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .6s; }
.stage.is-live .stage__fb { opacity: 0; }
.stage__hint, .stage__read { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 999px; background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 400 10px/1 var(--font-body); text-transform: uppercase; letter-spacing: .12em; color: var(--ink); box-shadow: 0 6px 24px rgba(35, 33, 63, .08); }
.stage__hint { left: 18px; bottom: 18px; transition: opacity .6s, transform .6s var(--ease); }
.stage__hint i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--ink); animation: hint-pulse 1.8s ease-in-out infinite; }
.stage__hint.is-gone { opacity: 0; transform: translateY(8px); }
.stage__read { right: 18px; top: 18px; min-width: 64px; justify-content: center; font-variant-numeric: tabular-nums; }
.is-touch .stage__hint { display: none; }
@keyframes hint-pulse { 50% { transform: scale(1.6); opacity: .3; } }
.split__text { padding: 0 var(--pad) 0 clamp(36px, 6vw, 110px); }
.chap { max-width: 590px; min-height: 70svh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 70px 0; }
.chap--hero { min-height: calc(100svh - var(--hdr)); padding: 30px 0 60px; }
.h-hero { font: 200 clamp(70px, 8.8vw, 156px)/.9 var(--font-head); letter-spacing: -.055em; margin: 0 0 26px; }
.h-hero em { display: inline-block; padding-right: .06em; }
.cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 0; }
.hero__note { display: flex; align-items: flex-start; gap: 12px; margin: 34px 0 0; max-width: 40ch; font: 400 10.5px/1.6 var(--font-body); color: var(--ink2); }
.hero__note svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; margin-top: 1px; }
.is-fine .only-touch, .is-touch .only-fine { display: none; }
.chap__n { margin: 0 0 4px; font: 200 clamp(70px, 7vw, 120px)/1 var(--font-head); color: transparent; -webkit-text-stroke: 1px var(--ink3); letter-spacing: -.04em; }
.chap__t { font: 200 clamp(46px, 5.2vw, 84px)/.98 var(--font-head); letter-spacing: -.045em; margin: 0 0 20px; }
.chap__p { font: 300 clamp(18px, 1.45vw, 21px)/1.5 var(--font-head); color: var(--ink2); max-width: 32ch; margin: 0 0 26px; }
.chap__a { display: inline-flex; align-items: center; gap: 16px; padding: 12px 0; text-decoration: none; border-bottom: 1px solid var(--line); font: 400 10.5px/1.3 var(--font-body); text-transform: uppercase; letter-spacing: .1em; transition: border-color .3s, gap .4s var(--ease); }
.chap__a:hover { border-color: var(--ink); gap: 22px; }
.chap__a .shape-ico { width: 52px; height: 24px; flex: none; }
.chap__a > svg:not(.shape-ico) { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; }
.chap__a > svg:first-child:not(.shape-ico) { width: 34px; }
.tints { list-style: none; padding: 0; margin: 10px 0 26px; display: grid; gap: 10px; width: 100%; }
.tints button { position: relative; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 16px 20px 16px 24px; text-align: left; border: 1px solid var(--line); border-radius: 20px; background: rgba(255, 255, 255, .35); transition: background .4s, box-shadow .4s, border-color .4s; overflow: hidden; }
.tints button::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--iri); transform: scaleY(0); transition: transform .5s var(--ease); }
.tints button[aria-pressed="true"] { background: #fff; border-color: transparent; box-shadow: 0 18px 50px rgba(35, 33, 63, .08); }
.tints button[aria-pressed="true"]::before { transform: none; }
.tints b { font: 300 24px/1.1 var(--font-head); letter-spacing: -.02em; }
.tints span { grid-column: 1; font: 300 16px/1.45 var(--font-head); color: var(--ink2); }
.tints em { grid-row: 1; grid-column: 2; font: 400 10px/1.8 var(--font-body); font-style: normal; color: var(--ink2); white-space: nowrap; }

/* бегущая строка */
.band { overflow: hidden; padding: 22px 0; margin: 40px 0 0; background: var(--ink); color: #fff; transform: rotate(-1.2deg); }
.band__track { display: flex; align-items: center; gap: 30px; width: max-content; animation: band 38s linear infinite; }
.band span { font: 200 clamp(22px, 2.2vw, 32px)/1 var(--font-head); font-style: italic; white-space: nowrap; }
.band i { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #fff; background: linear-gradient(transparent 46%, #fff 46%, #fff 54%, transparent 54%); }
@keyframes band { to { transform: translateX(-50%); } }

/* лента «чаще примеряют» */
.rail-sec { padding: 130px 0 30px; }
.rail-sec__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.rail-sec__head .sec-h { margin: 0; }
.rail-sec__nav { display: flex; align-items: center; gap: 10px; }
.rail-sec__nav .link { margin-left: 14px; }
.rbtn { width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--line); background: transparent; display: grid; place-items: center; transition: background .3s, color .3s; }
.rbtn:hover { background: var(--ink); color: #fff; }
.rbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.rbtn:first-child svg { transform: scaleX(-1); }
.rail { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 0 10px; scroll-padding: 0 var(--pad); }
.rail::-webkit-scrollbar { display: none; }
.rail.is-drag { scroll-snap-type: none; cursor: grabbing; }
.rail__in { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(250px, 23vw, 340px); gap: 22px; padding: 0 var(--pad); width: max-content; }
.rail .card { scroll-snap-align: start; }

/* лукбук сезона */
.looks { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; padding: 120px 0 0; align-items: start; }
.looks__head { grid-column: 1 / -1; margin-bottom: 40px; }
.look { display: block; text-decoration: none; }
.look figure { margin: 0; border-radius: 30px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--lilac); }
.look img { width: 100%; height: 100%; object-fit: cover; }
.look:hover img { transform: scale(1.04) !important; transition: transform 1.2s var(--ease) !important; }
.look__cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 14px; font: 400 10.5px/1.4 var(--font-body); text-transform: uppercase; letter-spacing: .08em; color: var(--ink2); }
.look__cap b { font: 300 28px/1 var(--font-head); text-transform: none; letter-spacing: -.02em; color: var(--ink); }
.look--a { grid-column: 1 / 6; }
.look--b { grid-column: 7 / 10; margin-top: 160px; }
.look--c { grid-column: 10 / 13; margin-top: 40px; }
.looks__note { grid-column: 1 / -1; }

/* условия цифрами */
.nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 120px 0 0; }
.num { padding: 26px 24px 10px 0; border-top: 1px solid var(--ink); }
.num + .num { padding-left: 24px; border-left: 1px solid var(--line); }
.num__v { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; font: 200 clamp(70px, 8vw, 128px)/.9 var(--font-head); letter-spacing: -.05em; }
.num__v small { font: 400 11px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }
.num__t { margin: 0; font: 300 18px/1.35 var(--font-head); color: var(--ink2); max-width: 20ch; }
.nums__note { grid-column: 1 / -1; }

/* размер на заушнике */
.size { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 100px); align-items: center; padding: 140px 0 0; }
.size__fig { padding: clamp(24px, 4vw, 60px); border-radius: 34px; background: linear-gradient(135deg, #fff, var(--lilac)); }
.size__txt p:not(.kicker) { font: 300 19px/1.5 var(--font-head); color: var(--ink2); max-width: 38ch; }
.size__nums { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin-top: 30px; }
.size__nums i { font: 200 54px/1 var(--font-head); font-style: normal; color: var(--ink3); }
.size__nums button { display: grid; gap: 6px; justify-items: start; border: 0; background: none; padding: 6px 0; }
.size__nums b { font: 200 clamp(58px, 6vw, 92px)/.9 var(--font-head); letter-spacing: -.04em; transition: color .3s; background: linear-gradient(var(--ink), var(--ink)) left bottom / 0 1px no-repeat; transition: background-size .5s var(--ease); }
.size__nums button.is-on b { background-size: 100% 1px; }
.size__nums span { font: 400 9.5px/1 var(--font-body); text-transform: uppercase; letter-spacing: .1em; color: var(--ink2); }
.dims { width: 100%; height: auto; display: block; overflow: visible; }
.dims__frame path { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.dims__frame path:nth-child(n+4) { fill: var(--ink); stroke: none; }
.dim { opacity: .38; transition: opacity .4s; }
.dim path { fill: none; stroke: #7b64cf; stroke-width: 1.6; }
.dim .dims__temple { stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
.dim text { font: 400 15px var(--font-body); fill: #7b64cf; text-anchor: middle; }
[data-on=""] .dim, :not([data-on]) > .dims .dim, .px__size .dim { opacity: 1; }
[data-on="lens"] .dim[data-d="lens"], [data-on="bridge"] .dim[data-d="bridge"], [data-on="temple"] .dim[data-d="temple"] { opacity: 1; }
[data-on="lens"] .dim:not([data-d="lens"]), [data-on="bridge"] .dim:not([data-d="bridge"]), [data-on="temple"] .dim:not([data-d="temple"]) { opacity: .18; }

/* салон */
.salon { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 100px); align-items: center; padding: 140px var(--pad) 0; max-width: calc(var(--wrap) + 2 * var(--pad)); margin: 0 auto; }
.salon__img { margin: 0; border-radius: 300px 300px 30px 30px; overflow: hidden; aspect-ratio: 4 / 5; }
.salon__img img { width: 100%; height: 100%; object-fit: cover; }
.salon__txt > p:not(.kicker) { font: 300 19px/1.5 var(--font-head); color: var(--ink2); max-width: 36ch; }
.salon__dl { margin: 26px 0 0; display: grid; gap: 0; max-width: 460px; }
.salon__dl div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.salon__dl dt { font: 400 10px/1.6 var(--font-body); text-transform: uppercase; letter-spacing: .1em; color: var(--ink3); }
.salon__dl dd { margin: 0; font: 400 12px/1.6 var(--font-body); }

/* ——— каталог-лукбук ——— */
.lb .crumbs { padding-top: 22px; }
.crumbs { font: 400 10px/1.4 var(--font-body); text-transform: uppercase; letter-spacing: .1em; }
.lb__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 6px 40px; padding: 4px 0 26px; }
.lb__head h1 { font: 200 clamp(70px, 10vw, 168px)/.86 var(--font-head); letter-spacing: -.055em; }
.lb__head .cat-count { font: 400 11px/1 var(--font-body); text-transform: uppercase; letter-spacing: .1em; padding-bottom: 14px; }
.lb__lead { grid-column: 1 / -1; margin: 10px 0 0; font: 300 19px/1.5 var(--font-head); color: var(--ink2); }
.lb__lead a { color: var(--ink); }
.lb__shapes { display: flex; gap: 10px; overflow-x: auto; padding: 10px 0 24px; scrollbar-width: none; }
.lb__shapes::-webkit-scrollbar { display: none; }
.lb-shape { flex: 1 0 128px; display: grid; justify-items: center; gap: 6px; padding: 18px 10px 14px; border: 1px solid var(--line); border-radius: 24px; background: rgba(255, 255, 255, .42); transition: background .35s, color .35s, border-color .35s, transform .5s var(--ease); }
.lb-shape:hover { border-color: var(--ink); transform: translateY(-3px); }
.lb-shape .shape-ico { width: 76px; height: 34px; transition: transform .6s var(--ease); }
.lb-shape:hover .shape-ico { transform: scale(1.12); }
.lb-shape span { font: 400 10px/1.2 var(--font-body); text-transform: uppercase; letter-spacing: .08em; }
.lb-shape small { font: 400 10px/1 var(--font-body); color: var(--ink3); }
.lb-shape[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.lb-shape[aria-pressed="true"] small { color: #c9c4e6; }
.lb__bar { position: sticky; top: var(--hdr); z-index: 6; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 12px 0; margin: 0 0 6px; background: rgba(247, 243, 239, .88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.lb__bar .cat-chips { padding: 0; flex: 1 1 auto; min-width: 0; }
.lb__tools { display: flex; align-items: center; gap: 8px; }
.cat-search input { width: 250px; height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .6); font: 400 11px var(--font-body); }
.cat-sort select { height: 42px; padding: 0 14px; margin: 0; border-radius: 999px; border: 1px solid var(--line); background: transparent; font: 400 11px var(--font-body); }
.lb .filters-btn { display: inline-flex; min-height: 42px; padding: 0 20px; }
.lb .cat-layout { display: block; padding-bottom: 60px; }
.lb .filters { position: fixed; top: 0; left: 0; bottom: 0; z-index: 70; width: min(400px, 100%); padding: 0 24px 20px; overflow: auto; background: var(--milk); transform: translateX(-100%); visibility: hidden; transition: transform .45s var(--ease2), visibility .45s; display: block; border-radius: 0 28px 28px 0; }
.lb .filters.is-open { transform: none; visibility: visible; }
.lb .filters__top { display: flex; margin: 0 -24px 16px; padding: 14px 16px 14px 24px; }
.filters__title { font: 300 30px var(--font-head); }
.lb .filters__foot { position: sticky; bottom: 0; background: var(--milk); padding: 12px 0; }
.lb .filters__foot .filters__apply { display: inline-flex; flex: 1; }
.fgroup legend { font: 400 10px/1 var(--font-body); text-transform: uppercase; letter-spacing: .12em; padding-bottom: 12px; }
.fopt { font: 400 11.5px var(--font-body); }
.fopt input { accent-color: var(--ink); }
.lb__grid { --cols: 4; gap: 46px 22px; grid-auto-flow: dense; padding-top: 8px; }
.lb-ch { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; grid-template-areas: 'n n i' 't p i' 't c i'; align-items: end; gap: 6px 36px; padding: 50px 0 22px; border-bottom: 1px solid var(--ink); }
.lb-ch:first-child { padding-top: 16px; }
.lb-ch__n { grid-area: n; margin: 0; font: 400 10px/1 var(--font-body); text-transform: uppercase; letter-spacing: .14em; color: var(--ink2); }
.lb-ch__t { grid-area: t; font: 200 clamp(52px, 6.4vw, 104px)/.9 var(--font-head); letter-spacing: -.05em; }
.lb-ch__p { grid-area: p; margin: 0; font: 300 18px/1.45 var(--font-head); color: var(--ink2); max-width: 40ch; }
.lb-ch__c { grid-area: c; margin: 0; font: 400 10px/1 var(--font-body); text-transform: uppercase; letter-spacing: .1em; }
.lb-ch__ic { grid-area: i; width: clamp(110px, 12vw, 180px); height: auto; color: var(--ink); align-self: center; }
.js .lb-ch__ic path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease2) .2s; }
.js .lb-ch.is-in .lb-ch__ic path { stroke-dashoffset: 0; }
.lb-feat { position: relative; display: block; min-height: 300px; border-radius: var(--radius); overflow: hidden; text-decoration: none; background: var(--iri); }
.lb-feat figure { position: absolute; inset: 0; margin: 0; }
.lb-feat img { width: 100%; height: 100%; object-fit: cover; }
.lb-feat:hover img { transform: scale(1.04) !important; transition: transform 1.4s var(--ease) !important; }
.lb-feat__cap { position: absolute; left: 14px; bottom: 14px; right: 14px; display: inline-block; width: max-content; max-width: calc(100% - 28px); padding: 9px 14px; border-radius: 999px; background: rgba(247, 243, 239, .86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 400 10px/1.3 var(--font-body); text-transform: uppercase; letter-spacing: .06em; }
.lb-feat__cap b { font-weight: 500; }
.lb-feat--txt { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 28px; background: var(--iri); }
.lb-feat--promo { background: var(--ink); color: #fff; }
.lb-feat__k { font: 400 10px/1 var(--font-body); text-transform: uppercase; letter-spacing: .14em; opacity: .7; }
.lb-feat__t { font: 200 clamp(32px, 3vw, 48px)/1 var(--font-head); letter-spacing: -.035em; }
.lb-feat--promo .lb-feat__t { font: 400 clamp(34px, 3.4vw, 54px)/1 var(--font-body); letter-spacing: .02em; background: var(--iri); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lb-feat__p { font: 300 16px/1.45 var(--font-head); max-width: 30ch; }
.empty__t { font: 200 46px/1 var(--font-head); }

/* ——— карточка товара в сетке ——— */
.card { container-type: inline-size; background: transparent; }
.card__media { position: relative; border-radius: var(--radius); background: var(--tile, var(--lilac)); }
.card__media > img { object-fit: cover; transition: transform .9s var(--ease), opacity .3s; }
.card:hover .card__media > img { transform: scale(1.07) rotate(-1.5deg); }
.card__look { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: circle(0% at var(--x, 50%) var(--y, 50%)); transition: clip-path .85s var(--ease); }
.is-fine .card.has-look .card__media:hover .card__look { clip-path: circle(142% at var(--x, 50%) var(--y, 50%)); }
.card__badge { left: 14px; top: 14px; padding: 6px 11px; border-radius: 999px; background: #fff; color: var(--ink); font: 400 9.5px/1 var(--font-body); text-transform: uppercase; letter-spacing: .1em; z-index: 1; }
.card__fav { right: 10px; top: 10px; background: rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); z-index: 1; }
.card__fav svg { width: 19px; height: 19px; }
.card__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 12px; padding: 16px 2px 0; }
.card__name { grid-column: 1; grid-row: 1; font: 300 27px/1.05 var(--font-head); letter-spacing: -.025em; }
.card__name a:hover { text-decoration: none; background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat; }
.card__price { grid-column: 2; grid-row: 1; flex-direction: column; align-items: flex-end; gap: 2px; font: 400 12px/1.2 var(--font-body); }
.card__price b { font-weight: 500; white-space: nowrap; }
.card__price s { font-size: 10.5px; }
.card__meta { grid-column: 1 / -1; font: 400 10px/1.5 var(--font-body); text-transform: uppercase; letter-spacing: .06em; color: var(--ink2); }
.card__dots { grid-column: 1 / -1; display: flex; gap: 7px; margin-top: 8px; }
.dot-c { width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(35, 33, 63, .16); transition: box-shadow .25s, transform .25s; }
.dot-c:hover { transform: scale(1.15); }
.dot-c.is-on { box-shadow: 0 0 0 2px var(--milk), 0 0 0 3px var(--ink); }
.card__add { grid-column: 1 / -1; margin-top: 12px; min-height: 42px; }
@media (hover: hover) and (pointer: fine) {
  .card__add { position: absolute; left: 12px; right: 12px; top: calc(125cqw - 58px); margin: 0; min-height: 46px; opacity: 0; transform: translateY(12px); transition: opacity .35s, transform .5s var(--ease), color .35s; z-index: 2; }
  .card:hover .card__add, .card:focus-within .card__add { opacity: 1; transform: none; }
}

/* ——— карточка товара ——— */
.pwrap .crumbs { padding-top: 24px; }
.pwrap .product { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); }
.gallery { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 14px; align-items: start; }
.gallery__main { grid-column: 2; grid-row: 1; border-radius: 32px; background: var(--tile, var(--lilac)); }
.gallery__main img { aspect-ratio: 4 / 5; object-fit: cover; view-transition-name: pimg; }
.gallery__nav { background: rgba(255, 255, 255, .8); }
.gallery__thumbs { grid-column: 1; grid-row: 1; flex-direction: column; margin: 0; }
.gallery__thumbs button { width: 82px; border-radius: 16px; background: var(--tile, var(--lilac)); border: 1px solid transparent; transition: border-color .3s; }
.gallery__thumbs button[aria-current] { border-color: var(--ink); }
.gallery__thumbs img { aspect-ratio: 4 / 5; object-fit: cover; }
.product__buy { top: calc(var(--hdr) + 20px); gap: 16px; }
.pbadge { padding: 6px 12px; border-radius: 999px; background: var(--iri); color: var(--ink); font: 400 10px/1 var(--font-body); text-transform: uppercase; letter-spacing: .1em; }
.ptitle { font: 200 clamp(64px, 7vw, 116px)/.86 var(--font-head); letter-spacing: -.055em; }
.pmeta { margin: 0; font: 400 10.5px/1.5 var(--font-body); text-transform: uppercase; letter-spacing: .08em; }
.pprice { font: 400 22px/1 var(--font-body); }
.pprice b { font-weight: 500; }
.pvars__l { font: 400 10.5px var(--font-body); text-transform: uppercase; letter-spacing: .08em; }
.pvars__list .chip { min-height: 40px; text-transform: none; letter-spacing: 0; font-size: 11px; }
.pvars__list .chip.is-on { background: #fff; color: var(--ink); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.chip .sw { width: 16px; height: 16px; }
.stepper { border-radius: 999px; border-color: var(--line); }
.pfav { border-radius: 50%; }
.pstock { font: 400 10.5px var(--font-body); }
.pfacts { font: 400 11px/1.6 var(--font-body); }
.px { display: grid; gap: 16px; padding-top: 6px; }
.px__try { justify-content: center; gap: 14px; }
.px__try .shape-ico { width: 44px; height: 20px; }
.px__size { padding: 20px 22px; border-radius: 22px; background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px var(--line); }
.px__l { margin: 0 0 8px; font: 400 10.5px var(--font-body); text-transform: uppercase; letter-spacing: .08em; }
.px__l b { font-weight: 500; letter-spacing: .02em; }
.px__size .dims { max-width: 360px; }
.px__h, .px__lens { margin: 10px 0 0; font: 300 15.5px/1.5 var(--font-head); color: var(--ink2); }
.px__lens a { color: var(--ink); }
.pinfo { border-color: var(--line); }
.pinfo h2, .related__t { font: 200 clamp(36px, 3.6vw, 54px)/1 var(--font-head); letter-spacing: -.04em; }
.pinfo__col p { font: 300 19px/1.55 var(--font-head); color: var(--ink2); max-width: 46ch; }
.specs div { font: 400 11px/1.5 var(--font-body); }
.related .grid { --cols: 4; }
.pnote { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 0 0 20px; }
.pnote div { display: grid; gap: 6px; padding: 22px; border-radius: 22px; background: var(--iri); }
.pnote b { font: 300 22px/1.1 var(--font-head); }
.pnote span { font: 400 10px/1.4 var(--font-body); text-transform: uppercase; letter-spacing: .06em; color: var(--ink2); }

/* ——— корзина, оформление, ящик ——— */
.drawer { background: var(--milk); border-radius: 28px 0 0 28px; }
.drawer__title { font: 300 32px var(--font-head); }
.drawer__top, .drawer__foot { border-color: var(--line); }
.line { border-color: var(--line); }
.line__img { border-radius: 14px; }
.line__img img { object-fit: cover; }
.line__name { font: 300 22px/1.1 var(--font-head); }
.line__var { font: 400 10.5px/1.5 var(--font-body); }
.line__sum { font: 500 12px var(--font-body); }
.empty-cart__t { font: 300 34px/1.1 var(--font-head); }
.cartpage__side, .checkout__side { grid-template-columns: minmax(0, 1fr); background: #fff; border-radius: 30px; box-shadow: 0 30px 80px rgba(35, 33, 63, .07); }
.promo input { width: 0; }
.sum dt, .sum dd { font: 400 11.5px/1.5 var(--font-body); }
.sum__total dt, .sum__total dd { font: 500 14px/1.4 var(--font-body); }
.cbox legend, .checkout__t { font: 300 30px/1.1 var(--font-head); }
.field input, .field textarea, .promo input { border-radius: 16px; border-color: var(--line); font: 400 13px var(--font-body); }
.field span, .promo label { font: 400 10.5px var(--font-body); text-transform: uppercase; letter-spacing: .08em; }
.opt { border-radius: 20px; border-color: var(--line); background: rgba(255, 255, 255, .5); }
.opt b { font: 300 20px/1.2 var(--font-head); }
.opt small, .opt em { font: 400 10.5px/1.5 var(--font-body); }
.olines img { object-fit: cover; border-radius: 10px; }
.done__k { font: 400 11px var(--font-body); text-transform: uppercase; letter-spacing: .1em; }
.done__t { font: 200 clamp(56px, 7vw, 104px)/.92 var(--font-head); letter-spacing: -.05em; }
.done > p { font: 300 19px/1.5 var(--font-head); color: var(--ink2); }
.cart-tip { margin: 0; padding: 14px 16px; border-radius: 18px; background: var(--iri); font: 300 16px/1.45 var(--font-head); }
.cart-tip a { color: var(--ink); }
.lost__code { font-family: var(--font-head); font-weight: 200; color: transparent; -webkit-text-stroke: 1px var(--ink3); }
.credits li { font: 400 11px/1.5 var(--font-body); }
.credits img { border-radius: 10px; }
.toast { border-radius: 999px; padding: 14px 22px; font: 400 11px var(--font-body); background: var(--ink); }

/* ——— подбор и примерка ——— */
.pd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 90px); width: min(var(--wrap), 100% - 2 * var(--pad)); margin: 0 auto; padding-bottom: 40px; }
.pd__mirror { position: relative; }
.mirror { position: sticky; top: calc(var(--hdr) + 10px); height: calc(100svh - var(--hdr) - 26px); min-height: 520px; border-radius: 340px 340px 40px 40px; overflow: hidden; background: radial-gradient(90% 60% at 50% 30%, #fff 0%, #efe8f8 55%, #e3eaf7 100%); box-shadow: inset 0 0 0 10px rgba(255, 255, 255, .7), inset 0 0 0 11px rgba(35, 33, 63, .08), 0 40px 90px rgba(35, 33, 63, .08); }
.mirror::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .45) 38%, transparent 46%); }
.mirror__svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 92%; display: block; touch-action: none; }
.mirror__bar { position: absolute; left: 0; right: 0; top: 18%; z-index: 2; display: flex; justify-content: center; gap: 8px; }
.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px var(--line); }
.seg button, .mirror__up span, .mirror__reset { height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; font: 400 10px/34px var(--font-body); text-transform: uppercase; letter-spacing: .1em; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.mirror__up span, .mirror__reset { display: inline-block; background: rgba(255, 255, 255, .72); box-shadow: inset 0 0 0 1px var(--line); }
.mirror__up input:focus-visible + span { outline: 2px solid #8b74d6; }
.mirror__read { position: absolute; left: 50%; bottom: 20px; z-index: 2; transform: translateX(-50%); width: max-content; max-width: calc(100% - 40px); margin: 0; padding: 10px 16px; border-radius: 999px; background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 400 10px/1.4 var(--font-body); text-align: center; }
.mirror__tip { position: absolute; left: 24px; right: 24px; top: calc(18% + 50px); z-index: 2; margin: 0; text-align: center; font: 400 10px/1.5 var(--font-body); }
.mirror__scale { position: absolute; left: 50%; bottom: 66px; z-index: 2; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, .8); font: 400 10px var(--font-body); }
.mirror__scale input { accent-color: var(--ink); width: 140px; }
.has-photo [data-gwrap] { cursor: grab; }
[data-glasses] { transform-box: fill-box; transform-origin: center; }
[data-glasses].is-drop { animation: g-drop .7s var(--ease) both; }
@keyframes g-drop { from { transform: translateY(-34px) scale(1.06); opacity: 0; filter: blur(6px); } }
.tint-r { transition: opacity .5s; }
[data-t0], [data-t1] { transition: stop-color .6s, stop-opacity .6s; }
.is-photo .tint-r { animation: photo 4.2s ease-in-out infinite alternate; }
@keyframes photo { from { opacity: .18; } to { opacity: 1; } }
.pd__head { padding: 22px 0 10px; }
.pd__h { font: 200 clamp(56px, 6.6vw, 112px)/.9 var(--font-head); letter-spacing: -.055em; margin: 0 0 22px; }
.step { border: 0; margin: 0; padding: 34px 0; border-top: 1px solid var(--line); min-width: 0; }
.step legend, .step__h { display: flex; align-items: baseline; gap: 14px; padding: 0 0 18px; font: 300 32px/1.1 var(--font-head); letter-spacing: -.03em; }
.step legend span, .step__h span { font: 400 10px/1 var(--font-body); color: var(--ink3); letter-spacing: .1em; }
.faces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.face { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px 12px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255, 255, 255, .45); cursor: pointer; transition: background .3s, border-color .3s, box-shadow .3s; }
.face input { position: absolute; opacity: 0; }
.face__ic { grid-row: 1 / 3; display: block; }
.face__ic svg { width: 46px; height: 56px; fill: none; stroke: var(--ink); stroke-width: 1.6; }
.face b { font: 300 21px/1.1 var(--font-head); }
.face small { font: 400 9.5px/1.4 var(--font-body); color: var(--ink2); }
.face:hover { border-color: var(--ink); }
.face:has(input:checked) { background: #fff; border-color: transparent; box-shadow: 0 0 0 2px var(--ink), 0 14px 40px rgba(35, 33, 63, .08); }
.face:has(input:focus-visible) { outline: 2px solid #8b74d6; outline-offset: 3px; }
.face:has(input:checked) .face__ic svg { fill: var(--peach); }
.quiz { margin-top: 16px; }
.quiz summary { cursor: pointer; font: 400 10.5px/1.4 var(--font-body); text-transform: uppercase; letter-spacing: .08em; text-decoration: underline; text-underline-offset: 4px; }
.quiz__in { padding: 14px 0 0; }
.quiz__q { margin: 10px 0 8px; font: 300 18px/1.3 var(--font-head); }
.quiz__a { display: flex; flex-wrap: wrap; gap: 8px; }
.quiz__a button { min-height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: transparent; font: 400 10.5px var(--font-body); }
.quiz__a button.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.quiz__r { margin: 12px 0 0; font: 300 17px/1.4 var(--font-head); color: var(--ok); }
.pd .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.res { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rc { display: grid; align-content: start; gap: 8px; min-width: 0; }
.rc__pick { display: grid; gap: 4px; justify-items: start; padding: 0 0 12px; border: 0; background: none; text-align: left; border-radius: 24px; }
.rc__img { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 24px; background: var(--tile); transition: box-shadow .35s, transform .5s var(--ease); }
.rc__img svg { width: 84%; height: auto; }
.rc__pick:hover .rc__img { transform: translateY(-3px); }
.rc.is-on .rc__img { box-shadow: 0 0 0 2px var(--ink); }
.rc__m { margin-top: 6px; font: 400 10px/1.2 var(--font-body); text-transform: uppercase; letter-spacing: .06em; color: var(--ok); }
.rc__m b { font: 500 13px var(--font-body); font-variant-numeric: tabular-nums; }
.rc__n { font: 300 26px/1 var(--font-head); letter-spacing: -.02em; }
.rc__s { font: 400 9.5px/1.4 var(--font-body); text-transform: uppercase; color: var(--ink2); }
.rc__p { font: 500 12px/1.4 var(--font-body); }
.rc__why { margin: 0; font: 300 15px/1.45 var(--font-head); color: var(--ink2); }
.rc__a { font: 400 10px/1.4 var(--font-body); text-transform: uppercase; letter-spacing: .06em; }
.rc.is-deal { animation: deal .8s var(--ease) both; animation-delay: calc(var(--i) * 110ms); }
@keyframes deal { from { opacity: 0; transform: translateY(40px) rotate(-5deg) scale(.96); filter: blur(4px); } }
.fit__row { display: grid; gap: 10px; margin: 0 0 22px; }
.fit__l { margin: 0; font: 400 10.5px/1.4 var(--font-body); text-transform: uppercase; letter-spacing: .08em; }
.fit__l b { font-weight: 500; text-transform: none; letter-spacing: 0; }
.sws { display: flex; flex-wrap: wrap; gap: 10px; }
.sw { width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0; background: var(--c); box-shadow: inset 0 0 0 1px rgba(35, 33, 63, .16); transition: box-shadow .3s, transform .3s; }
.sw:hover { transform: scale(1.08); }
.sw[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--milk), 0 0 0 4px var(--ink); }
.lens-list { display: grid; gap: 6px; }
.lens-o { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 16px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, .45); cursor: pointer; transition: border-color .3s, background .3s; }
.lens-o input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
.lens-o span { font: 300 17px/1.25 var(--font-head); }
.lens-o em { font: 400 11px var(--font-body); font-style: normal; white-space: nowrap; }
.lens-o:has(input:checked) { background: #fff; border-color: var(--ink); }
.tint-o i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); margin-right: 8px; box-shadow: inset 0 0 0 1px rgba(35, 33, 63, .2); }
.tint-o span { display: inline-flex; align-items: center; }
.tint-o.is-dis { opacity: .4; }
.tint-o.is-dis span { cursor: not-allowed; }
.pd__sum { display: grid; gap: 12px; padding: 26px 28px; border-radius: 30px; background: #fff; box-shadow: 0 30px 80px rgba(35, 33, 63, .1), inset 0 0 0 1px var(--line); }
/* плашка комплекта на телефоне: закреплена внизу, пока видна примерка */
.pd-bar { position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 40; display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 999px; background: rgba(35, 33, 63, .94); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 20px 50px rgba(35, 33, 63, .3); transform: translateY(140%); transition: transform .5s var(--ease); }
.pd-bar.is-on { transform: none; }
.pd-bar b { font: 500 13px/1.2 var(--font-body); }
.pd-bar small { display: block; font: 400 9px/1.2 var(--font-body); text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.pd-bar button { min-height: 42px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--iri); color: var(--ink); font: 400 10px/1 var(--font-body); text-transform: uppercase; letter-spacing: .08em; }
.sum-k__t { margin: 0 0 8px; font: 300 26px/1 var(--font-head); }
.pd__sum .small { margin: 0; }

/* ——— салон и проверка зрения ——— */
.sx-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: center; padding: 10px var(--pad) 0; max-width: calc(var(--wrap) + 2 * var(--pad)); margin: 0 auto; }
.sx-hero__img { margin: 0; border-radius: 40px 300px 40px 40px; overflow: hidden; aspect-ratio: 5 / 4; }
.sx-hero__img img { width: 100%; height: 100%; object-fit: cover; }
.sx-hero__txt { width: auto; margin: 0; }
.steps4 { padding: 130px 0 0; }
.steps4__list { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: s; }
.steps4__list li { padding: 24px 24px 0 0; border-top: 1px solid var(--ink); counter-increment: s; }
.steps4__list li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.steps4__list li::before { content: '0' counter(s); display: block; font: 200 74px/1 var(--font-head); color: transparent; -webkit-text-stroke: 1px var(--ink3); margin-bottom: 18px; }
.steps4__list b { font: 400 10px/1 var(--font-body); text-transform: uppercase; letter-spacing: .1em; color: var(--ok); }
.steps4__list h3 { margin: 10px 0 8px; font: 300 28px/1.1 var(--font-head); }
.steps4__list p { font: 300 17px/1.45 var(--font-head); color: var(--ink2); }
.book { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(30px, 6vw, 100px); padding: 130px 0 0; align-items: start; }
.book__txt > p:not(.kicker) { font: 300 19px/1.5 var(--font-head); color: var(--ink2); }
.book__form { padding: 32px; border-radius: 32px; background: #fff; box-shadow: 0 30px 80px rgba(35, 33, 63, .07); display: grid; gap: 12px; }
.book__form .fields { margin: 0 0 6px; }
.book__l { margin: 8px 0 0; font: 400 10.5px var(--font-body); text-transform: uppercase; letter-spacing: .08em; }
.book__form .btn { margin-top: 10px; }
.book__msg { margin: 0; min-height: 1.5em; font: 300 17px/1.45 var(--font-head); }
.book__msg.is-ok { color: var(--ok); } .book__msg.is-err { color: var(--sale); }
.services { padding: 130px 0 0; }
.services__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.svc { display: grid; align-content: start; gap: 10px; padding: 26px; border-radius: 28px; background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px var(--line); transition: background .4s, transform .5s var(--ease); }
.svc:hover { background: #fff; transform: translateY(-4px); }
.svc h3 { font: 300 26px/1.1 var(--font-head); }
.svc p { font: 300 16px/1.45 var(--font-head); color: var(--ink2); margin: 0; }
.svc b { font: 500 11.5px var(--font-body); }
.where { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 90px); align-items: center; padding: 130px 0 0; }
.where__map svg { width: 100%; height: auto; display: block; }
.where__txt > p:not(.kicker) { font: 300 19px/1.5 var(--font-head); color: var(--ink2); }
.where__txt .btn svg { width: 18px; height: 18px; }
.pics { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; padding: 80px 0 0; align-items: end; }
.pics figure { margin: 0; border-radius: 30px; overflow: hidden; }
.pics img { width: 100%; height: 100%; object-fit: cover; }

/* ——— доставка ——— */
.narrow2 { max-width: 1100px; }
.dv .crumbs { padding-top: 24px; }
.dv__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 50px 0 90px; }
.dv-card { padding: 28px; border-radius: 28px; background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px var(--line); }
.dv-card:nth-child(1) { background: var(--iri); box-shadow: none; }
.dv-card__k { margin: 0 0 40px; font: 400 26px/1 var(--font-body); }
.dv-card h2 { font: 300 30px/1.05 var(--font-head); margin-bottom: 10px; }
.dv-card p:last-child { font: 300 17px/1.45 var(--font-head); color: var(--ink2); margin: 0; }
.dv-list { list-style: none; padding: 0; margin: 0 0 90px; display: grid; }
.dv-list li { padding: 18px 0; border-top: 1px solid var(--line); font: 300 20px/1.45 var(--font-head); }
.dv-list b { font-weight: 300; color: var(--ink); }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; cursor: pointer; list-style: none; font: 300 26px/1.2 var(--font-head); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--ink); background: linear-gradient(var(--ink), var(--ink)) center / 10px 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1.5px 10px no-repeat; transition: transform .4s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 22px; max-width: 62ch; font: 300 18px/1.55 var(--font-head); color: var(--ink2); }

/* ——— появление ——— */
.js [data-words] .w { display: inline-block; opacity: 0; filter: blur(12px); transform: translateY(.22em) scale(1.04); transition: opacity .9s var(--ease), filter 1s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--i) * 65ms); }
.js [data-words].is-in .w { opacity: 1; filter: blur(0); transform: none; }
.js [data-rv] { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js [data-rv].is-in { opacity: 1; transform: none; }
.js [data-iris] { clip-path: circle(0% at 50% 58%); transition: clip-path 1.1s var(--ease2); }
.js [data-iris].is-in { clip-path: circle(76% at 50% 50%); }
.js [data-iris] img { transform: scale(1.16); transition: transform 2s var(--ease); }
.js [data-iris].is-in img { transform: none; }
.js .chap--shape .chap__a .shape-ico path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease2) .3s; }
.js .chap--shape:has(.is-in) .chap__a .shape-ico path { stroke-dashoffset: 0; }

/* ——— переходы между страницами: «перефокусировка» ——— */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root) { animation: vt-out .4s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .62s var(--ease) both; }
::view-transition-group(pimg) { animation-duration: .62s; animation-timing-function: var(--ease); }
::view-transition-group(hdr) { animation: none; }
@keyframes vt-out { to { opacity: 0; filter: blur(14px); transform: scale(.986); } }
@keyframes vt-in { from { opacity: 0; filter: blur(16px); transform: scale(1.012); } }

/* ——— планшет ——— */
@media (max-width: 1240px) {
  .hdr__nav { gap: 16px; }
  .hdr__nav a:nth-child(n+4) { display: none; }
}
@media (max-width: 1100px) {
  .hdr { grid-template-columns: auto 1fr auto; }
  .hdr__nav { display: none; }
  .hdr__menu { display: inline-flex; }
  .logo { grid-column: 2; justify-self: center; }
  .lb__grid { --cols: 3; }
  .nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .num:nth-child(3) { border-left: 0; padding-left: 0; }
  .steps4__list, .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 0; }
  .steps4__list li:nth-child(3) { padding-left: 0; border-left: 0; }
  .services__grid { gap: 14px; }
  .res { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .faces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pnote { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ——— телефон ——— */
@media (max-width: 860px) {
  :root { --pad: 16px; --hdr: 62px; --gap: 12px; --radius: 20px; }
  .logo { font-size: 34px; }
  .hdr { gap: 8px; }
  .hdr__menu span { display: none; }
  .hdr__cta, .hdr__search, .hdr__fav { display: none; }
  .hdr__cart { height: 38px; padding: 0 14px; font-size: 9.5px; }
  .hdr__cart b { margin-left: 6px; }
  .btn--lg { min-height: 54px; padding: 0 24px; }

  /* главная: таблица прилипает сверху, текст едет под ней */
  .split { grid-template-columns: minmax(0, 1fr); }
  .split__stage { position: sticky; top: var(--hdr); z-index: 3; height: 44svh; padding: 6px 12px 10px; background: linear-gradient(var(--milk) 85%, rgba(247, 243, 239, 0)); }
  .stage { position: relative; top: 0; height: 100%; margin: 0; border-radius: 24px; }
  .stage__read { right: 12px; top: 12px; padding: 7px 11px; }
  .split__text { padding: 0 var(--pad); }
  .chap { min-height: 50svh; padding: 34px 0; max-width: none; }
  .chap--hero { min-height: 0; padding: 14px 0 40px; }
  .h-hero { font-size: clamp(56px, 16vw, 80px); margin-bottom: 14px; }
  .lead { font-size: 17px; }
  .cta { margin-top: 20px; }
  .cta .btn { flex: 1 1 auto; }
  .hero__note { margin-top: 20px; }
  .chap__n { font-size: 64px; }
  .chap__t { font-size: clamp(40px, 11vw, 54px); }
  .chap__p { font-size: 17px; }
  .tints button { padding: 14px 16px 14px 20px; }
  .tints b { font-size: 21px; }
  .tints span { font-size: 15px; }
  .tints em { grid-row: auto; grid-column: 1; }
  .band { margin-top: 10px; padding: 16px 0; }
  .rail-sec { padding-top: 80px; }
  .rail-sec__nav .rbtn { display: none; }
  .rail__in { grid-auto-columns: 72vw; gap: 12px; }
  .looks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; padding-top: 80px; }
  .looks__head { margin-bottom: 24px; }
  .look--a { grid-column: 1 / -1; margin-bottom: 26px; }
  .look--b { grid-column: 1; margin-top: 0; }
  .look--c { grid-column: 2; margin-top: 50px; }
  .look figure { border-radius: 22px; }
  .look__cap b { font-size: 22px; }
  .nums { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 80px; }
  .num { padding: 18px 12px 18px 0; }
  .num + .num { padding-left: 12px; }
  .num:nth-child(3) { padding-left: 0; }
  .num__v { font-size: 64px; }
  .num__t { font-size: 15px; }
  .size { grid-template-columns: minmax(0, 1fr); padding-top: 90px; }
  .size__nums b { font-size: 54px; }
  .size__nums i { font-size: 36px; }
  .salon { grid-template-columns: minmax(0, 1fr); padding-top: 90px; }
  .salon__img { border-radius: 200px 200px 24px 24px; }
  .foot { margin-top: 80px; padding-top: 60px; }
  .foot__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .foot__lbl { display: none; }
  .foot__row--4 p, .foot__row--5 p { flex-direction: column; align-items: center; }

  /* каталог */
  .lb__head { grid-template-columns: minmax(0, 1fr); }
  .lb__head h1 { font-size: 76px; }
  .lb__head .cat-count { padding: 0; }
  .lb__lead { font-size: 17px; }
  .lb__shapes { margin: 0 calc(-1 * var(--pad)); padding: 6px var(--pad) 18px; }
  .lb-shape { flex: 0 0 110px; padding: 14px 8px 12px; }
  .lb-shape .shape-ico { width: 62px; }
  .lb__bar { margin: 0 calc(-1 * var(--pad)); padding: 10px var(--pad); }
  .lb__bar .cat-chips { flex: 1 1 100%; order: 2; }
  .lb__tools { flex: 1 1 100%; }
  .cat-search { flex: 1; min-width: 0; }
  .cat-search input { width: 100%; }
  .cat-sort select { width: 112px; }
  .lb .filters-btn { padding: 0 14px; }
  .lb__grid { --cols: 2; gap: 30px 12px; }
  .lb-ch { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'n i' 't t' 'p p' 'c c'; gap: 8px 16px; padding: 36px 0 16px; }
  .lb-ch__t { font-size: 46px; }
  .lb-ch__p { font-size: 16px; }
  .lb-ch__ic { width: 92px; }
  .lb-feat { min-height: 220px; }
  .lb-feat--txt { padding: 18px; }
  .lb-feat__t { font-size: 28px; }
  .lb-feat--promo .lb-feat__t { font-size: 30px; }
  .lb-feat__p { font-size: 14px; }
  .card__name { font-size: 22px; }
  .card__body { grid-template-columns: minmax(0, 1fr); padding-top: 10px; }
  .card__price { grid-column: 1; grid-row: auto; flex-direction: row; align-items: baseline; gap: 6px; }
  .card__badge { left: 10px; top: 10px; }
  .dot-c { width: 20px; height: 20px; }
  .card__add { min-height: 40px; padding: 0 10px; font-size: 10px; }
  .filters { border-radius: 0 22px 22px 0; }

  /* товар */
  .pwrap .product { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .gallery { grid-template-columns: minmax(0, 1fr); }
  .gallery__main { grid-column: 1; border-radius: 24px; }
  .gallery__thumbs { grid-column: 1; grid-row: 2; flex-direction: row; overflow-x: auto; }
  .gallery__thumbs button { width: 66px; flex: none; }
  .ptitle { font-size: 64px; }
  .pbuy .stepper--lg { flex: none; }
  .pbuy .pfav { margin-left: auto; }
  .pbuy .btn { order: 3; flex: 1 1 100%; }
  .pnote { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pnote div { padding: 16px; }
  .pnote b { font-size: 18px; }
  .related .grid { --cols: 2; }

  /* корзина */
  .drawer { border-radius: 22px 0 0 22px; }
  .done__t { font-size: 54px; }

  /* подбор: зеркало сверху, шаги под ним */
  .pd { grid-template-columns: minmax(0, 1fr); gap: 0; width: 100%; }
  .pd__mirror { position: sticky; top: var(--hdr); z-index: 4; height: 46svh; padding: 4px 12px 8px; background: linear-gradient(var(--milk) 88%, rgba(247, 243, 239, 0)); }
  .mirror { position: relative; top: 0; height: 100%; min-height: 0; border-radius: 200px 200px 24px 24px; }
  .mirror__svg { height: 96%; }
  .mirror__bar { top: 11%; }
  .mirror__read { bottom: 12px; font-size: 9px; padding: 8px 12px; }
  .mirror__tip { display: none; }
  .mirror__scale { bottom: 56px; }
  .pd__steps { padding: 0 var(--pad); }
  .pd__h { font-size: 56px; }
  .step legend, .step__h { font-size: 27px; }
  .faces { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .face { grid-template-columns: 34px minmax(0, 1fr); padding: 12px 10px; gap: 2px 8px; }
  .face__ic svg { width: 34px; height: 42px; }
  .face b { font-size: 18px; }
  .face small { display: none; }
  .res { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .rc__n { font-size: 19px; }
  .rc__why, .rc__s { display: none; }
  .rc__m { font-size: 9px; }
  .rc__p { font-size: 11px; }
  .lens-o { padding: 11px 12px; gap: 10px; }
  .lens-o span { font-size: 15.5px; }
  .pd__sum { padding: 20px 18px; border-radius: 24px; }
  .pd-bar { display: flex; }
  .is-pd .foot { padding-bottom: 70px; }

  /* салон и доставка */
  .sx-hero { grid-template-columns: minmax(0, 1fr); padding-top: 6px; }
  .sx-hero__img { border-radius: 24px 140px 24px 24px; }
  .steps4, .book, .services, .where { padding-top: 80px; }
  .steps4__list, .services__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .steps4__list li, .steps4__list li + li { padding: 20px 0; border-left: 0; }
  .steps4__list li::before { font-size: 54px; margin-bottom: 8px; }
  .services__grid { gap: 10px; }
  .book, .where { grid-template-columns: minmax(0, 1fr); }
  .book__form { padding: 22px 18px; border-radius: 24px; }
  .pics { grid-template-columns: minmax(0, 1fr); padding-top: 40px; }
  .dv__cards { grid-template-columns: minmax(0, 1fr); margin: 30px 0 60px; }
  .dv-card__k { margin-bottom: 20px; }
  .faq summary { font-size: 21px; }
}
@media (max-width: 380px) {
  .res { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ——— меньше движения ——— */
@media (prefers-reduced-motion: reduce) {
  .pre, .band__track, .stage__hint i { animation: none !important; }
  .pre { display: none; }
  .js [data-words] .w, .js [data-rv], .js [data-iris], .js [data-iris] img { opacity: 1; filter: none; transform: none; clip-path: none; transition: none; }
  .js .lb-ch__ic path, .js .chap--shape .chap__a .shape-ico path { stroke-dashoffset: 0; transition: none; }
  .card__look { display: none; }
  .rc.is-deal, [data-glasses].is-drop { animation: none; }
  .btn::after, .mmenu, .mmenu nav a { transition: none; }
}

/* на сенсорных экранах кнопка в карточке — контурная, лукбук остаётся лёгким */
@media (hover: none), (pointer: coarse) {
  .card__add { background: transparent; color: var(--ink); border-color: rgba(35, 33, 63, .3); }
}
/* планшет в портрете: лукбук в три колонки */
@media (min-width: 600px) and (max-width: 860px) {
  .lb__grid, .related .grid { --cols: 3; }
  .card__name { font-size: 21px; }
}
.lb-feat img { object-position: 50% 40%; }

/* пометка под галереей: какой цвет на фото */
.gal-note { grid-column: 1 / -1; margin: 12px 0 0; font: 400 10.5px/1.5 var(--font-body); color: var(--ink2); }
@media (min-width: 861px) { .gal-note { grid-column: 2; } }
/* последняя строка подвала — самая мелкая строка «таблицы» */
.foot__dev { margin: 0; padding: 0 0 22px; text-align: center; font: 400 10.5px/1.4 var(--font-body); letter-spacing: .04em; }
.foot__dev a { color: var(--ink2); text-decoration: none; background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; transition: background-size .45s var(--ease), color .3s; }
.foot__dev a:hover { color: var(--ink); background-size: 100% 1px; }