/* «Жапырақ» — комнатные растения. Тёплый лён, свет из окна, глубокая зелень и терракота; арки и «гальки» вместо прямоугольников.
   Шрифты: Bona Nova (заголовки, курсив для латыни) + Ysabeau Infant (текст). Токены — ниже, их достаточно поменять для своего бренда. */
:root {
  --bg: #ece5d9; --paper: #f6f1e8; --paper2: #fbf8f2; --fg: #1f3326; --ink: #1f3326; --ink2: #3c4f40; --muted: #6c7665; --line: rgba(31, 51, 38, .14);
  --leaf: #2f5536; --moss: #7d9a5c; --sage: #c9d3b4; --clay: #c2673f; --sun: #f0c674; --blush: #ead2c0;
  --accent: var(--ink); --accent-ink: var(--paper); --sale: #b4472a; --ok: #3d6b3f; --soft: var(--paper); --card-bg: #f1ece3;
  --radius: 26px; --radius-btn: 999px; --wrap: 1360px; --gap: 24px; --pad: 40px;
  --font-body: 'Ysabeau Infant', 'Segoe UI', system-ui, sans-serif; --font-head: 'Bona Nova', Georgia, 'Times New Roman', serif;
  --step--1: 13.5px; --step-0: 16px; --step-1: 18px; --step-2: 24px; --step-3: clamp(28px, 3.2vw, 40px); --step-4: clamp(40px, 5.6vw, 76px);
  --ease: cubic-bezier(.2, .75, .15, 1); --spring: cubic-bezier(.3, 1.45, .45, 1);
  color-scheme: light;
}
html { background: var(--bg); scroll-behavior: auto; }
body { background: var(--bg); font-size: 16px; line-height: 1.55; font-feature-settings: 'kern', 'liga'; }
::selection { background: #d5e1b5; color: var(--ink); }
:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }
main { padding-top: 104px; min-height: 60vh; }
.pg-home main { padding-top: 0; }
h1, h2, h3 { font-weight: 400; letter-spacing: -.012em; }
em { font-style: italic; }
h1 em, h2 em, .pb__t em { color: var(--leaf); }
a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 600 12px/1.2 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--moss); }
.kicker::before { content: ''; width: 14px; height: 14px; background: currentColor; border-radius: 0 100% 0 100%; transform: rotate(-12deg); flex: none; }
.sec-head { margin-bottom: 44px; }
.sec-head h2 { font-size: clamp(36px, 4.8vw, 68px); line-height: 1.04; max-width: 14em; }
.sec-head--row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.link-arrow { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; text-decoration: none; color: var(--leaf); }
.link-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--spring); }
.link-arrow:hover svg { transform: translateX(5px); }
.link-arrow span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--ease); }
.link-arrow:hover span { background-size: 100% 1px; }
.small { font-size: 13px; }

/* кнопки */
.btn { min-height: 50px; padding: 0 26px; font: 600 15px/1 var(--font-body); letter-spacing: .01em; background: var(--ink); border-color: var(--ink); color: var(--paper); transition: background .3s, color .3s, border-color .3s, transform .45s var(--spring); }
.btn:hover { background: var(--leaf); border-color: var(--leaf); filter: none; }
.btn--ghost { background: transparent; color: var(--ink); border-color: rgba(31, 51, 38, .28); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--lg { min-height: 58px; padding: 0 32px; font-size: 16px; }
[data-magnet] { will-change: transform; }
[data-magnet].is-mag { transition-duration: .3s, .3s, .3s, .12s; }
.chip { min-height: 40px; padding: 0 16px; border-color: var(--line); background: var(--paper); font-weight: 600; font-size: 13.5px; transition: background .25s, color .25s, border-color .25s; }
.chip:hover { border-color: var(--ink); }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.icon-btn:hover { background: rgba(31, 51, 38, .06); }

/* ——— прелоадер: семечко → корни и стебель → два листа складываются в «Ж» ——— */
.pre { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--ink); color: var(--paper); cursor: pointer;
  animation: pre-out .5s cubic-bezier(.76, 0, .24, 1) .9s forwards; will-change: transform; }
.no-pre .pre { display: none; }
.pre-skip .pre { animation: pre-out2 .34s cubic-bezier(.76, 0, .24, 1) forwards; }
@keyframes pre-out { to { transform: translateY(-104%); border-radius: 0 0 50% 50% / 0 0 26vh 26vh; visibility: hidden; } }
@keyframes pre-out2 { to { transform: translateY(-104%); border-radius: 0 0 50% 50% / 0 0 26vh 26vh; visibility: hidden; } }
.pre__in { display: grid; justify-items: center; gap: 6px; animation: pre-in .5s var(--ease) .86s forwards; }
@keyframes pre-in { to { transform: translateY(-40px) scale(.94); opacity: 0; } }
.pre__svg { width: 172px; height: 172px; overflow: visible; }
.pre__soil { stroke: rgba(246, 241, 232, .3); stroke-width: 1.4; stroke-dasharray: 84; stroke-dashoffset: 84; animation: pre-draw .35s var(--ease) forwards; }
.pre__seed { fill: var(--clay); transform-box: fill-box; transform-origin: 50% 100%; opacity: 0; animation: pre-seed .5s var(--ease) .04s forwards; }
@keyframes pre-seed { 0% { opacity: 0; transform: translateY(-46px); } 45% { opacity: 1; transform: none; } 60% { transform: scale(1.25, .7); } 100% { opacity: 0; transform: scale(.4, .3); } }
.pre__root { fill: none; stroke: var(--clay); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: pre-draw .4s var(--ease) .3s forwards; }
.pre__root--c { stroke-width: 1.6; opacity: .7; }
.pre__stem { fill: none; stroke: var(--paper); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: pre-draw .42s var(--ease) .32s forwards; }
@keyframes pre-draw { to { stroke-dashoffset: 0; } }
.pre__lf path { fill: #b9cf8c; }
.pre__lf { transform-box: fill-box; transform: scale(0) rotate(30deg); animation: pre-leaf .46s var(--spring) .55s forwards; }
.pre__lf--l { transform-origin: 100% 100%; }
.pre__lf--r { transform-origin: 0 100%; transform: scale(0) rotate(-30deg); animation-delay: .6s; }
.pre__lf--r path { fill: #9fbe72; }
@keyframes pre-leaf { to { transform: none; } }
.pre__word { margin: 0; display: flex; overflow: hidden; font: 400 48px/1.15 var(--font-head); letter-spacing: .02em; }
.pre__word span { display: inline-block; transform: translateY(105%); animation: pre-up .5s var(--ease) forwards; animation-delay: calc(.5s + var(--i) * 32ms); }
@keyframes pre-up { to { transform: none; } }
.pre__sub { margin: 0; font: 600 11px var(--font-body); letter-spacing: .24em; text-transform: uppercase; opacity: 0; animation: pre-fade .4s ease .7s forwards; }
@keyframes pre-fade { to { opacity: .6; } }

/* ——— шапка: три «гальки» на весу ——— */
.hd { position: fixed; top: 14px; left: 16px; right: 16px; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 12px; pointer-events: none; view-transition-name: zh-head; transition: top .4s var(--ease); }
.hd > * { pointer-events: auto; }
.hd__logo, .hd__nav, .peb { background: rgba(248, 244, 237, .78); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 10px 30px -18px rgba(31, 51, 38, .45); transition: box-shadow .4s, background .4s; }
.hd.is-scrolled { top: 10px; }
.hd.is-scrolled .hd__logo, .hd.is-scrolled .hd__nav, .hd.is-scrolled .peb { background: rgba(248, 244, 237, .92); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 14px 34px -16px rgba(31, 51, 38, .5); }
.hd__logo { display: inline-flex; align-items: center; height: 52px; padding: 0 20px 0 10px; border-radius: 999px; text-decoration: none; }
.logo { display: inline-flex; align-items: center; gap: 8px; }
.mark { width: 36px; height: 36px; flex: none; }
.mark path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.m-soil { stroke: var(--clay); stroke-width: 1.6; opacity: .6; }
.m-stem { stroke: var(--ink); stroke-width: 2.2; }
.m-leaf { fill: var(--leaf) !important; stroke: none; transform-box: fill-box; transition: transform .6s var(--spring); }
.m-leaf:nth-of-type(3) { transform-origin: 100% 100%; }
.m-leaf:nth-of-type(4) { transform-origin: 0 100%; fill: var(--moss) !important; }
.m-root { stroke: var(--clay); stroke-width: 1.8; }
.hd__logo:hover .m-leaf:nth-of-type(3) { transform: rotate(-12deg); }
.hd__logo:hover .m-leaf:nth-of-type(4) { transform: rotate(12deg); }
.logo__w { font: 400 23px/1 var(--font-head); letter-spacing: .01em; color: var(--ink); }
.hd__nav { position: absolute; left: 50%; transform: translateX(-50%); display: flex; padding: 6px; border-radius: 999px; }
.hd__nav a { position: relative; z-index: 1; padding: 11px 17px; border-radius: 999px; font-weight: 600; font-size: 14.5px; text-decoration: none; color: var(--ink); }
.hd__pill { position: absolute; z-index: 0; left: 0; top: 6px; bottom: 6px; width: 0; border-radius: 999px; background: var(--sage); opacity: 0; transition: transform .5s var(--spring), width .5s var(--spring), opacity .3s; }
.hd__nav:not([data-hnav]) .hd__pill, .no-js .hd__pill { display: none; }
.hd__nav a[aria-current]:not(:hover) { color: var(--ink); }
.hd__act { display: flex; gap: 8px; }
.peb { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%; color: var(--ink); text-decoration: none; padding: 0; transition: transform .45s var(--spring), box-shadow .4s, background .4s; }
.peb:hover { transform: translateY(-2px) rotate(-6deg); }
.peb svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.peb--cart { background: var(--ink) !important; color: var(--paper); }
.peb b { position: absolute; top: -2px; right: -2px; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 11px; background: var(--clay); color: #fff; font: 700 11px/21px var(--font-body); text-align: center; }
.peb--menu { display: none; }

/* ——— курсор-спутник ——— */
.cur { position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none; opacity: 0; transition: opacity .3s; }
.cur.is-on { opacity: 1; }
.cur__dot, .cur__ring { position: fixed; left: 0; top: 0; border-radius: 50%; }
.cur__dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--clay); }
.cur__ring { width: 40px; height: 40px; margin: -20px 0 0 -20px; display: grid; place-items: center; }
.cur__ring::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(31, 51, 38, .35); transition: transform .45s var(--spring), background .35s, border-color .35s; }
.cur.is-link .cur__ring::before { transform: scale(1.45); background: rgba(194, 103, 63, .12); border-color: transparent; }
.cur.is-view .cur__ring::before { transform: scale(2.3); background: var(--ink); border-color: transparent; }
.cur__t { position: relative; font: 600 11px var(--font-body); letter-spacing: .08em; color: var(--paper); opacity: 0; transition: opacity .25s; }
.cur.is-view .cur__t { opacity: 1; }

/* ——— заголовки по словам ——— */
.is-split .w { display: inline-block; transition: opacity .7s ease, transform 1s var(--ease); transition-delay: calc(var(--i) * 45ms); }
html:not(.pre-done) .is-split .w { transition-delay: calc(var(--i) * 55ms + .95s); }
.js .is-split:not(.is-in) .w { opacity: 0; transform: translateY(.42em) rotate(2.5deg); }

/* ——— главная: липкая сцена роста ——— */
.grow { position: relative; height: 290vh; }
.grow__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; }
.grow__wall { position: absolute; inset: 0; background: radial-gradient(110% 90% at 72% 28%, #f6f1e9 0%, #ece4d7 52%, #e1d6c4 100%); }
.grow__sun { position: absolute; right: -4%; top: -12%; width: 72%; height: 130%; clip-path: polygon(34% 0, 100% 0, 72% 100%, 0 100%);
  background: linear-gradient(112deg, rgba(255, 247, 224, 0) 16%, rgba(255, 245, 216, .78) 44%, rgba(255, 241, 205, .55) 70%, rgba(255, 247, 224, 0) 92%); }
.grow__gobo { position: absolute; inset: -12%; width: 124%; height: 124%; fill: #6b5638; stroke: #6b5638; opacity: .2; filter: blur(10px); mix-blend-mode: multiply; transform-origin: 30% 10%; animation: gobo 11s ease-in-out infinite alternate; will-change: transform; }
@keyframes gobo { 0% { transform: rotate(-1.6deg) translate3d(-8px, 0, 0); } 100% { transform: rotate(1.8deg) translate3d(12px, 6px, 0); } }
.grow__plant { position: absolute; right: 7vw; bottom: 6vh; height: 88vh; width: auto; aspect-ratio: 680 / 760; max-width: 62vw; overflow: visible; filter: drop-shadow(26px 18px 22px rgba(70, 52, 30, .16)); touch-action: pan-y; }
.grow__ruler { position: absolute; right: 2.4vw; top: 12vh; bottom: 10vh; width: 54px; }
.grow__ticks { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; }
.grow__ticks i { display: block; width: 10px; height: 1px; background: rgba(31, 51, 38, .3); }
.grow__ticks i.b { width: 20px; background: rgba(31, 51, 38, .5); }
.grow__mark { position: absolute; right: 26px; top: 0; margin-top: -13px; padding: 5px 11px; border-radius: 999px; background: var(--clay); color: #fff; font: 600 13px/16px var(--font-body); white-space: nowrap; font-variant-numeric: tabular-nums; will-change: transform; }
.grow__mark::after { content: ''; position: absolute; right: -12px; top: 50%; width: 12px; height: 1px; background: var(--clay); }
.grow__copy { position: absolute; left: max(32px, 5vw); top: 50%; width: min(660px, 47vw); translate: 0 -46%; will-change: opacity, transform; }
.grow__t { font-size: clamp(44px, 5.3vw, 86px); line-height: 1.02; margin: 0 0 24px; }
.grow__lead { font-size: 19px; line-height: 1.5; max-width: 27em; color: var(--ink2); margin-bottom: 30px; }
.grow__btns { display: flex; gap: 12px; flex-wrap: wrap; }
.grow__steps { position: absolute; left: max(32px, 5vw); top: 36%; width: min(500px, 40vw); margin: 0; padding: 0; list-style: none; }
.grow__steps li { position: absolute; left: 0; top: 0; width: 100%; opacity: 0; visibility: hidden; transform: translate3d(0, 34px, 0); transition: opacity .55s ease, transform .9s var(--ease), visibility 0s linear .9s; }
.grow__steps li.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.grow--top .grow__steps li { opacity: 0; visibility: hidden; transition: none; }
.grow__steps b { display: block; font: italic 400 clamp(44px, 5.4vw, 80px)/1 var(--font-head); color: var(--leaf); }
.grow__steps span { display: block; margin-top: 16px; font-size: 21px; line-height: 1.45; max-width: 21em; color: var(--ink2); }
.grow__time { position: absolute; left: max(32px, 5vw); bottom: 6vh; display: flex; align-items: center; gap: 14px; }
.grow__mn { font: 400 60px/1 var(--font-head); font-variant-numeric: tabular-nums; min-width: 1.2em; }
.grow__ml { font: 600 10.5px/1.3 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.grow__bar { position: relative; width: 170px; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.grow__bar i { position: absolute; inset: 0; background: var(--clay); transform-origin: 0 50%; transform: scaleX(0); }
.grow__hint { position: absolute; left: 50%; bottom: 4.5vh; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px; font: 600 10.5px var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); transition: opacity .4s; }
.grow__hint i { position: relative; width: 1px; height: 44px; background: var(--line); overflow: hidden; }
.grow__hint i::after { content: ''; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--clay); animation: hint 1.8s var(--ease) infinite; }
@keyframes hint { to { top: 100%; } }

/* бегущая строка латинских названий */
.latin { overflow: clip; padding: 26px 0; border-block: 1px solid var(--line); background: var(--paper2); }
.latin__track { display: flex; align-items: center; gap: 30px; width: max-content; animation: marquee 46s linear infinite; }
.latin__track span { font: italic 400 clamp(26px, 3vw, 40px)/1.1 var(--font-head); color: var(--leaf); white-space: nowrap; }
.latin__track i { font-style: normal; color: var(--clay); font-size: 20px; }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }

/* категории-«гальки» */
.cats { padding: 130px 0 90px; }
.cats__row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 26px; align-items: start; }
.cat { display: grid; justify-items: center; gap: 4px; text-align: center; text-decoration: none; }
.cat:nth-child(even) { margin-top: 64px; }
.cat__blob { width: 100%; aspect-ratio: 1; overflow: hidden; background: var(--sage); border-radius: 58% 42% 52% 48% / 46% 56% 44% 54%; transition: border-radius 1s var(--spring), transform .8s var(--spring); margin-bottom: 12px; display: block; }
.cat:nth-child(2) .cat__blob { border-radius: 44% 56% 60% 40% / 52% 40% 60% 48%; }
.cat:nth-child(3) .cat__blob { border-radius: 52% 48% 38% 62% / 58% 50% 50% 42%; }
.cat:nth-child(4) .cat__blob { border-radius: 40% 60% 55% 45% / 45% 55% 45% 55%; }
.cat:nth-child(5) .cat__blob { border-radius: 60% 40% 45% 55% / 50% 45% 55% 50%; }
.cat:hover .cat__blob { border-radius: 50% 50% 46% 54% / 54% 48% 52% 46%; transform: rotate(-5deg) scale(1.04); }
.cat__blob img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.cat:hover .cat__blob img { transform: scale(1.1) rotate(5deg); }
.cat__blob--paw { display: grid; place-items: center; background: var(--clay); border-radius: 48% 52% 42% 58% / 56% 44% 56% 44%; }
.cat__blob--paw svg { width: 42%; height: 42%; fill: none; stroke: var(--paper); stroke-width: 1.3; }
.cat b { font: 400 23px/1.15 var(--font-head); }
.cat small { color: var(--muted); font-size: 13.5px; }

/* мини-подбор: компас */
.win { margin: 0 16px; padding: 120px 0; border-radius: 48px; background: var(--ink); color: var(--paper); overflow: clip; position: relative; }
.win::before { content: ''; position: absolute; width: 60vw; height: 60vw; left: 38%; top: -30vw; border-radius: 50%; background: radial-gradient(circle, rgba(240, 198, 116, calc(var(--g, .6) * .22)), transparent 62%); pointer-events: none; }
.win__in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 380px minmax(0, 1fr); gap: 60px; align-items: center; }
.win .kicker { color: var(--sun); }
.win h2 { font-size: clamp(36px, 4.2vw, 60px); line-height: 1.04; margin-bottom: 20px; }
.win h2 em, .win__copy em { color: var(--sun); }
.win__copy p { color: rgba(246, 241, 232, .78); font-size: 17px; }
.win .link-arrow { color: var(--sun); margin-top: 8px; }
.compass { position: relative; width: 380px; aspect-ratio: 1; }
.compass__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.compass__ring { fill: none; stroke: rgba(246, 241, 232, .22); stroke-width: 1; }
.compass__ring--in { fill: rgba(246, 241, 232, .04); stroke-dasharray: 2 5; }
.compass__ticks path { stroke: rgba(246, 241, 232, .3); stroke-width: 1; }
.compass__sun { transition: transform 1s var(--spring); }
.compass__sun circle { fill: var(--sun); }
.compass__rays path { stroke: var(--sun); stroke-width: 2.4; stroke-linecap: round; }
.compass__rays { animation: spin 18s linear infinite; transform-origin: 0 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.compass__needle { fill: var(--clay); transition: transform 1s var(--spring); }
.compass__b { position: absolute; width: 66px; height: 66px; margin: -33px 0 0 -33px; border-radius: 50%; border: 1px solid rgba(246, 241, 232, .25); background: rgba(246, 241, 232, .06); color: var(--paper); display: grid; place-content: center; gap: 2px; padding: 0; font: 400 25px/1 var(--font-head); transition: background .35s, color .35s, transform .45s var(--spring), border-color .35s; }
.compass__b small { display: block; font: 600 8.5px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.compass__b:hover { transform: scale(1.08); border-color: var(--sun); }
.compass__b[aria-checked="true"] { background: var(--sun); border-color: var(--sun); color: var(--ink); }
.compass__b--n { left: 50%; top: 9%; } .compass__b--s { left: 50%; top: 91%; } .compass__b--e { left: 91%; top: 50%; } .compass__b--w { left: 9%; top: 50%; }
.win__side { margin: 0 0 6px; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: rgba(246, 241, 232, .7); }
.win__side b { color: var(--sun); font-weight: 600; }
.win__note { font: italic 400 22px/1.35 var(--font-head); margin-bottom: 22px; }
.win__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.win__list a { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: center; padding: 8px; border-radius: 22px; text-decoration: none; background: rgba(246, 241, 232, .06); transition: background .3s, transform .45s var(--spring); }
.win__list a:hover { background: rgba(246, 241, 232, .12); transform: translateX(6px); }
.win__list img { width: 64px; height: 80px; object-fit: cover; border-radius: 999px 999px 14px 14px; background: var(--paper); }
.win__list span { display: grid; gap: 2px; }
.win__list b { font: 400 20px/1.15 var(--font-head); }
.win__list small { color: rgba(246, 241, 232, .65); }
.win__res.is-anim .win__list li, .win__res.is-anim .win__note { animation: rise .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 80ms + 60ms); }
@keyframes rise { from { opacity: 0; transform: translate3d(0, 18px, 0); } }

/* хиты */
.hits { padding: 130px 0 110px; }
.hits__grid { --cols: 4; row-gap: 56px; }
.hits__grid .card:nth-child(4n+2), .hits__grid .card:nth-child(4n+4) { margin-top: 56px; }

/* карточка товара: арка, как окно */
.card { container-type: inline-size; background: transparent; }
.card__media { position: relative; aspect-ratio: 4 / 5; border-radius: 50% 50% 26px 26px / 32% 32% 26px 26px; background: var(--card-bg); transition: border-radius .9s var(--spring); isolation: isolate; }
.card__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 250, 238, .38) 46%, transparent 62%); transform: translateX(-100%); transition: transform 1.1s var(--ease); pointer-events: none; }
.card:hover .card__media { border-radius: 46% 46% 26px 26px / 26% 26% 26px 26px; }
.card:hover .card__media::after { transform: translateX(100%); }
.card__media img { transition: transform 1.1s var(--ease); }
.card:hover .card__media img { transform: scale(1.06); }
.card__badge { left: auto; right: 4cqw; top: 12cqw; width: 58px; height: 58px; padding: 0; border-radius: 50%; display: grid; place-items: center; text-align: center; background: var(--sun); color: var(--ink); font: 700 11.5px/1.05 var(--font-body); transform: rotate(-12deg); z-index: 2; }
.card__fav { top: calc(125cqw - 54px); right: 12px; width: 42px; height: 42px; background: rgba(248, 244, 237, .9); transition: transform .45s var(--spring); z-index: 2; }
.card__fav:hover { transform: scale(1.12); }
.card__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'name name' 'meta meta' 'care care' 'price add'; gap: 3px 10px; padding-top: 18px; }
.card__name { grid-area: name; font: 400 22px/1.15 var(--font-head); }
.card__name a:hover { text-decoration: none; color: var(--leaf); }
.card__meta { grid-area: meta; font-style: italic; color: var(--muted); font-size: 14px; }
.card__care { grid-area: care; display: flex; align-items: center; gap: 14px; margin: 8px 0 6px; min-height: 18px; }
.cc { display: inline-flex; align-items: center; gap: 5px; }
.cc svg { width: 17px; height: 17px; fill: none; stroke: var(--ink2); stroke-width: 1.6; stroke-linecap: round; }
.mtr { display: inline-flex; gap: 2.5px; }
.mtr i { width: 5px; height: 5px; border-radius: 50%; background: rgba(31, 51, 38, .16); }
.mtr i.on { background: var(--moss); }
.cc--pet svg { stroke: var(--clay); }
.cc--pet.is-ok svg { stroke: var(--leaf); fill: rgba(125, 154, 92, .3); }
.card__care--pot { gap: 8px; color: var(--muted); font-size: 13px; }
.card__care--pot em { font-style: normal; }
.card__care .sw, .sw { width: 14px; height: 14px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); display: inline-block; }
.card__price { grid-area: price; align-self: center; font-size: 17px; flex-wrap: wrap; gap: 0 8px; }
.card__add { grid-area: add; margin: 0; min-height: 42px; padding: 0 16px; font-size: 13.5px; background: transparent; color: var(--ink); border-color: rgba(31, 51, 38, .25); }
.card__add:hover { background: var(--ink); color: var(--paper); }
.card.is-out .card__add { opacity: .5; }

/* колесо ухода */
.year { padding: 120px 0 80px; }
.year__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; }
.year__sticky { position: sticky; top: 110px; }
.year h2 { font-size: clamp(36px, 4.6vw, 64px); line-height: 1.04; max-width: 10em; }
.wheel { position: relative; width: min(420px, 100%); aspect-ratio: 1; margin-top: 34px; }
.wheel svg { width: 100%; height: 100%; overflow: visible; display: block; }
.wseg { opacity: .42; transition: opacity .5s; }
.wseg.is-on { opacity: 1; }
.wheel text { font: 600 10.5px var(--font-body); letter-spacing: .1em; text-transform: uppercase; fill: var(--ink2); text-anchor: middle; }
.wheel__in { fill: var(--paper); }
.wheel__pin { fill: var(--clay); }
.wheel__c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.wheel__c b { font: 400 34px/1.1 var(--font-head); }
.wheel__c span { font: 600 11px var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--clay); }
.year__list { list-style: none; margin: 0; padding: 0; }
.season { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; padding: 48px 0; border-top: 1px solid var(--line); transition: opacity .6s; }
.js .season:not(.is-on) { opacity: .45; }
.season__k { margin: 0 0 8px; color: var(--muted); font-size: 15px; }
.season__k span { font: italic 400 28px var(--font-head); color: var(--clay); margin-right: 8px; }
.season h3 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.1; margin-bottom: 22px; }
.season ul { list-style: none; margin: 0; padding: 0; }
.season li { position: relative; padding: 12px 0 12px 30px; border-bottom: 1px dashed var(--line); font-size: 18px; }
.season li::before { content: ''; position: absolute; left: 4px; top: 19px; width: 12px; height: 12px; border-radius: 0 100% 0 100%; background: var(--moss); transform: rotate(-12deg); }

/* свет: коллаж из «галек» */
.light { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; padding: 110px 0 120px; align-items: center; }
.light figure { margin: 0; overflow: hidden; background: var(--card-bg); }
.light figure img { width: 100%; height: 100%; object-fit: cover; }
.light__a { grid-column: 1 / 6; grid-row: 1 / 3; aspect-ratio: 4 / 5; border-radius: 48% 52% 46% 54% / 40% 42% 58% 60%; animation: morph 16s ease-in-out infinite alternate; }
@keyframes morph { 0% { border-radius: 48% 52% 46% 54% / 40% 42% 58% 60%; } 50% { border-radius: 56% 44% 52% 48% / 48% 56% 44% 52%; } 100% { border-radius: 44% 56% 40% 60% / 54% 46% 54% 46%; } }
.light__copy { grid-column: 7 / 13; }
.light__copy h2 { font-size: clamp(36px, 4.4vw, 62px); line-height: 1.04; margin-bottom: 22px; }
.light__copy p { font-size: 18px; color: var(--ink2); max-width: 34em; }
.light__copy .btn { margin-top: 12px; }
.light__b { grid-column: 7 / 10; aspect-ratio: 3 / 2; border-radius: 999px 999px 26px 26px / 70% 70% 26px 26px; }
.light__c { grid-column: 10 / 13; aspect-ratio: 3 / 4; border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%; margin-top: 60px; }

/* условия */
.prom { padding: 40px 0 40px; }
.prom__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.prom__list > li { display: grid; gap: 10px; align-content: start; padding: 30px 28px; border-radius: 34px; background: var(--paper); transition: transform .6s var(--spring); }
.prom__list > li:nth-child(even) { transform: translateY(28px); border-radius: 34px 34px 34px 120px; }
.prom__list > li:hover { transform: translateY(-6px); }
.prom__list > li:nth-child(even):hover { transform: translateY(20px); }
.prom__i { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--bg); }
.prom__i svg { width: 24px; height: 24px; fill: none; stroke: var(--leaf); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.prom__n { margin: 8px 0 0; font: 400 56px/1 var(--font-head); }
.prom__n b { font-weight: 400; font-variant-numeric: tabular-nums; color: var(--clay); }
.prom__list p:last-child { color: var(--ink2); font-size: 15px; margin: 0; }
.prom__more { margin: 64px 0 0; text-align: center; }

/* ——— каталог ——— */
.catalog { padding-bottom: 40px; }
.crumbs { padding: 6px 0 10px; font-size: 13px; }
.cat-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin: 0 0 22px; }
.cat-head { margin: 0; gap: 18px; align-items: baseline; }
.cat-head h1 { font-size: clamp(48px, 7vw, 108px); line-height: .98; }
.cat-count { font: italic 400 24px var(--font-head); color: var(--leaf); }
.cat-search input { width: min(420px, 100%); height: 56px; padding: 0 24px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); font-size: 16px; }
.cat-search input:focus { outline: none; border-color: var(--ink); }
.cat-chips { gap: 10px; padding: 0 0 10px; }
.cat-chips .chip { min-height: 48px; padding: 0 22px; font-size: 14.5px; }
.cat-layout { grid-template-columns: minmax(0, 1fr); gap: 0; padding-bottom: 60px; }
.filters { position: static; display: flex; flex-wrap: wrap; gap: 14px 30px; align-items: flex-start; padding: 20px 24px; margin: 6px 0 22px; border-radius: 30px; background: var(--paper); }
.fgroup { display: flex; flex-wrap: wrap; gap: 6px; border: 0; margin: 0; padding: 0; }
.fgroup:first-of-type { display: none; }
.fgroup legend { float: left; width: 100%; padding: 0 0 8px; font: 600 11px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.fopt { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); font-size: 13.5px; font-weight: 600; transition: background .25s, color .25s, border-color .25s; }
.fopt:hover { border-color: var(--ink); }
.fopt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.fopt i { color: var(--muted); font-size: 11.5px; font-weight: 600; }
.fopt:has(input:checked) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.fopt:has(input:checked) i { color: rgba(246, 241, 232, .6); }
.fopt:has(input:focus-visible) { outline: 2px solid var(--clay); outline-offset: 2px; }
.frange { display: flex; gap: 6px; }
.frange input { width: 110px; height: 38px; padding: 0 14px; border-radius: 999px; background: var(--bg); }
.filters__foot { align-self: flex-end; padding: 0; margin-left: auto; }
.filters__foot .btn { min-height: 38px; padding: 0 16px; font-size: 13px; }
.cat-bar { justify-content: space-between; margin: 0 0 30px; flex-wrap: wrap; }
.cat-podbor { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--leaf); text-decoration: none; }
.cat-podbor svg { width: 22px; height: 22px; fill: none; stroke: var(--clay); stroke-width: 1.6; animation: spin 16s linear infinite; }
.cat-podbor:hover span { text-decoration: underline; }
.cat-sort select { height: 44px; border-radius: 999px; padding: 0 16px; border-color: var(--line); background: var(--paper); }
.cat-main { --cols: 4; }
.cat-main .grid { row-gap: 52px; padding-bottom: 50px; }
.cat-main .grid .card:nth-child(4n+2), .cat-main .grid .card:nth-child(4n+4) { margin-top: 50px; }
.empty__t { font-family: var(--font-head); font-size: 34px; }

/* ——— товар ——— */
.pwrap .crumbs { padding-bottom: 18px; }
.product { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 72px; padding-bottom: 60px; }
.gallery__main { border-radius: 50% 50% 34px 34px / 30% 30% 34px 34px; background: var(--card-bg); }
.gallery__main img { view-transition-name: zh-photo; }
.gallery__nav { background: rgba(248, 244, 237, .92); }
.gallery__thumbs { gap: 10px; margin-top: 16px; }
.gallery__thumbs button { width: 72px; border-radius: 999px 999px 14px 14px; border: 2px solid transparent; }
.gallery__thumbs button[aria-current] { border-color: var(--clay); }
.product__buy { top: 104px; gap: 16px; }
.pbadge { padding: 6px 14px; border-radius: 999px; background: var(--sun); color: var(--ink); font-weight: 700; }
.ptitle { font-size: clamp(40px, 4.4vw, 64px); line-height: 1.02; }
.pmeta { font: italic 400 20px var(--font-head); color: var(--moss); margin-top: -4px; }
.pprice { font-size: 30px; }
.pprice b { font-weight: 600; }
.pvars__list .chip { min-height: 44px; }
.stepper { border-radius: 999px; border-color: var(--line); background: var(--paper); }
.pfav { border-radius: 50%; }
.pstock { color: var(--leaf); font-weight: 600; }
.pstock::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--moss); box-shadow: 0 0 0 4px rgba(125, 154, 92, .2); vertical-align: 1px; }
.pfacts { border-color: var(--line); }
.pfacts li::before { border-color: var(--moss); }
.pextra { display: grid; gap: 14px; }
.pass { display: grid; gap: 2px; padding: 8px 18px; border-radius: 24px; background: var(--paper); }
.pass__row { display: grid; grid-template-columns: 34px 78px minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 14.5px; }
.pass__row:last-child { border-bottom: 0; }
.pass__i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--bg); }
.pass__i svg { width: 18px; height: 18px; fill: none; stroke: var(--ink2); stroke-width: 1.6; }
.pass__i.is-ok svg { stroke: var(--leaf); fill: rgba(125, 154, 92, .3); }
.pass__i.is-bad svg { stroke: var(--clay); }
.pass__l { color: var(--muted); }
.pass b { font-weight: 600; }
.pass--pot { padding: 18px 20px; }
.pass--pot ul { list-style: none; margin: 8px 0 10px; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.pass--pot li { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 10px; }
.pass__k { margin: 0; font-weight: 600; }
.pcal { padding: 16px 18px 14px; border-radius: 24px; background: var(--paper); }
.pcal__t { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; font-weight: 600; }
.pcal__t span { color: var(--clay); font-weight: 600; font-size: 13px; }
.pcal__m { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; }
.pcal__m li { position: relative; display: grid; justify-items: center; align-content: end; gap: 4px; height: 70px; padding-bottom: 2px; border-radius: 10px; }
.pcal__m li.is-now { background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--clay); }
.pcal__w { width: 7px; height: calc(6px + var(--w) * 9px); border-radius: 4px; background: #7aa6a3; }
.pcal__f, .pcal__r { position: absolute; top: 6px; width: 7px; height: 7px; border-radius: 50%; }
.pcal__f { background: var(--moss); left: calc(50% - 8px); }
.pcal__r { background: var(--clay); left: calc(50% + 1px); }
.pcal__m small { font-size: 10px; letter-spacing: .02em; color: var(--muted); }
.pcal__legend { display: flex; gap: 14px; flex-wrap: wrap; margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.lg { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.lg--w { background: #7aa6a3; border-radius: 3px; } .lg--f { background: var(--moss); } .lg--r { background: var(--clay); }
.pfit { font-size: 15px; }
.pinfo { gap: 72px; border-color: var(--line); }
.pinfo h2 { font-size: 34px; }
.pinfo p { font-size: 17px; color: var(--ink2); }
.specs div { border-color: var(--line); font-size: 14.5px; }
.related__t { font-size: clamp(32px, 3.6vw, 52px); margin-bottom: 30px; }
.grid--row { --cols: 4; }

/* ——— корзина, оформление ——— */
.page-title { font-size: clamp(48px, 7vw, 100px); line-height: .98; margin: 0 0 30px; }
.line__img { border-radius: 999px 999px 14px 14px; }
.line__name { font: 400 20px/1.2 var(--font-head); }
.cartpage, .checkout { gap: 56px; }
.cartpage__side, .checkout__side { top: 100px; padding: 28px; border-radius: 32px; background: var(--paper); }
.promo input { border-radius: 999px; }
.promo .btn { min-height: 46px; }
.tip { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding: 14px 16px; border-radius: 20px; background: var(--bg); font-size: 14px; }
.tip svg { width: 22px; height: 22px; fill: none; stroke: var(--clay); stroke-width: 1.6; }
.tip p { margin: 0; }
.tip--ok { background: #e2ead2; }
.tip--ok svg { stroke: var(--leaf); }
.cbox { border-color: var(--line); }
.cbox legend { font: 400 30px var(--font-head); }
.field input, .field textarea { border-radius: 18px; border-color: var(--line); background: var(--paper); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.opt { border-radius: 22px; border-color: var(--line); background: var(--paper); transition: border-color .25s; }
.chip-r span { border-radius: 999px; border-color: var(--line); background: var(--paper); }
.checkout__t { font-size: 30px; }
.olines img { border-radius: 999px 999px 10px 10px; }
.done { padding-top: 10px; }
.done__k { color: var(--leaf); font-size: 15px; letter-spacing: .04em; }
.done__t { font-size: clamp(42px, 5.6vw, 80px); line-height: 1.02; }
.empty-cart__t { font: 400 34px var(--font-head); }
.sum__total { border-color: var(--line); }

/* ящик корзины, меню, тосты */
.scrim { background: rgba(26, 40, 30, .34); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.drawer { background: var(--paper); border-radius: 34px 0 0 34px; transition: transform .55s cubic-bezier(.7, 0, .15, 1); }
.drawer__top, .drawer__foot { border-color: var(--line); }
.drawer__title { font: 400 30px var(--font-head); }
.drawer.is-open .line { animation: rise .6s var(--ease) both; }
.drawer.is-open .line:nth-child(2) { animation-delay: .06s; } .drawer.is-open .line:nth-child(3) { animation-delay: .12s; } .drawer.is-open .line:nth-child(4) { animation-delay: .18s; }
.mmenu { width: 100%; background: var(--ink); color: var(--paper); transform: none; clip-path: circle(0 at calc(100% - 44px) 40px); transition: clip-path .7s cubic-bezier(.7, 0, .2, 1), visibility 0s linear .7s; }
.mmenu.is-open { clip-path: circle(150% at calc(100% - 44px) 40px); transition: clip-path .8s cubic-bezier(.7, 0, .2, 1); }
.mmenu__top { border-color: rgba(246, 241, 232, .12); padding: 16px 16px 16px 24px; }
.mmenu__brand { font: 400 28px var(--font-head); }
.mmenu .icon-btn svg { stroke: var(--paper); }
.mmenu__search input { border-radius: 999px; background: rgba(246, 241, 232, .08); border-color: rgba(246, 241, 232, .2); color: var(--paper); height: 52px; padding: 0 20px; }
.mmenu__search input::placeholder { color: rgba(246, 241, 232, .55); }
.mmenu nav { padding: 12px 24px; }
.mmenu nav a { font: 400 34px/1.15 var(--font-head); padding: 14px 0; border-color: rgba(246, 241, 232, .12); opacity: 0; transform: translateY(20px); transition: opacity .5s, transform .7s var(--ease); }
.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(7) { transition-delay: .3s; }
.mmenu__contacts { color: rgba(246, 241, 232, .6); padding: 18px 24px; }
.toast { border-radius: 999px; background: var(--ink); color: var(--paper); padding: 14px 22px; }
.ship-progress__bar { background: rgba(31, 51, 38, .1); }
.ship-progress__bar i { background: var(--moss); }

/* ——— подвал ——— */
.ft { position: relative; margin-top: 110px; padding: 96px 0 0; border-radius: 52px 52px 0 0; background: var(--ink); color: var(--paper); overflow: clip; }
.ft__top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px; }
.ft__k { font: 600 12px var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--sun); margin-bottom: 14px; }
.ft__big { display: inline-block; font: 400 clamp(38px, 4.4vw, 66px)/1.04 var(--font-head); color: var(--paper); text-decoration: none; transition: transform .45s var(--spring); }
.ft__big svg { display: inline-block; width: .72em; height: .72em; margin-left: .18em; vertical-align: -.06em; fill: none; stroke: var(--sun); stroke-width: 1.4; transition: transform .5s var(--spring); }
.nw { white-space: nowrap; }
.ft__big:hover svg { transform: translateX(10px) rotate(-12deg); }
.ft__note { max-width: 30em; margin-top: 18px; color: rgba(246, 241, 232, .65); }
.ft__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.ft__h { font: 600 11px var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: rgba(246, 241, 232, .5); margin-bottom: 14px; }
.ft ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 15px; }
.ft ul a { text-decoration: none; color: rgba(246, 241, 232, .88); }
.ft ul a:hover { color: var(--sun); }
.ft__word { display: flex; justify-content: center; align-items: flex-start; height: .72em; margin-top: 70px; overflow: hidden; font: 400 clamp(84px, 20vw, 320px)/.92 var(--font-head); color: #2b4634; letter-spacing: -.02em; white-space: nowrap; user-select: none; }
.ft__word span { display: inline-block; transition: transform 1.2s var(--ease), color .6s; transition-delay: calc(var(--i) * 50ms); }
.ft:hover .ft__word span:nth-child(odd) { transform: translateY(-4%); }
.ft__legal { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 22px 0 14px; border-top: 1px solid rgba(246, 241, 232, .12); font-size: 13px; color: rgba(246, 241, 232, .6); }
.ft__dev { margin: 0 auto; padding: 0 0 26px; font-size: 13px; }
.ft__dev a { display: inline-flex; align-items: center; gap: 6px; color: rgba(246, 241, 232, .82); text-decoration: none; border-bottom: 1px solid rgba(240, 198, 116, .45); padding-bottom: 2px; transition: color .3s, border-color .3s; }
.ft__dev a:hover { color: var(--sun); border-color: var(--sun); }
.ft__dev svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--spring); }
.ft__dev a:hover svg { transform: translate(2px, -2px); }

/* ——— подбор ——— */
.pb__head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; align-items: end; margin-bottom: 36px; }
.pb__t { font-size: clamp(44px, 6vw, 92px); line-height: 1.02; }
.pb__head p { font-size: 18px; color: var(--ink2); margin: 0; }
.pb__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 44px; align-items: start; }
.pb__stage { position: sticky; top: 92px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.pb__scene { position: relative; border-radius: 38px; overflow: hidden; background: #ece4d6; aspect-ratio: 4 / 3; box-shadow: 0 30px 60px -40px rgba(31, 51, 38, .5); }
.pb__svg { display: block; width: 100%; height: 100%; touch-action: pan-y; }
.pb__hud { position: absolute; left: 16px; right: 16px; top: 16px; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
.pb__hud p { margin: 0; padding: 10px 16px; border-radius: 20px; background: rgba(248, 244, 237, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pb__month b { display: block; font: 400 24px/1.1 var(--font-head); }
.pb__month span { font-size: 12.5px; color: var(--muted); }
.pb__h { display: flex; align-items: baseline; gap: 6px; }
.pb__h span { font-size: 12.5px; color: var(--muted); }
.pb__h b { font: 400 36px/1 var(--font-head); font-variant-numeric: tabular-nums; color: var(--leaf); }
.pb__time { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; padding: 12px 18px 12px 12px; border-radius: 30px; background: var(--paper); }
.pb__play { display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 20px 0 14px; border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); font: 600 14px var(--font-body); white-space: nowrap; transition: transform .45s var(--spring), background .3s; }
.pb__play:hover { background: var(--leaf); transform: scale(1.03); }
.pb__play svg { width: 20px; height: 20px; fill: currentColor; }
.pb__play .i-pause, .pb__play.is-on .i-play { display: none; }
.pb__play.is-on .i-pause { display: inline; }
.pb__track { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; min-width: 0; }
.pb__chart { width: 100%; height: 44px; display: block; }
.pb__track input[type=range] { width: 100%; margin: 0; height: 22px; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.pb__track input[type=range]::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: rgba(31, 51, 38, .18); }
.pb__track input[type=range]::-moz-range-track { height: 3px; border-radius: 3px; background: rgba(31, 51, 38, .18); }
.pb__track input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8.5px; border-radius: 50%; background: var(--clay); border: 3px solid var(--paper); box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.pb__track input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--clay); border: 3px solid var(--paper); }
.pb__months { display: flex; justify-content: space-between; min-width: 0; overflow: hidden; font: 600 10px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pb__form { display: grid; }
.q { border: 0; margin: 0 0 24px; padding: 0 0 24px; border-bottom: 1px solid var(--line); min-width: 0; }
.q legend { display: flex; align-items: baseline; gap: 12px; padding: 0 0 16px; font: 400 27px/1.15 var(--font-head); }
.q__n { font: 600 12px var(--font-body); letter-spacing: .12em; color: var(--clay); }
.q__compass { position: relative; width: 240px; height: 240px; margin: 0 auto 6px; }
.q__rose { position: absolute; inset: 70px; border-radius: 50%; border: 1px dashed rgba(31, 51, 38, .25); background: radial-gradient(circle, var(--paper) 30%, transparent 31%); }
.q__rose::before, .q__rose::after { content: ''; position: absolute; left: 50%; top: -20px; bottom: -20px; width: 1px; background: rgba(31, 51, 38, .18); }
.q__rose::after { transform: rotate(90deg); }
.side { position: absolute; width: 76px; height: 76px; margin: -38px 0 0 -38px; z-index: 1; }
.side--n { left: 50%; top: 38px; } .side--s { left: 50%; top: 202px; } .side--e { left: 202px; top: 50%; } .side--w { left: 38px; top: 50%; }
.side input, .o3 input, .c2 input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; z-index: 1; }
.side span { display: grid; place-content: center; gap: 3px; width: 100%; height: 100%; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); text-align: center; font: 600 10.5px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); transition: background .3s, color .3s, transform .45s var(--spring), border-color .3s; }
.side b { font: 400 24px/1 var(--font-head); color: var(--ink); letter-spacing: 0; text-transform: none; }
.side:hover span { transform: scale(1.06); border-color: var(--ink); }
.side input:checked + span { background: var(--sun); border-color: var(--sun); color: var(--ink); transform: scale(1.08); }
.side input:focus-visible + span, .o3 input:focus-visible + span, .c2 input:focus-visible + span { outline: 2px solid var(--clay); outline-offset: 3px; }
.q__hint { text-align: center; margin: 8px 0 0; color: var(--ink2); font-size: 14.5px; }
.opts3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.o3, .c2 { position: relative; }
.o3 span { display: grid; align-content: start; gap: 3px; height: 100%; padding: 16px 14px; border-radius: 22px; border: 1px solid var(--line); background: var(--paper); transition: border-color .25s, background .25s, transform .45s var(--spring); }
.o3 b { font-size: 15px; font-weight: 600; line-height: 1.2; }
.o3 small { color: var(--muted); font-size: 12.5px; line-height: 1.3; }
.o3:hover span { border-color: var(--ink); }
.o3 input:checked + span { border-color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1px var(--ink); transform: translateY(-2px); }
.o3__i { position: relative; display: block; width: 52px; height: 34px; margin-bottom: 8px; border-radius: 8px; background: #e6ddcf; overflow: hidden; }
.o3__i::before { content: ''; position: absolute; left: 4px; top: 5px; width: 13px; height: 17px; border-radius: 2px; background: #cfe1ea; box-shadow: 0 0 0 2px #f8f4ec; }
.o3__i::after { content: ''; position: absolute; bottom: 4px; width: 9px; height: 13px; border-radius: 50% 50% 2px 2px; background: var(--moss); box-shadow: 0 6px 0 -2px var(--clay); }
.o3__i--sill::after { left: 6px; bottom: 9px; } .o3__i--mid::after { left: 24px; } .o3__i--deep::after { left: 39px; opacity: .7; }
.o3__i--deep { background: linear-gradient(90deg, #e6ddcf 30%, #cfc4b2); }
.chips2 { display: flex; flex-wrap: wrap; gap: 8px; }
.c2 span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); font-weight: 600; font-size: 14.5px; transition: background .25s, color .25s, border-color .25s; }
.c2:hover span { border-color: var(--ink); }
.c2 input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pb__res { margin-top: 4px; }
.res { display: grid; gap: 22px; padding: 28px; border-radius: 34px; background: var(--paper); box-shadow: 0 30px 60px -46px rgba(31, 51, 38, .5); animation: rise .7s var(--ease) both; }
.res__k { margin: 0; font: 600 12px var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--clay); }
.res__main { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 20px; align-items: start; }
.res__img { display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 999px 999px 18px 18px; background: var(--card-bg); }
.res__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.res__img:hover img { transform: scale(1.06); }
.res__t { font-size: 34px; line-height: 1.05; }
.res__lat { margin: 4px 0 12px; font: italic 400 17px var(--font-head); color: var(--moss); }
.res__why { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 14.5px; }
.res__why li { position: relative; padding-left: 22px; }
.res__why li::before { content: ''; position: absolute; left: 2px; top: 6px; width: 10px; height: 10px; border-radius: 0 100% 0 100%; background: var(--moss); transform: rotate(-12deg); }
.res__why b { font-weight: 600; }
.res__l { margin: 0 0 10px; font-weight: 600; font-size: 14px; }
.res__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ralt { display: inline-flex; align-items: center; gap: 10px; padding: 4px 16px 4px 4px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); font: 600 13.5px var(--font-body); transition: border-color .25s, transform .45s var(--spring); }
.ralt:hover { border-color: var(--ink); transform: translateY(-2px); }
.ralt img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.potpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.pp { display: grid; justify-items: center; align-content: start; gap: 4px; padding: 10px 6px 12px; border-radius: 22px; border: 1px solid var(--line); background: var(--bg); text-align: center; transition: border-color .25s, background .25s, transform .45s var(--spring); }
.pp:hover { border-color: var(--ink); transform: translateY(-3px); }
.pp.is-on { border-color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1px var(--ink); }
.pp img { width: 60px; height: 75px; object-fit: cover; border-radius: 999px 999px 12px 12px; background: var(--card-bg); }
.pp span { display: grid; gap: 1px; }
.pp b { font-size: 13.5px; font-weight: 600; }
.pp small { font-size: 12px; color: var(--muted); }
.pp--none { border-style: dashed; align-content: center; min-height: 112px; }
.res__note { margin: 10px 0 0; font-size: 13.5px; color: var(--ink2); }
.res__lamp { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 14px 16px; border-radius: 20px; background: #f6e8c9; cursor: pointer; }
.res__lamp input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ink); }
.res__lamp small { display: block; color: var(--ink2); font-size: 13px; margin-top: 2px; }
.res__sum { display: grid; gap: 12px; padding-top: 6px; border-top: 1px solid var(--line); }
.res__sum .sum { gap: 8px; font-size: 14.5px; padding-top: 12px; }
.res__sum .sum dt { min-width: 0; }
.res__more { justify-self: center; font-size: 14px; color: var(--muted); }
.pb__note { margin: 40px 0 0; max-width: 60em; }

/* ——— о нас ——— */
.ab-hero { padding-bottom: 40px; }
.ab-hero__t { font-size: clamp(46px, 7vw, 112px); line-height: 1; max-width: 12em; margin: 4px 0 30px; }
.ab-hero__row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: end; margin-bottom: 44px; }
.ab-hero__lead { font-size: 22px; line-height: 1.45; margin: 0; color: var(--ink2); }
.ab-hero__img { margin: 0; overflow: hidden; border-radius: 999px 999px 40px 40px / 50% 50% 40px 40px; aspect-ratio: 16 / 9; background: var(--card-bg); }
.ab-hero__img img { width: 100%; height: 100%; object-fit: cover; }
.ab-way { padding: 110px 0 60px; }
.way { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; counter-reset: w; }
.way__i { position: relative; padding: 26px 22px 28px; border-radius: 30px; background: var(--paper); }
.way__i:nth-child(even) { margin-top: 48px; }
.way__n { display: block; font: italic 400 40px/1 var(--font-head); color: var(--clay); margin-bottom: 18px; }
.way__i h3 { font-size: 24px; line-height: 1.12; margin-bottom: 10px; }
.way__i p { font-size: 15px; color: var(--ink2); margin: 0; }
.ab-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 90px 0; }
.ab-duo figure { margin: 0; overflow: hidden; aspect-ratio: 3 / 4; background: var(--card-bg); }
.ab-duo figure img { width: 100%; height: 100%; object-fit: cover; }
.ab-duo__a { border-radius: 50% 50% 30px 30px / 34% 34% 30px 30px; }
.ab-duo__b { border-radius: 58% 42% 52% 48% / 46% 56% 44% 54%; margin-top: 90px; }
.ab-duo__t h2 { font-size: clamp(34px, 3.8vw, 54px); line-height: 1.05; margin-bottom: 18px; }
.ab-duo__t p { color: var(--ink2); font-size: 17px; }
.ab-quote { padding: 60px 0 40px; }
.ab-quote__t { font: italic 400 clamp(30px, 3.8vw, 56px)/1.15 var(--font-head); max-width: 20em; margin: 0 auto; text-align: center; color: var(--leaf); }

/* ——— доставка ——— */
.dl__t { font-size: clamp(46px, 7vw, 108px); line-height: 1; margin: 4px 0 44px; max-width: 11em; }
.dl__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.dl__card { padding: 32px; border-radius: 34px; background: var(--paper); }
.dl__card--a { background: var(--ink); color: var(--paper); border-radius: 34px 34px 34px 96px; padding-bottom: 40px; }
.dl__card--b { background: #dfe6e6; border-radius: 34px 96px 34px 34px; }
.dl__i { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--bg); margin-bottom: 18px; }
.dl__card--a .dl__i { background: rgba(246, 241, 232, .1); }
.dl__i svg { width: 24px; height: 24px; fill: none; stroke: var(--clay); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dl__card h2 { font-size: 32px; margin-bottom: 8px; }
.dl__big { font: 400 46px/1.1 var(--font-head); margin: 0 0 14px; }
.dl__big small { display: block; font: 600 14px var(--font-body); opacity: .7; margin-top: 4px; }
.dl__card ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 15.5px; }
.dl__card--a a { color: var(--sun); }
.dl__pay { padding: 70px 0 20px; }
.dl__pay h2, .dl__faq h2 { font-size: clamp(32px, 3.6vw, 50px); margin-bottom: 20px; }
.dl__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.dl__chips li { padding: 12px 20px; border-radius: 999px; background: var(--paper); font-weight: 600; }
.dl__guar { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 40px; align-items: center; margin: 60px 0; padding: 44px; border-radius: 40px; background: #e2ead2; }
.dl__guar-n { font: 400 clamp(110px, 14vw, 200px)/.85 var(--font-head); color: var(--leaf); }
.dl__guar h2 { font-size: clamp(30px, 3.2vw, 46px); margin-bottom: 12px; }
.dl__faq details { border-top: 1px solid var(--line); padding: 18px 0; }
.dl__faq details:last-child { border-bottom: 1px solid var(--line); }
.dl__faq summary { cursor: pointer; font: 400 24px/1.25 var(--font-head); list-style: none; display: flex; justify-content: space-between; gap: 20px; }
.dl__faq summary::-webkit-details-marker { display: none; }
.dl__faq summary::after { content: '+'; font-family: var(--font-body); color: var(--clay); transition: transform .4s var(--spring); }
.dl__faq details[open] summary::after { transform: rotate(45deg); }
.dl__faq details p { margin: 12px 0 0; color: var(--ink2); max-width: 44em; }

/* 404 */
.lost__art { width: 200px; height: 160px; }
.lost__code { color: rgba(31, 51, 38, .14); font-family: var(--font-head); }
.lost__btns { display: flex; gap: 10px; flex-wrap: wrap; }

/* ——— переходы между страницами: новая страница «прорастает» снизу ——— */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .5s cubic-bezier(.4, 0, .2, 1) both; }
::view-transition-new(root) { animation: vt-in .8s cubic-bezier(.65, 0, .2, 1) both; }
@keyframes vt-out { to { opacity: .35; transform: translate3d(0, -30px, 0) scale(.985); } }
@keyframes vt-in { from { clip-path: ellipse(70% 0% at 50% 100%); } to { clip-path: ellipse(140% 140% at 50% 100%); } }
::view-transition-group(zh-head) { animation-duration: .5s; }
::view-transition-group(zh-photo) { animation-duration: .7s; animation-timing-function: cubic-bezier(.3, .8, .2, 1); z-index: 5; }
::view-transition-old(zh-photo), ::view-transition-new(zh-photo) { animation-duration: .7s; }

/* ——— планшет ——— */
@media (max-width: 1180px) {
  .hd__nav { display: none; }
  .peb--menu { display: grid; }
  .win__in { grid-template-columns: minmax(0, 1fr) 340px; }
  .win__res { grid-column: 1 / -1; }
  .compass { width: 340px; }
  .cats__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cat:nth-child(even) { margin-top: 0; }
  .cat:nth-child(3n+2) { margin-top: 56px; }
  .prom__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .way { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .way__i:nth-child(even) { margin-top: 0; }
  .cat-main { --cols: 3; }
  .cat-main .grid .card:nth-child(n) { margin-top: 0; }
  .cat-main .grid .card:nth-child(3n+2) { margin-top: 50px; }
  .hits__grid { --cols: 3; }
  .hits__grid .card:nth-child(n) { margin-top: 0; }
  .hits__grid .card:nth-child(3n+2) { margin-top: 56px; }
  .grid--row { --cols: 3; }
  .pb__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 1100px) and (min-width: 861px) { .grid--row .card:nth-child(4), .hits__grid .card:nth-child(n+7) { display: none; } }

/* ——— телефон ——— */
@media (max-width: 860px) {
  :root { --pad: 16px; --gap: 14px; }
  main { padding-top: 88px; }
  .hd { top: 10px; left: 10px; right: 10px; }
  .hd__logo { height: 48px; padding: 0 16px 0 8px; }
  .mark { width: 32px; height: 32px; }
  .logo__w { font-size: 21px; }
  .peb { width: 48px; height: 48px; }
  .hd__act { gap: 6px; }
  .sec-head { margin-bottom: 30px; }

  .grow { height: 230vh; }
  .grow__sun { width: 120%; right: -40%; }
  .grow__plant { right: auto; left: 50%; bottom: 41vh; height: 49vh; max-width: 96vw; transform: translateX(-50%); }
  .grow__ruler { right: 6px; top: 13vh; bottom: 43vh; width: 40px; }
  .grow__mark { right: 18px; font-size: 12px; }
  .grow__copy { left: 16px; right: 16px; top: auto; bottom: 3.4vh; width: auto; translate: none; }
  .grow__copy .kicker { margin-bottom: 8px; }
  .grow__t { font-size: clamp(34px, 9.6vw, 46px); margin-bottom: 12px; }
  .grow__lead { font-size: 15px; line-height: 1.45; margin-bottom: 16px; }
  .grow__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .grow__btns .btn { min-height: 52px; padding: 0 14px; font-size: 15px; }
  .grow__steps { left: 16px; right: 16px; top: auto; bottom: 14vh; width: auto; }
  .grow__steps li { top: auto; bottom: 0; }
  .grow__steps b { font-size: 40px; }
  .grow__steps span { font-size: 17px; margin-top: 8px; }
  .grow__time { left: 16px; top: 82px; bottom: auto; gap: 10px; }
  .grow__mn { font-size: 38px; }
  .grow__bar { width: 70px; }
  .grow__hint { display: none; }

  .latin { padding: 18px 0; }
  .cats { padding: 80px 0 60px; }
  .cats__row { gap: 18px 14px; }
  .cat b { font-size: 18px; }
  .cat small { font-size: 12px; }
  .win { margin: 0 8px; padding: 70px 0; border-radius: 34px; }
  .win__in { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .compass { width: min(310px, 82vw); justify-self: center; }
  .compass__b { width: 58px; height: 58px; margin: -29px 0 0 -29px; font-size: 22px; }
  .win__note { font-size: 19px; }
  .hits { padding: 80px 0 70px; }
  .hits__grid, .cat-main, .grid--row { --cols: 2; }
  .hits__grid { row-gap: 34px; }
  .hits__grid .card:nth-child(n), .cat-main .grid .card:nth-child(n) { margin-top: 0; display: flex; }
  .hits__grid .card:nth-child(even), .cat-main .grid .card:nth-child(even) { margin-top: 34px; }
  .hits__grid .card:nth-child(n+7) { display: none; }
  .grid--row .card:nth-child(n) { display: flex; }

  .card__body { grid-template-areas: 'name name' 'meta meta' 'care care' 'price price' 'add add'; padding-top: 12px; }
  .card__name { font-size: 18px; }
  .card__meta { font-size: 12.5px; }
  .card__care { gap: 9px; margin: 6px 0 4px; }
  .cc svg { width: 15px; height: 15px; }
  .mtr i { width: 4px; height: 4px; }
  .card__price { font-size: 16px; margin-bottom: 8px; }
  .card__add { min-height: 40px; }
  .card__badge { width: 48px; height: 48px; font-size: 10px; }
  .card__fav { width: 38px; height: 38px; top: calc(125cqw - 46px); right: 8px; }

  .year { padding: 80px 0 40px; overflow-x: clip; }
  .year__in { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .year__side, .year__sticky { display: contents; }
  .wheel { position: sticky; top: 72px; z-index: 3; width: 168px; margin: 10px auto 18px; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 10px var(--bg); }
  /* липкое колесо на телефоне: полоса во всю ширину под ним, чтобы текст сезонов не просвечивал по бокам (13.11) */
  .wheel::before { content: ''; position: absolute; z-index: -1; top: -82px; bottom: -14px; left: -50vw; right: -50vw;
    background: linear-gradient(var(--bg) calc(100% - 14px), rgba(236, 229, 217, 0)); pointer-events: none; }
  .wheel__c b { font-size: 18px; }
  .wheel__c span { font-size: 9px; }
  .wheel text { font-size: 15px; }
  .season { min-height: 0; padding: 34px 0; }
  .season li { font-size: 16px; }

  .light { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; padding: 80px 0; }
  .light__a { grid-column: 1 / 7; grid-row: auto; }
  .light__copy { grid-column: 1 / 7; }
  .light__copy p { font-size: 16px; }
  .light__b { grid-column: 1 / 4; }
  .light__c { grid-column: 4 / 7; margin-top: 30px; }
  .prom__list { gap: 12px; }
  .prom__list > li { padding: 22px 18px; border-radius: 28px; }
  .prom__list > li:nth-child(even) { transform: translateY(20px); border-radius: 28px 28px 28px 70px; }
  .prom__n { font-size: 34px; white-space: nowrap; }
  .prom__list p:last-child { font-size: 13.5px; }
  .prom__i { width: 44px; height: 44px; }

  .ft { margin-top: 80px; padding-top: 64px; border-radius: 34px 34px 0 0; }
  .ft__top { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .ft__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 18px; }
  .ft__cols > div:last-child { grid-column: 1 / -1; }
  .ft__word { margin-top: 40px; }

  .cat-hero { margin-bottom: 14px; }
  .cat-search { width: 100%; }
  .cat-search input { width: 100%; height: 50px; }
  .cat-chips { margin: 0 -16px; padding: 4px 16px 12px; }
  .cat-chips .chip { min-height: 42px; padding: 0 16px; }
  .filters { position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 84vh; margin: 0; padding: 0 20px 20px; border-radius: 30px 30px 0 0; display: block; transform: translateY(105%); transition: transform .5s cubic-bezier(.7, 0, .15, 1); background: var(--paper); }
  .filters.is-open { transform: none; }
  .filters__top { margin: 0 -20px 14px; padding: 14px 16px 12px 22px; border-color: var(--line); }
  .fgroup { margin-bottom: 18px; }
  .filters__foot { display: flex; position: sticky; bottom: 0; padding: 12px 0 0; background: var(--paper); margin: 0; }
  .filters__foot .btn { min-height: 48px; flex: 1; }
  .cat-bar { margin-bottom: 20px; gap: 10px; }
  .filters-btn { min-height: 44px; }
  .cat-podbor { order: 3; width: 100%; font-size: 14px; }
  .cat-sort { font-size: 0; }
  .cat-sort select { font-size: 14px; height: 44px; }

  .product, .pinfo { grid-template-columns: minmax(0, 1fr); }
  .pbuy .btn { order: 3; flex: 1 1 100%; }
  .pbuy .stepper { flex: 1; justify-content: space-between; }
  .product { gap: 26px; padding-bottom: 30px; }
  .ptitle { font-size: 38px; }
  .pinfo { gap: 30px; }
  .pcal__m li { height: 64px; }
  .pcal__m small { font-size: 8.5px; }
  .pass__row { grid-template-columns: 32px 66px minmax(0, 1fr); font-size: 13.5px; }
  .page-title { font-size: 48px; }
  .cartpage__side, .checkout__side { padding: 22px; }

  .pb__head { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 20px; }
  .pb__head p { font-size: 16px; }
  .pb__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pb__stage { top: 66px; z-index: 5; gap: 6px; padding-bottom: 8px; background: var(--bg); }
  .pb__scene { aspect-ratio: 16 / 10.5; border-radius: 26px; }
  .pb__hud { left: 10px; right: 10px; top: 10px; }
  .pb__hud p { padding: 6px 12px; border-radius: 14px; }
  .pb__month b { font-size: 17px; }
  .pb__month span, .pb__h span { font-size: 11px; }
  .pb__h b { font-size: 26px; }
  .pb__time { padding: 6px 12px 6px 6px; gap: 10px; border-radius: 24px; }
  .pb__play { height: 42px; padding: 0 14px 0 10px; font-size: 13px; }
  .pb__chart { display: none; }
  .pb__months span:nth-child(even) { visibility: hidden; }
  .q legend { font-size: 23px; }
  .q__compass { transform: scale(.9); margin: -10px auto -6px; }
  .opts3 { gap: 6px; }
  .o3 span { padding: 12px 10px; border-radius: 18px; }
  .o3 b { font-size: 13.5px; }
  .o3 small { font-size: 11.5px; }
  .res { padding: 20px 16px; border-radius: 28px; }
  .res__main { grid-template-columns: 100px minmax(0, 1fr); gap: 14px; }
  .res__t { font-size: 26px; }
  .potpick { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .ab-hero__row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ab-hero__lead { font-size: 18px; }
  .ab-hero__img { aspect-ratio: 4 / 3; border-radius: 999px 999px 26px 26px / 40% 40% 26px 26px; }
  .way { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .way__i { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 0 12px; padding: 22px 20px; }
  .way__n { grid-row: 1 / 3; font-size: 32px; margin: 0; }
  .ab-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 60px 0; }
  .ab-duo__t { grid-column: 1 / -1; grid-row: 1; }
  .ab-duo__b { margin-top: 40px; }
  .dl__grid { grid-template-columns: minmax(0, 1fr); }
  .dl__card { padding: 26px 22px; }
  .dl__card--a { border-radius: 30px 30px 30px 80px; }
  .dl__card--b { border-radius: 30px 80px 30px 30px; }
  .dl__guar { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 30px 24px; }
  .dl__faq summary { font-size: 20px; }
}
@media (max-width: 420px) {
  .logo__w { font-size: 19px; }
  .peb--fav { display: none; }
  .cats__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat:nth-child(n) { margin-top: 0; }
  .cat:nth-child(even) { margin-top: 40px; }
}

/* ——— без движения ——— */
@media (prefers-reduced-motion: reduce) {
  .grow { height: auto; }
  .grow__stage { position: relative; }
  .grow__steps, .grow__time, .grow__hint { display: none; }
  .latin__track, .grow__gobo, .light__a, .compass__rays, .cat-podbor svg, .grow__hint i::after { animation: none !important; }
  .js .is-split:not(.is-in) .w, .is-split .w { opacity: 1; transform: none; transition: none; }
  .js .season:not(.is-on) { opacity: 1; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .mmenu, .mmenu.is-open, .mmenu nav a, .drawer { transition: none; }
}