/* «Аңыз» — бутик нишевой парфюмерии. Референс: Abel (referest.ru) — насыщенный первый экран с флаконом и огромной надписью
   широким гротеском, кремовая редакционная сетка с тонкими линиями, ячейки товаров с обводкой, блок «собери мини-набор».
   Свой цвет: ультрамарин «көк» + абрикос. Шрифты: Anyz Wide (Roboto Flex, ширина 151, OFL), Onest, IBM Plex Mono. */
@font-face { font-family: 'Anyz Wide'; font-style: normal; font-weight: 250 600; font-display: swap; src: url(../fonts/anyz-wide-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2116, U+2212; }
@font-face { font-family: 'Anyz Wide'; font-style: normal; font-weight: 250 600; font-display: swap; src: url(../fonts/anyz-wide-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Anyz Wide'; font-style: normal; font-weight: 250 600; font-display: swap; src: url(../fonts/anyz-wide-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Anyz Wide'; font-style: normal; font-weight: 250 600; font-display: swap; src: url(../fonts/anyz-wide-tenge.woff2) format('woff2'); unicode-range: U+20B8; }

:root {
  --bg: #f2eee6; --fg: #15140f; --muted: #6c675d; --line: rgba(21, 20, 15, .15); --soft: #e9e3d8; --paper: #fbf8f2;
  --accent: #15140f; --accent-ink: #f2eee6; --sale: #c2412d; --ok: #3d7746;
  --ultra: #2631c9; --ultra-d: #141a7a; --ultra-l: #4b57ff; --apri: #ffc49a; --apri-d: #f29a62; --night: #0d0f2b;
  --card-bg: #e9e3d8; --radius: 0px; --radius-btn: 0px; --wrap: 1360px; --gap: 0px; --pad: 32px; --card-ratio: 4/5;
  --font-body: 'Onest', system-ui, sans-serif; --font-head: 'Anyz Wide', 'Onest', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.2, .75, .2, 1);
}
body { font: 400 16px/1.55 var(--font-body); background: var(--bg); }
h1, h2, h3 { font-weight: 300; }
::selection { background: var(--ultra); color: #fff; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kicker { margin: 0 0 14px; font: 500 12px/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.h2 { font: 300 clamp(30px, 3.6vw, 52px)/1.04 var(--font-head); text-transform: uppercase; letter-spacing: -.01em; margin: 0; }
.lnk { display: inline-flex; align-items: center; gap: 8px; font: 500 12.5px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.lnk svg, .fam__go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .3s var(--ease); }
.lnk:hover svg, .fam__go:hover svg { transform: translateX(4px); }
.small { font-size: 13px; }

/* кнопки */
.btn { min-height: 50px; padding: 0 26px; font: 500 12.5px/1 var(--font-mono); letter-spacing: .11em; text-transform: uppercase; background: var(--fg); color: var(--bg); border: 1px solid var(--fg); transition: background .25s, color .25s, border-color .25s, transform .35s var(--ease); }
.btn:hover { filter: none; background: var(--ultra); border-color: var(--ultra); color: #fff; }
.btn--lg { min-height: 58px; font-size: 13px; }
.btn--light { background: var(--bg); color: var(--fg); border-color: var(--bg); }
.btn--light:hover { background: var(--apri); border-color: var(--apri); color: var(--fg); }
.btn--line { background: transparent; color: inherit; border-color: currentColor; }
.btn--line:hover { background: var(--bg); color: var(--fg); border-color: var(--bg); }
.btn--line-dark, .btn--ghost { background: transparent; color: var(--fg); border-color: var(--fg); }
.btn--line-dark:hover, .btn--ghost:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chip { font: 500 12px var(--font-mono); letter-spacing: .06em; border-color: var(--line); background: transparent; }
.chip.is-on { background: var(--fg); color: var(--bg); }

/* логотип и шапка */
.logo { display: inline-flex; align-items: center; gap: 11px; }
.logo__mark svg { display: block; width: 22px; height: 22px; fill: currentColor; transition: transform .8s var(--ease); }
a:hover > .logo .logo__mark svg { transform: rotate(90deg); }
.logo__w { font: 400 19px/1 var(--font-head); letter-spacing: .28em; text-transform: uppercase; }
.hdr { position: sticky; top: 0; z-index: 50; background: rgba(242, 238, 230, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); color: var(--fg); transition: transform .45s var(--ease), background .35s, color .35s, border-color .35s; view-transition-name: hdr; }
.hdr--over { position: fixed; left: 0; right: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--bg); border-color: rgba(255, 255, 255, .2); }
.hdr--over.is-solid { background: rgba(242, 238, 230, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--fg); border-color: var(--line); }
.hdr.is-hidden { transform: translateY(-101%); }
.hdr__in { display: flex; align-items: stretch; height: 64px; }
.hdr a { text-decoration: none; }
.hdr__logo { display: flex; align-items: center; padding: 0 28px; border-right: 1px solid; border-color: inherit; }
.hdr__logo { border-right-color: currentColor; border-right-color: color-mix(in srgb, currentColor 22%, transparent); }
.hdr__nav { display: flex; align-items: center; gap: 28px; padding: 0 28px; font: 500 12px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.hdr__nav a { position: relative; padding: 6px 0; }
.hdr__nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
.hdr__nav a:hover::after, .hdr__nav a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.hdr__nav--2 { margin-left: auto; }
.hdr__pick { display: inline-flex; align-items: center; gap: 8px; }
.hdr__pick i { width: 7px; height: 7px; border-radius: 50%; background: var(--apri-d); box-shadow: 0 0 0 0 rgba(242, 154, 98, .6); animation: ping 2.4s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 9px rgba(242, 154, 98, 0); } 100% { box-shadow: 0 0 0 0 rgba(242, 154, 98, 0); } }
.hdr__ic { display: flex; align-items: center; gap: 2px; padding: 0 16px; border-left: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.ic { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border: 0; background: none; color: inherit; padding: 0; }
.ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ic b { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--apri-d); color: var(--fg); font: 600 10.5px/18px var(--font-body); text-align: center; }
.hdr__menu { display: none; }
.bump { animation: bump .6s var(--ease); }

/* бегущая строка */
.marq { overflow: hidden; background: var(--apri); color: var(--fg); border-bottom: 1px solid var(--fg); padding: 15px 0; }
.marq__in { display: flex; width: max-content; gap: 30px; align-items: center; font: 500 13px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; animation: marq 42s linear infinite; transform: skewX(var(--skew, 0deg)); transition: transform .3s; }
.marq__in i { font-style: normal; color: var(--ultra); }
@keyframes marq { to { translate: -50% 0; } }

/* первый экран */
.hero { position: relative; min-height: max(660px, 100svh); color: var(--bg); overflow: clip; isolation: isolate; display: flex; flex-direction: column; justify-content: center; }
.hero__bg { position: absolute; inset: 0; z-index: -2; background: radial-gradient(60% 70% at 72% 46%, #5561ff 0%, var(--ultra) 42%, var(--ultra-d) 100%); }
.hero__bg::after { content: ''; position: absolute; inset: 0; opacity: .22; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero__smoke { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%); mask-image: linear-gradient(180deg, transparent 0, #000 22%); mix-blend-mode: screen; opacity: 0; transition: opacity 2.4s ease; pointer-events: none; }
.hero.is-smoke .hero__smoke { opacity: 1; }
.hero.is-static .hero__smoke { display: none; }
.hero__stage { position: absolute; z-index: 0; right: max(6vw, calc(50% - 600px)); bottom: 92px; width: min(24vw, 350px); perspective: 1100px; }
.hero__glow { position: absolute; left: 50%; bottom: 8%; width: 150%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 196, 154, .55), rgba(255, 196, 154, .12) 55%, rgba(255, 196, 154, 0)); filter: blur(8px); animation: glow 7s ease-in-out infinite; }
@keyframes glow { 50% { transform: scale(1.08); opacity: .8; } }
.hero__bottle { position: relative; transform-style: preserve-3d; will-change: transform; }
.hero__bottle .fl { width: 100%; }
.fx .hero__stage { animation: rise 1.6s var(--ease) .15s both; }
@keyframes rise { from { opacity: 0; transform: translateY(80px) scale(.94); filter: blur(14px); } }
.hero__copy { position: relative; z-index: 2; padding-top: 72px; pointer-events: none; }
.hero__copy .kicker { color: rgba(255, 255, 255, .72); }
.hero__t { margin: 0; font: 300 clamp(44px, 8.2vw, 136px)/1.06 var(--font-head); letter-spacing: -.025em; text-transform: uppercase; color: var(--apri); }
.hero__t .hl { display: block; }
.hero__t .hl > span { display: inline-block; }
.fx .hero__t .hl > span { transform: translateY(45%); clip-path: inset(0 0 100% 0); transition: transform 1.2s var(--ease), clip-path 1.2s var(--ease); }
.fx .hero__t .hl:nth-child(2) > span { transition-delay: .12s; } .fx .hero__t .hl:nth-child(3) > span { transition-delay: .24s; }
.fx.is-loaded .hero__t .hl > span { transform: none; clip-path: inset(-20% -5% -30% -5%); }
.hero__bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; border-top: 1px solid rgba(255, 255, 255, .22); background: linear-gradient(0deg, rgba(13, 15, 60, .35), rgba(13, 15, 60, 0)); }
.hero__bar-in { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 20px 0; }
.hero__bar p { margin: 0; max-width: 54ch; font: 400 12.5px/1.65 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: rgba(255, 255, 255, .86); }
.hero__cta { display: flex; gap: 12px; flex: none; }
.hero__hint { position: relative; z-index: 2; margin: 26px 0 0; display: flex; align-items: center; gap: 10px; font: 400 11px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.hero__hint::before { content: ''; width: 28px; height: 1px; background: currentColor; }
.fx .hero__hint { animation: fadein 1s 2.2s both; }
@keyframes fadein { from { opacity: 0; } }

/* флаконы (js/flacon.js) */
.fl { position: relative; aspect-ratio: 300 / 540; }
.fl__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fl__glass { position: absolute; -webkit-backdrop-filter: blur(6px) saturate(1.25) brightness(1.08); backdrop-filter: blur(6px) saturate(1.25) brightness(1.08); background: rgba(255, 255, 255, .05); }

/* «Откройте» — ячейки как в редакционной сетке */
.disc { padding: 96px 0 0; }
.disc__head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 34px; flex-wrap: wrap; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tabs button { border: 0; background: none; padding: 8px 10px; font: 500 12px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); transition: color .2s; }
.tabs button[aria-selected="true"] { color: var(--fg); }
.tabs button[aria-selected="true"]::before { content: '[ '; } .tabs button[aria-selected="true"]::after { content: ' ]'; }
.tabs button:hover { color: var(--fg); }
.grid--cells, .cat-main .grid, .related .grid { gap: 0; border-top: 1px solid var(--line); }
.grid--cells { --cols: 3; }
.disc__all { padding: 30px 0 0; text-align: center; }

/* карточка товара (разметка движка) */
.card { background: transparent; }
.grid--cells .card, .cat-main .card, .related .card, .lost .card { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.grid--cells .card:nth-child(3n), .cat-main .card:nth-child(3n) { border-right: 0; }
.card__media { position: relative; background: var(--card-bg); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.card__alt { position: absolute; inset: 0; clip-path: circle(0% at var(--mx, 50%) var(--my, 50%)); transition: clip-path .85s var(--ease), transform .9s var(--ease) !important; }
.card__media:hover .card__alt { clip-path: circle(145% at var(--mx, 50%) var(--my, 50%)); }
.card__badge { left: 16px; top: 16px; background: var(--bg); color: var(--fg); font: 500 11px/1.6 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; padding: 2px 9px; z-index: 2; }
.card__fav { z-index: 2; background: rgba(242, 238, 230, .82); }
.card__body { align-items: center; text-align: center; gap: 4px; padding: 20px 22px 24px; }
.card__name { order: 1; font: 400 15px/1.3 var(--font-head); letter-spacing: .08em; text-transform: uppercase; }
.card__name a:hover { text-decoration: none; color: var(--ultra); }
.card__meta { order: 2; font-size: 13.5px; }
.card__price { order: 3; justify-content: center; margin-top: 4px; font-size: 15px; }
.card__price b { font-weight: 500; }
.card__fams { order: 4; display: flex; gap: 5px; margin: 6px 0 0; }
.card__fams i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); opacity: calc(.35 + var(--w) * .65); }
.card__vars { order: 5; justify-content: center; margin-top: 8px; }
.card__vars .chip { min-height: 30px; padding: 0 11px; font-size: 11px; }
.card__add { order: 6; width: 100%; margin-top: 14px; background: transparent; color: var(--fg); border-color: color-mix(in srgb, var(--fg) 40%, transparent); }
.card__add:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.card[data-id="otlivant"] .card__vars, [data-cv^="my-"] { display: none; }

/* восемь семейств — горизонтальная лента */
.fams { position: relative; background: #12110e; color: var(--bg); --fc: #ffd23f; }
.fams__sticky { position: relative; overflow: hidden; padding: 96px 0 72px; }
.fams__sticky::before { content: ''; position: absolute; width: 70vw; aspect-ratio: 1; right: -18vw; top: -10vw; border-radius: 50%; background: radial-gradient(closest-side, var(--fc), transparent); opacity: .22; filter: blur(30px); transition: background .8s; pointer-events: none; }
.fams.is-pinned .fams__sticky { position: sticky; top: 0; height: 100vh; min-height: 640px; display: flex; flex-direction: column; padding: 0; }
.fams__head { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 8px 40px; align-items: end; padding-top: 104px; padding-bottom: 26px; }
.fams.is-pinned .fams__head { padding-top: max(84px, 11vh); }
.fams__head .kicker { color: rgba(255, 255, 255, .55); grid-column: 1 / -1; margin: 0; }
.fams__lead { margin: 0; color: rgba(255, 255, 255, .7); }
.fams__bar { grid-column: 1 / -1; height: 1px; background: rgba(255, 255, 255, .16); margin-top: 18px; }
.fams__bar i { display: block; height: 100%; background: var(--fc); transform: scaleX(0); transform-origin: left; transition: background .6s; }
.fams__view { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 10px; }
.fams__view::-webkit-scrollbar { display: none; }
.fams.is-pinned .fams__view { overflow: hidden; padding: 0 0 max(28px, 4vh); }
.fams__track { display: flex; gap: 20px; padding: 0 var(--pad); will-change: transform; }
.fam { flex: none; position: relative; width: min(82vw, 380px); display: grid; grid-template-rows: auto 1fr; background: #1d1b17; scroll-snap-align: center; border-top: 3px solid var(--c); transition: box-shadow .5s, transform .6s var(--ease); }
.fams.is-pinned .fam { width: clamp(320px, 27vw, 410px); height: min(64vh, 600px); grid-template-rows: minmax(0, 1fr) auto; }
.fam.is-on { box-shadow: 0 30px 80px -30px var(--c); }
.fam__img { overflow: hidden; aspect-ratio: 4 / 3; }
.fams.is-pinned .fam__img { aspect-ratio: auto; min-height: 0; }
.fam__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.25); will-change: transform; }
.fam__txt { padding: 18px 22px 22px; display: grid; gap: 8px; align-content: start; }
.fam__n { margin: 0; font: 500 11px var(--font-mono); letter-spacing: .14em; color: rgba(255, 255, 255, .5); }
.fam__t { margin: 0; font: 300 clamp(24px, 2.3vw, 34px)/1 var(--font-head); text-transform: uppercase; color: var(--c); }
.fam__d { margin: 0; font-size: 14.5px; color: rgba(255, 255, 255, .78); }
.fam__notes { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 2px 0 0; padding: 0; }
.fam__notes li { padding: 3px 9px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; font-size: 12.5px; color: rgba(255, 255, 255, .85); }
.fam__list { display: none; }
.fam__go { display: inline-flex; align-items: center; gap: 8px; justify-self: start; margin-top: 4px; font: 500 12px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--c); text-decoration: none; }

/* своё трио */
.trio, .ed { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.trio { margin-top: 0; border-top: 1px solid var(--line); }
.trio__media, .ed__media { position: relative; overflow: hidden; min-height: 560px; background: var(--soft); }
.trio__media img, .ed__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.trio__body, .ed__body { padding: clamp(36px, 6vw, 96px); align-self: center; max-width: 720px; }
.trio__lead { margin: 22px 0 26px; font-size: 17px; max-width: 46ch; }
.tbuild { display: grid; gap: 18px; padding: 22px; background: var(--paper); border: 1px solid var(--line); }
.tbuild__slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tslot { position: relative; display: grid; place-items: end center; height: 196px; border: 1px dashed color-mix(in srgb, var(--fg) 25%, transparent); background: radial-gradient(80% 60% at 50% 100%, var(--soft), transparent); overflow: hidden; }
.tslot.is-full { border-style: solid; border-color: var(--line); }
.tslot__fl { width: 128px; margin-bottom: -8px; }
.tslot .fl-liquid { transition: transform 1.3s cubic-bezier(.3, .8, .2, 1); }
.tslot.is-pour .fl-liquid { transform: translateY(300px); transition: none; }
.tslot__n { position: absolute; left: 10px; top: 8px; font: 500 11px var(--font-mono); color: var(--muted); }
.tbuild__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tchip { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 12px; border: 1px solid var(--line); background: var(--bg); font: 500 13px var(--font-body); transition: background .2s, color .2s, border-color .2s, opacity .2s; }
.tchip i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.tchip:hover { border-color: var(--fg); }
.tchip[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.tchip:disabled { opacity: .4; cursor: default; }
.tbuild__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.tbuild__msg { margin: 0; font: 500 12px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.trio__more { margin: 22px 0 0; color: var(--muted); }

/* плитки типов */
.types { padding: 96px 0; }
.types .h2 { margin-bottom: 30px; }
.types__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--line); }
.tile { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; background: var(--c); color: #fff; text-decoration: none; }
.tile + .tile { border-left: 1px solid var(--line); }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.tile__alt { clip-path: inset(100% 0 0 0); transition: clip-path .9s var(--ease), transform 1.2s var(--ease) !important; }
.tile:hover img { transform: scale(1.05); }
.tile:hover .tile__alt, .tile:focus-visible .tile__alt { clip-path: inset(0 0 0 0); }
.tile__t { position: absolute; z-index: 2; left: 24px; top: 22px; font: 500 14px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }

/* история: от 5 мл до флакона */
.story { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.story__in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); padding: 110px 0; }
.story__stage { position: sticky; top: 12vh; height: 76vh; min-height: 520px; border: 1px solid var(--line); background: radial-gradient(70% 55% at 50% 80%, #efe5d3, var(--paper) 70%); overflow: hidden; }
.story__fl { position: absolute; left: 50%; bottom: 5%; translate: -50% 0; width: min(21vw, 300px, 46vh); will-change: transform, opacity; }
.story__fl--vial { width: min(25vw, 360px, 56vh); }
.story__ml { position: absolute; right: 24px; top: 18px; margin: 0; font: 300 clamp(40px, 5vw, 72px)/1 var(--font-head); color: var(--ultra); }
.story__ml b { font-weight: 300; }
.story__steps .h2 { margin-bottom: 18px; }
.steps { list-style: none; margin: 0 0 36px; padding: 0; }
.step { padding: 30px 0 28vh; border-top: 1px solid var(--line); opacity: .32; transition: opacity .5s; }
.step:last-child { padding-bottom: 24vh; }
.step.is-on { opacity: 1; }
.step b { font: 500 12px var(--font-mono); letter-spacing: .12em; color: var(--ultra); }
.step h3 { margin: 8px 0 8px; font: 300 clamp(22px, 2.2vw, 30px)/1.1 var(--font-head); text-transform: uppercase; }
.step p { margin: 0; max-width: 44ch; color: var(--muted); }

/* редакционный блок */
.ed__media img { transform: scale(1.14); will-change: transform; }
.ed__body p { max-width: 50ch; }
.ed__body .h2 { margin-bottom: 20px; }
.ed__nums { display: flex; gap: clamp(20px, 4vw, 52px); margin: 26px 0 30px; }
.ed__nums p { margin: 0; display: grid; }
.ed__nums b { font: 300 clamp(40px, 4.6vw, 64px)/1 var(--font-head); color: var(--ultra); font-variant-numeric: tabular-nums; }
.ed__nums span { font: 500 11.5px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ed--rev .ed__media { order: 2; }

/* доставка коротко */
.perks { padding: 72px 0 96px; }
.perks__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--fg); }
.perks__list li { display: grid; gap: 6px; padding: 22px 22px 0 0; }
.perks__list li + li { padding-left: 22px; border-left: 1px solid var(--line); }
.perks__list b { font: 300 22px/1.1 var(--font-head); text-transform: uppercase; }
.perks__list span { color: var(--muted); font-size: 14.5px; }

/* подвал */
.ft { background: var(--ultra); color: var(--bg); overflow: hidden; }
.ft__word { overflow: hidden; border-bottom: 1px solid rgba(255, 255, 255, .2); }
.ft__word span { display: block; font: 300 clamp(80px, 21.5vw, 340px)/.86 var(--font-head); letter-spacing: -.03em; color: var(--apri); text-align: center; padding: .1em 0 .12em; white-space: nowrap; }
.ft__in { display: grid; grid-template-columns: 1.1fr 2fr; gap: 48px; padding: 56px 0 40px; }
.ft__brand p { margin: 18px 0 22px; max-width: 40ch; color: rgba(255, 255, 255, .78); }
.ft__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.ft__h { margin: 0 0 12px; font: 500 12px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--apri); }
.ft ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15px; color: rgba(255, 255, 255, .82); }
.ft a { text-decoration: none; }
.ft a:hover { color: var(--apri); }
.ft__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding: 18px 0 26px; border-top: 1px solid rgba(255, 255, 255, .2); font: 400 12px var(--font-mono); letter-spacing: .04em; color: rgba(255, 255, 255, .62); margin: 0 auto; }

/* курсор-спутник */
.cur { position: fixed; left: 0; top: 0; z-index: 120; pointer-events: none; opacity: 0; transition: opacity .3s; }
.cur.is-on { opacity: 1; }
.cur i { position: absolute; left: -18px; top: -18px; width: 36px; height: 36px; border: 1px solid rgba(21, 20, 15, .55); border-radius: 50%; transition: transform .35s var(--ease), background .3s, border-color .3s; }
.cur.is-dark i { border-color: rgba(255, 255, 255, .7); }
.cur.is-link i { transform: scale(1.55); background: rgba(38, 49, 201, .08); }
.cur.is-label i { transform: scale(2.5); background: var(--ultra); border-color: var(--ultra); }
.cur.is-down i { transform: scale(.75); }
.cur span { position: absolute; transform: translate(-50%, -50%); font: 500 10.5px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: #fff; opacity: 0; white-space: nowrap; transition: opacity .2s; }
.cur.is-label span { opacity: 1; }

/* разбивка заголовков */
.fx [data-split] .wi { display: inline-block; opacity: 0; transform: translateY(.5em) rotate(2deg); filter: blur(6px); transition: opacity .8s ease, transform 1.05s var(--ease), filter .9s ease; transition-delay: calc(var(--i) * 65ms); }
.fx [data-split].is-in .wi { opacity: 1; transform: none; filter: none; }

/* пирамида нот */
.pyr { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 26px; align-items: stretch; }
.pyr__svg { width: 100%; height: auto; overflow: visible; }
.pyr__line { stroke: var(--fg); stroke-opacity: .35; stroke-width: 1; stroke-dasharray: 900; stroke-dashoffset: 0; }
.pyr__rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: 84fr 86fr 100fr; }
.pyr__row { display: flex; flex-direction: column; justify-content: center; gap: 6px; border-bottom: 1px dashed var(--line); padding: 6px 0; }
.pyr__row:last-child { border-bottom: 0; }
.pyr__k { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 500 11.5px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.pyr__k i { width: 10px; height: 10px; flex: none; }
.pyr__k small { font: 400 11px var(--font-mono); letter-spacing: .04em; text-transform: none; color: var(--muted); }
.pyr__notes { margin: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.pyr__notes span { padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 13.5px; background: var(--paper); }
.pyr__tier { transform-box: fill-box; transform-origin: 50% 100%; }
.pyr__dot { opacity: 0; transform-box: fill-box; }
.fx .pyr .pyr__tier { transform: scaleY(.15) scaleX(.6); opacity: 0; transition: transform 1s var(--ease), opacity .6s ease; }
.fx .pyr .pyr__tier--3 { transition-delay: .05s; } .fx .pyr .pyr__tier--2 { transition-delay: .3s; } .fx .pyr .pyr__tier--1 { transition-delay: .55s; }
.fx .pyr .pyr__line { stroke-dashoffset: 900; transition: stroke-dashoffset 1.6s var(--ease) .2s; }
.fx .pyr .pyr__notes span, .fx .pyr .pyr__k { opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .6s var(--ease); transition-delay: calc((2 - var(--r, 0)) * .25s + var(--j, 0) * .07s + .35s); }
.pyr__row { --r: 0; }
.fx .pyr.is-in .pyr__tier, .fx .pyr.is-in .pyr__notes span, .fx .pyr.is-in .pyr__k { opacity: 1; transform: none; }
.fx .pyr.is-in .pyr__line { stroke-dashoffset: 0; }
.fx .pyr.is-in .pyr__dot { animation: steam 3.6s ease-in infinite; animation-delay: calc(1.2s + var(--k) * -.52s); }
@keyframes steam { 0% { opacity: 0; transform: translateY(16px); } 25% { opacity: .9; } 100% { opacity: 0; transform: translateY(-30px); } }
.pyr--compact { grid-template-columns: 110px minmax(0, 1fr); gap: 14px; }
.pyr--compact .pyr__notes span { font-size: 12.5px; padding: 2px 8px; }
.pyr--compact .pyr__k { font-size: 10.5px; }
.fbars { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; }
.fbars li { display: grid; grid-template-columns: 112px 1fr 30px; gap: 12px; align-items: center; font-size: 14px; }
.fbars b { height: 6px; background: var(--soft); overflow: hidden; }
.fbars b i { display: block; height: 100%; background: var(--c); transform-origin: left; transform: scaleX(var(--w)); }
.fx .fbars b i { transform: scaleX(0); transition: transform 1.1s var(--ease); transition-delay: calc(var(--i) * .12s + .2s); }
.fx .fbars.is-in b i { transform: scaleX(var(--w)); }
.fbars em { font: 500 12px var(--font-mono); font-style: normal; color: var(--muted); text-align: right; }

/* карточка товара */
.crumbs { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; }
.gallery__main { view-transition-name: pimg; }
.gallery__thumbs button { width: 76px; }
.ptitle { font: 300 clamp(30px, 3.4vw, 48px)/1.02 var(--font-head); text-transform: uppercase; letter-spacing: -.01em; }
.pmeta { font: 500 12px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; margin-top: 2px; }
.pprice { font: 300 30px var(--font-head); }
.pprice b { font-weight: 300; }
.pbadge { background: var(--ultra); color: #fff; font: 500 11px/1.7 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.pvars__l { font: 500 12px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.pvars__list .chip { min-height: 42px; padding: 0 18px; font-size: 12.5px; }
.pfav { border-color: var(--line); }
.pfacts { font-size: 14px; }
.try { display: grid; grid-template-columns: 34px 1fr auto; gap: 14px; align-items: center; padding: 10px 16px 10px 10px; border: 1px solid var(--line); background: var(--paper); }
.try__fl { width: 34px; height: 92px; overflow: hidden; }
.try__fl .fl { width: 56px; margin: -8px 0 0 -11px; }
.try__t { display: grid; gap: 2px; font-size: 14px; }
.try__t b { font-weight: 500; }
.try__t span { color: var(--muted); font-size: 13px; }
.try .btn { min-height: 42px; padding: 0 16px; }
.pextra { display: grid; gap: 12px; }
.pextra__link { font: 500 12px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ultra); text-decoration: none; }
.pextra__link:hover { text-decoration: underline; }
.trio-in { padding: 14px 16px; border: 1px solid var(--line); background: var(--paper); }
.trio-in__k { margin: 0 0 8px; font: 500 11.5px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.trio-in ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.trio-in li { display: grid; grid-template-columns: 12px auto 1fr; gap: 10px; align-items: center; font-size: 14px; }
.trio-in li i { width: 12px; height: 12px; border-radius: 50%; }
.trio-in li span { color: var(--muted); font-size: 13px; }
.notes { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; padding: 48px 0 56px; border-top: 1px solid var(--line); }
.notes__t { font: 300 clamp(24px, 2.6vw, 36px)/1.1 var(--font-head); text-transform: uppercase; margin: 0 0 26px; }
.notes__h { margin: 0 0 14px; font: 500 12px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.notes__side { padding-top: 34px; }
.notes__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; }
.notes__tags span { padding: 5px 12px; border: 1px solid var(--line); font-size: 13.5px; }
.pinfo h2 { font: 500 12px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.related__t, .sec-t { font: 300 clamp(24px, 2.6vw, 36px)/1.1 var(--font-head); text-transform: uppercase; }

/* каталог */
.cat-head h1, .page-title { font: 300 clamp(34px, 4.6vw, 64px)/1.02 var(--font-head); text-transform: uppercase; letter-spacing: -.01em; }
.cat-count { font: 500 12px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.cat-search input, .cat-sort select, .frange input, .promo input, .field input, .field textarea, .mmenu__search input { border-color: var(--line); background: var(--paper); }
.fgroup legend { font: 500 12px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.fopt { font-size: 14px; }
.cat-chips .chip { min-height: 38px; }
.cat-main .grid { border-left: 1px solid var(--line); }
.cat-main .card:nth-child(3n) { border-right: 1px solid var(--line); }

/* корзина, оформление, ящик */
.drawer, .mmenu, .filters { background: var(--bg); }
.drawer__title, .filters__title, .checkout__t, .cbox legend, .empty-cart__t { font: 300 22px var(--font-head); text-transform: uppercase; }
.line__name { font-weight: 500; }
.cartpage__side, .checkout__side { background: var(--paper); border: 1px solid var(--line); }
.done__t { font: 300 clamp(30px, 4vw, 52px)/1.05 var(--font-head); text-transform: uppercase; }
.mmenu nav a { font: 300 20px var(--font-head); text-transform: uppercase; }
.mmenu__brand { font: 400 20px var(--font-head); letter-spacing: .26em; text-transform: uppercase; }
.toast { background: var(--ultra); }

/* подбор */
.pb { position: relative; background: radial-gradient(60% 60% at 30% 52%, #1d2370 0%, var(--night) 62%); color: var(--bg); overflow: clip; }
.pb__in { padding: 40px 0 72px; }
.pb__head { grid-area: head; max-width: 620px; }
.pb__head .kicker { color: rgba(255, 255, 255, .55); }
.pb__t { margin: 0; font: 300 clamp(36px, 4vw, 60px)/1.02 var(--font-head); text-transform: uppercase; letter-spacing: -.02em; color: var(--apri); }
.pb__lead { margin: 16px 0 0; max-width: 60ch; color: rgba(255, 255, 255, .75); }
.pb__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); grid-template-areas: 'wheel head' 'wheel opts'; grid-template-rows: auto 1fr; gap: 28px clamp(28px, 4.5vw, 72px); align-items: start; }
.pb__wheel { grid-area: wheel; position: sticky; top: 84px; width: 100%; max-width: min(640px, calc(100vh - 110px)); aspect-ratio: 1; margin: 0 auto; touch-action: manipulation; }
.pb__opts { grid-area: opts; }
.pb__cloud, .wheel { position: absolute; inset: 0; width: 100%; height: 100%; }
.wheel { overflow: visible; }
@keyframes spin { to { transform: rotate(360deg); } }
.seg { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.seg__bg { fill: rgba(255, 255, 255, .035); stroke: rgba(255, 255, 255, .14); stroke-width: 1; transition: fill .3s; }
.seg__fill { fill: var(--c); opacity: .16; transition: opacity .45s ease; }
.seg__no { opacity: 0; transition: opacity .3s; }
.seg:hover .seg__fill { opacity: .32; }
.seg[data-s="like"] .seg__fill { opacity: 1; }
.seg[data-s="no"] .seg__fill { opacity: 0; }
.seg[data-s="no"] .seg__no { opacity: 1; }
.seg:focus-visible .seg__bg { stroke: #fff; stroke-width: 3; }
.seg__t { font: 500 15px var(--font-mono); letter-spacing: .16em; fill: rgba(255, 255, 255, .86); pointer-events: none; transition: fill .3s; }
.seg[data-s="like"] .seg__t { fill: #15140f; }
.seg[data-s="no"] .seg__t { fill: rgba(255, 255, 255, .34); }
.seg__mk { opacity: 0; transition: opacity .3s; pointer-events: none; }
.seg__mk circle { fill: #12122e; stroke: var(--c); stroke-width: 1.5; }
.seg__mk path { fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: none; }
.seg[data-s="like"] .seg__mk, .seg[data-s="no"] .seg__mk { opacity: 1; }
.seg[data-s="like"] .mk-y, .seg[data-s="no"] .mk-n { display: block; }
.pb__center { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.pb__state { margin: 0; max-width: 34%; text-align: center; font: 500 12px/1.5 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .8); text-shadow: 0 2px 18px rgba(13, 15, 43, .9); }
.pb__state.is-res { padding: 26px 18px; border-radius: 50%; background: radial-gradient(closest-side, rgba(13, 15, 43, .78), rgba(13, 15, 43, .5) 60%, rgba(13, 15, 43, 0)); }
.pb__state small { display: block; font: inherit; font-size: 10.5px; color: rgba(255, 255, 255, .7); }
.pb__state b { display: block; margin: 6px 0 4px; font: 300 clamp(44px, 5.6vw, 84px)/1 var(--font-head); letter-spacing: -.03em; color: #fff; }
.pb__state b i { font-style: normal; font-size: .45em; vertical-align: top; margin-left: 2px; }
.pb__state span { display: block; font: 400 clamp(15px, 1.4vw, 19px)/1.2 var(--font-head); letter-spacing: .1em; color: var(--apri); }
.pb__opts { display: grid; gap: 20px; }
.chs { border: 0; margin: 0; padding: 0; min-width: 0; }
.chs legend { padding: 0 0 10px; font: 500 11.5px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .58); }
.chs > div { display: flex; flex-wrap: wrap; gap: 8px; }
.chs label { position: relative; }
.chs input[type="radio"] { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chs label span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .26); border-radius: 999px; font-size: 14.5px; transition: background .25s, color .25s, border-color .25s; }
.chs label:hover span { border-color: rgba(255, 255, 255, .7); }
.chs input:checked + span { background: var(--apri); color: var(--fg); border-color: var(--apri); }
.chs input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.chs .intens { display: grid; gap: 6px; max-width: 420px; }
.intens input { width: 100%; accent-color: var(--apri); height: 28px; }
.intens__l { margin: 0; display: flex; justify-content: space-between; font: 400 11.5px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.pb__top { margin-top: 6px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .16); }
.pb__top-t { margin: 0 0 6px; font: 500 11.5px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .58); }
.tt { list-style: none; margin: 0; padding: 0; display: grid; }
.tt__i { display: grid; grid-template-columns: 56px 1fr auto; gap: 16px; align-items: center; padding: 8px 0 6px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.tt__fl { display: block; width: 56px; height: 104px; position: relative; }
.tt__fl .fl { position: absolute; width: 62px; left: -3px; bottom: -8px; }
.tt__txt { display: grid; min-width: 0; }
.tt__n { font: 400 18px/1.2 var(--font-head); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: #fff; }
.tt__n:hover { color: var(--apri); }
.tt__m { font-size: 13px; color: rgba(255, 255, 255, .6); }
.tt__pc { margin: 0; font: 300 30px var(--font-head); color: var(--apri); }
.tt__pc b { font-weight: 300; }
.pbres { padding: 80px 0 90px; }
.pbres__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 30px; margin-bottom: 30px; }
.pbres__sum { margin: 0; max-width: 64ch; font: 500 12px/1.6 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pbres__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.rc { display: grid; grid-template-rows: auto 1fr; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg); }
.rc__img { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--soft); }
.rc__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; transition: transform 1s var(--ease); }
.rc__img:hover img { transform: scale(1.04); }
.rc__rank { position: absolute; left: 14px; top: 12px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bg); font: 500 13px var(--font-mono); }
.rc__body { display: grid; gap: 10px; align-content: start; padding: 22px 22px 24px; }
.rc__match { display: flex; align-items: center; gap: 12px; }
.rc__match p { margin: 0; font: 300 34px/1 var(--font-head); color: var(--ultra); }
.rc__match b { font-weight: 300; }
.rc__match span { display: block; margin-top: 4px; font: 500 10.5px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mring { width: 54px; height: 54px; transform: rotate(-90deg); flex: none; }
.mring circle { fill: none; stroke: var(--soft); stroke-width: 5; }
.mring .mring__v { stroke: var(--c, var(--ultra)); stroke-linecap: round; stroke-dashoffset: var(--off); transition: stroke-dashoffset 1.2s var(--ease); }
.fx .rc:not(.is-in) .mring__v { stroke-dashoffset: var(--full); }
.rc__t { margin: 4px 0 0; font: 300 30px/1 var(--font-head); text-transform: uppercase; }
.rc__t a { text-decoration: none; }
.rc__meta { margin: 0; font: 500 11.5px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rc__why { margin: 0 0 8px; font-size: 14px; color: var(--muted); }
.rc__btns { display: grid; gap: 8px; margin-top: 10px; }
.rc__btns .btn { width: 100%; padding: 0 12px; }
.pbset { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 30px; align-items: center; margin-top: 28px; padding: 22px 30px 22px 16px; background: var(--ultra); color: var(--bg); }
.pbset__fls { display: flex; gap: 2px; height: 176px; padding-left: 10px; }
.pbset__fl { width: 38px; position: relative; }
.pbset__fl .fl { position: absolute; width: 100px; left: -31px; bottom: -12px; }
.pbset__t .kicker { color: var(--apri); margin-bottom: 6px; }
.pbset__t h3 { margin: 0 0 6px; font: 300 clamp(20px, 2vw, 28px)/1.1 var(--font-head); text-transform: uppercase; }
.pbset__t p { margin: 0; color: rgba(255, 255, 255, .78); font-size: 15px; }
.pbset .btn { background: var(--apri); border-color: var(--apri); color: var(--fg); }
.pbset .btn:hover { background: var(--bg); border-color: var(--bg); }
.pbres__note { margin: 18px 0 0; color: var(--muted); max-width: 80ch; }

/* о бутике */
.ab-hero { position: relative; background: var(--ultra); color: var(--bg); overflow: hidden; }
.ab-hero__in { padding: 70px 0 30px; position: relative; z-index: 2; }
.ab-hero .kicker { color: rgba(255, 255, 255, .6); }
.ab-hero__t { margin: 0; max-width: 14ch; font: 300 clamp(40px, 6.4vw, 104px)/1.02 var(--font-head); text-transform: uppercase; letter-spacing: -.02em; color: var(--apri); }
.ab-hero__lead { max-width: 56ch; margin: 22px 0 0; color: rgba(255, 255, 255, .82); font-size: 17px; }
.ab-hero__row { display: grid; grid-template-columns: repeat(4, 1fr); align-items: end; gap: 2vw; padding: 0 6vw; margin-top: -20px; }
.ab-hero__fl .fl { width: 100%; }
.fx .ab-hero__fl { animation: rise 1.4s var(--ease) both; }
.fx .ab-hero__fl:nth-child(2) { animation-delay: .12s; } .fx .ab-hero__fl:nth-child(3) { animation-delay: .24s; } .fx .ab-hero__fl:nth-child(4) { animation-delay: .36s; }
.houses { padding: 90px 0; }
.houses .h2 { margin-bottom: 30px; }
.houses__grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); }
.house { padding: 18px 22px 26px; border-right: 1px solid var(--line); }
.house:last-child { border-right: 0; }
.house__fl { width: 70%; margin: 0 auto 6px; }
.house h3 { margin: 0 0 8px; font: 300 26px var(--font-head); text-transform: uppercase; letter-spacing: .06em; }
.house p { margin: 0 0 8px; color: var(--muted); font-size: 14.5px; }
.house__list a { color: var(--fg); }
.how { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 16px; }
.how li { display: grid; gap: 4px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); }
.how b { color: var(--fg); font: 400 18px var(--font-head); text-transform: uppercase; letter-spacing: .04em; }
.visit { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: center; padding: 90px 0; }
.visit__map { border: 1px solid var(--line); background: #ebe5d9; }
.visit__map svg { display: block; width: 100%; height: auto; }

/* доставка */
.narrow2 { max-width: 1040px; padding-bottom: 90px; }
.dl { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); margin-top: 10px; }
.dl__c { padding: 24px; border-right: 1px solid var(--line); }
.dl__c:last-child { border-right: 0; }
.dl__k { margin: 0 0 10px; font: 500 11.5px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ultra); }
.dl__c h2 { margin: 0 0 10px; font: 300 24px/1.1 var(--font-head); text-transform: uppercase; }
.dl__c p { margin: 0; color: var(--muted); }
.paylist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.paylist li { display: grid; grid-template-columns: 220px 1fr; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.paylist b { color: var(--fg); font: 400 18px var(--font-head); text-transform: uppercase; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative; font: 400 18px/1.3 var(--font-head); text-transform: uppercase; letter-spacing: .02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 14px; font: 300 26px var(--font-head); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 18px; max-width: 70ch; color: var(--muted); }

/* переходы между страницами */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .32s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-in .6s cubic-bezier(0, 0, .2, 1) both; }
::view-transition-group(pimg) { animation-duration: .65s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
@keyframes vt-out { to { opacity: 0; transform: translateY(-14px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(22px); } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .marq__in, .hero__glow, .hdr__pick i { animation: none; }
}

/* планшет */
@media (max-width: 1180px) {
  .hdr__nav--2 { display: none; }
  .hdr__nav { gap: 20px; padding: 0 20px; }
  .hero__stage { width: min(30vw, 330px); }
  .notes { grid-template-columns: 1fr; gap: 20px; }
  .notes__side { padding-top: 0; }
  .houses__grid { grid-template-columns: repeat(2, 1fr); }
  .house:nth-child(2) { border-right: 0; } .house:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .pbres__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pbset { grid-template-columns: auto 1fr; }
  .pbset .btn { grid-column: 1 / -1; }
}
@media (max-width: 1000px) {
  .hdr__nav { display: none; }
  .hdr__menu { display: grid; }
  .hdr__ic { margin-left: auto; border-left: 0; padding: 0 8px; }
  .hdr__logo { border-right: 0; padding: 0 16px; }
  .pb__grid { grid-template-columns: 1fr; grid-template-areas: 'head' 'wheel' 'opts'; }
  .pb__wheel { position: relative; top: 0; max-width: 560px; }
  .pb__wheel { max-width: 560px; }
  .story__in { grid-template-columns: 1fr; padding: 72px 0; }
  .story__stage { position: relative; top: 0; height: 64vh; min-height: 420px; max-height: 560px; }
  .story__fl { width: min(44vw, 300px); } .story__fl--vial { width: min(56vw, 380px); }
  .step { padding: 22px 0; opacity: 1; }
  .step:last-child { padding-bottom: 22px; }
}

/* телефон */
@media (max-width: 860px) {
  :root { --pad: 16px; }
  body { font-size: 15.5px; }
  .grid--cells, .grid { --cols: 2; }
  .grid--cells .card:nth-child(3n), .cat-main .card:nth-child(3n) { border-right: 1px solid var(--line); }
  .grid--cells .card:nth-child(2n) { border-right: 0; }
  .card__body { padding: 14px 10px 16px; }
  .card__name { font-size: 13px; letter-spacing: .05em; }
  .card__meta { font-size: 12px; }
  .card__vars { gap: 4px; }
  .card__vars .chip { min-height: 28px; padding: 0 6px; font-size: 10px; letter-spacing: .02em; }
  .pbuy .stepper { flex: 1; justify-content: space-between; }
  .pbuy .btn { order: 3; flex: 1 1 100%; }
  .card__add { min-height: 40px; padding: 0 8px; font-size: 11px; letter-spacing: .06em; }
  .hero { min-height: max(640px, 100svh); justify-content: flex-start; }
  .hero__copy { padding-top: 92px; }
  .hero__t { font-size: clamp(38px, 11.4vw, 64px); }
  .hero__stage { right: 50%; translate: 50% 0; bottom: 236px; width: min(48vw, 230px); }
  .hero__bar-in { flex-direction: column; align-items: stretch; gap: 16px; padding: 18px 0 20px; }
  .hero__bar p { font-size: 11.5px; }
  .hero__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .hero__cta .btn { padding: 0 10px; font-size: 11.5px; }
  .hero__hint { display: none; }
  .disc { padding-top: 64px; }
  .disc__head { margin-bottom: 20px; }
  .tabs { gap: 0; margin: 0 -8px; }
  .fams__head { grid-template-columns: 1fr; padding-top: 64px; }
  .trio, .ed { grid-template-columns: 1fr; }
  .trio__media, .ed__media { min-height: 0; aspect-ratio: 4 / 3.4; }
  .ed--rev .ed__media { order: 0; }
  .trio__body, .ed__body { padding: 36px var(--pad) 48px; }
  .tbuild { padding: 14px; }
  .tslot { height: 150px; }
  .tslot__fl { width: 100px; }
  .types { padding: 64px 0; }
  .types__grid { grid-template-columns: 1fr 1fr; }
  .tile:nth-child(3) { grid-column: 1 / -1; aspect-ratio: 16 / 10; border-left: 0; border-top: 1px solid var(--line); }
  .tile__t { left: 14px; top: 14px; font-size: 12px; }
  .perks__list { grid-template-columns: 1fr 1fr; }
  .perks__list li { padding: 18px 12px 18px 0; }
  .perks__list li + li { padding-left: 0; border-left: 0; }
  .perks__list li:nth-child(2n) { padding-left: 14px; border-left: 1px solid var(--line); }
  .perks__list li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .ft__in { grid-template-columns: 1fr; gap: 32px; padding: 40px 0 28px; }
  .ft__cols { grid-template-columns: 1fr 1fr; }
  .ft__cols > div:last-child { grid-column: 1 / -1; }
  .pb__in { padding: 36px 0 56px; }
  .seg__t { font-size: 19px; letter-spacing: .1em; }
  .pb__state { max-width: 44%; font-size: 10.5px; }
  .pbres { padding: 56px 0 64px; }
  .pbres__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pbres__grid .rc:nth-child(3) { grid-column: 1 / -1; }
  .pbres__grid .rc:nth-child(3) .rc__img { aspect-ratio: 16 / 9; }
  .pbset { grid-template-columns: minmax(0, 1fr); padding: 18px; gap: 16px; }
  .pbset .btn { white-space: normal; line-height: 1.35; padding: 12px 16px; text-align: center; }
  .pbset__fls { height: 120px; justify-content: center; }
  .pyr { grid-template-columns: 120px minmax(0, 1fr); gap: 14px; }
  .pyr__k small { display: none; }
  .try { grid-template-columns: 36px 1fr; }
  .try .btn { grid-column: 1 / -1; }
  .ab-hero__row { grid-template-columns: repeat(4, 1fr); padding: 0 var(--pad); margin-top: 10px; }
  .houses__grid { grid-template-columns: 1fr 1fr; }
  .house { padding: 12px 12px 18px; }
  .house h3 { font-size: 19px; }
  .visit { grid-template-columns: 1fr; gap: 24px; padding: 56px 0; }
  .dl { grid-template-columns: 1fr; }
  .dl__c { border-right: 0; border-bottom: 1px solid var(--line); }
  .dl__c:last-child { border-bottom: 0; }
  .paylist li { grid-template-columns: 1fr; gap: 4px; }
  .story__stage { height: 56vh; min-height: 380px; }
  .story__ml { font-size: 40px; }
  .pfacts, .pinfo { font-size: 14px; }
}
@media (max-width: 600px) {
  .pbres__grid { grid-template-columns: minmax(0, 1fr); }
  .pbres__grid .rc:nth-child(3) { grid-column: auto; }
  .rc__img, .pbres__grid .rc:nth-child(3) .rc__img { aspect-ratio: 4 / 3.4; }
}
@media (max-width: 420px) {
  .hdr__logo .logo__w { font-size: 17px; letter-spacing: .22em; }
  .ic--search { display: none; }
  .tabs button { padding: 8px 7px; font-size: 11px; }
}