/* «Тихий сад» — демо-магазин натуральной косметики. Светлая тема, «каталог-гербарий».
   Токены в :root; шрифты лежат в fonts/ (OFL). Радиус везде 0, линий и теней у предметов нет. */

@font-face{font-family:'Cormorant';font-style:normal;font-weight:500 700;font-display:swap;src:url(../fonts/cormorant-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Cormorant';font-style:normal;font-weight:500 700;font-display:swap;src:url(../fonts/cormorant-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/onest-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/onest-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/onest-latinext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --bg:#eceeea;            /* светлый камень с зелёным уклоном */
  --surface:#e0e3dd;       /* панели, на шаг темнее */
  --surface-2:#d3d7cf;     /* ещё на шаг: нажатое, неактивное */
  --ink:#232a25;
  --muted:#444c44;
  --accent:#46603f;        /* шалфей: действие */
  --accent-hover:#3a5234;
  --accent-ink:#ffffff;
  --f-sage:#b7c4a3; --f-rose:#dfc3ba; --f-sun:#e8d48f; --f-sky:#b9cbd0; --f-moss:#3f5a40;
  --danger:#8c2f2a;

  --font-display:'Cormorant','Onest',Georgia,'Times New Roman',serif;
  --font-text:'Onest',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;

  /* пять размеров на весь сайт */
  --step-small:1rem;
  --step-body:clamp(1.125rem,1.06rem + .2vw,1.1875rem);
  --step-lead:clamp(1.25rem,1.1rem + .6vw,1.5rem);
  --step-mid:clamp(1.5rem,1.05rem + 1.25vw,2.25rem);      /* строка Cormorant: вопросы, цитата */
  --step-head:clamp(2.5rem,1.4rem + 3.6vw,4.5rem);
  --step-display:clamp(3.4rem,1.8rem + 6.8vw,7.6rem);

  --pad:clamp(16px,2.2vw,32px);
  --gap:clamp(6px,.8vw,10px);
  --hh:72px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hh) + 16px)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--step-body)/1.5 var(--font-text);letter-spacing:-.005em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
[hidden]{display:none !important}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
::selection{background:var(--accent);color:#fff}
#site-header-slot,#site-footer-slot{display:contents}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--pad);top:-80px;background:var(--ink);color:var(--bg);padding:12px 18px;z-index:200}
.skip:focus{top:8px}

/* заголовки */
.h-display{font:600 var(--step-display)/.9 var(--font-display);letter-spacing:-.035em;text-wrap:balance}
.h-head{font:600 var(--step-head)/.95 var(--font-display);letter-spacing:-.03em;text-wrap:balance}
.h-lead{font:600 var(--step-lead)/1.2 var(--font-display);letter-spacing:-.01em}
.lead{font-size:var(--step-lead);line-height:1.38;letter-spacing:-.015em;max-width:30em}
.small{font-size:var(--step-small);line-height:1.45}
.muted{color:var(--muted)}
.nums{font-variant-numeric:tabular-nums}

/* кнопки: плоские, прямоугольные */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 28px;border:0;border-radius:0;background:var(--accent);color:var(--accent-ink);font:600 var(--step-body)/1 var(--font-text);text-decoration:none;text-align:center;transition:background-color .2s var(--ease),transform .15s var(--ease)}
.btn:hover{background:var(--accent-hover)}
.btn:active{transform:translateY(1px) scale(.985)}
.btn--ink{background:var(--ink);color:var(--bg)}
.btn--ink:hover{background:#38413a}
.btn--soft{background:var(--surface);color:var(--ink)}
.btn--soft:hover{background:var(--surface-2)}
.btn--wide{width:100%}
.btn[disabled],.btn[aria-disabled=true]{background:var(--surface-2);color:var(--muted);cursor:not-allowed;transform:none}
.btn svg{width:18px;height:18px;flex:none}
.link{font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;text-decoration-color:var(--accent);transition:text-decoration-color .2s}
.link:hover{text-decoration-color:var(--ink)}
.arrow{display:inline-block;transition:transform .25s var(--ease)}
a:hover .arrow,.btn:hover .arrow{transform:translateX(4px)}

/* ───── шапка ───── */
.site-header{position:sticky;top:0;z-index:60;background:var(--bg);height:var(--hh)}
.site-header__in{display:flex;align-items:center;gap:clamp(16px,3vw,48px);height:100%;padding:0 var(--pad)}
.wordmark{font:600 clamp(1.5rem,1.2rem + .8vw,1.875rem)/1 var(--font-display);letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
.nav{display:flex;gap:clamp(14px,2.2vw,34px);margin-left:auto}
.nav a{font-weight:500;text-decoration:none;padding:10px 2px;position:relative}
.nav a::after{content:"";position:absolute;left:2px;right:2px;bottom:4px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav a:hover::after,.nav a[aria-current=page]::after{transform:scaleX(1)}
.hdr-actions{display:flex;align-items:center;gap:8px}
.cart-btn{text-decoration:none;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px;border:0;background:var(--ink);color:var(--bg);font-weight:600;transition:background-color .2s,transform .15s}
.cart-btn:hover{background:#38413a}
.cart-btn:active{transform:scale(.97)}
.cart-count{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 7px;background:var(--bg);color:var(--ink);font-size:var(--step-small);font-weight:700;font-variant-numeric:tabular-nums}
.cart-count.bump{animation:bump .5s var(--ease)}
@keyframes bump{40%{transform:scale(1.35)}}
.menu-btn{display:none;min-height:48px;min-width:48px;border:0;background:var(--surface);padding:0 16px;font-weight:600}

/* ящик корзины */
.scrim{position:fixed;inset:0;background:rgba(28,32,28,.42);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;z-index:90}
.scrim.on{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(480px,100vw);background:var(--bg);z-index:100;display:flex;flex-direction:column;transform:translateX(104%);transition:transform .45s var(--ease)}
.drawer.on{transform:none}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:18px var(--pad);background:var(--surface)}
.drawer__head h2{font:600 var(--step-lead)/1 var(--font-display);letter-spacing:-.01em}
.icon-btn{display:inline-grid;place-items:center;width:48px;height:48px;border:0;background:transparent;transition:background-color .2s}
.icon-btn:hover{background:var(--surface-2)}
.icon-btn svg{width:22px;height:22px}
.drawer__body{flex:1;overflow:auto;padding:var(--pad)}
.drawer__foot{padding:var(--pad);background:var(--surface);display:grid;gap:14px}
.empty{padding:40px 0;display:grid;gap:18px;justify-items:start}
.empty p{max-width:28ch}

/* строки корзины */
.line{display:grid;grid-template-columns:84px 1fr auto;gap:16px;padding:16px 0;align-items:start}
.line + .line{margin-top:0}
.line__img{width:84px;aspect-ratio:4/5;object-fit:cover;background:var(--surface)}
.line__name{font-weight:500;line-height:1.25;text-decoration:none}
.line__name:hover{text-decoration:underline}
.line__var{color:var(--muted);font-size:var(--step-small);margin-top:2px}
.line__price{font-weight:600;text-align:right;white-space:nowrap}
.line__ctl{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap}
.qty{display:inline-flex;align-items:center;background:var(--surface)}
.qty button{width:44px;height:44px;border:0;background:transparent;font-size:1.25rem;line-height:1;transition:background-color .2s}
.qty button:hover{background:var(--surface-2)}
.qty output,.qty input{min-width:36px;width:44px;text-align:center;font-weight:600;border:0;background:transparent;font-variant-numeric:tabular-nums}
.qty input::-webkit-inner-spin-button{appearance:none}
.linkbtn{border:0;background:none;padding:10px 0;color:var(--muted);text-decoration:underline;text-underline-offset:4px;font-size:var(--step-small)}
.linkbtn:hover{color:var(--ink)}
.line.is-gone{opacity:0;transform:translateX(30px);transition:opacity .25s,transform .25s}

.ship{display:grid;gap:8px;background:var(--surface);padding:16px 18px}
.ship__bar{height:10px;background:var(--surface-2);overflow:hidden}
.ship__bar i{display:block;height:100%;background:var(--accent);transform-origin:left;transition:width .5s var(--ease)}
.promo{display:flex;gap:8px}
.promo input{flex:1;min-width:0}
.promo__msg{min-height:1.4em;font-size:var(--step-small)}
.promo__msg.ok{color:var(--accent);font-weight:600}
.promo__msg.err{color:var(--danger)}
.sum{display:grid;gap:8px}
.sum div{display:flex;justify-content:space-between;gap:16px}
.sum .total{font-size:var(--step-lead);font-weight:600;padding-top:6px}
.sum .minus{color:var(--accent);font-weight:600}

/* формы */
.field{display:grid;gap:8px}
.field label,.field legend,.lbl{font-weight:600;font-size:var(--step-small)}
.in,select.in,textarea.in{width:100%;min-height:52px;padding:12px 16px;border:0;border-radius:0;background:var(--surface);transition:background-color .2s}
textarea.in{min-height:104px;resize:vertical}
.in:hover{background:var(--surface-2)}
.in:focus{background:#fff;outline:3px solid var(--ink);outline-offset:-3px}
.in[aria-invalid=true]{outline:3px solid var(--danger);outline-offset:-3px;background:#f3dfdc}
.in::placeholder{color:#7a8179}
.err{color:var(--danger);font-size:var(--step-small);min-height:0;font-weight:500}
.hint{color:var(--muted);font-size:var(--step-small)}
select.in{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%23232a25' stroke-width='2'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:42px}
.choice{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;background:var(--surface);cursor:pointer;transition:background-color .2s}
.choice:hover{background:var(--surface-2)}
.choice input{appearance:none;flex:none;width:24px;height:24px;margin:2px 0 0;background:#fff;border-radius:50%;display:grid;place-items:center}
.choice input[type=checkbox]{border-radius:0}
.choice input::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--accent);opacity:0;transform:scale(.6);transition:transform .2s var(--ease),opacity .2s}
.choice input[type=checkbox]::after{border-radius:0;width:12px;height:12px}
.choice input:checked::after{opacity:1;transform:scale(1)}
.choice:has(input:checked){background:var(--accent);color:#fff}
.choice:has(input:checked) .hint,.choice:has(input:checked) .muted{color:#dbe6d4}
.choice:has(input:checked) input{background:#fff}
.choice:has(input:focus-visible){outline:3px solid var(--ink);outline-offset:3px}
.choice[aria-disabled=true],.choice:has(input:disabled){opacity:.5;cursor:not-allowed}
.choice__t{font-weight:600}
.choice__p{margin-left:auto;font-weight:600;white-space:nowrap}

/* ───── плитка-образец ───── */
.tile{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0}
.tile__link{display:flex;flex-direction:column;gap:12px;text-decoration:none;min-width:0}
.tile__art{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--surface)}
.tile__art img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.tile__link:hover .tile__art img{transform:scale(1.035)}
.tile__meta{display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.tile__name{font-weight:500;line-height:1.25;font-size:var(--step-body);text-wrap:balance}
.tile__price{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.tile__fact{color:var(--muted);font-size:var(--step-small);margin-top:-6px}
.tile__old{color:var(--muted);text-decoration:line-through;font-weight:400;margin-right:6px}
.tile__flag{position:absolute;left:0;top:0;z-index:2;padding:8px 14px;background:var(--ink);color:var(--bg);font-size:var(--step-small);font-weight:600}
.tile__flag--out{background:var(--surface-2);color:var(--ink)}
.tile__add{position:absolute;right:0;top:0;z-index:2;width:52px;height:52px;border:0;background:var(--bg);color:var(--ink);display:grid;place-items:center;transition:background-color .2s,color .2s,transform .15s}
.tile__add:hover{background:var(--accent);color:#fff}
.tile__add:active{transform:scale(.94)}
.tile__add svg{width:22px;height:22px}
.tile__add[disabled]{opacity:.45;cursor:not-allowed;background:var(--bg);color:var(--ink)}
.tile__add.done{background:var(--accent);color:#fff}

/* общий каркас секций */
.sec{padding:clamp(96px,10vw,160px) var(--pad) 0}
.sec--flush{padding-left:0;padding-right:0}
main{display:block}
.page-top{padding:clamp(28px,4vw,56px) var(--pad) 0}
.crumbs{display:flex;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:var(--step-small);margin-bottom:18px}
.crumbs a{text-decoration:none}.crumbs a:hover{text-decoration:underline}

/* ───── ГЛАВНАЯ: герой ───── */
body[data-page=home] .site-header{background:transparent;margin-bottom:calc(var(--hh) * -1);transition:background-color .25s}
body[data-page=home] .site-header.is-stuck{background:var(--bg)}
.hero{display:grid;grid-template-columns:1fr 1fr;min-height:100svh}
.hero__text{display:flex;flex-direction:column;justify-content:space-between;gap:48px;padding:calc(var(--hh) + clamp(20px,3vw,44px)) var(--pad) clamp(28px,3vw,44px)}
.hero h1{max-width:8.4em}
.hero h1 span{display:block}
.hero__bottom{display:grid;gap:28px;max-width:34em}
.hero__cta{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.hero__field{position:relative;background:var(--surface);overflow:hidden;padding:calc(var(--hh) + var(--pad)) 0 var(--pad) var(--pad)}
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;width:118%}
.mosaic .tile__art{aspect-ratio:4/5}
.m1{grid-area:1/1}.m2{grid-area:1/2/3/4}.m3{grid-area:1/4}.m4{grid-area:2/4}.m5{grid-area:3/1}.m6{grid-area:3/2}.m7{grid-area:3/4}
.m2 .tile__art,.m2 .tile__link{height:100%}
.mosaic a{display:block;overflow:hidden;background:var(--surface-2)}
.mosaic a img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;transition:transform .9s var(--ease)}
.mosaic a:hover img{transform:scale(1.04)}
.m2 img{aspect-ratio:auto;height:100%}
.hero__mark{position:absolute;right:var(--pad);bottom:calc(var(--pad) + 4px);z-index:3}

/* ───── Витрины-категории («лента рамок») ───── */
.frames{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,10fr);gap:var(--pad);align-items:end}
.frames__intro{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;gap:48px}
.frames__intro h2{font:600 var(--step-mid)/1.05 var(--font-display);letter-spacing:-.02em}
.frames__notes{display:grid;gap:18px;color:var(--ink);max-width:22em}
.frames__notes p{color:var(--muted);font-size:var(--step-small)}
.run{--h:clamp(170px,14.6vw,250px);display:flex;align-items:flex-end;gap:12px;padding-right:var(--pad)}
.frame{flex:none;scroll-snap-align:start;display:grid;gap:12px;text-decoration:none}
.frame__img{display:block;height:var(--h);aspect-ratio:var(--ar,4/5);overflow:hidden;background:var(--surface)}
.frame--lift .frame__img{height:calc(var(--h) * 2.2)}
.frame__cap b{display:block}
.frame__cap{flex-direction:column;gap:0}
.frame__img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.frame:hover .frame__img img{transform:scale(1.04)}
.frame__cap{display:flex;justify-content:space-between;gap:12px;font-size:var(--step-small)}
.frame__cap b{font-weight:600;font-size:var(--step-body)}
.frame__cap span{color:var(--muted)}

/* ───── Хиты: «полосы» ───── */
.hits{display:grid;grid-template-columns:minmax(0,1fr);gap:56px}
.hits__top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.hits__top h2 span{color:var(--muted);display:block}
.hits__body{display:grid;grid-template-columns:150px minmax(0,1fr);gap:40px;align-items:start}
.tabs{display:grid;gap:6px;position:sticky;top:calc(var(--hh) + 20px);min-width:0}
.tab{display:flex;flex-direction:column;justify-content:center;gap:2px;height:64px;padding:0 16px;border:0;background:var(--surface);text-align:left;font-weight:600;transition:background-color .2s,color .2s}
.tab small{display:block;font-weight:400;font-size:var(--step-small);color:var(--muted)}
.tab:hover{background:var(--surface-2)}
.tab[aria-selected=true]{background:var(--ink);color:var(--bg)}
.tab[aria-selected=true] small{color:#c8cdc6}
.bands{display:grid;gap:4px}
.band{display:grid;grid-template-columns:76px minmax(0,1.5fr) minmax(70px,.5fr) minmax(100px,.6fr) 52px;gap:20px;align-items:center;min-height:92px;padding:8px 8px 8px 8px;background:var(--surface);transition:background-color .2s,transform .4s var(--ease),opacity .4s}
.band:nth-child(even){background:#d9ddd5}
.band:hover{background:var(--surface-2)}
.band__img{width:76px;aspect-ratio:4/5;object-fit:cover}
.band__name{font-weight:500;line-height:1.25;text-decoration:none;display:block}
.band__name:hover{text-decoration:underline}
.band__note{color:var(--muted);font-size:var(--step-small);line-height:1.35;margin-top:2px}
.band__vol{color:var(--muted);font-size:var(--step-small)}
.band__price{font-weight:600;font-size:var(--step-lead);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.band .tile__add{position:static;width:52px;height:52px;background:var(--bg)}
.bands.swap .band{opacity:0;transform:translateY(10px)}

/* ───── Подбор ухода ───── */
.quiz{display:grid;grid-template-columns:minmax(0,1fr);gap:56px}
.quiz__top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--pad);align-items:end}
.quiz__top .lead{max-width:26em}
.quiz__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--pad);align-items:end}
.qpanel{background:var(--surface);padding:clamp(22px,2.6vw,40px);display:grid;gap:26px;align-self:start;align-content:start;position:sticky;top:calc(var(--hh) + 24px)}
.qprog{display:flex;gap:6px}
.qprog i{flex:1;height:8px;background:var(--surface-2);transition:background-color .4s}
.qprog i.on{background:var(--accent)}
.qq{font:600 var(--step-mid)/1.05 var(--font-display);letter-spacing:-.02em;min-height:2.1em;text-wrap:balance}
.qopts{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.qopt{min-height:64px;padding:12px 16px;border:0;background:var(--bg);text-align:left;font-weight:500;line-height:1.25;transition:background-color .2s,color .2s,transform .15s}
.qopt:hover{background:#fff}
.qopt:active{transform:scale(.985)}
.qopt[aria-pressed=true]{background:var(--accent);color:#fff}
.qnav{display:flex;gap:12px;align-items:center;justify-content:space-between}
.growing{display:grid;grid-template-columns:3fr 4fr 5fr;gap:10px;align-items:end}
.gstep{display:grid;gap:12px;align-content:end;text-decoration:none;min-width:0}
.gstep__art{display:block;overflow:hidden;background:var(--surface)}
.gstep:nth-child(1) .gstep__art{height:30vh;min-height:200px}
.gstep:nth-child(2) .gstep__art{height:44vh;min-height:300px}
.gstep:nth-child(3) .gstep__art{height:60vh;min-height:400px}
.gstep__art img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.gstep:hover .gstep__art img{transform:scale(1.04)}
.gstep__t{font-weight:600}
.gstep__n{color:var(--muted);font-size:var(--step-small);line-height:1.35}
.gstep__p{font-weight:600}
.qresult{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:var(--ink);color:var(--bg);padding:clamp(18px,2.2vw,32px)}
.qresult p{font-size:var(--step-lead);line-height:1.25;max-width:26em;letter-spacing:-.01em}
.qresult .actions{display:flex;gap:10px;flex-wrap:wrap}
.qresult .btn--soft{background:#fff;color:var(--ink)}
.qresult .btn--soft:hover{background:var(--surface)}
.qresult .btn{background:var(--f-sage);color:var(--ink)}
.qresult .btn:hover{background:#cad6b8}

/* ───── Гербарий: ботанические таблицы ───── */
.herb{display:grid;grid-template-columns:minmax(0,1fr);gap:48px}
.herb__top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--pad);align-items:end}
.herb__run{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(10px,1.4vw,22px);align-items:start;padding:0 var(--pad)}
.plate{display:grid;gap:12px;min-width:0}
.plate:nth-child(even){margin-top:clamp(24px,4vw,56px)}
.plate__img{display:block;background:var(--surface);overflow:hidden;aspect-ratio:3/4}
.plate__img img{width:100%;height:100%;object-fit:cover}
.plate h3{font:600 var(--step-lead)/1.1 var(--font-display)}
.plate p{color:var(--muted);font-size:var(--step-small)}

/* ───── Мозаика преимуществ ───── */
.mos{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(72px,6.7vw,96px);gap:8px}
.mt{padding:clamp(18px,1.8vw,26px);overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:16px}
.mt--head{grid-area:1/1/4/7;background:transparent;padding:0}
.mt--fig{grid-area:1/7/4/10;background:var(--f-sun)}
.mt--fig b{font:600 var(--step-head)/.95 var(--font-text);letter-spacing:-.05em}
.mt--fig b i{font-style:normal}
.mt--photo{grid-area:1/10/7/13;padding:0;background:var(--surface)}
.mt--photo img{width:100%;height:100%;object-fit:cover}
.mt--list{grid-area:4/1/7/4;background:var(--surface)}
.mt--list ul{display:grid;gap:8px;font-size:var(--step-lead);line-height:1.2;font-weight:500;letter-spacing:-.01em}
.mt--s1{grid-area:4/4/7/10;background:var(--f-sky)}
.mt--s2{grid-area:7/1/10/8;background:var(--f-sage)}
.mt--s3{grid-area:7/8/10/13;background:var(--f-rose)}
.mt p.s{font-size:var(--step-lead);line-height:1.2;letter-spacing:-.015em;font-weight:500;max-width:19em}
.mt--s1,.mt--s2,.mt--s3{flex-direction:row;padding:0;gap:0;align-items:stretch;justify-content:space-between}
.mt--s1 > p,.mt--s2 > p,.mt--s3 > p{padding:clamp(18px,1.8vw,26px);flex:1}
.mt--s1 > img,.mt--s2 > img,.mt--s3 > img{height:100%;width:auto;aspect-ratio:4/5;object-fit:cover;flex:none}

/* ───── Отзывы ───── */
.testi{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--pad);align-items:start}
.testi__plate{grid-column:2/6;background:var(--surface);aspect-ratio:3/4;max-height:78svh;overflow:hidden;justify-self:stretch}
.testi__plate img{width:100%;height:100%;object-fit:cover;animation:drift 22s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.09) translate(-1.5%,-1.5%)}}
.testi__body{grid-column:7/13;padding-top:120px;display:grid;gap:28px;align-content:start}
.quote{font:500 var(--step-mid)/1.2 var(--font-display);letter-spacing:-.012em;max-width:27em;min-height:4.8em}
.quote__by{display:grid;gap:2px}
.quote__ctl{display:flex;gap:6px;margin-top:4px}
.quote__small{width:clamp(110px,10vw,150px);aspect-ratio:1;background:var(--surface);margin-top:36px;margin-left:calc(100% - 150px);overflow:hidden}
.quote__small img{width:100%;height:100%;object-fit:cover}
.demo-note{color:var(--muted);font-size:var(--step-small);max-width:60ch}

/* ───── Вопросы ───── */
.faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--pad);align-items:start}
.faq h2{position:sticky;top:calc(var(--hh) + 24px)}
.faq__list{display:grid;gap:8px}
.faq details{background:var(--surface);transition:background-color .3s}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px;padding:16px 24px;list-style:none;cursor:pointer;font-size:var(--step-lead);font-weight:500;line-height:1.2;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--surface-2)}
.plus{position:relative;flex:none;width:18px;height:18px}
.plus::before,.plus::after{content:"";position:absolute;left:0;top:7.5px;width:18px;height:3px;background:currentColor;transition:transform .3s var(--ease)}
.plus::after{transform:rotate(90deg)}
.faq details[open]{background:var(--accent);color:#fff}
.faq details[open] summary:hover{background:var(--accent-hover)}
.faq details[open] .plus::after{transform:rotate(0)}
.faq .ans{padding:0 24px 24px;max-width:52ch;font-size:var(--step-body)}
.faq .ans a{color:#fff}

/* ───── Подвал-плитки ───── */
.foot{padding:clamp(96px,10vw,160px) 10px 10px}
.foot__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:8px}
.ft{padding:clamp(18px,1.8vw,26px);display:flex;flex-direction:column;justify-content:space-between;gap:20px;min-height:220px;background:var(--surface);text-decoration:none}
.ft--about{grid-column:span 4}
.ft--nav{grid-column:span 3;background:var(--f-sage)}
.ft--time{grid-column:span 2;background:var(--f-sky)}
.ft--mail{grid-column:span 3;background:var(--f-rose)}
.ft p{font-size:var(--step-lead);line-height:1.22;letter-spacing:-.012em;font-weight:500}
.ft ul{display:grid;gap:6px;font-size:var(--step-body);font-weight:500}
.ft ul a{text-decoration:none;display:inline-block;padding:3px 0}
.ft ul a:hover{text-decoration:underline}
.ft--mail a{font-size:var(--step-lead);font-weight:600;overflow-wrap:anywhere;line-height:1.2}
.ft--mail span,.ft--time span,.ft--about span{font-size:var(--step-small)}
.ft--mark{grid-column:span 8;min-height:320px;background:var(--ink);color:var(--bg);justify-content:center;align-items:center;overflow:hidden}
.ft--mark b{font:600 var(--step-display)/.9 var(--font-display);letter-spacing:-.04em;white-space:nowrap}
.ft--cta{grid-column:span 4;min-height:320px;background:var(--accent);color:#fff;transition:background-color .25s}
.ft--cta:hover{background:var(--accent-hover)}
.ft--cta p{font:600 var(--step-mid)/1.05 var(--font-display);letter-spacing:-.02em}
.ft--cta svg{width:56px;height:56px;align-self:flex-end;transition:transform .35s var(--ease)}
.ft--cta:hover svg{transform:translate(6px,-6px)}
.foot__small{display:flex;flex-wrap:wrap;gap:6px 28px;justify-content:space-between;padding:22px 6px 6px;color:var(--muted);font-size:var(--step-small)}
.foot__small p{max-width:64ch}

/* ───── КАТАЛОГ ───── */
.cat-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;padding-bottom:28px}
.cat-head h1{font:600 var(--step-head)/.95 var(--font-display);letter-spacing:-.03em}
.cat-tools{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.cat-count{font-weight:600}
.cat{display:grid;grid-template-columns:290px minmax(0,1fr);gap:clamp(24px,3vw,48px);align-items:start;padding:0 var(--pad) 0}
.cat > div:first-child{align-self:stretch}
.js-only{display:none}.js .js-only{display:grid}
.filters{position:sticky;top:calc(var(--hh) + 16px);display:grid;gap:26px;max-height:calc(100svh - var(--hh) - 32px);overflow:auto;padding-right:6px;scrollbar-width:thin}
.fgroup{display:grid;gap:10px}
.fgroup h3{font-weight:600;font-size:var(--step-small)}
.fbtns{display:grid;gap:4px}
.fbtn{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:46px;padding:0 14px;border:0;background:var(--surface);text-align:left;font-weight:500;transition:background-color .2s,color .2s}
.fbtn:hover{background:var(--surface-2)}
.fbtn[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.fbtn small{opacity:.7;font-size:var(--step-small);font-variant-numeric:tabular-nums}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.chip{min-height:44px;padding:0 14px;border:0;background:var(--surface);font-weight:500;transition:background-color .2s,color .2s}
.chip:hover{background:var(--surface-2)}
.chip[aria-pressed=true]{background:var(--accent);color:#fff}
.prices{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.checks{display:grid;gap:4px}
.filters-toggle{display:none}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,44px) clamp(10px,1.2vw,16px);grid-auto-flow:dense}
.noresult{grid-column:1/-1;display:grid;gap:18px;justify-items:start;padding:clamp(32px,6vw,96px) 0}
.noresult h2{font:600 var(--step-head)/.95 var(--font-display);letter-spacing:-.03em;max-width:10em}
.noresult p{max-width:30em}

/* ───── КАРТОЧКА ───── */
.pd{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);padding:0 var(--pad);align-items:start}
.gal{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;position:sticky;top:calc(var(--hh) + 16px)}
.gal__thumbs{display:grid;gap:6px;align-content:start}
.gal__thumb{display:block;padding:0;border:0;background:var(--surface);aspect-ratio:4/5;overflow:hidden;opacity:.7;transition:opacity .2s}
.gal__thumb:hover{opacity:1}
.gal__thumb[aria-current=true]{opacity:1;outline:3px solid var(--ink);outline-offset:0}
.gal__thumb img{width:100%;height:100%;object-fit:cover}
.gal--one{grid-template-columns:minmax(0,1fr)}
.gal__main{position:relative;aspect-ratio:4/5;background:var(--surface);overflow:hidden;height:min(calc(100svh - var(--hh) - 64px),880px);width:auto;max-width:100%;justify-self:start}
.gal__main img{width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.gal__nav{position:absolute;bottom:12px;right:12px;display:flex;gap:6px}
.gal__nav button{width:52px;height:52px;border:0;background:var(--bg);display:grid;place-items:center;transition:background-color .2s}
.gal__nav button:hover{background:#fff}
.gal__nav svg{width:20px;height:20px}
.pd__info{display:grid;gap:28px;align-content:start}
.pd__info h1{font:600 var(--step-head)/.95 var(--font-display);letter-spacing:-.03em;text-wrap:balance}
.pd__sub{font-size:var(--step-lead);line-height:1.3;color:var(--ink);letter-spacing:-.012em;max-width:22em}
.pd__price{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.pd__price b{font-size:var(--step-lead);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.pd__price s{color:var(--muted)}
.pd__price .save{background:var(--f-sun);padding:4px 10px;font-weight:600;font-size:var(--step-small)}
.vars{display:flex;gap:4px;flex-wrap:wrap}
.var{min-height:52px;padding:0 20px;border:0;background:var(--surface);font-weight:600;display:grid;align-content:center;text-align:left;transition:background-color .2s,color .2s}
.var small{font-weight:400;font-size:var(--step-small);color:var(--muted)}
.var:hover{background:var(--surface-2)}
.var[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.var[aria-pressed=true] small{color:#c8cdc6}
.pd__buy{display:grid;grid-template-columns:auto 1fr;gap:6px}
.pd__buy .btn{min-height:52px}
.pd__meta{display:grid;gap:6px;color:var(--muted);font-size:var(--step-small)}
.pd__meta b{color:var(--ink);font-weight:600}
.stock{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--accent)}
.stock::before{content:"";width:10px;height:10px;background:var(--accent);border-radius:50%}
.stock.out{color:var(--danger)}.stock.out::before{background:var(--danger)}
.pd__tags{display:flex;flex-wrap:wrap;gap:4px}
.pd__tags span{background:var(--surface);padding:6px 12px;font-size:var(--step-small);font-weight:500}
.ptabs{padding:clamp(56px,8vw,120px) var(--pad) 0;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--pad);align-items:start}
.ptabs__list{display:grid;gap:4px;position:sticky;top:calc(var(--hh) + 16px)}
.ptab{min-height:56px;padding:0 18px;border:0;background:var(--surface);text-align:left;font-weight:600;transition:background-color .2s,color .2s}
.ptab:hover{background:var(--surface-2)}
.ptab[aria-selected=true]{background:var(--ink);color:var(--bg)}
.ppanel{background:var(--surface);padding:clamp(22px,3vw,48px);display:grid;gap:18px;font-size:var(--step-lead);line-height:1.35;letter-spacing:-.012em;min-height:240px;align-content:start}
.ppanel p{max-width:34em}
.ppanel .small{font-size:var(--step-small);letter-spacing:0}
.herbbox{display:grid;grid-template-columns:minmax(120px,200px) minmax(0,1fr);gap:24px;align-items:center;margin-top:8px;background:var(--bg);padding:16px}
.herbbox img{width:100%;aspect-ratio:3/4;object-fit:cover}
.herbbox--text{grid-template-columns:minmax(0,1fr)}
.herbbox h3{font:600 var(--step-lead)/1.1 var(--font-display)}
.herbbox p{font-size:var(--step-body)}
.rel{display:grid;gap:36px}
.rel__top{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.rel__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,20px)}
.rel__grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ───── КОРЗИНА / ОФОРМЛЕНИЕ ───── */
.two{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);padding:0 var(--pad);align-items:start}
.two h1,.page-top h1{font:600 var(--step-head)/.95 var(--font-display);letter-spacing:-.03em}
.panel{background:var(--surface);padding:clamp(20px,2.4vw,36px);display:grid;gap:20px}
.panel h2{font:600 var(--step-lead)/1.1 var(--font-display)}
.lines{display:grid;gap:4px}
.lines .line{background:var(--surface);padding:14px;grid-template-columns:110px 1fr auto}
.lines .line__img{width:110px}
.aside{position:sticky;top:calc(var(--hh) + 16px);display:grid;gap:12px}
.form{display:grid;gap:36px}
.fset{display:grid;gap:14px;border:0;padding:0;margin:0;min-width:0}
.fset > legend{font:600 var(--step-lead)/1.1 var(--font-display);padding:0;margin-bottom:6px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.choices{display:grid;gap:4px}
.formerr{background:#f3dfdc;color:var(--danger);padding:14px 18px;font-weight:500}
.success{display:grid;gap:28px;padding:clamp(28px,5vw,80px) var(--pad) 0;max-width:1100px}
.success h1{font:600 var(--step-display)/.9 var(--font-display);letter-spacing:-.035em;text-wrap:balance}
.success__box{background:var(--f-sage);padding:clamp(20px,3vw,40px);display:grid;gap:16px;max-width:640px}
.mini-sum li{display:flex;justify-content:space-between;gap:18px;padding:6px 0}

/* ───── Источники фото ───── */
.credits{padding:0 var(--pad)}
.credits__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 14px}
.cred{display:grid;gap:12px;align-content:start;min-width:0}
.cred__img{display:block;aspect-ratio:4/5;background:var(--surface);overflow:hidden}
.cred__img img{width:100%;height:100%;object-fit:cover}
.cred dl{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;font-size:var(--step-small);line-height:1.4;margin:0}
.cred dt{color:var(--muted)}
.cred dd{margin:0;overflow-wrap:anywhere}
.cred a{text-underline-offset:3px}
@media (max-width:980px){.credits__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.cred dl{grid-template-columns:1fr}.cred dt{display:none}.cred dd:nth-of-type(1){font-weight:600}}

/* ───── 404 ───── */
.nf{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--pad);padding:clamp(40px,6vw,96px) var(--pad) 0;align-items:end}
.nf h1{font:600 var(--step-display)/.88 var(--font-display);letter-spacing:-.035em}
.nf__art{aspect-ratio:4/5;overflow:hidden;background:var(--f-sage)}
.nf__art img{width:100%;height:100%;object-fit:cover}

/* уведомление */
.toast{visibility:visible;position:fixed;left:var(--pad);bottom:var(--pad);z-index:120;display:flex;align-items:center;gap:20px;background:var(--ink);color:var(--bg);padding:14px 14px 14px 20px;max-width:calc(100vw - 2 * var(--pad));transform:translateY(140%);transition:transform .45s var(--ease)}
.toast:not(.on){visibility:hidden}
.toast.on{transform:none}
.toast button{border:0;background:var(--f-sage);color:var(--ink);min-height:44px;padding:0 18px;font-weight:600}
.toast button:hover{background:#cad6b8}

/* меню на телефоне */
.mnav{position:fixed;inset:var(--hh) 0 0 0;background:var(--bg);z-index:55;padding:var(--pad);display:none;flex-direction:column;gap:4px;overflow:auto}
.mnav.on{display:flex}
.mnav a{font:600 var(--step-mid)/1.1 var(--font-display);letter-spacing:-.02em;text-decoration:none;padding:12px 0}
.mnav .small{margin-top:auto;padding-top:24px}

/* ───── Появление (только когда есть JS) ───── */
.js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0ms)}
.js [data-reveal].is-in{opacity:1;transform:none}
/* затвор на главной картинке героя: подпись-приём */
.js .m2 a{animation:shutter 1.1s .15s var(--ease) both}
.js .m2 a img{animation:settle 1.6s .15s var(--ease) both}
@keyframes shutter{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes settle{from{transform:scale(1.14)}to{transform:scale(1)}}
.js .hero h1 span{animation:rise .9s var(--ease) both}
.js .hero h1 span:nth-child(2){animation-delay:.12s}
@keyframes rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}

/* ───── Адаптив ───── */
@media (max-width:1180px){
  .cat{grid-template-columns:240px minmax(0,1fr)}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .band{grid-template-columns:70px minmax(0,1.4fr) minmax(90px,.7fr) 52px}
  .band__vol{display:none}
  .quiz__grid{grid-template-columns:minmax(0,1fr)}
  .growing{align-items:end}
  .mt--head{grid-area:1/1/3/13}
  .mt--photo{grid-area:3/1/9/5}
  .mt--fig{grid-area:3/5/6/9}
  .mt--list{grid-area:3/9/6/13}
  .mt--s1{grid-area:6/5/9/13}
  .mt--s2{grid-area:9/1/12/8}
  .mt--s3{grid-area:9/8/12/13}
  .ft--about{grid-column:span 6}.ft--nav{grid-column:span 3}.ft--time{grid-column:span 3}.ft--mail{grid-column:span 6}
  .ft--mark{grid-column:span 7}.ft--cta{grid-column:span 5}
  .testi__plate{grid-column:1/6}.testi__body{grid-column:6/13}
}
@media (max-width:980px){
  :root{--hh:64px}
  .nav,.hdr-actions .phone{display:none}
  .menu-btn{display:inline-flex;align-items:center}
  .site-header__in{gap:12px}
  .hdr-actions{margin-left:auto}
  .hero{grid-template-columns:1fr;min-height:0}
  .hero{min-height:0}
  .hero__text{gap:32px;padding-top:calc(var(--hh) + 16px);padding-bottom:36px}
  .hero__field{padding:20px var(--pad) 28px}
  .mosaic{width:auto;gap:10px}
  .frames{grid-template-columns:minmax(0,1fr)}
  .frames__intro{gap:24px}
  .frames__notes{display:none}
  .frames{padding-right:var(--pad)}
  .run{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:0;align-items:end}
  .frame__img,.frame--lift .frame__img{height:auto;width:100%}
  .run .frame--lift{grid-column:span 2;grid-row:span 2}
  .frame--lift .frame__img{aspect-ratio:4/5}
  .herb__run{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hits__body{grid-template-columns:minmax(0,1fr);gap:20px}
  .tabs{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);position:sticky;top:var(--hh);z-index:10;background:var(--bg);padding:8px 0;margin:0}
  .tab{height:auto;min-height:56px;padding:8px 10px}
  .tab small{display:none}
  .quiz__top,.herb__top,.faq,.ptabs,.two,.pd,.nf{grid-template-columns:minmax(0,1fr)}
  .qpanel{position:static}
  .faq h2,.aside,.gal,.ptabs__list,.tabs{position:static}
  .tabs{position:sticky}
  .growing{grid-template-columns:minmax(0,1fr);gap:32px}
  .gstep__art,.gstep:nth-child(n) .gstep__art{height:auto;aspect-ratio:4/5;min-height:0}
  .gstep:nth-child(1) .gstep__art{width:46%}
  .gstep:nth-child(2) .gstep__art{width:68%}
  .gstep:nth-child(3) .gstep__art{width:100%}
  .gstep{grid-template-columns:minmax(0,1fr)}
  .testi{grid-template-columns:minmax(0,1fr)}
  .testi__plate{grid-column:auto;width:72%;max-height:none}
  .testi__body{grid-column:auto;padding-top:8px}
  .quote__small{width:44%;margin:16px 0 0 auto}
  .cat{grid-template-columns:minmax(0,1fr)}
  .filters{position:static;max-height:none;overflow:visible;display:none}
  .filters.open{display:grid;background:var(--surface);padding:20px;margin-bottom:16px}
  .js .filters-toggle{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 20px;border:0;background:var(--surface);font-weight:600;width:100%;margin-bottom:12px}
  .gal{grid-template-columns:minmax(0,1fr)}
  .gal__thumbs{grid-auto-flow:column;grid-auto-columns:76px;order:2;overflow-x:auto}
  .gal__main{height:auto;width:100%}
  .rel__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rel__grid:not(.rel__grid--4) > :nth-child(3){display:none}
  .rel__grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mos{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto;gap:6px}
  .mt{min-height:0}
  .mt--head,.mt--photo,.mt--s1,.mt--s2,.mt--s3{grid-area:auto;grid-column:1/-1}
  .mt--photo{aspect-ratio:4/3}
  .mt--fig,.mt--list{grid-area:auto;grid-column:1/-1;min-height:190px}
  .mt--head{padding-bottom:20px}
  .mt--fig b{white-space:nowrap}
  .mt--s1 > img,.mt--s2 > img,.mt--s3 > img{width:44%;height:auto}
  .mt--s1,.mt--s2,.mt--s3{min-height:160px}
  .foot__grid{grid-template-columns:1fr 1fr;gap:6px}
  .ft--about,.ft--mail,.ft--nav,.ft--time{grid-column:auto;min-height:190px}
  .ft--mail{grid-column:1/-1;min-height:150px}
  .ft--mark,.ft--cta{grid-column:1/-1;min-height:160px}
  .ft--mark{order:-2}.ft--cta{order:-1}
  .ft--about{grid-column:1/-1}
  .lines .line{grid-template-columns:84px 1fr auto}
  .lines .line__img{width:84px}
}
@media (max-width:640px){
  .mosaic{grid-template-columns:1fr 1fr}
  .m1,.m2,.m3,.m4,.m5,.m6,.m7{grid-area:auto}
  .m2 a{height:auto}.m2 img{aspect-ratio:4/5;height:auto}
  .m2,.m4{margin-top:48px}
  .m6,.m7{display:none}
  .run{grid-template-columns:1fr 1fr}
  .run .frame--lift{grid-column:1/-1;grid-row:auto}
  .herb__run{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid{gap:26px 8px}
  .tile__meta{flex-direction:column;gap:2px}
  .row2{grid-template-columns:1fr}
  .qopts{grid-template-columns:1fr}
  .band{grid-template-columns:62px minmax(0,1fr) 52px;gap:12px;min-height:88px}
  .band__img{width:62px}
  .band__price{grid-column:2;text-align:left;font-size:var(--step-body);grid-row:2}
  .band > div{grid-column:2}
  .band .tile__add{grid-column:3;grid-row:1/3}
  .pd__buy{grid-template-columns:1fr}
  .herbbox{grid-template-columns:96px 1fr}
  .qresult .actions{width:100%}.qresult .btn{flex:1}
  .toast{right:var(--pad)}
}

/* ───── Мало движения ───── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .js [data-reveal]{opacity:1;transform:none}
  .testi__plate img{animation:none}
}
@media print{.site-header,.drawer,.scrim,.toast{display:none}}