/* ХАН&СТЕЙК · меню «Доска шефа» · ignite/menu/menu.css
   Всё живёт под .km и префиксом km-: классы index.html (.menu, .card, .add, .tabs, .track, .h2, .rv) не задеты.
   Шрифты берутся со страницы (Fontin Sans), фон секции прозрачный: под ней дым KhanAtmosphere. */

.km{
  --km-ink:#090909;--km-ink2:#131210;--km-cream:#F7EAD7;--km-gold:#C89B3C;--km-gold-hi:#E6C77F;--km-copper:#A9683A;--km-green:#96A46A;
  --km-muted:rgba(247,234,215,.68);--km-faint:rgba(247,234,215,.66);--km-line:rgba(200,155,60,.18);
  --km-serif:"Fontin Sans","Fira Ruble",sans-serif;
  --km-sans:"Fontin Sans","Fira Ruble",sans-serif;
  --km-gut:clamp(18px,4.5vw,72px);
  --km-top:72px;            /* высота фиксированной шапки сайта */
  --km-nav:54px;            /* высота липкого оглавления меню */
  --km-max:1440px;
  --km-ease:cubic-bezier(.2,.7,.2,1);--km-out:cubic-bezier(.16,1,.3,1);
  position:relative;isolation:isolate;overflow-x:clip;color:var(--km-cream);
  font:400 16px/1.55 var(--km-sans);-webkit-font-smoothing:antialiased;
}
.km :where(*,*::before,*::after){box-sizing:border-box}
.km :where(h2,h3,p,ol,ul,li,figure){margin:0;padding:0}
.km :where(ol,ul){list-style:none}
.km :where(img){display:block;max-width:100%}
.km :where(button){font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
.km :where(:focus-visible){outline:2px solid var(--km-gold-hi);outline-offset:3px}
.km .km-peek:focus-visible{outline:1px solid rgba(230,199,127,.45);outline-offset:-1px} /* строка уже подсвечена сама: яркая рамка вокруг неё выглядела как сбой */
.km-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- посадка после томагавка: свет сверху, дым, угольки ---------- */
/* живой дым мангала (board-smoke.js): слой прилип к экрану под содержимым доски, пока доска на экране */
.km-air{position:sticky;top:0;display:block;width:100%;height:100vh;height:100lvh;margin-bottom:-100vh;margin-bottom:-100lvh;
  z-index:-1;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
.km-landing{position:absolute;left:0;right:0;top:0;height:min(120vh,1100px);z-index:-1;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent,#000 24%,#000 55%,transparent);mask-image:linear-gradient(transparent,#000 24%,#000 55%,transparent)}
.km-fall{position:absolute;left:50%;top:-38vh;width:max(120vw,1100px);height:115vh;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(170,105,55,.22),rgba(150,80,40,.07) 55%,transparent)}
.km-smoke{position:absolute;top:-6%;width:clamp(240px,36vw,540px);height:auto;opacity:.10;mix-blend-mode:screen}
.km-smoke--l{left:-7%;transform:scaleX(-1)}
.km-smoke--r{right:-5%;top:8%;opacity:.07}
.km.is-live .km-smoke--l{animation:km-drift-l 22s ease-in-out infinite alternate}
.km.is-live .km-smoke--r{animation:km-drift-r 27s ease-in-out infinite alternate}
@keyframes km-drift-l{to{transform:scaleX(-1) translate3d(-3%,-7%,0) scale(1.07)}}
@keyframes km-drift-r{to{transform:translate3d(-4%,-9%,0) scale(1.08)}}
.km-ember{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;opacity:0;
  background:radial-gradient(circle,#ffd9a0 0,#e98a3a 38%,rgba(170,70,25,0) 70%);
  animation:km-ember var(--d) linear var(--dl) infinite;animation-play-state:paused}
.km.is-live .km-ember{animation-play-state:running}
@keyframes km-ember{0%{opacity:0;transform:translate3d(0,0,0)}15%{opacity:var(--o)}70%{opacity:calc(var(--o)*.5)}100%{opacity:0;transform:translate3d(var(--dx),-40vh,0)}}

/* ---------- заголовок раздела ---------- */
.km-head{position:relative;max-width:var(--km-max);margin:0 auto;padding:clamp(150px,26vh,260px) var(--km-gut) clamp(44px,8vh,84px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,25rem);align-items:end;gap:28px clamp(32px,6vw,96px)}
.km-thread{position:absolute;left:var(--km-gut);top:clamp(20px,4vh,48px);width:1px;height:clamp(90px,17vh,170px);
  background:linear-gradient(rgba(200,155,60,0),var(--km-gold));transform-origin:0 0}
.km-eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:26px;font:400 11px/1 var(--km-sans);letter-spacing:.10em;text-transform:uppercase;color:var(--km-gold)}
.km-eyebrow::before{content:"";width:32px;height:1px;background:currentColor}
.km-title{font:400 clamp(34px,5.5vw,80px)/1.08 var(--km-serif);letter-spacing:0;text-transform:none}
.km-ln{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.km-ln>span{display:block}
.km-title em,.km-cat-t em{font-weight:inherit;font-style:normal;padding-right:.08em;color:var(--km-gold-hi);
  background:linear-gradient(90deg,var(--km-cream),var(--km-gold-hi) 48%,var(--km-copper));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.km-lead{max-width:36ch;padding-bottom:.6em;font-size:15.5px;line-height:1.7;color:var(--km-muted);font-weight:400}

/* ---------- липкое оглавление ---------- */
.km-nav{position:sticky;top:var(--km-top);z-index:3;background:linear-gradient(rgba(10,9,8,.97),rgba(10,9,8,.93));border-bottom:1px solid var(--km-line)}
.km-nav-in{position:relative;max-width:var(--km-max);height:var(--km-nav);margin:0 auto;padding:0 var(--km-gut);display:flex;align-items:stretch;gap:clamp(4px,1.6vw,26px);
  overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none} /* девять разделов карты не влезают в узкий экран: строка едет вбок */
.km-nav-in::-webkit-scrollbar{display:none}
.km-nav button{flex:0 0 auto;white-space:nowrap}
.km-nav button{display:flex;align-items:center;gap:9px;min-height:44px;padding:0 10px;border:0;background:none;cursor:pointer;
  font:400 11px/1 var(--km-sans);letter-spacing:.10em;text-transform:uppercase;color:var(--km-muted);transition:color .3s}
.km-nav button:first-of-type{padding-left:0}
.km-nav-n{font:400 15px/1 var(--km-sans);letter-spacing:0;text-transform:none;color:var(--km-gold);font-variant-numeric:lining-nums tabular-nums}
.km-nav button[aria-current="true"]{color:var(--km-cream)}
@media (hover:hover){.km-nav button:hover{color:var(--km-cream)}}
.km-nav::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:var(--km-top);pointer-events:none;opacity:0;transition:opacity .35s;
  background:linear-gradient(rgba(10,9,8,.86),rgba(10,9,8,.96))}
.km-nav.is-stuck::before{opacity:1}
.km-nav-bar{position:absolute;left:0;bottom:-1px;width:1px;height:1px;background:var(--km-gold-hi);box-shadow:0 0 10px 1px rgba(230,199,127,.55);
  transform-origin:0 0;opacity:0;transition:transform .6s var(--km-out),opacity .3s}

/* ---------- сцена категории ---------- */
.km-stages{max-width:var(--km-max);margin:0 auto;padding:0 var(--km-gut)}
.km-stage{--km-light:178,98,46;--km-tone:rgba(230,199,127,.84);position:relative;display:grid;
  grid-template-columns:minmax(0,1.16fr) minmax(0,1fr);grid-template-areas:"vis cat" "vis list";grid-template-rows:auto 1fr;
  column-gap:clamp(40px,5.5vw,96px);padding:clamp(64px,12vh,128px) 0;scroll-margin-top:calc(var(--km-top) + var(--km-nav))}
.km-stage[data-flip]{grid-template-columns:minmax(0,1fr) minmax(0,1.16fr);grid-template-areas:"cat vis" "list vis"}
.km-stage.is-solo{grid-template-rows:1fr 1fr}
.km-stage+.km-stage::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(200,155,60,.24) 30%,rgba(200,155,60,.24) 70%,transparent)}
.km-stage+.km-stage::after{content:"";position:absolute;left:50%;top:-4px;width:7px;height:7px;border:1px solid var(--km-gold);background:var(--km-ink);transform:rotate(45deg)}

.km-cat{grid-area:cat;align-self:end;padding:0 0 clamp(22px,3.6vh,40px)}
.km-cat-n{display:flex;align-items:center;gap:14px;font:400 21px/1 var(--km-sans);color:var(--km-gold);font-variant-numeric:lining-nums tabular-nums}
.km-cat-n i{width:44px;height:1px;background:currentColor;opacity:.6}
.km-cat-c{font:400 10.5px/1 var(--km-sans);font-style:normal;letter-spacing:.10em;text-transform:uppercase;color:var(--km-faint)}
.km-cat-t{margin:18px 0 12px;font:400 clamp(28px,3.6vw,52px)/1.08 var(--km-serif);letter-spacing:0;text-transform:none}
.km-cat-sub{font:400 clamp(21px,1.75vw,27px)/1.25 var(--km-serif);color:var(--km-tone);letter-spacing:0;text-transform:none}

/* витрина: свет, дым, угли и само блюдо */
/* фото липнет сверху, чтобы у заголовка длинного списка не было пустого места */
.km-vis{grid-area:vis;align-self:start;position:sticky;top:calc(var(--km-top) + var(--km-nav) + 20px);display:flex;flex-direction:column;min-width:0}
.km-frame{position:relative;height:min(64vh,600px);min-height:380px}
.km-key{position:absolute;left:50%;top:47%;width:118%;height:112%;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(var(--km-light),.30),rgba(var(--km-light),.10) 46%,transparent 74%);opacity:.8;transition:opacity .8s}
.km-coals{position:absolute;left:14%;right:14%;bottom:3%;height:20%;pointer-events:none;opacity:.75;
  background:radial-gradient(closest-side,rgba(222,104,38,.34),rgba(160,56,20,.12) 52%,transparent)}

.km-steam{position:absolute;left:50%;bottom:34%;width:42%;height:auto;z-index:2;opacity:0;mix-blend-mode:screen;transform:translate3d(-50%,12%,0) scale(.85);pointer-events:none;
  -webkit-mask-image:linear-gradient(to top,transparent,#000 34%);mask-image:linear-gradient(to top,transparent,#000 34%)}
.km-stage.is-live .km-coals{animation:km-coals 4.6s ease-in-out infinite}
.km-stage.is-live .km-steam{animation:km-steam 18s cubic-bezier(.3,.1,.4,1) infinite}
.km-stage.is-live .km-steam--b{animation-delay:-9s;left:56%}
.km-stage[data-cold] .km-steam{display:none} /* холодные закуски и салаты без пара */
.km-sheet[open] .km-steam{animation:km-steam 18s cubic-bezier(.3,.1,.4,1) -4s infinite}  /* окно блюда на телефоне: тот же пар */
.km-sheet[open] .km-steam--b{animation-delay:-13s;left:56%}
@keyframes km-coals{0%,100%{opacity:.7}23%{opacity:.9}41%{opacity:.72}63%{opacity:1}81%{opacity:.78}}
@keyframes km-steam{0%{opacity:0;transform:translate3d(-50%,12%,0) scale(.85)}18%{opacity:.26}60%{opacity:.16}
  100%{opacity:0;transform:translate3d(-44%,-34%,0) scale(1.3) rotate(4deg)}}
@media (prefers-reduced-motion:reduce){.km-steam{opacity:.12;transform:translate3d(-50%,0,0)}.km-stage.is-live .km-steam,.km-sheet[open] .km-steam{animation:none}}
.km-dish{position:absolute;inset:2% 3% 9%;opacity:0;transform:translate3d(0,24px,0) scale(.95);pointer-events:none;
  transition:opacity .65s var(--km-ease),transform .9s var(--km-out)}
.km-dish.is-on{opacity:1;transform:none}
.km-dish.is-out{opacity:0;transform:translate3d(0,-12px,0) scale(1.03);transition-duration:.4s,.6s}
.km-dish img{width:100%;height:100%;object-fit:contain;object-position:50% 72%;
  filter:drop-shadow(0 0 1.5px rgba(255,220,170,.3)) drop-shadow(0 0 24px rgba(var(--km-light),.36)) drop-shadow(0 34px 28px rgba(0,0,0,.62))}
.km-dish[data-tone="bright"] img{filter:brightness(.84) contrast(1.04) drop-shadow(0 0 1.5px rgba(255,220,170,.22)) drop-shadow(0 0 24px rgba(var(--km-light),.3)) drop-shadow(0 34px 28px rgba(0,0,0,.62))}
.km-th img[data-tone="bright"]{filter:brightness(.84) drop-shadow(0 8px 10px rgba(0,0,0,.55))}
.km-stage.is-live .km-dish.is-on{animation:km-float 7s ease-in-out infinite alternate}
@keyframes km-float{from{translate:0 4px}to{translate:0 -6px}}
.km-spark{position:absolute;left:var(--x);bottom:13%;width:var(--s);height:var(--s);border-radius:50%;opacity:0;pointer-events:none;
  background:radial-gradient(circle,#ffe0a8 0,#f0903c 40%,rgba(200,80,30,0) 70%);
  animation:km-spark var(--d) ease-out var(--dl) infinite;animation-play-state:paused}
.km-stage.is-live .km-spark{animation-play-state:running}
@keyframes km-spark{0%{opacity:0;transform:translate3d(0,0,0) scale(1)}12%{opacity:var(--o)}100%{opacity:0;transform:translate3d(var(--dx),-180px,0) scale(.4)}}
@media (hover:hover) and (pointer:fine){
  .km-frame:hover .km-key{opacity:1}
  .km-frame:hover .km-dish.is-on{transform:scale(1.035)}
}

/* подпись под блюдом */
.km-cap{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:66px;padding-top:14px;border-top:1px solid var(--km-line)}
.km-cap-t{display:flex;align-items:baseline;gap:16px;min-width:0}
.km-cap-i{font:400 10.5px/1 var(--km-sans);letter-spacing:.22em;color:var(--km-gold);white-space:nowrap}
.km-cap-nm{min-width:0;overflow-wrap:anywhere;font:400 clamp(21px,1.9vw,28px)/1.15 var(--km-serif);color:var(--km-gold-hi);letter-spacing:0;text-transform:none}
.km-cap-pr{font:400 15px/1 var(--km-sans);white-space:nowrap;color:var(--km-cream)}
.km-cap.km-swap .km-cap-t{animation:km-swap .55s var(--km-out)}
@keyframes km-swap{from{opacity:0;transform:translate3d(0,8px,0)}}

/* список блюд */
.km-list{grid-area:list;align-self:start;border-top:1px solid var(--km-line)}
.km-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:20px;border-bottom:1px solid var(--km-line)}
.km-row::before{content:"";position:absolute;inset:-1px 0;pointer-events:none;opacity:0;transition:opacity .45s;
  background:linear-gradient(90deg,rgba(var(--km-light),.16),rgba(var(--km-light),.04) 45%,transparent 75%)}
.km-row::after{content:"";position:absolute;left:0;top:20%;bottom:20%;width:2px;background:var(--km-gold);transform:scaleY(0);transition:transform .5s var(--km-out)}
.km-row.is-cur::before{opacity:1}
.km-row.is-cur::after{transform:none}
.km-peek{position:relative;display:grid;grid-template-columns:78px minmax(0,1fr);align-items:center;gap:20px;width:100%;min-width:0;
  padding:16px 0 16px 18px;border:0;background:none;text-align:left;cursor:pointer}
.km-th{position:relative;width:78px;height:78px}
.km-th::before{content:"";position:absolute;inset:-16%;border-radius:50%;opacity:.5;transition:opacity .45s,transform .6s var(--km-out);
  background:radial-gradient(closest-side,rgba(var(--km-light),.34),transparent)}
.km-th img{position:relative;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(0,0,0,.55));transition:transform .6s var(--km-out)}
.km-th::after{content:"";position:absolute;right:0;top:4px;width:10px;height:10px;border-radius:50%;background:var(--km-gold);
  box-shadow:0 0 0 3px rgba(9,9,9,.92),0 0 10px rgba(230,170,80,.7);transform:scale(0);transition:transform .45s var(--km-out)}
.km-row.has-in .km-th::after{transform:none}
.km-row.is-cur .km-th::before{opacity:1;transform:scale(1.1)}
.km-tx{display:block;min-width:0}
.km-nm{display:flex;align-items:baseline;gap:12px;font:400 clamp(20px,1.7vw,25px)/1.05 var(--km-serif);color:var(--km-cream);transition:color .3s;letter-spacing:0;text-transform:none}
.km-nm-t{min-width:0;overflow-wrap:anywhere}
.km-dots{flex:1;min-width:24px;border-bottom:1px dotted rgba(200,155,60,.5);transform:translateY(-.22em)}
.km-row:not(.has-price) .km-dots{display:none}
.km-price{font:400 15px/1 var(--km-sans);letter-spacing:.02em;white-space:nowrap;color:var(--km-gold-hi)}
.km-dsc{display:block;margin-top:6px;font-size:14px;line-height:1.5;color:var(--km-muted);font-weight:400}
.km-wt{display:block;margin-top:7px;font:400 10.5px/1 var(--km-sans);letter-spacing:.10em;text-transform:uppercase;color:var(--km-faint)}
.km-row.is-cur .km-nm{color:var(--km-gold-hi)}
@media (hover:hover) and (pointer:fine){
  .km-peek:hover .km-nm{color:var(--km-gold-hi)}
  .km-peek:hover .km-th::before{opacity:1;transform:scale(1.1)}
  .km-peek:hover .km-th img{transform:scale(1.08) translate3d(0,-2px,0)}
}

/* ---------- «в стол» ---------- */
.km-add{position:relative;display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0;border:0;background:none;cursor:pointer;
  font:400 12px/1 var(--km-sans);letter-spacing:.10em;text-transform:uppercase;white-space:nowrap;color:var(--km-cream)}
.km-ico{position:relative;flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(200,155,60,.6);color:var(--km-gold-hi);transition:background .35s,border-color .35s,color .35s,box-shadow .5s}
.km-ico svg{width:16px;height:16px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.km-ico .km-p{transform-origin:10px 10px;transition:transform .5s var(--km-out),opacity .3s}
.km-ico .km-c{stroke-dasharray:18;stroke-dashoffset:18;transition:stroke-dashoffset .45s var(--km-out) .1s}
.km-ico::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--km-gold-hi);opacity:0;pointer-events:none}
.km-lbl{display:grid}
.km-lbl>span{grid-area:1/1;transition:opacity .25s}
.km-l-on,.km-l-rm{opacity:0}
.km-add[data-km="on"] .km-ico{background:var(--km-gold);border-color:var(--km-gold);color:#16120C;box-shadow:0 0 18px rgba(214,150,60,.45)}
.km-add[data-km="on"] .km-p{transform:rotate(90deg) scale(.3);opacity:0}
.km-add[data-km="on"] .km-c{stroke-dashoffset:0}
.km-add[data-km="on"] .km-l-off{opacity:0}
.km-add[data-km="on"] .km-l-on{opacity:1}
.km-add[data-km="on"] .km-lbl{color:var(--km-gold-hi)}
@media (hover:hover) and (pointer:fine){
  .km-add:hover .km-ico{border-color:var(--km-gold-hi);background:rgba(200,155,60,.14)}
  .km-add[data-km="on"]:hover .km-ico{background:var(--km-gold-hi)}
  .km-add[data-km="on"]:hover .km-l-on{opacity:0}
  .km-add[data-km="on"]:hover .km-l-rm{opacity:1}
}
.km-add:active .km-ico{transform:scale(.94)}
.km-add--hero{gap:14px;font-size:13px;font-weight:400}
.km-add--hero .km-ico{width:50px;height:50px}
.km-add--hero .km-ico svg{width:18px;height:18px}
.km-add.km-pop .km-ico{animation:km-press .55s var(--km-out)}
.km-add.km-pop .km-ico::after{animation:km-ring .75s ease-out}
@keyframes km-press{30%{transform:scale(.84)}65%{transform:scale(1.1)}100%{transform:scale(1)}}
@keyframes km-ring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2.3)}}
.km-fx{position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;pointer-events:none;
  background:#ffd497;box-shadow:0 0 6px 1px rgba(240,140,60,.85)}
.km-fly{position:fixed;z-index:30;pointer-events:none;object-fit:contain;will-change:transform,opacity;filter:drop-shadow(0 0 14px rgba(232,150,70,.55))}

/* ---------- итог: ваш стол ---------- */
.km-end{max-width:var(--km-max);margin:0 auto;padding:clamp(36px,7vh,80px) var(--km-gut) clamp(90px,14vh,150px)}
.km-end-in{display:flex;flex-wrap:wrap;align-items:center;gap:18px 36px;padding:28px 0;border-top:1px solid var(--km-line);border-bottom:1px solid var(--km-line)}
.km-end-k{font:400 11px/1 var(--km-sans);letter-spacing:.10em;text-transform:uppercase;color:var(--km-gold)}
.km-end-n{flex:1;min-width:0;font:400 clamp(30px,3vw,44px)/1.05 var(--km-serif);color:var(--km-muted);transition:color .4s;letter-spacing:0;text-transform:none}
.km-end.has-items .km-end-n{color:var(--km-gold-hi)}
.km-end-n.km-bump{animation:km-swap .5s var(--km-out)}
.km-end-b{min-height:52px;padding:0 28px;border:0;background:var(--km-cream);color:#14110C;cursor:pointer;
  font:400 12px/1 var(--km-sans);letter-spacing:.10em;text-transform:uppercase;transition:background .2s,transform .15s}
.km-end-b:hover{background:#fff}
.km-end-b:active{transform:translateY(1px)}
.km-note{max-width:62ch;margin-top:20px;font-size:13px;color:var(--km-faint);font-weight:400}

/* ---------- появление (только если движение разрешено: класс km-anim ставит menu.js) ---------- */
.km-anim .km-head .km-ln>span{transform:translate3d(0,108%,0);transition:transform 1.15s var(--km-out)}
.km-anim .km-head .km-ln+.km-ln>span{transition-delay:.12s}
.km-anim .km-thread{transform:scaleY(0);transition:transform 1.6s var(--km-out)}
.km-anim .km-eyebrow,.km-anim .km-lead{opacity:0;transform:translate3d(0,16px,0);transition:opacity .9s ease .25s,transform 1s var(--km-out) .25s}
.km-anim.is-in .km-head .km-ln>span,.km-anim.is-in .km-thread,.km-anim.is-in .km-eyebrow,.km-anim.is-in .km-lead{transform:none;opacity:1}
.km-anim .km-stage .km-cat-t .km-ln>span{transform:translate3d(0,108%,0);transition:transform 1.1s var(--km-out) .05s}
.km-anim .km-stage :is(.km-cat-n,.km-cat-sub){opacity:0;transform:translate3d(0,14px,0);transition:opacity .8s ease .2s,transform .9s var(--km-out) .2s}
.km-anim .km-stage .km-frame{opacity:0;transform:translate3d(0,44px,0) scale(.97);transition:opacity 1.1s ease,transform 1.4s var(--km-out)}
.km-anim .km-stage .km-cap{opacity:0;transition:opacity .8s ease .4s}
.km-anim .km-stage .km-row{opacity:0;transform:translate3d(0,18px,0);transition:opacity .7s ease,transform .9s var(--km-out);transition-delay:calc(.28s + var(--i) * .08s)}
.km-anim .km-stage.is-in :is(.km-cat-t .km-ln>span,.km-cat-n,.km-cat-sub,.km-frame,.km-cap,.km-row){opacity:1;transform:none}

/* ---------- планшет: сцена в колонку ---------- */
@media (max-width:959px){
  .km-head{grid-template-columns:minmax(0,1fr);padding-top:clamp(120px,20vh,200px)}
  .km-stage,.km-stage[data-flip],.km-stage.is-solo{grid-template-columns:minmax(0,1fr);grid-template-areas:"cat" "vis" "list";grid-template-rows:auto;padding:64px 0 48px}
  .km-vis{position:static} /* В одной колонке фото идёт перед списком и не должно его накрывать. */
  .km-cat{padding-bottom:22px}
  .km-frame{height:auto;min-height:0;aspect-ratio:16/11}
  .km-list{margin-top:18px}
}
/* ---------- телефон ---------- */
@media (max-width:599px){
  .km{--km-top:64px;--km-nav:52px;--km-gut:18px}
  .km-head{padding:112px var(--km-gut) 34px;gap:22px}
  .km-thread{top:16px;height:70px}
  .km-eyebrow{margin-bottom:18px}
  .km-title{font-size:clamp(32px,9vw,42px)}
  .km-lead{font-size:15px}
  .km-nav-in{gap:0;padding:0 8px}
  .km-nav button,.km-nav button:first-of-type{flex-direction:column;justify-content:center;gap:5px;padding:0 11px;font-size:10.5px;letter-spacing:.10em;font-weight:400}
  .km-nav-n{font-size:13px;font-variant-numeric:lining-nums tabular-nums;font-weight:400}
  .km-stage,.km-stage[data-flip]{padding:52px 0 36px}
  .km-cat-n{font-size:19px;font-variant-numeric:lining-nums tabular-nums}
  .km-cat-t{margin:14px 0 8px;font-size:clamp(28px,7.8vw,36px)}
  .km-cat-sub{font-size:20px}
  .km-frame{aspect-ratio:1/.8}
  .km-dish{inset:3% 0 10%}
  .km-cap{gap:12px;min-height:60px;padding-top:12px}
  .km-cap-t{flex-direction:column;align-items:flex-start;gap:7px}
  .km-cap-nm{max-width:100%;font-size:28px}
  .km-add--hero .km-ico{width:46px;height:46px}
  .km-list{margin-top:10px}
  .km-row{column-gap:8px}
  .km-peek{grid-template-columns:60px minmax(0,1fr);gap:14px;padding:14px 0 14px 12px}
  .km-th{width:60px;height:60px}
  .km-nm{font-size:20px;flex-wrap:wrap;gap:6px}
  .km-nm-t{flex-basis:100%}
  .km-dots{display:none}
  .km-dsc{font-size:13.5px;margin-top:5px;font-weight:400}
  .km-add--row .km-lbl{display:none}
  .km-add--row{min-width:44px;justify-content:center}
  .km-end-in{flex-direction:column;align-items:stretch;gap:14px}
  .km-end-b{width:100%}
  .km-ember:nth-of-type(n+11),.km-spark:nth-of-type(n+5){display:none}
}

/* ---------- телефон: спокойный список и окно блюда ---------- */
@media (max-width:767px){
  .km-vis{display:none}
  .km-row::after{display:none}
  .km-th{overflow:hidden;border-radius:50%}
  .km-sheet{position:fixed;inset:auto 0 0;width:100%;max-width:none;height:auto;max-height:94vh;max-height:94dvh;
    margin:0;padding:0 0 max(env(safe-area-inset-bottom,0px),var(--km-sheet-bar,0px));border:1px solid var(--km-line);border-bottom:0;
    border-radius:20px 20px 0 0;background:var(--km-ink);color:var(--km-cream);overflow-x:hidden;overflow-y:auto;
    overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;font:400 16px/1.55 var(--km-sans)}
  .km-sheet[open]{animation:km-sheet-in .32s ease-out both}
  .km-sheet::backdrop{background:rgba(0,0,0,.72);animation:km-sheet-fade-in .32s ease-out both}
  .km-sheet.is-closing{animation:km-sheet-out .22s ease-out both}
  .km-sheet.is-closing::backdrop{animation:km-sheet-fade-out .22s ease-out both}
  .km-sheet-close{position:sticky;top:max(12px,env(safe-area-inset-top,0px));z-index:3;display:grid;place-items:center;
    width:44px;height:44px;margin:12px max(12px,env(safe-area-inset-right,0px)) -56px auto;padding:0;
    border:1px solid var(--km-line);border-radius:50%;background:rgba(9,9,9,.88);color:var(--km-cream);font:400 32px/1 var(--km-sans);cursor:pointer}
  .km-sheet-photo{position:relative;margin:0;aspect-ratio:1/.82;
    background:radial-gradient(closest-side at 50% 52%,rgba(var(--km-light),.34),rgba(var(--km-light),.1) 58%,transparent 86%)}
  .km-sheet-photo::after{content:"";position:absolute;left:14%;right:14%;bottom:5%;height:18%;pointer-events:none;
    background:radial-gradient(closest-side,rgba(222,104,38,.30),rgba(160,56,20,.1) 55%,transparent)}
  .km-sheet-photo img:not(.km-steam){position:relative;z-index:1;width:100%;height:100%;object-fit:contain;object-position:50% 70%;padding:5% 2% 9%;
    filter:drop-shadow(0 0 1.5px rgba(255,220,170,.3)) drop-shadow(0 0 20px rgba(var(--km-light),.34)) drop-shadow(0 22px 20px rgba(0,0,0,.6))}
  .km-sheet-photo[data-tone="bright"] img:not(.km-steam){filter:brightness(.84) contrast(1.04) drop-shadow(0 0 20px rgba(var(--km-light),.3)) drop-shadow(0 22px 20px rgba(0,0,0,.6))}
  .km-sheet-copy{padding:0 max(24px,env(safe-area-inset-right,0px)) 28px max(24px,env(safe-area-inset-left,0px))}
  .km-sheet-cat{margin-bottom:12px;font:400 11px/1.3 var(--km-sans);letter-spacing:.10em;text-transform:uppercase;color:var(--km-gold)}
  .km-sheet-name{font:400 clamp(28px,8vw,34px)/1.15 var(--km-serif);color:var(--km-gold-hi);letter-spacing:0;text-transform:none}
  .km-sheet-price{margin-top:16px;font:400 18px/1.3 var(--km-sans);color:var(--km-gold-hi)}
  .km-sheet-desc{margin-top:14px;font-size:15px;line-height:1.6;color:var(--km-muted);font-weight:400}
  .km-sheet-weight{margin-top:12px;font:400 11px/1.4 var(--km-sans);letter-spacing:.10em;text-transform:uppercase;color:var(--km-faint)}
  .km-add--sheet{margin-top:24px;min-height:48px}
  @media (prefers-reduced-motion:reduce){.km-sheet,.km-sheet::backdrop{animation:none!important}}
  .rm .km-sheet,.rm .km-sheet::backdrop{animation:none!important}
  @keyframes km-sheet-in{from{transform:translate3d(0,100%,0)}to{transform:translate3d(0,0,0)}}
  @keyframes km-sheet-out{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,100%,0)}}
  @keyframes km-sheet-fade-in{from{opacity:0}to{opacity:1}}
  @keyframes km-sheet-fade-out{from{opacity:1}to{opacity:0}}
}

/* ---------- без движения ---------- */
@media (prefers-reduced-motion:reduce){
  .km *,.km *::before,.km *::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .km-ember,.km-spark{display:none}
}
.rm .km *,.rm .km *::before,.rm .km *::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
.rm .km-ember,.rm .km-spark{display:none}

.km-price,.km-cap-pr,.km-sheet-price,.km-wt,.km-sheet-weight{font-variant-numeric:lining-nums tabular-nums}

@media(min-width:1133.334px){.km-end-n{font-weight:400}}