/* NAZAR DUNYO — вид. Сцена «рейл бутика»: латунный рейл, арки-вешалки, малиновая бирка. Направление — design/direction.md */

body { background: var(--surface); }
::selection { background: var(--accent); color: var(--on-accent); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a { text-decoration-thickness: 1px; text-underline-offset: .2em; }
.script { font-family: var(--font-script); font-weight: 400; font-style: normal; color: var(--accent); letter-spacing: 0; text-transform: none; }

/* ---------- шапка ---------- */
.header { background: color-mix(in oklab, var(--surface) 94%, transparent); border-bottom: 1px solid transparent; transition: border-color var(--dur-mid) var(--ease-out); }
.header.is-scrolled { border-color: var(--line); }
.header__inner { min-height: 68px; }
.logo { position: relative; display: inline-flex; align-items: flex-end; text-decoration: none; color: var(--ink); padding: .2rem .9rem .35rem 0; }
.logo__nazar { font: 500 1.45rem/1 var(--font-display); letter-spacing: .14em; }
.logo__dunyo { position: absolute; right: -.3rem; bottom: -.55rem; font: 400 1.35rem/1 var(--font-script); color: var(--accent); transform: rotate(-8deg); }
.nav__list a { font: 600 var(--step--1)/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; padding: .6rem 0; position: relative; }
.nav__list a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: .2rem; height: 1px; background: var(--accent); transition: right var(--dur-mid) var(--ease-out); }
.nav__list a:hover::after, .nav__list a[aria-current]::after { right: 0; }
.lang button { font-weight: 600; letter-spacing: .08em; }
.header__cta { --cut: 9px; display: inline-flex; align-items: center; min-height: 40px; padding: .5rem 1.05rem .5rem 1.5rem; position: relative; background: var(--accent); color: var(--on-accent); text-decoration: none; font: 600 var(--step--1)/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut)); }
.header__cta::before { content: ''; position: absolute; left: .6rem; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--surface); }
.mobile-menu { background: var(--surface); }
.mobile-menu ul a { font-family: var(--font-display); text-decoration: none; }

/* ---------- общие детали ---------- */
.kicker { font: 600 var(--step--1)/1.3 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); }
.sec-label { display: flex; align-items: center; gap: .9rem; font: 600 var(--step--1)/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); }
.sec-label__num { font: italic 400 var(--step-1)/1 var(--font-display); letter-spacing: 0; color: var(--accent-ink); }
.l1, .l2 { display: block; }
.l2.script { font-size: 1.35em; line-height: .8; margin-top: -.08em; padding-left: 1.2em; }
.btn { font: 600 var(--step--1)/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; min-height: 52px; padding: 0 1.8rem; border-radius: 0; }
.btn--primary { --cut: 12px; background: var(--accent); color: var(--on-accent); padding-left: 2.4rem; position: relative;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut)); }
.btn--primary::before { content: ''; position: absolute; left: .95rem; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--surface); }
.btn--primary:hover { background: #CC0F46; }
.btn--ghost { border-color: currentColor; color: inherit; }
.btn--ghost:hover { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.btn--wide { width: 100%; }
.link-arrow { display: inline-flex; gap: .45rem; align-items: center; font: 600 var(--step--1)/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; padding: .9rem 0; border-bottom: 1px solid currentColor; }
.link-arrow span { transition: transform var(--dur-mid) var(--ease-out); }
.link-arrow:hover span { transform: translate(3px, -1px); }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem; border: 1px solid var(--line); text-decoration: none; font: 600 var(--step--1)/1 var(--font-body); letter-spacing: .06em; }
.chip:hover { border-color: var(--ink); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; flex: none; box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 50%, transparent); animation: pulse 2.4s var(--ease-out) infinite; }
[data-closed] .dot { background: var(--ink-muted); animation: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 9px transparent; } }

/* ---------- сигнатура: бирка ---------- */
.tag { --cut: 10px; position: relative; display: inline-flex; align-items: baseline; gap: .3rem; padding: .55rem .8rem .55rem 1.55rem; background: var(--accent); color: var(--on-accent);
  font: 600 .95rem/1 var(--font-body); white-space: nowrap; transform-origin: 0 50%; will-change: transform;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut)); }
.tag__eye { position: absolute; left: .55rem; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--surface); }
.tag__price { font: 500 1.05em/1 var(--font-display); letter-spacing: .02em; font-variant-numeric: lining-nums; }
.tag__cur { font-size: .72em; letter-spacing: .1em; text-transform: uppercase; opacity: .9; }
.tag__old { font-size: .78em; opacity: .75; margin-right: .1rem; }
.tag__flag { order: -1; font-size: .62em; letter-spacing: .14em; text-transform: uppercase; padding-right: .35rem; margin-right: .1rem; border-right: 1px solid color-mix(in oklab, var(--on-accent) 50%, transparent); }
.tag--big { font-size: 1.25rem; padding: .8rem 1.2rem .8rem 2.1rem; --cut: 14px; }
.tag--big .tag__eye { left: .8rem; width: 9px; height: 9px; margin-top: -4.5px; }

/* ---------- арка-вешалка ---------- */
.arch { position: relative; display: block; border-radius: var(--radius-arch); overflow: hidden; aspect-ratio: 3 / 4; background: var(--plane); }
.arch img { width: 100%; height: 100%; object-fit: cover; }
.hang { flex: none; list-style: none; }
.hang__link { display: block; text-decoration: none; color: inherit; transition: transform var(--dur-reveal) var(--ease-out), opacity var(--dur-reveal) var(--ease-out); }
.hang__swing { position: relative; display: block; padding-top: 40px; transform-origin: 50% 0; will-change: transform; }
.hang__swing .hanger { position: absolute; left: 50%; top: 0; width: 40px; height: 36px; margin-left: -20px; z-index: 2; overflow: visible; }
.hang__swing .arch { margin: 0 6px; }
.hang__swing::after { content: ''; position: absolute; left: 0; right: 0; top: 34px; bottom: -6px; border: 1.5px solid var(--brass); border-bottom: 0; border-radius: var(--radius-arch); pointer-events: none; }
.hanger path { stroke: var(--brass); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.hang__meta { display: block; padding: 1rem 6px 0; }
.hang__name { font: 400 var(--step-1)/1.15 var(--font-display); }
.hang__tag { position: absolute; z-index: 3; left: 62%; bottom: 13%; box-shadow: 0 8px 18px -10px rgba(43, 26, 22, .5); }
.hang__link:hover .arch img { transform: scale(1.035); }
.arch img { transition: transform 1.2s var(--ease-out); }
.hang__link:focus-visible { outline-offset: 8px; }

/* ---------- первый экран ---------- */
.hero { position: relative; overflow: clip; padding-bottom: var(--space-6); }
.hero__top { display: flex; justify-content: space-between; gap: 1rem; padding-top: var(--space-5); }
.hero__title { position: relative; margin: 0; text-align: center; line-height: .78; font-weight: 400; }
.hero__nazar { position: relative; z-index: 1; display: block; font: 400 clamp(5.4rem, 23.5vw, 26rem)/.8 var(--font-display); letter-spacing: -.015em; margin-top: .06em; }
.hero__dunyo { position: absolute; z-index: 4; right: 9vw; top: 52%; font: 400 clamp(4.2rem, 13vw, 15rem)/1 var(--font-script); color: var(--accent); transform: rotate(-9deg); pointer-events: none; }
.hero__arches { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 26vw 1fr; align-items: end; gap: 3vw; padding-inline: var(--gutter); margin-top: -11.5vw; }
.hero__arch { margin: 0; }
.hero__arch--c { grid-column: 2; grid-row: 1; aspect-ratio: 3 / 4; overflow: visible; background: none; }
.hero__arch--c img { border-radius: var(--radius-arch); }
.hero__arch--c::after { content: ''; position: absolute; inset: -10px -10px 0; border: 1.5px solid var(--brass); border-bottom: 0; border-radius: var(--radius-arch); pointer-events: none; }
.hero__arch--l { grid-column: 1; grid-row: 1; width: 12vw; justify-self: end; align-self: start; margin-top: 12.5vw; }
.hero__arch--r { grid-column: 3; grid-row: 1; width: 15vw; justify-self: start; align-self: start; margin-top: 16vw; }
.hero__tag { position: absolute; z-index: 3; right: -3.4rem; top: 38%; font-size: 1.15rem; }
.hero__tag::after { content: ''; position: absolute; }
.hero__text { grid-column: 1; grid-row: 1; align-self: end; justify-self: start; display: grid; gap: var(--space-4); max-width: calc(100% - 12vw - 1.5rem); }
.hero__lead { max-width: 24ch; font: 400 var(--step-1)/1.4 var(--font-body); align-self: end; padding-bottom: .4rem; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.6rem; }

/* ---------- рейл-кино ---------- */
.film { position: relative; background: var(--plane); height: 400vh; }
.film__stage { grid-template-columns: minmax(0, 1fr); position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; padding-top: calc(var(--header-h, 68px) + var(--space-4)); }
.film__words { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.film__word { grid-area: 1 / 1; font: italic 400 clamp(6rem, 21vw, 24rem)/.9 var(--font-display); color: color-mix(in oklab, var(--accent) 13%, var(--plane)); white-space: nowrap; transform: rotate(-7deg) translateY(8%); opacity: 0; transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
.film__word.is-on { opacity: 1; transform: rotate(-7deg) translateY(0); }
.film__head { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--space-4) var(--space-6); }
.film__head .sec-label { grid-column: 1 / -1; }
.film__title { font: 400 var(--step-4)/.95 var(--font-display); letter-spacing: -.01em; }
.film__live { display: flex; align-items: center; gap: .6rem; font: 600 var(--step--1)/1.3 var(--font-body); letter-spacing: .04em; max-width: 26ch; color: var(--ink); }
.film__rail { position: relative; align-self: center; padding-top: 0; }
.film__bar, .rail__bar { position: absolute; left: 0; right: 0; top: 0; height: 5px; z-index: 3; border-radius: 3px;
  background: linear-gradient(180deg, #D9BE8E 0%, var(--brass) 45%, #7E6240 100%); box-shadow: 0 6px 14px -6px rgba(43, 26, 22, .35); }
ul.film__track { --w: min(21vw, 30vh); position: relative; display: flex; gap: 4vw; margin: 0; padding: 0 calc(50vw - var(--w) / 2); will-change: transform; }
.film__track .hang { width: var(--w); }
.film__track .hang__link { transform: scale(.84); opacity: .78; transform-origin: 50% 0; }
.film__track .hang.is-active .hang__link { transform: none; opacity: 1; }
.film__track .hang__swing .hanger { top: -2px; }
.film__foot { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: var(--space-4) var(--space-5); }
.film__count { font: italic 400 var(--step-2)/1 var(--font-display); }
.film__count b { font-weight: 400; color: var(--accent-ink); }
.film__hint { font: 600 var(--step--1)/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }

/* ---------- разделы строками ---------- */
.cats { padding-block: var(--space-8) var(--space-7); }
.cats__title, .how__title, .shops__title { font: 400 var(--step-4)/.95 var(--font-display); letter-spacing: -.01em; margin-block: var(--space-4) var(--space-6); }
.rows { border-top: 1px solid var(--line); }
.row { border-bottom: 1px solid var(--line); }
.row__link { position: relative; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto 7rem 2rem; align-items: center; gap: var(--space-5); min-height: 116px; padding: var(--space-4) 0; text-decoration: none; isolation: isolate; }
.row__link::before { content: ''; position: absolute; inset: 0 calc(-1 * var(--gutter)); background: var(--plane); z-index: -1; transform: scaleY(0); transform-origin: 50% 100%; transition: transform var(--dur-mid) var(--ease-out); }
.row__link:hover::before, .row__link:focus-visible::before { transform: none; }
.row__num { font: italic 400 var(--step-1)/1 var(--font-display); color: var(--accent-ink); }
.row__name { font: 400 var(--step-3)/1 var(--font-display); transition: transform var(--dur-mid) var(--ease-out); }
.row__link:hover .row__name { transform: translateX(.6rem); }
.row__thumbs { display: flex; }
.arch--mini { width: 62px; margin-left: -14px; border: 3px solid var(--surface); transition: transform var(--dur-mid) var(--ease-out); }
.row__link:hover .arch--mini { border-color: var(--plane); }
.row__link:hover .arch--mini:nth-child(1) { transform: translate(-10px, -4px) rotate(-6deg); }
.row__link:hover .arch--mini:nth-child(3) { transform: translate(10px, -4px) rotate(6deg); }
.row__count { font: 600 var(--step--1)/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); text-align: right; }
.row__arrow { font-size: var(--step-2); color: var(--accent-ink); transition: transform var(--dur-mid) var(--ease-out); }
.row__link:hover .row__arrow { transform: translateX(6px); }

/* ---------- как заказать ---------- */
.how { padding-block: var(--space-7) var(--space-8); }
.how__grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-6); align-items: start; }
.how__title { margin-bottom: 0; }
.steps { counter-reset: s; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.step { display: grid; grid-template-columns: 5.5rem 1fr; column-gap: var(--space-5); row-gap: .4rem; padding: var(--space-5) 0; border-top: 1px solid var(--line); }
.step:last-child { border-bottom: 1px solid var(--line); }
.step__num { grid-row: span 2; font: italic 400 var(--step-3)/.9 var(--font-display); color: var(--accent-ink); }
.step__h { font: 400 var(--step-2)/1.15 var(--font-display); }
.step p { color: var(--ink-muted); max-width: 46ch; }

/* ---------- бутики ---------- */
.shops { padding-block: var(--space-7) var(--space-8); background: var(--plane); }
.shops__grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-6); align-items: start; }
.shop { position: relative; padding-top: var(--space-6); border-top: 5px solid var(--brass); }
.shop--park { margin-top: var(--space-8); }
.shop__num { position: absolute; top: var(--space-4); right: 0; font: italic 400 var(--step-2)/1 var(--font-display); color: var(--accent-ink); }
.shop__name { font: 400 var(--step-4)/.95 var(--font-display); letter-spacing: -.01em; }
.shop__place { margin-top: var(--space-4); max-width: 30ch; }
.shop__status { display: flex; align-items: center; gap: .6rem; margin-top: var(--space-5); font: 600 var(--step-0)/1.3 var(--font-body); }
.shop__hours { color: var(--ink-muted); margin-top: .2rem; }
.shop__maps { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--space-5); }

/* ---------- финал ---------- */
.final { position: relative; overflow: hidden; background: var(--ink); color: var(--surface); padding-block: var(--space-8); }
.final__inner { position: relative; }
.final__script { position: absolute; right: -3vw; top: 58%; transform: translateY(-50%) rotate(-8deg); font: 400 clamp(9rem, 27vw, 30rem)/1 var(--font-script); color: var(--accent); opacity: .92; pointer-events: none; }
.final__title { position: relative; font: 400 var(--step-4)/1 var(--font-display); max-width: 12ch; }
.final__text { position: relative; margin-top: var(--space-5); max-width: 30ch; font-size: var(--step-1); color: color-mix(in oklab, var(--surface) 82%, transparent); }
.final__actions { position: relative; display: flex; flex-wrap: wrap; gap: .6rem; margin-top: var(--space-6); }
.final .btn--ghost:hover { background: var(--surface); color: var(--ink); border-color: var(--surface); }

/* ---------- подвал ---------- */
.footer { background: var(--ink); color: var(--surface); padding-block: var(--space-6) var(--space-5); border-top: 1px solid color-mix(in oklab, var(--surface) 14%, transparent); }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-6); }
.logo--big .logo__nazar { font-size: 2.2rem; color: var(--surface); }
.logo--big .logo__dunyo { font-size: 2rem; }
.footer__line { margin-top: var(--space-4); max-width: 28ch; color: color-mix(in oklab, var(--surface) 75%, transparent); }
.footer__h { font: 600 var(--step--1)/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: color-mix(in oklab, var(--surface) 70%, transparent); margin-bottom: var(--space-4); }
.footer__list { display: grid; gap: .5rem; }
.footer__list a { text-decoration: none; }
.footer__list a:hover { color: #FF7FA3; }
.footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid color-mix(in oklab, var(--surface) 14%, transparent); font-size: var(--step--1); color: color-mix(in oklab, var(--surface) 70%, transparent); }
.footer :focus-visible { outline-color: #FF7FA3; }

/* ---------- каталог и рейлы ---------- */
.catalog { padding-top: var(--space-5); }
.catalog__head { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: var(--space-6); }
.catalog__title, .page-hero__title { font: 400 var(--step-4)/.95 var(--font-display); letter-spacing: -.01em; }
.catalog__lead { max-width: 40ch; color: var(--ink-muted); justify-self: end; }
.tabs { display: flex; gap: var(--space-5); overflow-x: auto; scrollbar-width: none; margin-top: var(--space-5); border-bottom: 1px solid var(--line); }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; position: relative; background: none; border: 0; padding: .9rem 0 1rem; min-height: 48px; font: 400 var(--step-1)/1 var(--font-display); color: var(--ink-muted); }
.tab sup { font: 600 .55em/1 var(--font-body); margin-left: .25em; color: var(--accent-ink); }
.tab[aria-selected="true"] { color: var(--ink); }
.tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-mid) var(--ease-out); }
.tab[aria-selected="true"]::after { transform: none; }
.panel { background: var(--plane); margin-top: var(--space-5); padding-top: var(--space-5); }
.rail { position: relative; }
.rail__bar { top: 0; }
ul.rail__track { display: flex; gap: 3.2vw; margin: 0; padding: 0 var(--gutter) var(--space-5); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; cursor: grab; }
.rail__track::-webkit-scrollbar { display: none; }
.rail__track.is-drag { cursor: grabbing; scroll-snap-type: none; }
.rail__track.is-drag a { pointer-events: none; }
.rail__track .hang { width: min(23vw, 32vh); scroll-snap-align: start; }
.rail__track:focus-visible { outline-offset: -4px; }
.rail__ui { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: var(--space-5); }
.rail__btn { width: 52px; height: 52px; border: 1px solid var(--ink); background: none; font-size: 1.2rem; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.rail__btn:hover { background: var(--ink); color: var(--surface); }
.rail__btn:disabled { opacity: .3; pointer-events: none; }
.rail__count { font: italic 400 var(--step-2)/1 var(--font-display); }
.rail__count b { font-weight: 400; color: var(--accent-ink); }

/* ---------- товар ---------- */
.product { padding-top: var(--space-5); }
.product__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-7); row-gap: var(--space-4); }
.crumbs { grid-column: 1 / -1; display: flex; gap: .6rem; font: 600 var(--step--1)/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.crumbs a { text-decoration: none; padding: .5rem 0; }
.crumbs a:hover { color: var(--ink); }
.crumbs span { padding: .5rem 0; }
.gal { position: relative; min-width: 0; }
ul.gal__track { display: flex; gap: var(--space-4); margin: 0; padding: 14px 10px 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; list-style: none; }
.gal__track::-webkit-scrollbar { display: none; }
.gal__slide { flex: 0 0 min(78%, calc((100svh - 230px) * .75)); scroll-snap-align: start; position: relative; }
.gal__slide .arch { overflow: hidden; }
.gal__slide::after { content: ''; position: absolute; inset: -8px -8px 0; border: 1.5px solid var(--brass); border-bottom: 0; border-radius: var(--radius-arch); pointer-events: none; }
.gal__slide:only-child { flex-basis: min(86%, calc((100svh - 230px) * .75)); }
.gal__dots { display: flex; gap: .2rem; margin-top: var(--space-4); }
.gal__dot { width: 34px; height: 34px; padding: 0; border: 0; background: none; position: relative; }
.gal__dot::before { content: ''; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; background: var(--line); transition: background-color var(--dur-micro) var(--ease-out); }
.gal__dot[aria-current="true"]::before { background: var(--accent); }
.product__info { min-width: 0; position: sticky; top: calc(var(--header-h, 68px) + var(--space-5)); align-self: start; display: grid; gap: var(--space-4); }
.product__new { font: 600 var(--step--1)/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); }
.product__title { font: 400 var(--step-3)/1.02 var(--font-display); letter-spacing: -.01em; }
.product__tag { padding-block: .3rem; }
.specs { display: grid; margin: var(--space-2) 0 0; }
.specs div { display: flex; align-items: baseline; gap: .6rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.specs dt { font: 600 var(--step--1)/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); flex: none; }
.specs div::after { content: ''; order: 1; flex: 1; border-bottom: 1px dotted color-mix(in oklab, var(--ink) 35%, transparent); transform: translateY(-.25em); min-width: 1rem; }
.specs dd { order: 2; margin: 0; text-align: right; max-width: 62%; }
.product__actions { display: grid; gap: .6rem; margin-top: var(--space-3); }
.product__note { font-size: var(--step--1); color: var(--ink-muted); max-width: 46ch; }
.product__post { justify-self: start; }
.more { margin-top: var(--space-8); padding-top: var(--space-6); background: var(--plane); }
.more__title { font: 400 var(--step-3)/1 var(--font-display); margin-bottom: var(--space-6); }
.more .rail__track .hang { width: min(19vw, 28vh); }

/* ---------- страницы бутиков и заказа ---------- */
.page-hero { padding-block: var(--space-7) var(--space-6); }
.page-hero__lead { margin-top: var(--space-5); max-width: 52ch; font-size: var(--step-1); }
.facts { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-6); }
.facts li { display: grid; gap: .3rem; color: var(--ink-muted); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.facts b { font: 400 var(--step-3)/1 var(--font-display); color: var(--ink); letter-spacing: 0; text-transform: none; }
.shops--page { padding-top: var(--space-6); }
.contacts { margin-top: var(--space-8); }
.contacts__h { font: 600 var(--step--1)/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); }
.contacts__list { display: grid; gap: .2rem; margin-top: var(--space-4); }
.contacts__big { font: 400 var(--step-3)/1.15 var(--font-display); text-decoration: none; }
.contacts__big:hover { color: var(--accent-ink); }
.how--page { padding-top: 0; }
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-7); margin-block: var(--space-7) var(--space-6); }
.faq dt { font: 400 var(--step-2)/1.15 var(--font-display); }
.faq dd { margin: .6rem 0 0; color: var(--ink-muted); max-width: 44ch; }
.how--page .final__actions .btn--ghost { color: var(--ink); }

/* ---------- планшет ---------- */
@media (max-width: 1100px) {
  .row__link { grid-template-columns: 3.5rem minmax(0, 1fr) auto 2rem; }
  .row__count { display: none; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .rail__track .hang { width: 34vw; }
  .more .rail__track .hang { width: 30vw; }
}

/* ---------- телефон ---------- */
@media (max-width: 900px) {
  .header__cta { display: none; }
  .product__grid { grid-template-columns: minmax(0, 1fr); }
  .product__info { position: static; }
  .gal { margin-inline: calc(-1 * var(--gutter)); }
  ul.gal__track { padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .gal__dots { padding-inline: var(--gutter); }
  .how__grid { grid-template-columns: 1fr; }
  .shops__grid { grid-template-columns: 1fr; }
  .shop--park { margin-top: var(--space-6); }
  .catalog__head { grid-template-columns: 1fr; gap: var(--space-4); }
  .catalog__lead { justify-self: start; }
  .faq { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .hero__top { padding-top: var(--space-4); }
  .hero__top .kicker:last-child { display: none; }
  .hero__nazar { font-size: 27.5vw; margin-top: .14em; }
  .hero__dunyo { font-size: 17vw; right: 4vw; top: 64%; }
  .hero__arches { grid-template-columns: 1fr 64vw 1fr; gap: 0; margin-top: -5vw; padding-inline: 0; }
  .hero__arch--l { width: 30vw; margin-top: 30vw; justify-self: start; margin-left: -6vw; z-index: -1; }
  .hero__arch--r { width: 30vw; margin-top: 44vw; justify-self: end; margin-right: -6vw; z-index: -1; }
  .hero__arch--c { margin-inline: 0; }
  .hero__tag { right: -1.5rem; top: 56%; font-size: 1rem; }
  .hero__text { grid-column: 1 / -1; grid-row: 2; max-width: none; margin-top: var(--space-5); padding-inline: var(--gutter); }
  .hero__lead { max-width: none; font-size: var(--step-0); }
  .film__stage { padding-top: calc(var(--header-h, 60px) + var(--space-3)); }
  .film__head { grid-template-columns: 1fr; gap: var(--space-3); }
  .film__live { max-width: none; }
  .film__title { font-size: var(--step-3); }
  ul.film__track { --w: 62vw; gap: 8vw; }
  .film__track .hang { width: 62vw; }
  .film__track .hang__link { transform: scale(.8); }
  .film__word { font-size: 34vw; }
  .film__hint { display: none; }
  .row__link { grid-template-columns: 2.6rem minmax(0, 1fr) auto; gap: var(--space-3); min-height: 92px; }
  .row__name { font-size: var(--step-2); }
  .row__arrow { display: none; }
  .arch--mini { width: 44px; margin-left: -16px; }
  .step { grid-template-columns: 3.6rem 1fr; column-gap: var(--space-4); }
  .step__num { font-size: var(--step-2); }
  ul.rail__track { gap: 6vw; }
  .rail__track .hang { width: 56vw; }
  .more .rail__track .hang { width: 56vw; }
  .gal__slide { flex-basis: 84%; }
  .footer__grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .final__script { font-size: 52vw; right: -8vw; top: 18%; }
  .hang__tag { left: 48%; font-size: .85rem; }
  .tag--big { font-size: 1.02rem; padding: .7rem .9rem .7rem 1.8rem; }
  .l2.script { padding-left: .6em; }
  .catalog__title, .page-hero__title { font-size: var(--step-3); }
  .catalog__lead { font-size: var(--step--1); }
  .tabs { margin-top: var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
  .film { height: auto; }
  .film__stage { position: relative; height: auto; min-height: 0; padding-bottom: var(--space-4); }
  ul.film__track { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: var(--space-4); }
  .film__track .hang { scroll-snap-align: center; }
  .film__track .hang__link { transform: none; opacity: 1; }
  .film__word:first-child { opacity: 1; }
  .dot { animation: none; }
}

/* ---------- вход первого экрана: буквы встают, росчерк пишется, арки поднимаются ---------- */
.hero__nazar .ch { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .hero__nazar .ch { animation: rise 1.1s var(--ease-out) both; animation-delay: calc(var(--i) * 70ms); }
  .hero__dunyo { animation: write 1.4s cubic-bezier(.65, 0, .35, 1) .55s both; }
  .hero__arch--c { animation: lift 1.2s var(--ease-out) .25s both; }
  .hero__arch--l, .hero__arch--r { animation: lift 1.2s var(--ease-out) .45s both; }
  .hero__tag { animation: drop .9s cubic-bezier(.34, 1.56, .64, 1) 1.1s backwards; }
}
@keyframes rise { from { transform: translateY(.35em); opacity: 0; } }
@keyframes write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -10% 0 0); } }
@keyframes lift { from { transform: translateY(60px); opacity: 0; } }
@keyframes drop { from { transform: translateY(-40px) rotate(-30deg); opacity: 0; } }