@font-face{font-family:"Druk Text Wide Cyr";font-weight:500;font-style:normal;font-display:swap;src:url(/app/fonts/druk-text-wide-medium.woff2) format("woff2")}
@font-face{font-family:"Druk Wide Cyr";font-weight:700;font-style:normal;font-display:swap;src:url(/app/fonts/druk-wide-bold.woff2) format("woff2")}

:root{
  color-scheme:dark;
  --cream:#f7efe3;
  --cream-70:rgba(247,239,227,.72);
  --cream-50:rgba(247,239,227,.5);
  --cream-30:rgba(247,239,227,.3);
  --cream-14:rgba(247,239,227,.14);
  --cream-08:rgba(247,239,227,.08);
  --green:#2a5135;
  --accent:#f7efe3;
  --on-accent:#3b170d;
  --deep:#a8452a;
  --deeper:#96391f;
  --terra:#a8452a;
  --terra-hi:#c1573a;
  --sage:#7d8471;
  --sage-hi:#9aa28d;
  --glass:rgba(150,58,33,.55);
  --glass-hi:rgba(247,239,227,.16);
  --glass-shadow:0 8.8px 26.4px rgba(0,0,0,.28);
  --ease:cubic-bezier(.2,.8,.2,1);
  --dur:.4s;
  --r-xl:28.2px;--r-lg:22.9px;--r-md:19.4px;--r-sm:15.8px;
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  background:var(--deeper);
  color:var(--cream);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--text);font-size:13px;line-height:1.35;
  background:var(--deeper);color:var(--cream);
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  -webkit-text-size-adjust:100%;overflow:hidden;overscroll-behavior:none;
  touch-action:manipulation;position:relative;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
input{font:inherit;color:inherit}
img,video{display:block;max-width:100%}
video{object-fit:cover;width:100%;height:100%}
:focus{outline:none}
:focus-visible{outline:1.8px solid var(--cream);outline-offset:1.8px}
::-webkit-scrollbar{display:none}
.hs{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.druk{font-family:var(--druk);font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:1.05}
.glass{
  background:var(--glass);
  -webkit-backdrop-filter:blur(21.1px) saturate(160%);backdrop-filter:blur(21.1px) saturate(160%);
  border:1px solid var(--cream-14);
  box-shadow:inset 0 1px 0 var(--glass-hi),var(--glass-shadow);
}
.press{transition:transform .25s var(--ease),opacity .25s var(--ease)}
.press:active{transform:scale(.97)}
.rbtn{width:38.7px;height:38.7px;border-radius:50%;display:grid;place-items:center;flex:none}
.rbtn svg{width:19.4px;height:19.4px}
.ico{width:19.4px;height:19.4px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- placeholder tile ---------- */
.ph{position:relative;width:100%;height:100%;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(120% 90% at 20% 0%,rgba(247,239,227,.10),transparent 55%),linear-gradient(160deg,var(--ph-a,#5a2616) 0%,var(--ph-b,#7e2f19) 100%)}
.ph span{font-family:var(--druk);font-weight:700;text-transform:uppercase;color:var(--cream);opacity:.16;font-size:clamp(37px,32%,105.6px);line-height:1;transform:translateY(4%)}
.ph[data-tone="coffee"]{--ph-a:#b9603f;--ph-b:#7e2f19}
.ph[data-tone="author"]{--ph-a:#c07446;--ph-b:#86361d}
.ph[data-tone="tea"]{--ph-a:#b86a3c;--ph-b:#7e3319}
.ph[data-tone="vita"]{--ph-a:#b9803f;--ph-b:#83401c}
.ph[data-tone="cold"]{--ph-a:#8d9580;--ph-b:#5d6353}
.ph[data-tone="cocoa"]{--ph-a:#a45a3e;--ph-b:#6e2a18}

/* ---------- HOME ---------- */
#home{position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;z-index:1;background:var(--deeper)}
.hero{position:relative;height:62%;min-height:420px;background:var(--deep)}
.hero-track{display:flex;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.slide{position:relative;flex:none;width:100%;height:100%;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden}
.slide video{position:absolute;inset:0}
.slide .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(128,48,26,.42) 0%,rgba(128,48,26,0) 24%,rgba(128,48,26,0) 46%,rgba(128,48,26,.62) 76%,var(--deeper) 100%)}
.slide .cap{position:absolute;left:14.1px;right:14.1px;bottom:40.5px;z-index:1}
.slide .cap h2{font-size:26px;text-shadow:0 1.8px 21.1px rgba(0,0,0,.35);max-width:340px}
.slide .cap p{margin-top:7px;color:var(--cream-70);font-size:12.5px}
.slide .cap .go{margin-top:12.3px;display:inline-flex;align-items:center;gap:5.3px;height:29.9px;padding:0 12.3px 0 14.1px;border-radius:15px;font-size:11.5px;font-weight:500;color:var(--cream)}
.slide .cap .go svg{width:12.3px;height:12.3px}
.dots{position:absolute;left:14.1px;bottom:19.4px;display:flex;gap:5.3px;z-index:2}
.dots i{display:block;width:5.3px;height:5.3px;border-radius:2.6px;background:var(--cream-30);transition:width var(--dur) var(--ease),background var(--dur) var(--ease)}
.dots i.on{width:19.4px;background:var(--cream)}

#topbar{position:fixed;left:14.1px;right:14.1px;top:calc(var(--sat) + 8.8px);z-index:5;display:flex;justify-content:space-between;align-items:center;gap:7px;
  transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
body.scrolled #topbar{transform:translateY(-20px);opacity:0;pointer-events:none}
.venue{display:flex;align-items:center;gap:8.8px;height:44px;padding:0 14.1px 0 6.2px;border-radius:22px;max-width:270px;text-align:left}
.venue img{width:31.7px;height:31.7px;border-radius:50%;flex:none}
.venue b{display:block;font-size:12.5px;font-weight:500;white-space:nowrap}
.venue small{display:block;font-size:10.5px;color:var(--cream-70);white-space:nowrap;margin-top:1px}
.venue svg{width:12.3px;height:12.3px;color:var(--cream-50);flex:none}
#statusbacking{position:fixed;left:0;right:0;top:0;height:var(--sat);z-index:4;background:var(--deeper);opacity:0;transition:opacity var(--dur) var(--ease);pointer-events:none}
body.scrolled #statusbacking{opacity:1}

.chips-wrap{position:sticky;top:var(--sat);z-index:3;padding:7px 0 15.8px;
  background:linear-gradient(180deg,var(--deeper) 0%,rgba(128,48,26,.8) 60%,rgba(128,48,26,0) 100%);
  -webkit-backdrop-filter:blur(15.8px);backdrop-filter:blur(15.8px);
  -webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.chips{display:flex;gap:7px;padding:1.8px 14.1px}
.chip{flex:none;height:29.9px;padding:0 11.4px;border-radius:15px;font-size:12px;font-weight:500;color:var(--cream);transition:background var(--dur) var(--ease),color var(--dur) var(--ease),transform .25s var(--ease)}
.chip:active{transform:scale(.96)}
.chip.on{background:var(--cream);color:var(--deep);border-color:transparent;box-shadow:0 5.3px 15.8px rgba(0,0,0,.25)}

.feed{padding:3.5px 0 150px}
.sec{padding:19.4px 14.1px 0}
.sec h3{font-size:17px;margin:0 0 12.3px}
.sec h4{font-size:12.5px;font-weight:500;color:var(--sage-hi);margin:17.6px 0 10.6px;letter-spacing:.01em}
.sec h4:first-of-type{margin-top:0}
.grp{scroll-margin-top:calc(var(--sat) + 61.6px)}

.pop{display:flex;gap:10.6px;padding:0 14.1px 3.5px;margin:0 -16px}
.pcard{position:relative;flex:none;width:196px;aspect-ratio:3/4;border-radius:var(--r-lg);overflow:hidden;background:var(--deep);isolation:isolate;text-align:left}
.pcard video,.pcard .ph{position:absolute;inset:0;width:100%;height:100%}
.pcard .strip{position:absolute;left:7px;right:7px;bottom:7px;display:flex;align-items:center;gap:7px;padding:7px 7px 7px 10.6px;border-radius:17.6px}
.pcard .strip .t{flex:1;min-width:0}
.pcard .strip b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12.5px;font-weight:500;line-height:1.2}
.pcard .strip .t span{display:block;font-size:11px;color:var(--cream-70);margin-top:1px}
.plus{width:31.7px;height:31.7px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--cream);color:var(--deep);box-shadow:0 3.5px 12.3px rgba(0,0,0,.3);transition:transform .25s var(--ease),background .25s var(--ease)}
.plus:active{transform:scale(.9)}
.plus svg{width:15.8px;height:15.8px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}

.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15.8px 10.6px}
.card{position:relative;text-align:left;display:block;width:100%}
.card .media{display:block;width:100%;position:relative;aspect-ratio:1;border-radius:19.4px;overflow:hidden;background:var(--deep);isolation:isolate}
.card .media video{position:absolute;inset:0}
.card .media .plus{position:absolute;right:7px;bottom:7px;width:29.9px;height:29.9px}
.card .media .plus.gl{background:rgba(140,54,30,.55);color:var(--cream);-webkit-backdrop-filter:blur(10.6px);backdrop-filter:blur(10.6px);border:1px solid var(--cream-14)}
.card .name{margin-top:8.8px;font-size:12.5px;font-weight:500;line-height:1.25;overflow-wrap:anywhere;hyphens:auto;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .vol{margin-top:1.8px;font-size:10.5px;color:var(--sage-hi)}
.card .price{margin-top:3.5px;font-size:12.5px;font-weight:500}
.card.off{opacity:.55}
.card.off .media::after{content:"";position:absolute;inset:0;background:rgba(128,48,26,.35)}
.card .badge{position:absolute;left:7px;right:7px;top:7px;z-index:2;padding:6.2px 8.8px;border-radius:12.3px;font-size:10.5px;line-height:1.25;color:var(--cream);text-align:center}

/* ---------- DOCK ---------- */
#dock{position:fixed;left:14.1px;right:14.1px;bottom:calc(var(--sab) + 12.3px);z-index:6;display:flex;gap:7px;align-items:center}
.dock-btn{width:51px;height:51px;border-radius:50%;display:grid;place-items:center;flex:none}
.dock-btn img{width:29.9px;height:29.9px;border-radius:50%}
.cartpill{flex:1;height:51px;border-radius:25.5px;display:flex;align-items:center;gap:8.8px;padding:0 8.8px 0 8.8px;transform-origin:left center;
  transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.cartpill.hide{opacity:0;transform:scaleX(.6);pointer-events:none}
.cartpill.bump{animation:bump .5s var(--ease)}
@keyframes bump{30%{transform:scale(1.04)}}
.thumbs{display:flex;flex:none}
.thumbs .th{width:29.9px;height:29.9px;border-radius:50%;overflow:hidden;border:1.8px solid #4a1d11;margin-left:-10px;background:var(--deep);box-shadow:0 1.8px 5.3px rgba(0,0,0,.3)}
.thumbs .th:first-child{margin-left:0}
.thumbs .th img{width:100%;height:100%;object-fit:cover}
.thumbs .th .ph span{font-size:10.7px;opacity:.6}
.cartpill .t{flex:1;min-width:0;text-align:left;line-height:1.2}
.cartpill .t b{display:block;font-size:13px;font-weight:500}
.cartpill .t small{display:block;font-size:10.5px;color:var(--cream-70)}
.cartpill .go{width:33.4px;height:33.4px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;flex:none;box-shadow:0 3.5px 12.3px rgba(168,69,42,.45)}
.cartpill .go svg{width:15.8px;height:15.8px;stroke:var(--on-accent);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- CARD ---------- */
#card{position:fixed;inset:0;z-index:10;background:var(--deeper);transform:translateY(100%);transition:transform .45s var(--ease);visibility:hidden}
#card.open{transform:none;visibility:visible}
#card .bg{position:absolute;inset:0;overflow:hidden}
#card .bg video,#card .bg .ph{position:absolute;inset:0;width:100%;height:100%}
#card .bg .ph span{font-size:180px;opacity:.12}
#card .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(128,48,26,.55) 0%,rgba(128,48,26,0) 20%,rgba(128,48,26,0) 42%,rgba(128,48,26,.78) 66%,rgba(128,48,26,.96) 100%)}
.chead{position:absolute;left:14.1px;right:14.1px;top:calc(var(--sat) + 8.8px);display:flex;align-items:center;gap:7px;z-index:2}
.chead .ttl{flex:1;min-width:0;text-align:center;font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 10.6px rgba(0,0,0,.45)}
.nutri{position:absolute;left:14.1px;right:14.1px;top:calc(var(--sat) + 58.1px);display:flex;gap:7px;z-index:2}
.nutri .stats{flex:1;display:flex;height:38.7px;border-radius:19.4px;padding:0 5.3px;align-items:center;justify-content:space-around}
.nutri .stats div{text-align:center;line-height:1.1}
.nutri .stats b{display:block;font-size:12px;font-weight:500}
.nutri .stats small{display:block;font-size:9.5px;color:var(--cream-70);margin-top:1.8px}
.nutri .more{height:38.7px;padding:0 12.3px;border-radius:22px;font-size:11px;font-weight:500;flex:none}
.cbottom{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 14.1px calc(var(--sab) + 12.3px);display:flex;flex-direction:column;gap:8.8px}
.opts{border-radius:var(--r-md);padding:8.8px;transform-origin:var(--ox,50%) 100%;opacity:0;transform:translateY(10.6px) scale(.94);transition:transform .35s var(--ease),opacity .3s var(--ease);pointer-events:none;height:0;overflow:hidden;margin-bottom:-10px}
.opts.on{opacity:1;transform:none;pointer-events:auto;height:auto;margin-bottom:0}
.opts .row{display:flex;gap:7px}
.opt{position:relative;flex:none;min-width:109.1px;height:73.9px;padding:8.8px 10.6px;border-radius:14.1px;background:var(--cream-08);border:1px solid var(--cream-14);text-align:left;display:flex;flex-direction:column;justify-content:space-between;transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease)}
.opt:active{transform:scale(.96)}
.opt b{display:block;font-size:12px;font-weight:500;line-height:1.2;padding-right:19.4px}
.opt span{display:block;font-size:11px;color:var(--cream-70)}
.opt .ck{position:absolute;right:7.9px;top:7.9px;width:17.6px;height:17.6px;border-radius:50%;border:1.5px solid var(--cream-30);display:grid;place-items:center}
.opt .ck svg{width:10.6px;height:10.6px;stroke:var(--deep);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.opt.on{background:var(--cream);color:var(--deep)}
.opt.on span{color:rgba(140,54,30,.6)}
.opt.on .ck{background:var(--deep);border-color:var(--deep)}
.opt.on .ck svg{opacity:1;stroke:var(--cream)}
.opt .step{display:flex;align-items:center;justify-content:space-between;margin:0 -4px -4px}
.opt .step button{width:24.6px;height:24.6px;border-radius:50%;background:rgba(140,54,30,.12);display:grid;place-items:center;font-size:13.8px;line-height:1;font-weight:500}
.opt .step em{font-style:normal;font-size:12px;font-weight:500}
.tiles{display:flex;gap:7px;width:100%}
.tile{flex:1 1 0 !important;min-width:0;padding:0 4px;height:60px;border-radius:var(--r-sm);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5.3px;font-size:10px;font-weight:500;flex:none;transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);position:relative}
.tile:active{transform:scale(.95)}
.tile svg{width:21.1px;height:21.1px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tile.on{background:var(--cream);color:var(--deep);border-color:transparent}
.tile .dot{position:absolute;right:7px;top:7px;width:7px;height:7px;border-radius:50%;background:var(--terra);box-shadow:0 0 0 1.8px rgba(140,54,30,.5)}
.tile.on .dot{box-shadow:0 0 0 1.8px var(--cream)}
.cbar{display:flex;gap:7px;padding:5.3px;border-radius:26.4px;align-items:center}
.seg{display:flex;gap:1.8px;padding:2.6px;border-radius:16.7px;background:rgba(0,0,0,.28);flex:none}
.seg button{min-width:45.8px;height:35.2px;padding:0 8.8px;border-radius:14.1px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;transition:background .25s var(--ease),color .25s var(--ease)}
.seg button b{font-size:12.5px;font-weight:500}
.seg button small{font-size:10px;color:var(--cream-70);margin-top:1.8px}
.seg button.on{background:var(--cream);color:var(--deep)}
.seg button.on small{color:rgba(140,54,30,.6)}
.seg .single{min-width:0;padding:0 12.3px;font-size:11.5px;color:var(--cream-70)}
.addbtn{flex:1;height:40.5px;border-radius:20.2px;background:var(--accent);color:var(--on-accent);font-size:14.5px;font-weight:500;display:flex;align-items:center;justify-content:center;gap:5.3px;box-shadow:0 7px 19.4px rgba(168,69,42,.4),inset 0 1px 0 rgba(255,255,255,.18);transition:transform .25s var(--ease),background .25s var(--ease)}
.addbtn:active{transform:scale(.97);background:#fff8ee}

/* ---------- SHEETS ---------- */
#scrim{position:fixed;inset:0;z-index:19;background:rgba(6,12,8,.55);opacity:0;transition:opacity var(--dur) var(--ease);pointer-events:none}
#scrim.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:20;border-radius:var(--r-xl) var(--r-xl) 0 0;background:rgba(140,54,30,.86);
  -webkit-backdrop-filter:blur(26.4px) saturate(160%);backdrop-filter:blur(26.4px) saturate(160%);
  border-top:1px solid var(--cream-14);box-shadow:inset 0 1px 0 var(--glass-hi),0 -12px 35.2px rgba(0,0,0,.35);
  transform:translateY(105%);transition:transform .45s var(--ease);visibility:hidden;display:flex;flex-direction:column;max-height:calc(100% - var(--sat) - 21.1px)}
.sheet.open{transform:none;visibility:visible}
.sheet.tall{height:calc(100% - var(--sat) - 21.1px)}
.sheet .grab{width:33.4px;height:4.4px;border-radius:2.6px;background:var(--cream-30);margin:8.8px auto 0;flex:none}
.shead{display:flex;align-items:center;gap:8.8px;padding:12.3px 14.1px 7px;flex:none}
.shead .t{flex:1;min-width:0}
.shead h3{font-size:16px;margin:0}
.shead .sub{font-size:11.5px;color:var(--cream-70);margin-top:2.6px}
.shead .x{width:31.7px;height:31.7px;border-radius:50%;background:var(--cream-08);border:1px solid var(--cream-14);display:grid;place-items:center;flex:none}
.shead .x svg{width:14.1px;height:14.1px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.sbody{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:3.5px 14.1px 21.1px}
.sfoot{flex:none;padding:10.6px 14.1px calc(var(--sab) + 12.3px);border-top:1px solid var(--cream-08);background:rgba(128,48,26,.4)}
.label{letter-spacing:.06em;font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--sage-hi);margin:19.4px 0 8.8px}

.eta{display:inline-flex;align-items:center;gap:7px;height:29.9px;padding:0 12.3px;border-radius:15px;background:var(--cream-08);border:1px solid var(--cream-14);font-size:11.5px;color:var(--cream);margin:5.3px 0 12.3px}
.eta i{width:7px;height:7px;border-radius:50%;background:var(--terra);box-shadow:0 0 8.8px var(--terra)}
.line{display:flex;gap:10.6px;align-items:center;padding:8.8px 0;border-bottom:1px solid var(--cream-08)}
.line .th{width:52.8px;height:52.8px;border-radius:14.1px;overflow:hidden;flex:none;background:var(--deep)}
.line .th img{width:100%;height:100%;object-fit:cover}
.line .th .ph span{font-size:19px}
.line .t{flex:1;min-width:0}
.line .t b{display:block;font-size:13px;font-weight:500}
.line .t span{display:block;font-size:11px;color:var(--sage-hi);margin-top:1.8px}
.line .t .m{color:var(--cream-50)}
.line .r{display:flex;flex-direction:column;align-items:flex-end;gap:5.3px;flex:none}
.line .r b{font-size:13px;font-weight:500}
.stepper{display:flex;align-items:center;height:29.9px;border-radius:15px;background:var(--cream-08);border:1px solid var(--cream-14)}
.stepper button{width:29.9px;height:29.9px;display:grid;place-items:center;font-size:13.8px;line-height:1}
.stepper button svg{width:12.3px;height:12.3px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}
.stepper em{font-style:normal;min-width:15.8px;text-align:center;font-size:12px;font-weight:500}
.nrow{display:flex;gap:7px;margin-top:12.3px}
.nrow div{flex:1;text-align:center;padding:8.8px 3.5px;border-radius:12.3px;background:var(--cream-08);border:1px solid var(--cream-08);line-height:1.1}
.nrow b{display:block;font-size:12.5px;font-weight:500}
.nrow small{display:block;font-size:9.5px;color:var(--cream-70);margin-top:2.6px}
.upsell{display:flex;gap:8.8px;margin:0 -16px;padding:0 14.1px 3.5px}
.up{flex:none;width:110.9px;text-align:left}
.up .m{position:relative;aspect-ratio:1;border-radius:15.8px;overflow:hidden;background:var(--deep)}
.up .m img{width:100%;height:100%;object-fit:cover}
.up .m .plus{position:absolute;right:5.3px;bottom:5.3px;width:26.4px;height:26.4px}
.up .m .plus svg{width:13.2px;height:13.2px}
.up > b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:11.5px;font-weight:500;margin-top:7px;line-height:1.2;min-height:2.4em}
.up > span{display:block;font-size:11px;color:var(--cream-70);margin-top:1px}
.seg2{display:flex;gap:1.8px;padding:2.6px;border-radius:16.7px;background:rgba(0,0,0,.28);border:1px solid var(--cream-08)}
.seg2 button{flex:1;height:31.7px;border-radius:14.1px;font-size:12px;font-weight:500;transition:background .25s var(--ease),color .25s var(--ease)}
.seg2 button.on{background:var(--cream);color:var(--deep)}
.numfield{display:flex;align-items:center;gap:8.8px;margin-top:8.8px;height:44px;border-radius:14.1px;background:var(--cream-08);border:1px solid var(--cream-14);padding:0 5.3px 0 14.1px}
.numfield label{font-size:12px;color:var(--cream-70);flex:1}
.numfield input{width:84.5px;height:33.4px;border-radius:10.6px;background:rgba(0,0,0,.28);border:0;text-align:center;font-size:13px;font-weight:500;color:var(--cream);padding:0}
.numfield input:focus-visible{outline:1.8px solid var(--cream)}
.pay{display:flex;gap:7px}
.pay button{flex:1;height:49.3px;border-radius:15.8px;background:var(--cream-08);border:1px solid var(--cream-14);display:flex;align-items:center;justify-content:center;gap:7px;font-size:12px;font-weight:500;transition:background .25s var(--ease),color .25s var(--ease)}
.pay button svg{width:17.6px;height:17.6px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pay button.on{background:var(--cream);color:var(--deep);border-color:transparent}
.total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8.8px}
.total span{font-size:12px;color:var(--cream-70)}
.total b{font-size:17px;font-weight:500}
.paybtn{width:100%;height:49.3px;border-radius:24.6px;background:var(--cream);color:var(--deep);font-size:14.5px;font-weight:500;display:flex;align-items:center;justify-content:center;gap:7px;box-shadow:0 8.8px 22.9px rgba(0,0,0,.35);transition:transform .25s var(--ease)}
.paybtn:active{transform:scale(.97)}
.paybtn svg{width:17.6px;height:17.6px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.empty{padding:31.7px 0;text-align:center;color:var(--cream-70);font-size:12px}
.empty .paybtn{display:block;margin:16px auto 0;max-width:220px}
.ghost{width:100%;height:44px;border-radius:22px;font-size:13px;font-weight:500;margin-top:14.1px}

/* details */
.dtext{font-size:11.5px;color:var(--cream-70);line-height:1.45}
.taglist{display:flex;flex-wrap:wrap;gap:7px}
.taglist span{height:28.2px;padding:0 10.6px;border-radius:14.1px;background:var(--cream-08);border:1px solid var(--cream-14);font-size:11px;display:inline-flex;align-items:center}

/* profile */
.prof{display:flex;align-items:center;gap:12.3px;padding:5.3px 0 3.5px}
.prof .av{width:49.3px;height:49.3px;border-radius:50%;background:var(--green);display:grid;place-items:center;font-family:var(--druk);font-weight:700;font-size:15.3px;color:var(--cream)}
.prof b{display:block;font-size:15px;font-weight:500}
.prof span{display:block;font-size:11px;color:var(--cream-70);margin-top:1.8px}
.promo{display:flex;gap:8.8px}
.promo div{flex:1;padding:14.1px 12.3px;border-radius:var(--r-md);min-height:110.9px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.promo div::before{content:"";position:absolute;right:-30px;top:-30px;width:88px;height:88px;border-radius:50%;background:radial-gradient(circle,rgba(168,69,42,.45),transparent 70%)}
.promo div:nth-child(2)::before{background:radial-gradient(circle,rgba(125,132,113,.5),transparent 70%)}
.promo b{font-family:var(--druk);font-weight:700;text-transform:uppercase;font-size:11px;line-height:1.3;position:relative}
.promo span{font-size:11px;color:var(--cream-70);position:relative}

/* ---------- STATUS ---------- */

#status.open{visibility:visible;opacity:1}



#status > *{position:relative;z-index:1}
#status .top{font-size:11px;color:var(--cream-70);text-align:center}








#status h1{font-size:26px;text-align:center}
#status .ord{font-size:12px;color:var(--cream-70);margin-top:7px;text-align:center}









@keyframes glow{50%{box-shadow:0 0 0 6.2px rgba(247,239,227,.14),0 0 22.9px rgba(247,239,227,.5)}}
#status .spacer{flex:1}
#status .ghost{max-width:340px}
#statusPush{margin-bottom:10px}

/* fly */
.fly{position:fixed;z-index:40;width:38.7px;height:38.7px;border-radius:50%;overflow:hidden;box-shadow:0 7px 21.1px rgba(0,0,0,.4);pointer-events:none;transition:transform .55s cubic-bezier(.3,.7,.3,1),opacity .55s var(--ease)}
.fly img{width:100%;height:100%;object-fit:cover}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}
[hidden]{display:none!important}
/* ---------- рабочее приложение: вход, комментарий, история, уведомления ---------- */
[data-tone="kitchen"]{--ph-a:#a9583a;--ph-b:#6f2c19}
.note{width:100%;min-height:52px;resize:none;border-radius:14.1px;background:var(--cream-08);border:1px solid var(--cream-14);padding:10.6px 12.3px;font:inherit;font-size:12.5px;color:var(--cream);line-height:1.4}
.note::placeholder{color:var(--cream-50)}
.note:focus-visible{outline:1.8px solid var(--cream)}
.numfield.wide{margin:12.3px 0}
.numfield.wide input{width:62%;text-align:left;padding:0 12.3px;font-size:14px;letter-spacing:.02em}
#lgCode{letter-spacing:.4em;text-align:center}
.err{font-size:12px;color:#ffd9c9;background:rgba(0,0,0,.22);border-radius:12.3px;padding:8.8px 12.3px;margin:0 0 12.3px}
.fine{font-size:10.5px;color:var(--cream-50);line-height:1.45;margin-top:12.3px}
.fine b{color:var(--cream);font-size:13px;letter-spacing:.15em}
.link{color:var(--cream);text-decoration:underline;text-underline-offset:2px;font-size:inherit;padding:0}
.hist{display:flex;flex-direction:column}
.hrow{display:flex;gap:10.6px;align-items:flex-start;text-align:left;padding:10.6px 0;border-bottom:1px solid var(--cream-08);width:100%}
.hrow .t{flex:1;min-width:0}
.hrow .t b{display:block;font-size:12.5px;font-weight:500}
.hrow .t span{display:block;font-size:11px;color:var(--cream-70);margin-top:2.6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hrow .t small{display:block;font-size:10.5px;color:var(--sage-hi);margin-top:2.6px}
.hrow .t small em{font-style:normal;color:var(--cream)}
.hrow .r{display:flex;flex-direction:column;align-items:flex-end;gap:5.3px;flex:none}
.hrow .r b{font-size:12.5px;font-weight:500}
.hrow .again{font-size:10.5px;padding:4.4px 10.6px;border-radius:12px;background:var(--cream);color:var(--deep);font-weight:500}
.toast{position:fixed;left:50%;bottom:calc(var(--sab) + 92px);transform:translate(-50%,12px);max-width:calc(100% - 32px);padding:10.6px 15.8px;border-radius:18px;font-size:12px;color:var(--cream);opacity:0;pointer-events:none;z-index:200;transition:opacity .25s var(--ease),transform .25s var(--ease);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
#loginBody .paybtn,#profileBody .paybtn{margin-top:14.1px}
#loginBody .err+.paybtn{margin-top:0}
img.still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* кадр под роликом и плавное проявление ролика (18.10) */
img.vpost{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
video[data-src]{opacity:0;transition:opacity .45s ease}
video[data-src].on{opacity:1}

/* ---------- подсветка, как панель-арка в зале ---------- */
:root{--led:#ff9a2e;--led-hot:#ffc56b;--led-far:rgba(255,110,24,.55)}
/* стена: терракотовая штукатурка — шум поверх цвета, к краям темнее */
.wall{position:absolute;inset:0;z-index:0;background:
  radial-gradient(120% 80% at 50% 36%,rgba(0,0,0,0) 40%,rgba(40,10,4,.45) 100%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"),
  linear-gradient(180deg,#9a3d24,#a8452a 45%,#8f361f);background-blend-mode:normal,soft-light,normal}
.arch{position:relative;height:min(46vh,390px);aspect-ratio:70.87/107.93;isolation:isolate}
.arch img{position:absolute;inset:0;width:100%;height:100%}
.arch .halo{filter:blur(22px);opacity:.9}
.arch .panel{filter:drop-shadow(0 0 2px var(--led-hot)) drop-shadow(0 0 10px var(--led)) drop-shadow(0 0 34px var(--led-far))}
.arch::after{content:"";position:absolute;z-index:-1;left:-18%;right:-18%;bottom:-14%;height:18%;background:radial-gradient(50% 50% at 50% 50%,rgba(255,140,40,.45),rgba(255,120,30,0));filter:blur(8px)}
/* заказ передаём бару — свет вполсилы и медленно; готовим — «дышит»; готово — горит ровно в полную силу */
.arch[data-state=wait] .halo{animation:breathe 3.2s ease-in-out infinite;opacity:.45}
.arch[data-state=wait] .panel{filter:brightness(.8) drop-shadow(0 0 2px var(--led-hot)) drop-shadow(0 0 8px var(--led))}
.arch[data-state=cook] .halo{animation:breathe 2.4s ease-in-out infinite}
.arch[data-state=ready] .halo{opacity:1;filter:blur(26px)}
.arch[data-state=off] .halo{opacity:0}
.arch[data-state=off] .panel{filter:brightness(.55)}
@keyframes breathe{0%,100%{opacity:.5}50%{opacity:1}}

#status{position:fixed;inset:0;z-index:30;background:#9a3d24;visibility:hidden;opacity:0;transition:opacity .45s var(--ease);display:flex;flex-direction:column;align-items:center;padding:calc(var(--sat) + 21.1px) 21.1px calc(var(--sab) + 17.6px);overflow:hidden}
#status.open{visibility:visible;opacity:1}
#status > :not(.wall){position:relative;z-index:1}
#status .top{font-size:11px;color:var(--cream-70);text-align:center}
#status .arch{margin:5vh 0 4.4vh}
#status h1{font-size:28px;text-align:center;text-shadow:0 0 18px rgba(255,150,50,.35)}
#status .when{margin-top:9px;font-size:13px;color:var(--cream-70);text-align:center}
#status .ord{font-size:11.5px;color:var(--cream-70);margin-top:16px;text-align:center}
.bars{display:flex;gap:8px;margin-top:20px}
.bars i{width:54px;height:4px;border-radius:2px;background:rgba(247,239,227,.22)}
.bars i.on{background:var(--led);box-shadow:0 0 10px var(--led),0 0 22px var(--led-far)}
.bars i.now{background:linear-gradient(90deg,var(--led) 0 50%,rgba(247,239,227,.22) 50%);background-size:200% 100%;animation:fill 1.8s ease-in-out infinite;box-shadow:0 0 10px rgba(255,150,40,.5)}
@keyframes fill{0%{background-position:100% 0}100%{background-position:0 0}}
#status .spacer{flex:1}
#status .ghost{max-width:340px}
@media (prefers-reduced-motion:reduce){.arch .halo,.bars i.now{animation:none!important}}

/* акценты меню тем же светом, что панель в зале — только выбранное и главное */
.chip.on{box-shadow:0 0 0 1px rgba(255,190,110,.9),0 0 12px rgba(255,150,40,.7),0 0 28px rgba(255,110,24,.4)}
.sec > h3{display:flex;align-items:center;gap:9px}
.sec > h3::before{content:"";flex:none;width:19px;height:19px;border-radius:50%;
  background:radial-gradient(circle,var(--led-hot) 0 28%,transparent 30%),repeating-conic-gradient(var(--led) 0 6deg,transparent 6deg 20deg);
  -webkit-mask:radial-gradient(circle,#000 0 50%,transparent 51%);mask:radial-gradient(circle,#000 0 50%,transparent 51%);filter:drop-shadow(0 0 4px var(--led))}
.cartpill{border:1px solid rgba(255,200,130,.5);box-shadow:0 0 14px rgba(255,150,40,.5),0 10px 34px rgba(255,110,24,.4),inset 0 0 12px rgba(255,160,60,.16)}

/* заставка */
#splash{display:none;position:fixed;inset:0;z-index:60;flex-direction:column;align-items:center;justify-content:center;gap:5vh;transition:opacity .45s var(--ease)}
html.first #splash{display:flex}
#splash > :not(.wall){position:relative;z-index:1}
#splash .arch{height:min(44vh,360px)}
#splash .halo{opacity:0;transition:opacity .8s ease}
#splash .panel{filter:brightness(.55) drop-shadow(0 0 0 rgba(255,197,107,0)) drop-shadow(0 0 0 rgba(255,154,46,0)) drop-shadow(0 0 0 rgba(255,110,24,0));transition:filter .8s ease}
#splash.on .halo{opacity:.95}
#splash.on .panel{filter:brightness(1) drop-shadow(0 0 2px var(--led-hot)) drop-shadow(0 0 10px var(--led)) drop-shadow(0 0 34px var(--led-far))}
/* ролик с идущей сборщицей лежит ровно поверх панели, обрезан по форме арки; свечение остаётся от панели под ним */
#splash .walk{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;opacity:0;filter:brightness(.55);
  -webkit-mask:url(/app/arch-panel.svg) center/100% 100% no-repeat;mask:url(/app/arch-panel.svg) center/100% 100% no-repeat;
  transition:opacity .35s ease,filter .8s ease}
#splash.on .walk{filter:brightness(1)}
#splash .walk.go{opacity:1}
#splash .brand{text-align:center}
#splash .brand b{display:block;font-size:22px;text-transform:uppercase}
#splash .brand span{display:block;margin-top:9px;font-size:12px;color:var(--cream-70)}
#splash.out{opacity:0;pointer-events:none}
/* в приложении заставка сразу горит и совпадает с картинкой, которую телефон показал при запуске:
   все размеры — от высоты экрана (как у картинки 440×956), поэтому на любом iPhone без скачка */
html.app #splash{gap:5vh}
html.app #splash .arch{height:38vh}
html.app #splash .halo{opacity:.95;transition:none;filter:blur(2.3vh)}
html.app #splash .panel,html.app #splash.on .panel{transition:none;filter:brightness(1) drop-shadow(0 0 .21vh var(--led-hot)) drop-shadow(0 0 1.05vh var(--led)) drop-shadow(0 0 3.56vh var(--led-far))}
html.app #splash .walk{filter:brightness(1);transition:opacity .35s ease}
html.app #splash .brand b{font-size:2.3vh}
html.app #splash .brand span{font-size:1.26vh;margin-top:.94vh}
/* в приложении долгое нажатие не вызывает меню «сохранить картинку» */
html.app img,html.app a{-webkit-touch-callout:none}

/* ---------- карта гостя: ниша из янтарного стекла, белая лента по арке, зеркало в латуни ---------- */
:root{--neon:#fff7ea}
.niche{position:relative;width:220px;height:272px;margin:20px auto 8px;border-radius:110px 110px 18px 18px;overflow:hidden;isolation:isolate;background:#c8741e;
  box-shadow:0 0 0 1.5px var(--neon),0 0 5px #fff,0 0 14px rgba(255,236,200,.7),0 0 32px rgba(255,210,150,.3),inset 0 0 26px rgba(255,236,200,.4)}
.niche .glass-a{position:absolute;inset:0;border-radius:inherit;background:#c8741e center/cover;filter:brightness(1.42) saturate(.88) hue-rotate(17deg) contrast(1.1)}
.niche .glass-b{position:absolute;inset:0;border-radius:inherit;background:#e9a83a;mix-blend-mode:soft-light}
.niche::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1;pointer-events:none;background:
  radial-gradient(90% 70% at 18% 12%,rgba(255,236,180,.55),rgba(255,210,120,0) 60%),
  radial-gradient(80% 60% at 88% 96%,rgba(70,20,5,.45),rgba(70,20,5,0) 65%),
  linear-gradient(180deg,rgba(255,200,110,.1),rgba(0,0,0,0) 40%,rgba(40,10,0,.22))}
.mirror{position:absolute;z-index:2;left:50%;top:34px;transform:translateX(-50%);width:148px;height:148px}
.mirror svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mirror .face{position:absolute;inset:20px;border-radius:50%;background:radial-gradient(circle at 38% 30%,#b8543a,#8a3520 62%,#6e2814);
  box-shadow:inset 0 -10px 24px rgba(0,0,0,.35),inset 0 4px 10px rgba(255,200,140,.18),0 6px 18px rgba(60,20,0,.45);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.mirror .face b{font:700 36px/1 var(--druk);letter-spacing:-.02em}
.mirror .face b.ini{font-size:30px}
.mirror .face small{display:block;font-size:10px;color:var(--cream-70);margin-top:5px;line-height:1.25}
.seg-on{stroke:url(#brassGrad);filter:drop-shadow(0 0 3px rgba(255,190,90,.9)) drop-shadow(0 0 8px rgba(255,150,40,.5))}
.seg-off{stroke:#4b2a12;stroke-opacity:.9}
.seg-next{stroke:var(--led);filter:drop-shadow(0 0 3px var(--led)) drop-shadow(0 0 7px rgba(255,150,40,.6));animation:breathe 1.8s ease-in-out infinite}
.niche .tag{position:absolute;z-index:2;left:10px;right:10px;bottom:20px;text-align:center}
.niche .tag b{display:block;font:700 10px/1.2 var(--druk);letter-spacing:.06em;text-transform:uppercase;color:#fff6e0;text-shadow:0 1px 8px rgba(80,30,0,.85),0 0 2px rgba(80,30,0,.9)}
.niche .tag span{display:block;margin-top:6px;font-size:11px;line-height:1.3;color:#fff3dc;text-shadow:0 1px 8px rgba(80,30,0,.9),0 0 2px rgba(80,30,0,.9)}
.pcenter{text-align:center;margin:14px 0 4px}

/* ---------- куда принести: три арочных окна; выбранное горит кремом с белой лентой ---------- */
.arches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:4px}
.win{height:156px;border-radius:52px 52px 16px 16px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:0;padding:0 6px 16px;text-align:center;color:var(--cream);
  background:linear-gradient(180deg,rgba(247,239,227,.1),rgba(247,239,227,0) 45%,rgba(0,0,0,.12)),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,rgba(0,0,0,0) 1px 4px),rgba(0,0,0,.26);
  border:1px solid var(--cream-14);box-shadow:inset 0 1px 0 rgba(247,239,227,.1);transition:background .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease)}
.win .wi{width:40px;height:40px;margin-bottom:auto;margin-top:38px;stroke:currentColor;fill:none;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.win b{display:block;font-size:12.5px;font-weight:500;line-height:1.2}
.win small{display:block;font-size:10.5px;color:var(--cream-70);margin-top:4px;line-height:1.2}
.win.on{background:radial-gradient(90% 60% at 50% 0%,#fffaf0,var(--cream) 70%);color:var(--deep);border-color:transparent;
  box-shadow:0 0 0 1.5px var(--neon),0 0 5px #fff,0 0 14px rgba(255,236,200,.75),0 0 30px rgba(255,210,150,.35)}
.win.on .wi{opacity:1}
.win.on small{color:rgba(140,54,30,.7)}
.vhint{font-size:10.5px;color:var(--cream-50);margin-top:10px;line-height:1.45}
#venue .numfield{margin-top:14px}

/* ---------- корзина: одна строка про штамп ---------- */
.stamp{display:flex;align-items:center;gap:12px;padding:11px 12px;margin-top:12px;border-radius:18px;background:var(--cream-08);border:1px solid var(--cream-14)}
.stamp .ring{width:44px;height:44px;position:relative;flex:none}
.stamp .ring svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.stamp .ring i{position:absolute;inset:0;display:grid;place-items:center;font:700 12px var(--druk);font-style:normal}
.stamp .t{flex:1;min-width:0}
.stamp .t b{display:block;font-size:12.5px;font-weight:500}
.stamp .t span{display:block;font-size:11px;color:var(--cream-70);margin-top:3px;line-height:1.3}
@media (prefers-reduced-motion:reduce){.seg-next{animation:none}}

/* =====================================================================
   Легче и воздушнее, в духе iOS: «жидкое стекло», системный шрифт для интерфейса.
   Druk Wide — только заголовки; кнопки, подписи и цены — SF Pro / Roboto телефона (ничего не грузим).
   ===================================================================== */
:root{
  --text:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Roboto,"Segoe UI",system-ui,sans-serif;
  --druk:"Druk Wide Cyr",-apple-system,system-ui,sans-serif;
  --glass:rgba(150,58,33,.26);
  --glass-hi:rgba(255,246,236,.36);
  --glass-edge:rgba(255,240,228,.24);
  --glass-shadow:0 10px 30px rgba(40,12,4,.18);
  --fill:rgba(255,245,235,.10);            /* поля и неактивные кнопки внутри шторок */
  --hair:rgba(255,240,228,.12);            /* тонкие разделители */
}
body{font-size:15px;letter-spacing:-.01em}
b,strong{font-weight:600}

/* стекло: прозрачнее, с бликом сверху и мягкой тенью */
.glass{background-color:var(--glass);background-image:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 45%,rgba(255,255,255,0));
  -webkit-backdrop-filter:blur(24px) saturate(185%);backdrop-filter:blur(24px) saturate(185%);
  border:.5px solid var(--glass-edge);box-shadow:inset 0 1px 0 var(--glass-hi),inset 0 -1px 0 rgba(255,255,255,.05),var(--glass-shadow)}

/* верх и главная */
.venue{height:46px;padding:0 16px 0 6px;border-radius:23px}
.venue b{font-size:14px;font-weight:600}
.venue small{font-size:12px}
.slide .cap p{font-size:14px}
.slide .cap .go{height:34px;padding:0 14px 0 16px;border-radius:17px;font-size:13.5px;font-weight:600}
.chips{gap:8px;padding:2px 16px}
.chip{height:34px;padding:0 15px;border-radius:17px;font-size:14px;font-weight:500}
.chip.on{font-weight:600}
.sec{padding:26px 16px 0}
.sec h3{font-size:18px;margin-bottom:14px}
.sec h4{font-size:13px;font-weight:600;letter-spacing:0;margin:20px 0 12px}
.pop{gap:12px;padding:0 16px 4px;margin:0 -16px}
.pcard .strip{left:8px;right:8px;bottom:8px;padding:8px 8px 8px 12px;border-radius:18px}
.pcard .strip b{font-size:14px;font-weight:600}
.pcard .strip .t span{font-size:12.5px}
.grid{gap:22px 12px}
.card .media{border-radius:22px}
.card .name{margin-top:10px;font-size:14px;font-weight:500;line-height:1.25}
.card .vol{margin-top:2px;font-size:12px}
.card .price{margin-top:4px;font-size:14px;font-weight:600}
.card .badge{font-size:12px}

/* нижняя панель */
.cartpill .t b{font-size:15px;font-weight:600}
.cartpill .t small{font-size:12px}

/* карточка напитка/блюда */
.chead .ttl{font-size:17px;font-weight:600}
.nutri .more{font-size:13px;font-weight:600}
.nutri .stats b{font-size:13.5px}.nutri .stats small{font-size:11px}
.opt{border-radius:16px;background:var(--fill);border:.5px solid var(--glass-edge)}
.opt b{font-size:13.5px;font-weight:600}
.opt span{font-size:12.5px}
.tile{font-size:11.5px;font-weight:600;border-radius:18px}
.seg button b{font-size:13.5px;font-weight:600}
.seg button small{font-size:11px}
.seg .single{font-size:13px}
.addbtn{height:44px;border-radius:22px;font-size:16px;font-weight:600;letter-spacing:-.01em;box-shadow:0 8px 22px rgba(40,12,4,.22),inset 0 1px 0 rgba(255,255,255,.6)}

/* шторки: стекло, сквозь которое видно меню; больше воздуха */
#scrim{background:rgba(20,8,4,.32)}
.sheet{border-radius:34px 34px 0 0;background:rgba(140,54,30,.72);
  -webkit-backdrop-filter:blur(24px) saturate(190%);backdrop-filter:blur(24px) saturate(190%);
  border-top:.5px solid var(--glass-edge);box-shadow:inset 0 1px 0 var(--glass-hi),0 -10px 40px rgba(40,12,4,.25)}
.sheet .grab{width:36px;height:5px;border-radius:3px;background:rgba(255,245,235,.35);margin-top:8px}
.shead{padding:16px 20px 10px}
.shead h3{font-size:17px}
.shead .sub{font-size:13px;margin-top:4px}
.shead .x{width:34px;height:34px;background:var(--fill);border:.5px solid var(--glass-edge)}
.sbody{padding:4px 20px 26px}
.sfoot{padding:12px 20px calc(var(--sab) + 14px);border-top:.5px solid var(--hair);background:rgba(128,48,26,.25)}
.label{font-size:12px;font-weight:600;letter-spacing:.04em;margin:24px 0 10px}
.eta{height:32px;padding:0 14px;border-radius:16px;background:var(--fill);border:.5px solid var(--glass-edge);font-size:13px}
.line{gap:12px;padding:11px 0;border-bottom:.5px solid var(--hair)}
.line .th{width:56px;height:56px;border-radius:16px}
.line .t b{font-size:15px;font-weight:600}
.line .t span{font-size:12.5px}
.line .r b{font-size:15px;font-weight:600}
.stepper{height:32px;border-radius:16px;background:var(--fill);border:.5px solid var(--glass-edge)}
.stepper button{width:32px;height:32px}
.stepper em{font-size:14px;font-weight:600}
.upsell{gap:10px;margin:0 -20px;padding:0 20px 4px}
.up{width:112px}
.up .m{border-radius:18px}
.up > b{font-size:13px;font-weight:600;margin-top:8px}
.up > span{font-size:12.5px}
.seg2{border-radius:18px;background:rgba(0,0,0,.18);border:.5px solid var(--hair)}
.seg2 button{height:36px;border-radius:15px;font-size:14px;font-weight:600}
/* «Заберу сам» длиннее соседей (18.10): в корзине ширина по надписи, без переноса; на самых узких экранах перенос разрешён */
#cartSeg button{flex:1 1 auto;padding:0 6px}
@media (min-width:360px){ #cartSeg button{white-space:nowrap} }
.numfield{height:50px;border-radius:16px;background:var(--fill);border:.5px solid var(--glass-edge);padding:0 6px 0 16px}
.numfield label{font-size:14px}
/* 16px в полях: иначе iPhone увеличивает страницу при вводе */
.numfield input,.note,input,textarea{font-size:16px}
.numfield input{width:92px;height:38px;border-radius:12px;background:rgba(0,0,0,.2);font-weight:600}
.note{border-radius:16px;background:var(--fill);border:.5px solid var(--glass-edge);padding:12px 14px}
.pay{gap:8px}
.pay button{height:50px;border-radius:16px;background:var(--fill);border:.5px solid var(--glass-edge);font-size:14px;font-weight:600}
.total span{font-size:14px}
.total b{font-size:20px;font-weight:700}
.paybtn{height:52px;border-radius:26px;font-size:16px;font-weight:600;letter-spacing:-.01em;box-shadow:0 8px 24px rgba(40,12,4,.24),inset 0 1px 0 rgba(255,255,255,.6)}
.ghost{height:48px;border-radius:24px;font-size:15px;font-weight:600}
.empty{font-size:14px}
.dtext{font-size:14px;line-height:1.5}
.taglist span{font-size:13px;height:32px;border-radius:16px;background:var(--fill);border:.5px solid var(--glass-edge)}

/* профиль, вход, история */
.prof b{font-size:17px;font-weight:600}
.prof span{font-size:13px}
.hrow{border-bottom:.5px solid var(--hair);padding:12px 0}
.hrow .t b{font-size:14.5px;font-weight:600}
.hrow .t span{font-size:13px}
.hrow .t small{font-size:12px}
.hrow .r b{font-size:14.5px;font-weight:600}
.hrow .again{font-size:12px;font-weight:600;padding:6px 12px;border-radius:14px}
.err{font-size:13.5px}
.fine{font-size:12px}
.link{font-size:inherit}
.toast{font-size:14px}

/* куда принести, штамп, статус */
.win b{font-size:14px;font-weight:600}
.win small{font-size:12px}
.vhint{font-size:12.5px}
.stamp .t b{font-size:14px;font-weight:600}
.stamp .t span{font-size:12.5px}
#status .top{font-size:12.5px}
#status .when{font-size:15px}
#status .ord{font-size:13px}
.niche .tag span{font-size:12.5px}
.mirror .face small{font-size:11px}
.eta i{background:var(--led);box-shadow:0 0 8px var(--led)}

/* системный шрифт на ступень жирнее: тонкий SF на терракоте выглядел бледно */
body{font-weight:500}
b,strong{font-weight:700}
.venue b,.chip.on,.card .price,.pcard .strip b,.cartpill .t b,.line .t b,.line .r b,.up > b,.hrow .t b,.hrow .r b,
.win b,.stamp .t b,.prof b,.opt b,.seg button b,.stepper em,.numfield input{font-weight:700}
.chip,.card .name,.sec h4,.tile,.label,.nutri .more,.hrow .again,.seg2 button,.pay button,.ghost,.slide .cap .go{font-weight:600}
.chead .ttl{font-weight:700}
.paybtn,.addbtn{font-weight:700;letter-spacing:-.015em}
.total b{font-weight:800}
.venue small,.cartpill .t small,.card .vol,.line .t span,.up > span,.hrow .t span,.hrow .t small,.win small,.stamp .t span,
.shead .sub,.dtext,.vhint,.fine,.opt span,.seg button small,#status .when,#status .ord,.slide .cap p{font-weight:500}

/* =====================================================================
   Druk Text Wide — пара к заголовкам Druk Wide.
   Одно начертание (Medium), без искусственного жирного: акцент — размером и цветом.
   Шкала под широкий шрифт: 10 / 11 / 12 / 13 / 14 px — текст помещается в кнопки и стоит по центру.
   ===================================================================== */
:root{
  --text:"Druk Text Wide Cyr",-apple-system,system-ui,sans-serif;
  --fs-xs:10px;   /* подписи капсом, служебное */
  --fs-s:11px;    /* второстепенное: объём, время, пояснения */
  --fs-m:12px;    /* основной текст интерфейса: названия, чипы, строки */
  --fs-l:13px;    /* цены и названия в корзине */
  --fs-btn:14px;  /* главные кнопки */
}
body{font-family:var(--text);font-size:var(--fs-m);font-weight:500;font-synthesis:none;letter-spacing:-.01em;line-height:1.3}
b,strong,.venue b,.chip,.chip.on,.card .name,.card .price,.pcard .strip b,.cartpill .t b,.line .t b,.line .r b,.up > b,.hrow .t b,.hrow .r b,
.win b,.stamp .t b,.prof b,.opt b,.seg button b,.stepper em,.numfield input,.chead .ttl,.paybtn,.addbtn,.total b,.tile,.label,.sec h4,
.nutri .more,.hrow .again,.seg2 button,.pay button,.ghost,.slide .cap .go{font-weight:500}
/* в кнопках строка ровно по высоте шрифта — текст стоит по геометрическому центру */
button,.chip,.paybtn,.addbtn,.ghost,.seg2 button,.pay button,.again,.go{line-height:1}

/* главная */
.venue b{font-size:var(--fs-m)}
.venue small{font-size:var(--fs-xs)}
.slide .cap p{font-size:var(--fs-m)}
.slide .cap .go{height:32px;padding:0 13px 0 15px;font-size:var(--fs-s)}
.chip{height:32px;padding:0 13px;font-size:var(--fs-s);letter-spacing:0}
.sec h4{font-size:var(--fs-s);letter-spacing:0}
.pcard .strip b{font-size:var(--fs-m);line-height:1.25}
.pcard .strip .t span{font-size:var(--fs-s)}
.card .name{font-size:var(--fs-m);line-height:1.3;margin-top:10px}
.card .vol{font-size:var(--fs-xs)}
.card .price{font-size:var(--fs-l)}
.card .badge{font-size:var(--fs-xs)}
.cartpill .t b{font-size:var(--fs-l)}
.cartpill .t small{font-size:var(--fs-xs)}

/* карточка напитка */
.chead .ttl{font-size:var(--fs-l)}
.nutri .more{font-size:var(--fs-s)}
.opt b{font-size:var(--fs-s);line-height:1.25}
.opt span{font-size:var(--fs-s)}
.tile{font-size:var(--fs-xs);letter-spacing:0}
.seg button b{font-size:var(--fs-m)}
.seg button small{font-size:var(--fs-xs)}
.seg .single{font-size:var(--fs-s)}
.addbtn{font-size:var(--fs-btn);letter-spacing:0}

/* шторки */
.shead .sub{font-size:var(--fs-s)}
.label{font-size:var(--fs-xs);letter-spacing:.05em}
.eta{font-size:var(--fs-s)}
.line .t b{font-size:var(--fs-m);line-height:1.3}
.line .t span{font-size:var(--fs-s)}
.line .r b{font-size:var(--fs-l)}
.stepper em{font-size:var(--fs-m)}
.up > b{font-size:var(--fs-s);line-height:1.25}
.up > span{font-size:var(--fs-s)}
.seg2 button{font-size:var(--fs-s)}
.numfield label{font-size:var(--fs-m)}
.pay button{font-size:var(--fs-s)}
.total span{font-size:var(--fs-s)}
.total b{font-size:17px}
.paybtn{font-size:var(--fs-btn);letter-spacing:0}
.ghost{font-size:var(--fs-m)}
.empty{font-size:var(--fs-m)}
.dtext{font-size:var(--fs-m);line-height:1.5}
.taglist span{font-size:var(--fs-s)}
.err{font-size:var(--fs-m)}
.fine{font-size:var(--fs-xs)}
.toast{font-size:var(--fs-m)}
/* поля ввода остаются 16px: иначе iPhone увеличивает страницу при вводе */
.numfield input,.note,input,textarea{font-size:16px}
.note::placeholder{font-size:13px}

/* профиль, история, выбор места, статус */
.prof b{font-size:var(--fs-l)}
.prof span{font-size:var(--fs-s)}
.hrow .t b{font-size:var(--fs-m)}
.hrow .t span{font-size:var(--fs-s)}
.hrow .t small{font-size:var(--fs-xs)}
.hrow .r b{font-size:var(--fs-m)}
.hrow .again{font-size:var(--fs-xs)}
.win b{font-size:var(--fs-s)}
.win small{font-size:var(--fs-xs)}
.vhint{font-size:var(--fs-s)}
.stamp .t b{font-size:var(--fs-m)}
.stamp .t span{font-size:var(--fs-s)}
#status .top{font-size:var(--fs-s)}
#status .when{font-size:var(--fs-m)}
#status .ord{font-size:var(--fs-s)}
.niche .tag span{font-size:var(--fs-s)}
.mirror .face small{font-size:var(--fs-xs)}
.tile{font-size:9.5px;padding:0 3px}

/* ===== Фото на RAL 7033 (решение Fable, 30.09) =====
   Все блюда и напитки сняты на серо-зелёной штукатурке: подложка до загрузки фото — в тон снимку,
   чтобы не было терракотовой вспышки и край плитки читался на терракотовой странице. */
.card .media,.pcard,.up .m,.line .th{background:var(--sage)}
#card .bg{background:var(--sage)}

/* ===== Стекло и скругления (решение Fable, 30.09) =====
   Три просьбы владельца:
   1. «Фон прозрачнее, добавить полупрозрачности» — шапка, полоса чипов, нижняя панель и шторки стали матовым
      стеклом с лёгким терракотовым тоном (размытие + насыщенность, блик по верхней кромке); терракота под ними
      получила мягкую глубину (свет сверху, тень к низу), чтобы стеклу было что преломлять.
   2. «Подробнее» — шторка над фото: тон легче, затемнение карточки на время шторки снимается, фото видно сквозь стекло.
   3. Подсветки при нажатии — по форме элемента: без серого прямоугольника, без выделения текста долгим тапом,
      фокус-обводка и нажатые состояния повторяют скругление.
   Размытие только на фиксированных слоях (шапка, чипы, панель корзины, шторки, карточка) — плитки меню не размывают. */
:root{
  --glass:rgba(150,58,33,.24);
  --glass-hi:rgba(255,246,236,.4);
  --glass-edge:rgba(255,240,228,.28);
  --glass-strong:rgba(150,58,33,.42);   /* стекло под мелким текстом: чипы, плитки опций, «подробнее» */
  --sheet-glass:rgba(140,54,30,.5);     /* шторки: было .72 */
  --sheet-glass-lite:rgba(140,54,30,.4);  /* шторка «подробнее» над фото */
}

/* 1. Фон страницы: не плоская терракота, а стена со светом сверху — виден сквозь стекло шапки и панели корзины */
#home{background:
  radial-gradient(110% 46% at 50% -6%,rgba(214,104,70,.6),rgba(214,104,70,0) 62%),
  radial-gradient(80% 36% at 8% 104%,rgba(255,150,40,.12),rgba(255,150,40,0) 60%),
  radial-gradient(120% 70% at 50% 40%,rgba(0,0,0,0) 45%,rgba(40,10,4,.22) 100%),
  linear-gradient(180deg,#9d3f25 0%,#96391f 48%,#8c3620 100%)}
#card{background:radial-gradient(110% 46% at 50% -6%,rgba(214,104,70,.5),rgba(214,104,70,0) 62%),linear-gradient(180deg,#9d3f25,#8c3620)}

/* стекло: блик тоньше, тон легче, размытие сильнее */
.glass{background-color:var(--glass);background-image:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.03) 46%,rgba(255,255,255,0));
  -webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);
  border:.5px solid var(--glass-edge);box-shadow:inset 0 1px 0 var(--glass-hi),inset 0 -1px 0 rgba(255,255,255,.05),var(--glass-shadow)}
/* мелкий текст на стекле — тон чуть плотнее, чтобы крем читался поверх фото */
.chip.glass,.tile.glass,.nutri .more,.nutri .stats,.pcard .strip,.card .badge{background-color:var(--glass-strong)}
.chip.on{background-color:var(--cream)}
.tile.on{background-color:var(--cream)}

/* полоса чипов: прозрачнее, размытие вместо заливки */
.chips-wrap{background:linear-gradient(180deg,rgba(150,58,33,.62) 0%,rgba(150,58,33,.36) 58%,rgba(150,58,33,0) 100%);
  -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%)}
#statusbacking{background:rgba(150,58,33,.55);-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%)}

/* панель корзины: тон легче, свечение остаётся */
.cartpill{background-color:rgba(150,58,33,.3)}

/* карточка блюда: затемнение снизу мягче, стекло панелей несёт контраст */
#card .bg::after{background:linear-gradient(180deg,rgba(128,48,26,.5) 0%,rgba(128,48,26,0) 18%,rgba(128,48,26,0) 46%,rgba(128,48,26,.58) 72%,rgba(128,48,26,.84) 100%);
  transition:opacity .45s var(--ease)}
.cbar.glass,.opts.glass{background-color:rgba(150,58,33,.36)}

/* шторки: полупрозрачное стекло, меню и фото просвечивают */
#scrim{background:rgba(20,8,4,.26)}
.sheet{background-color:var(--sheet-glass);background-image:linear-gradient(180deg,rgba(255,246,236,.12),rgba(255,246,236,.03) 110px,rgba(255,246,236,0) 260px);
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  border-top:.5px solid var(--glass-edge);box-shadow:inset 0 1px 0 var(--glass-hi),0 -10px 44px rgba(40,12,4,.28)}
.sfoot{background:rgba(128,48,26,.16)}
.sheet .grab{background:rgba(255,245,235,.45)}

/* 2. «Подробнее»: шторка легче, а затемнение фото под ней на время шторки убираем — снимок виден сквозь стекло */
#details{background-color:var(--sheet-glass-lite);
  -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%)}
body:has(#details.open) #card .bg::after{opacity:.35}
body:has(#details.open) #scrim{background:rgba(20,8,4,.14)}
body:has(#details.open) #card .cbottom{opacity:.55;transition:opacity .45s var(--ease)}
#card .cbottom{transition:opacity .45s var(--ease)}

/* без размытия (старые браузеры): плотные заливки того же тона */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background-color:rgba(150,58,33,.86)}
  .chip.on,.tile.on{background-color:var(--cream)}
  .chips-wrap{background:linear-gradient(180deg,#96391f 0%,rgba(150,57,31,.92) 58%,rgba(150,57,31,0) 100%)}
  .sheet,#details{background-color:rgba(140,54,30,.95)}
  #scrim{background:rgba(20,8,4,.45)}
}

/* 3. Подсветки по форме элемента */
*{-webkit-tap-highlight-color:transparent}
button,[role=button],.press,.chip,.tile,.opt,.win,.plus,.pcard,.card .media,.seg button,.seg2 button,.pay button,.stepper button,.hrow,.again,.shead .x,.dots{
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
/* фокус: обводка повторяет скругление (современные браузеры ведут outline по border-radius) */
:focus-visible{outline:2px solid var(--cream);outline-offset:2px}
.numfield input:focus-visible,.note:focus-visible,#lgCode:focus-visible{outline:none;box-shadow:0 0 0 1.5px var(--cream)}
/* элементы без скругления получают его — иначе фокус и нажатие рисуют прямоугольник */
.stepper button{border-radius:16px}
.opt .step button{border-radius:50%}
.hrow{border-radius:16px;padding-left:6px;padding-right:6px;margin:0 -6px;width:calc(100% + 12px)}
.link{border-radius:4px}
.dots{border-radius:6px}
/* нажатое состояние там, где его не было: круглая или капсульная подсветка, не прямоугольник */
.stepper button,.seg button,.seg2 button,.pay button,.shead .x,.opt .step button,.again,.link{transition:background-color .2s var(--ease),transform .2s var(--ease),color .25s var(--ease)}
.stepper button:active,.seg button:not(.on):active,.seg2 button:not(.on):active,.pay button:not(.on):active,.opt .step button:active{background-color:rgba(255,245,235,.16)}
.shead .x:active{background-color:rgba(255,245,235,.22);transform:scale(.94)}
.again:active{transform:scale(.95)}
.win{transition:background .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease)}
.win:active{transform:scale(.97)}
.hrow:active{background-color:rgba(255,245,235,.08)}
.card.off .media::after,.slide .scrim{border-radius:inherit}

/* ===== Спокойный фон и подписи (решение Fable, 30.09, вечер) =====
   Владелец: «слишком пестрит в глазах», «объёмы цветом RAL 7033 на терракоте — ужасно».
   Диагноз. Фото сняты на серо-зелёной штукатурке с резкими полосами тени от жалюзи — это единственная
   текстура, которая должна остаться. Всё остальное с ней спорило: страница была громкой оранжевой терракотой
   с горячим пятном сверху и янтарным свечением снизу; стекло насыщало цвет ещё сильнее (saturate 180%);
   зелёно-серые подписи на красно-оранжевом — дополнительные цвета, самый резкий контраст из возможных;
   плюс амбер-свечение на панели корзины, чипе и точках заголовков, обводки на каждой капсуле.
   Решение — одно: страница становится матовой, приглушённой терракотой (как тёплый свет за матовым стеклом),
   без пятен и свечений; фото — единственная фактура; весь мелкий текст — кремовый, как остальной интерфейс.
   Шрифты и размеры не трогаем. Размытие только там, где было. */
:root{
  --deep:#8e4530;                       /* было #a8452a: та же терракота, но матовая */
  --deeper:#853d29;                     /* было #96391f */
  --terra:#b0583d;
  --terra-hi:#c26a4c;
  --glass:rgba(134,60,40,.26);
  --glass-strong:rgba(134,60,40,.44);
  --glass-hi:rgba(255,246,236,.26);     /* блик тише: было .4 */
  --glass-edge:rgba(255,240,228,.18);   /* кромка тише: было .28 */
  --sheet-glass:rgba(126,56,38,.56);
  --sheet-glass-lite:rgba(126,56,38,.44);
  --sage-hi:var(--cream-70);            /* серо-зелёный текст на терракоте больше не используется */
}
html,body{background:var(--deeper)}

/* 1. Фон: ровная матовая стена, лишь чуть светлее к верху — без горячего пятна и янтарного свечения снизу */
#home{background:linear-gradient(180deg,#8c4431 0%,#853d29 44%,#7c3826 100%)}
#card{background:linear-gradient(180deg,#8c4431 0%,#7c3826 100%)}
.hero{background:var(--deep)}
.slide .scrim{background:linear-gradient(180deg,rgba(120,52,36,.42) 0%,rgba(120,52,36,0) 24%,rgba(120,52,36,0) 46%,rgba(120,52,36,.62) 76%,var(--deeper) 100%)}
#card .bg::after{background:linear-gradient(180deg,rgba(120,52,36,.5) 0%,rgba(120,52,36,0) 18%,rgba(120,52,36,0) 46%,rgba(120,52,36,.58) 72%,rgba(124,56,38,.86) 100%)}
.card.off .media::after{background:rgba(124,56,38,.4)}

/* 2. Стекло не разгоняет цвет: насыщенность 180% → 130%, блик и кромка тише */
.glass{background-color:var(--glass);background-image:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.02) 46%,rgba(255,255,255,0));
  -webkit-backdrop-filter:blur(28px) saturate(130%);backdrop-filter:blur(28px) saturate(130%);
  border:.5px solid var(--glass-edge);box-shadow:inset 0 1px 0 var(--glass-hi),0 8px 24px rgba(40,12,4,.14)}
.chip.glass,.tile.glass,.nutri .more,.nutri .stats,.pcard .strip,.card .badge{background-color:var(--glass-strong)}
.chip.on,.tile.on{background-color:var(--cream)}
.chips-wrap{background:linear-gradient(180deg,rgba(133,61,41,.7) 0%,rgba(133,61,41,.4) 58%,rgba(133,61,41,0) 100%);
  -webkit-backdrop-filter:blur(22px) saturate(130%);backdrop-filter:blur(22px) saturate(130%)}
#statusbacking{background:rgba(133,61,41,.6);-webkit-backdrop-filter:blur(22px) saturate(130%);backdrop-filter:blur(22px) saturate(130%)}
.sheet{background-color:var(--sheet-glass);background-image:linear-gradient(180deg,rgba(255,246,236,.08),rgba(255,246,236,.02) 110px,rgba(255,246,236,0) 260px);
  -webkit-backdrop-filter:blur(24px) saturate(130%);backdrop-filter:blur(24px) saturate(130%);
  border-top:.5px solid var(--glass-edge);box-shadow:inset 0 1px 0 var(--glass-hi),0 -10px 44px rgba(40,12,4,.28)}
#details{background-color:var(--sheet-glass-lite);-webkit-backdrop-filter:blur(22px) saturate(130%);backdrop-filter:blur(22px) saturate(130%)}
.sfoot{background:rgba(124,56,38,.2)}
.cbar.glass,.opts.glass{background-color:rgba(134,60,40,.4)}

/* 3. Меньше свечений и обводок: панель корзины и активный чип — мягкий тёплый свет вместо трёх слоёв амбера;
      точки у заголовков без ореола; «плюс» на фото — тёмный нейтральный диск, не терракотовый */
.cartpill{background-color:rgba(134,60,40,.34);border:.5px solid rgba(255,214,160,.34);
  box-shadow:0 0 10px rgba(255,150,40,.22),0 10px 28px rgba(40,12,4,.28),inset 0 1px 0 var(--glass-hi)}
.chip.on{box-shadow:0 0 0 1px rgba(255,190,110,.45),0 0 10px rgba(255,150,40,.3),0 4px 14px rgba(40,12,4,.18)}
.sec > h3::before{filter:none;opacity:.85}
.card .media .plus.gl{background:rgba(46,30,22,.42);border:.5px solid rgba(255,240,228,.16)}
.tile .dot{box-shadow:0 0 0 1.8px rgba(46,30,22,.4)}
.eta i{box-shadow:none}
.thumbs .th{border-color:#5a2a1c}

/* 4. Воздух в сетке: между рядами больше, чтобы плитки с полосатыми фото не сливались в одну текстуру */
.grid{gap:28px 14px}
.sec{padding-top:30px}
.sec h3{margin-bottom:16px}
.sec h4{margin:22px 0 12px}

/* 5. Подписи объёма, веса и подзаголовки — кремом с прозрачностью, как остальной второстепенный текст.
      Иерархия остаётся: название — крем, объём — крем 72%, цена — крем; подзаголовок группы — крем 72%. */
.card .vol,.sec h4,.label,.line .t span,.hrow .t small{color:var(--cream-70)}
.line .t .m{color:var(--cream-50)}

/* без размытия (старые браузеры): плотные заливки нового тона */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background-color:rgba(134,60,40,.88)}
  .chips-wrap{background:linear-gradient(180deg,#853d29 0%,rgba(133,61,41,.92) 58%,rgba(133,61,41,0) 100%)}
  .sheet,#details{background-color:rgba(126,56,38,.96)}
}

/* ===== Описание блюда сразу в карточке (30.09, ночь) =====
   Кнопки «подробнее» больше нет: описание стоит над выбором объёма, КБЖУ — плашкой сверху во всю ширину. */
.cdesc{margin:0 3px 2px;font-size:var(--fs-m);line-height:1.45;color:var(--cream);text-shadow:0 1px 10px rgba(60,22,12,.55);
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;text-wrap:pretty}
.nutri .stats{flex:1}

/* ===== Карточка: КБЖУ и вес сверху по центру, описание по центру, кнопка — прозрачное стекло (01.10) ===== */
.nutri{flex-direction:column;align-items:center;gap:6px}
.nutri .stats{flex:none;width:100%;max-width:330px}
.cweight{font-size:var(--fs-s);color:var(--cream-70);text-align:center;text-shadow:0 1px 8px rgba(60,22,12,.5)}
.cdesc{text-align:center;margin:0 10px 4px}
/* одна цельная капсула: объём и цена в одном прозрачном стекле */
.cbar.glass{background-color:rgba(255,246,236,.07);box-shadow:inset 0 0 0 1px rgba(247,239,227,.24),inset 0 1px 0 rgba(255,255,255,.14)}
.cbar .seg{background:transparent}
.cbar .seg:has(.single){display:none}
.addbtn{background:rgba(247,239,227,.1);color:var(--cream);box-shadow:none}
.addbtn:active{background:rgba(247,239,227,.2)}

/* ===== Карточка: крупнее название, КБЖУ без плашки, одна шкала размеров (01.10) =====
   Цифры (КБЖУ, буквы объёма, цена) — 14 px, подписи (ккал, «на 300 мл», «300 мл») — 11 px, название — 16 px. */
.chead .ttl{font-size:16px;letter-spacing:-.01em}
.nutri .stats,.nutri .stats.glass{background:none!important;box-shadow:none!important;border:0!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;height:auto;padding:0}
.nutri .stats div{text-shadow:0 1px 10px rgba(50,18,10,.6)}
.nutri .stats b{font-size:var(--fs-btn)}
.nutri .stats small{font-size:var(--fs-s);color:var(--cream-70)}
.cweight{font-size:var(--fs-s)}
.cbar .seg button b{font-size:var(--fs-btn)}
.cbar .seg button small{font-size:var(--fs-s)}
.nutri{gap:5px}
.nutri .stats{max-width:300px}

/* ===== Карточка: название под кнопками крупнее, КБЖУ ниже и мельче, вес — в нижней капсуле (01.10) ===== */
.chead{justify-content:space-between}
.chead .ttl{position:absolute;left:46px;right:46px;top:calc(100% + 14px);font-size:20px;line-height:1.15;white-space:normal;overflow:visible;text-overflow:clip;text-wrap:balance;letter-spacing:-.015em}
.nutri{top:calc(var(--sat) + 8.8px + 38.7px + 14px + var(--tth,23px) + 12px)}
.nutri .stats{max-width:270px}
.nutri .stats b{font-size:var(--fs-m)}
.nutri .stats small{font-size:var(--fs-xs)}
.cweight{display:none}
.cbar .seg:has(.single){display:flex}
.cbar .seg .single{font-size:var(--fs-btn);color:var(--cream-70);padding:0 12px}
.chead .ttl{left:-2px;right:-2px}
.chead .ttl.l{font-size:17px}
.chead .ttl.xl{font-size:15px}
.slide img.still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ===== Карточка: блюдо по центру свободной зоны, листание свайпом (01.10) ===== */

/* ===== Навигация: «Напитки / Кухня», поиск, листание карточек, приём заказов (01.10) ===== */

/* переключатель разделов над категориями: стеклянная капсула, кремовый бегунок едет под выбранным */
.sect{position:relative;display:flex;margin:0 16px 10px;height:38px;padding:3px;border-radius:19px;
  background:rgba(150,58,33,.42);box-shadow:inset 0 0 0 .5px rgba(247,239,227,.22),inset 0 1px 0 rgba(255,255,255,.1)}
.sect button{position:relative;z-index:1;flex:1;border-radius:16px;font-size:var(--fs-btn,13px);font-weight:500;color:var(--cream);transition:color .3s var(--ease)}
.sect button.on{color:var(--on-accent)}
.sect .knob{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:16px;background:var(--cream);
  box-shadow:0 4px 14px rgba(40,12,4,.22);transition:transform .38s cubic-bezier(.2,.85,.25,1)}
.sect[data-on=kitchen] .knob{transform:translateX(100%)}
.chips-wrap{padding-top:8px}
.grp{scroll-margin-top:calc(var(--sat) + 104px)}

/* объявление: пауза или закрытый раздел */
.grp>.notice{margin:0 0 14px}
.notice{margin:0 16px 16px;padding:12px 14px;border-radius:18px;display:flex;flex-direction:column;gap:3px;text-align:center}
.notice b{font-size:var(--fs-m,13px);font-weight:500}
.notice span{font-size:var(--fs-s,11px);color:var(--cream-70)}

/* метка «Новинка» / «Хит» на фото */
.card .media .mark{position:absolute;left:8px;top:8px;z-index:2;padding:4px 9px;border-radius:11px;font-size:var(--fs-xs,10px);font-weight:500;
  background:var(--cream);color:var(--on-accent);box-shadow:0 3px 10px rgba(40,12,4,.25)}

/* кнопка поиска в доке */
.dock-btn .ico{width:22px;height:22px;stroke:var(--cream);stroke-width:1.9;fill:none;stroke-linecap:round}

/* карточка: страница целиком + кнопки поверх. Страница непрозрачна, поэтому соседняя едет рядом без просветов */
#card .page{position:absolute;inset:0;overflow:hidden;background:inherit;backface-visibility:hidden;-webkit-backface-visibility:hidden}
#card.dragging .page{will-change:transform}
#card .page.pghost{pointer-events:none}
#card .chead .sp{visibility:hidden;flex:none}
#card .chead.cbtns{z-index:4;pointer-events:none}
#card .chead.cbtns button{pointer-events:auto}
#card .ccat{flex:1;min-width:0;text-align:center;font-size:var(--fs-xs,10px);letter-spacing:.06em;text-transform:uppercase;color:var(--cream-70);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 8px rgba(50,18,10,.55)}
/* пальцем по карточке листаем; ряды опций и панель заказа прокручиваются сами */
#card{touch-action:none}
#card .tiles,#card #opts,#card .cbar,#card .prow{touch-action:none}   /* ряды листает app.js сам (19.10): pan-x на iPhone не работал под touch-action:none карточки */
#card .chead.cbtns{touch-action:manipulation}

/* недоступно: пауза, раздел закрыт, способ выключен */
.addbtn.na{background:rgba(247,239,227,.14);color:var(--cream-70);box-shadow:none;font-size:var(--fs-s,11px)}
.paybtn.na{background:rgba(247,239,227,.14);color:var(--cream-70);box-shadow:none}
.line.na .th,.line.na .t b{opacity:.55}
.line .why{display:block;font-size:var(--fs-xs,10px);color:#ffd2b8;margin-top:2px}
.win.na{opacity:.45}
.seg2 button.na{opacity:.4}

/* поиск */
#search .sfield{display:flex;align-items:center;gap:10px;margin:10px 16px 6px;padding:0 6px 0 14px;height:48px;border-radius:24px;
  background:rgba(247,239,227,.1);box-shadow:inset 0 0 0 .5px rgba(247,239,227,.22)}
#search .sfield .ico{width:20px;height:20px;stroke:var(--cream-70);stroke-width:1.9;fill:none;stroke-linecap:round;flex:none}
#search .sfield input{flex:1;min-width:0;height:100%;background:none;border:0;outline:0;color:var(--cream);font:inherit;font-size:16px}
#search .sfield input::placeholder{color:var(--cream-50)}
#search .sfield input::-webkit-search-cancel-button{-webkit-appearance:none}
#search .sfield .x{width:34px;height:34px;border-radius:50%;background:var(--fill,rgba(247,239,227,.08));border:.5px solid var(--glass-edge,rgba(247,239,227,.2));display:grid;place-items:center;flex:none;color:var(--cream)}
#search .sfield .x svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
#search .sfield .x:active{background-color:rgba(255,245,235,.22);transform:scale(.94)}
.qchips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.sres{display:flex;flex-direction:column}
.srow{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:.5px solid var(--cream-14)}
.srow .sopen{flex:1;min-width:0;display:flex;align-items:center;gap:12px;text-align:left;color:inherit}
.srow .th{width:52px;height:52px;border-radius:14px;overflow:hidden;flex:none;background:var(--sage)}
.srow .th img,.srow .th .ph{width:100%;height:100%;object-fit:cover;display:block}
.srow .t{flex:1;min-width:0}
.srow .t b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srow .t small{display:block;font-size:var(--fs-s,11px);color:var(--cream-70);margin-top:2px}
.srow .num{flex:none;font-size:var(--fs-m,13px)}
.srow.off{opacity:.5}
.srow .plus{width:34px;height:34px}
#card{-webkit-user-select:none;user-select:none}

/* ===== Отклик и движение (01.10, вечер): только transform и opacity, без тяжёлых эффектов ===== */

/* лента проявляется по мере прокрутки */
.rv{opacity:0;transform:translate3d(0,18px,0) scale(.985)}
.rv.in{opacity:1;transform:none;transition:opacity .55s var(--ease),transform .7s cubic-bezier(.2,.85,.25,1)}

/* карточка раскрывается из плитки: содержимое догоняет с лёгкой задержкой */
#card.enter .chead:not(.cbtns),#card.enter .nutri,#card.enter .cbottom{animation:cin .6s cubic-bezier(.2,.85,.25,1) .12s both}
#card.enter .cbtns,#card.enter .cnav{animation:fin .4s ease .25s both}
#card.enter .bg img.still:not(.blurfill){animation:pin .7s cubic-bezier(.2,.85,.25,1) both}
@keyframes cin{from{opacity:0;transform:translate3d(0,14px,0)}}
@keyframes fin{from{opacity:0}}
@keyframes pin{from{transform:scale(1.06)}}
#card.leave .page>.chead,#card.leave .nutri,#card.leave .cbottom,#card.leave .cbtns,#card.leave .cnav{opacity:0;transition:opacity .15s ease}

/* тихие стрелки по краям карточки */
#card .cnav{position:absolute;top:44%;z-index:4;width:34px;height:64px;display:grid;place-items:center;color:var(--cream);opacity:.42;
  transition:opacity .3s var(--ease),transform .25s var(--ease)}
#card .cnav svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 4px rgba(40,12,4,.55))}
#card .cnav.prev{left:0}
#card .cnav.next{right:0}
#card .cnav:active{opacity:.8;transform:scale(.9)}
#card.dragging .cnav,#card.turning .cnav{opacity:0}
#card .cnav.prev:active{transform:translateX(-2px) scale(.92)}
#card .cnav.next:active{transform:translateX(2px) scale(.92)}

/* «Подробнее о блюде» — под описанием, понятной кнопкой вместо трёх точек */
#card .dmore{align-self:center;display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 10px 0 14px;margin:-2px 0 2px;border-radius:15px;
  font-size:var(--fs-s,11px);font-weight:500;color:var(--cream);background:rgba(255,246,236,.1);box-shadow:inset 0 0 0 .5px rgba(247,239,227,.28);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);touch-action:manipulation}
#card .dmore .ico{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;opacity:.8}

/* добавили: плюс и кнопка на миг становятся галочкой */
.plus.ok{background:var(--cream);color:var(--on-accent);animation:pop .45s cubic-bezier(.3,1.6,.5,1)}
.plus.ok svg{stroke:currentColor}
@keyframes pop{0%{transform:scale(.7)}100%{transform:scale(1)}}
.addbtn.ok{gap:6px;animation:pop .4s cubic-bezier(.3,1.6,.5,1)}
.addbtn.ok svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* шторку можно смахнуть вниз: шире зона захвата */
.sheet .grab{position:relative;touch-action:none}
.sheet .grab::before{content:"";position:absolute;left:-80px;right:-80px;top:-10px;bottom:-12px}
.sheet .shead{touch-action:none}

/* «Подробнее»: крупные заголовки и спокойный текст, как в карточке товара */
#details .sbody{padding-bottom:calc(var(--sab) + 24px)}
#details .dlead{font-size:var(--fs-m,13px);line-height:1.55;color:var(--cream)}
#details .dblock{margin-top:22px}
#details .dblock h4{font-family:"Druk Wide Cyr",sans-serif;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.02em;margin-bottom:8px}
#details .dblock p{font-size:var(--fs-m,13px);line-height:1.5;color:var(--cream-70)}
#details .dkbju{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center}
#details .dkbju div{padding:10px 4px;border-radius:14px;background:rgba(255,246,236,.08);box-shadow:inset 0 0 0 .5px rgba(247,239,227,.16)}
#details .dkbju b{display:block;font-size:15px;font-weight:500}
#details .dkbju small{display:block;font-size:var(--fs-xs,10px);color:var(--cream-70);margin-top:2px}
#details .dsub{font-size:var(--fs-s,11px)!important;margin-top:8px}
#details .dnote{margin-top:24px;font-size:var(--fs-s,11px);line-height:1.5;color:var(--cream-50);border-top:.5px solid var(--cream-14);padding-top:14px}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

/* ===== Плавность (01.10, правки владельца) ===== */
/* карточка: обычный подъём снизу с кривой iOS, без вспышек и масок; отдельный слой — анимация идёт на видеокарте */
#card{transition:transform .5s cubic-bezier(.32,.72,0,1),visibility 0s linear .5s;will-change:transform}
#card.open{transition:transform .5s cubic-bezier(.32,.72,0,1),visibility 0s}

/* поиск — на весь экран и сразу на своём месте: клавиатура iPhone больше не сдвигает страницу */
#search{top:0;bottom:auto;height:var(--vvh,100%);max-height:none;border-radius:0;transform:none;opacity:0;
  transition:opacity .22s ease,visibility 0s linear .22s}
#search.open{opacity:1;transform:none;transition:opacity .22s ease,visibility 0s}
#search .grab{display:none}
#search .sfield{margin-top:calc(var(--sat) + 10px)}
#search .sbody{overscroll-behavior:contain}
/* остальные шторки (вход, профиль, корзина, адрес) стоят над клавиатурой iPhone: --kb — её высота, --vvh — видимая часть экрана.
   Без этого в приложении клавиатура закрывала поле телефона целиком (21.10, владелец: «клавиатура опять-таки перекрывает всё») */
.sheet:not(#search){bottom:var(--kb,0px);max-height:calc(var(--vvh,100%) - var(--sat) - 21.1px)}
.sheet.tall:not(#search){height:calc(var(--vvh,100%) - var(--sat) - 21.1px)}
html.kb .sheet:not(#search) .sbody{padding-bottom:16px}
/* под шторкой до самой клавиатуры — тот же цвет, иначе за прозрачной панелью «стрелки / готово» просвечивает меню */
html.kb .sheet.open:not(#search)::after{content:"";position:absolute;left:0;right:0;top:100%;height:var(--kb);background:rgba(108,44,28,.97);pointer-events:none}

/* невидимый системный переключатель поверх кнопки: настоящее касание по нему даёт отклик iPhone */
:where(.chip,.sect button,.tile,.seg button,.opt,.dmore,.stepper button,.paybtn,.addbtn,.cartpill,.rbtn,.dock-btn,.venue,.shead .x,.cnav,.ghost,.plus){position:relative}
.hx{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;z-index:3;border-radius:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;font-size:16px}

/* согласие на обработку данных при входе: своя галочка, не отмечена заранее */
.agree{display:flex;align-items:flex-start;gap:10px;margin:14px 0 14px;font-size:var(--fs-s);line-height:1.5;color:var(--cream-70);cursor:pointer;-webkit-user-select:none;user-select:none}
.agree input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.agree i{flex:0 0 22px;height:22px;border-radius:7px;border:1.5px solid var(--cream-50);position:relative;transition:background .2s,border-color .2s}
.agree i::after{content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;border:solid var(--on-accent);border-width:0 2px 2px 0;transform:rotate(45deg);opacity:0;transition:opacity .15s}
.agree input:checked+i{background:var(--cream);border-color:var(--cream)}
.agree input:checked+i::after{opacity:1}
.agree input:focus-visible+i{outline:2px solid var(--cream);outline-offset:2px}
.agree.need i{border-color:var(--cream);box-shadow:0 0 0 3px rgba(247,239,227,.25)}
.agree a,.plegal a,.legal a{color:var(--cream);text-decoration:underline;text-underline-offset:2px}

/* сведения о продавце внизу меню */
.feed{padding-bottom:24px}
.legal{padding:8px 16px calc(150px + var(--sab));text-align:center;font-size:var(--fs-xs);line-height:1.7;color:var(--cream-50)}
.legal a{color:var(--cream-70)}
.plegal{margin-top:16px}
.pdel{display:block;margin:10px auto 0;padding:10px 14px;background:none;border:0;color:var(--cream-50);font:inherit;font-size:13px;text-decoration:underline;text-underline-offset:2px}
.pdel.arm{color:var(--cream);font-weight:600;text-decoration:none}

/* iPhone увеличивает экран на полях мельче 16px и сам не возвращает: поля входа (телефон, код) тоже 16px */
.numfield.wide input,.numfield input{font-size:16px}

/* «Островок» текущего заказа в духе Dynamic Island: чёрная капсула над док-панелью.
   Двигается только transform (без backdrop-filter и clip-path), чтобы на iPhone не дёргалось. */
#live{position:fixed;left:14px;right:14px;margin:0 auto;width:fit-content;bottom:calc(var(--sab) + 12.3px + 51px + 10px);z-index:7;display:flex;align-items:center;gap:10px;
  min-width:230px;max-width:calc(100vw - 28px);height:46px;padding:0 16px 0 12px;border-radius:23px;border:0;
  background:#0d0b0a;color:var(--cream);box-shadow:0 10px 28px rgba(0,0,0,.38);font:inherit;text-align:left;cursor:pointer;
  transform:translateY(0) scale(1);transition:transform .5s cubic-bezier(.32,.72,0,1)}
#live[hidden]{display:flex;transform:translateY(140%) scale(.6);pointer-events:none;visibility:hidden;transition:transform .5s cubic-bezier(.32,.72,0,1),visibility 0s .5s}
#live .ldot{flex:none;width:10px;height:10px;border-radius:50%;background:#f3b25a;box-shadow:0 0 8px rgba(255,170,70,.8)}
#live.wait .ldot{background:var(--cream-50);box-shadow:none}
#live.cook .ldot{animation:livePulse 1.6s ease-in-out infinite}
@keyframes livePulse{50%{transform:scale(.55)}}
#live .lt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
#live .lt b{font-size:var(--fs-m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#live .lt small{font-size:var(--fs-xs);color:var(--cream-50);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#live .leta{flex:none;font-size:var(--fs-m);color:#f3c27a}
#live.ready{box-shadow:0 0 0 1px rgba(255,190,110,.55),0 0 22px rgba(255,150,40,.45),0 10px 28px rgba(0,0,0,.38)}
#live.ready .lt b{color:#ffd9a3}

/* Островок v2: в одной строке с поиском, по ширине экрана, полупрозрачный, с иконкой статуса и шкалой шагов (как в Додо).
   Стекло не анимируем прозрачностью — двигается только transform. */
#live{left:calc(14.1px + 51px + 7px);right:14.1px;margin:0;width:auto;min-width:0;max-width:none;bottom:calc(var(--sab) + 12.3px);
  height:51px;border-radius:25.5px;padding:0 18px 0 6px;gap:10px;
  background:rgba(28,14,10,.42);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  border:.5px solid rgba(247,239,227,.2);box-shadow:0 10px 28px rgba(40,12,4,.3),inset 0 1px 0 var(--glass-hi)}
body.cart-on #live{left:14.1px;bottom:calc(var(--sab) + 12.3px + 51px + 8px)}
#live .ldot{display:none}
#live .lic{flex:none;width:39px;height:39px;border-radius:50%;display:grid;place-items:center;background:rgba(247,239,227,.12);
  transition:background .4s,box-shadow .4s}
#live .lic .ico{width:20px;height:20px;stroke:var(--cream);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#live.cook .lic .ico{animation:liveBob 1.8s ease-in-out infinite}
@keyframes liveBob{50%{transform:translateY(-1.5px) scale(1.06)}}
#live.ready .lic{background:linear-gradient(160deg,#ffd9a3,#f3b25a);box-shadow:0 0 14px rgba(255,170,70,.55)}
#live.ready .lic .ico{stroke:var(--on-accent)}
#live .lt{padding-bottom:7px}
#live .lt b{font-size:var(--fs-m)}
#live .lt small{font-size:var(--fs-xs)}
#live .leta{padding-bottom:7px;font-size:var(--fs-m)}
#live .lbar{position:absolute;left:55px;right:18px;bottom:6px;height:2px;display:flex;gap:3px}
#live .lbar i{flex:1;border-radius:1px;background:rgba(247,239,227,.16);transition:background .5s}
#live .lbar i.f{background:var(--cream)}
#live.ready .lbar i.f{background:#f3c27a}
#live.ready{box-shadow:0 0 0 .5px rgba(255,190,110,.6),0 0 20px rgba(255,150,40,.35),0 10px 28px rgba(40,12,4,.3),inset 0 1px 0 var(--glass-hi)}

/* Лёгкость: поверх играющих роликов «стекло» без размытия — иначе телефон пересчитывает размытие каждый кадр ролика.
   Кнопка «Смотреть» на баннере и «+» на карточке — маленькие, плотная заливка выглядит так же. */
.slide .glass,.card .media .plus.gl{-webkit-backdrop-filter:none;backdrop-filter:none}
.slide .glass{background-color:rgba(122,48,28,.62)}
.card .media .plus.gl{background:rgba(140,54,30,.82)}

/* Облегчённый режим (слабые планшеты и телевизоры на Android): размытие под «стеклом» — главный тормоз прокрутки.
   Без него блоки делаем плотнее, чтобы текст читался. Включается сам (app.js) или ?lite=1. */
html.lite *,html.lite *::before,html.lite *::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.lite .glass{background-color:rgba(122,48,28,.92)}
html.lite .sheet{background-color:rgba(118,46,27,.97)}
html.lite .cartpill{background-color:rgba(122,48,28,.94)}
html.lite #live{background:rgba(28,14,10,.9)}

/* Лента листается самой страницей, а не вложенным окном #home: на iPhone вложенная прокрутка во время инерции
   съедала каждое второе касание. Фон стены — неподвижный слой под лентой, как раньше. */
html,body{height:auto;min-height:100%}
html{overscroll-behavior-y:none;overflow-x:hidden}
body{overflow:visible;overscroll-behavior:auto}
#home{position:relative;inset:auto;overflow:visible;min-height:100vh;background:transparent}
#home::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#8c4431 0%,#853d29 44%,#7c3826 100%)}
.hero{height:62vh;height:62svh}
html.locked,html.locked body{overflow:hidden}
/* Safari на iPhone со свёрнутой панелью заливает место под ней фоном карточки (подложка под фото).
   Подложка — цвета низа карточки, иначе под панелью полоса серо-зелёного */
#card .bg{background:#7c3826}
/* Растворение полосы категорий — только в пустом отступе под кнопками: раньше оно начиналось с 70 % высоты
   и делало низ кнопок полупрозрачным (выбранная — грязно-розовая, сквозь остальные просвечивал текст ленты) */
.chips-wrap{-webkit-mask-image:linear-gradient(#000 calc(100% - 15px),transparent);mask-image:linear-gradient(#000 calc(100% - 15px),transparent)}
/* Облегчённый режим (медленные телефоны) красил всё «стекло» в тёмное — и выбранную категорию тоже: тёмный текст на тёмном */
html.lite .chip.on,html.lite .tile.on{background-color:var(--cream)}

/* Фон под лентой: первый хит раздела, сильно размытый — заранее размытая маленькая картинка (--hit = <media>-glow.webp),
   браузер растягивает её на экран без CSS-фильтра; поверх — терракотовая дымка, чтобы текст читался */
#home::before{background:linear-gradient(rgba(124,56,38,.35),rgba(124,56,38,.6)),var(--hit,none) center/cover,linear-gradient(180deg,#8c4431,#7c3826)}
/* Корзина: мусорка рядом с «− +» — убрать позицию одним нажатием */
.line .lctl{display:flex;align-items:center;gap:6px}
.line .ldel{position:relative;width:32px;height:32px;border-radius:16px;display:grid;place-items:center;color:var(--cream);opacity:.75;background:var(--fill,rgba(255,246,236,.08));border:.5px solid var(--glass-edge,rgba(255,240,228,.18))}
.line .ldel svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.line .ldel:active{opacity:1;transform:scale(.94)}
/* «Подробнее» (состав, аллергены, КБЖУ): плотная подложка — сквозь прозрачную фото блюда мешало читать */
#details{background-color:rgba(108,44,28,.9);-webkit-backdrop-filter:blur(30px) saturate(120%);backdrop-filter:blur(30px) saturate(120%)}
body:has(#details.open) #card .bg::after{opacity:1}
/* «Кухня» теперь первая кнопка: бегунок по умолчанию слева, у «Напитков» — справа */
.sect[data-on=kitchen] .knob{transform:none}
.sect[data-on=bar] .knob{transform:translateX(100%)}
/* шторки (корзина, вход, заказ за столом, куда принести, профиль) — плотнее: сквозь них читалось меню */
.sheet{background-color:rgba(108,44,28,.9);-webkit-backdrop-filter:blur(30px) saturate(120%);backdrop-filter:blur(30px) saturate(120%)}
/* полоса «Кухня / Напитки» с категориями — плотная, лента под ней не просвечивает */
.chips-wrap{background:linear-gradient(180deg,rgba(124,52,32,.97) 0%,rgba(124,52,32,.94) calc(100% - 15px),rgba(124,52,32,0) 100%)}
#cartBody .empty + .upsell{margin-top:6px}

/* «Ваш стол» (07.10): визит за столом — арка меньше, под ней список заказов визита, сумма и действия.
   Список прокручивается сам по себе, кнопки всегда внизу. */
#status.visit .arch{height:min(22vh,190px);margin:2.4vh 0 2vh}
#status.visit .bars,#status.visit .ord{display:none}
#status.visit .spacer{display:none}
#status.rev .arch{height:min(22vh,190px);margin:2.4vh 0 2vh}
#status.rev .bars,#status.rev .spacer{display:none}
#statusPush[hidden]{display:none}
/* оценка после подачи (24.10): звёзды крупно, блюда — капсулами, комментарий и «Отправить» */
/* 24.10, владелец: подложка прозрачнее, заголовок и кнопка Яндекса мельче, звёзды ярче, с бликом */
.rvw{margin-top:14px;text-align:center}
.rvw.vround{background:rgba(40,14,8,.1);border-color:rgba(247,239,227,.1)}
.rvh{font-size:var(--fs-s);font-weight:500;color:var(--cream-70)}
.rstars{display:flex;justify-content:center;gap:4px;margin-top:6px}
.rstars button{width:46px;height:46px;display:grid;place-items:center;color:var(--cream-70)}
.rstars svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round;transition:transform .3s var(--ease),filter .3s var(--ease)}
.rstars button.on svg{width:34px;height:34px;filter:drop-shadow(0 0 5px rgba(255,200,100,.85)) drop-shadow(0 0 14px rgba(255,150,40,.5))}
.rstars button:active svg{transform:scale(.86)}
.rvw .label{text-align:left;margin:12px 2px 6px}
.rchips{display:flex;flex-wrap:wrap;gap:6px}
.rchips .chip{height:auto;min-height:32px;padding:7px 12px;text-align:left;line-height:1.25}
.rvw .note{margin-top:10px}
.rvw .paybtn{margin-top:10px}
.rvp{margin:8px 4px 0;font-size:var(--fs-s);color:var(--cream-70);line-height:1.4}
.rvw .paybtn.rvy{display:inline-flex;width:auto;height:38px;padding:0 18px;margin-top:10px;font-size:var(--fs-s);font-weight:500;text-decoration:none;
  background:none;color:var(--cream);box-shadow:inset 0 0 0 1px var(--glass-edge)}
#status .vbody{width:100%;max-width:400px;flex:1;min-height:0;margin-top:16px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 18px),transparent);mask-image:linear-gradient(#000 calc(100% - 18px),transparent);padding-bottom:14px}
#status .vbody[hidden],#status .vacts[hidden]{display:none}
/* 24.10, владелец: «плашка дёргается вправо, влево, вверх, вниз — пусть только вверх-вниз листается».
   Ленты подсказок шире списка (поля -20px) — список уезжал вбок. Сам экран за страницей не тянется — app.js lockStatusDrag
   (touch-action:none здесь нельзя: на iPhone он глушит и прокрутку списка, и ленты — см. #card). */
#status .vbody{overflow-x:hidden}
#status .vbody .upsell{margin:0;padding:0 0 4px}
.vround{padding:12px 14px;border-radius:18px;background:rgba(40,14,8,.28);border:.5px solid rgba(247,239,227,.14)}
.vround + .vround{margin-top:8px}
.vrh{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:var(--fs-s);color:var(--cream-70)}
.vst{flex:none;font-weight:600;color:var(--cream)}
.vst.cook{color:#f3c27a}
.vst.ready{color:#ffd9a3}
.vst.done,.vst.off{color:var(--cream-50);font-weight:500}
.vround ul{list-style:none;margin:8px 0 0;padding:0}
.vround li{display:flex;justify-content:space-between;gap:12px;font-size:var(--fs-m);line-height:1.3;padding:3px 0}
.vround li small{display:block;font-size:var(--fs-xs);color:var(--cream-50)}
.vround li .num{flex:none;color:var(--cream-70)}
.vround.off{opacity:.55}
.vtotal{display:flex;justify-content:space-between;align-items:baseline;margin:14px 4px 0;font-size:var(--fs-m)}
.vtotal b{font-size:20px}
.vpay{margin:3px 4px 0;font-size:var(--fs-s);color:var(--cream-70)}
#status .vacts{width:100%;max-width:400px;margin-top:10px}
/* оплата счёта стола (23.10): «Оплатить» главная, «Дозаказать» под ней — контуром */
#status .vacts .paybtn[hidden]{display:none}
#status .vacts .paybtn.alt{margin-top:8px;background:none;color:var(--cream);box-shadow:inset 0 0 0 1px var(--glass-edge)}
#status .vacts .paybtn:disabled{opacity:.6}
#status.visit #statusBack{max-width:400px;margin-top:8px;height:40px;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--cream-70)}

/* ---------- Доставка (14.10): карта с меткой по центру, цена по км, адрес ---------- */
.addr{display:flex;flex-direction:column;gap:8px}
.dmap{position:relative;height:190px;border-radius:18px;overflow:hidden;background:rgba(0,0,0,.25);border:.5px solid var(--glass-edge);touch-action:none}
.dmapbox{position:absolute;inset:0;background:#e9e4dc}
.dmapbox .leaflet-control-attribution{font-size:9px;background:rgba(255,255,255,.7)}
.dpin{position:absolute;left:50%;top:50%;z-index:500;width:34px;height:34px;margin:-34px 0 0 -17px;pointer-events:none;transition:transform .2s var(--ease)}
.dpin svg{width:100%;height:100%;fill:var(--deep);stroke:var(--cream);stroke-width:1.4}
.dmap.moving .dpin{transform:translateY(-8px)}
.dmap .locate{position:absolute;right:10px;bottom:22px;z-index:500;width:40px;height:40px;border-radius:50%;background:rgba(40,16,8,.78);border:.5px solid var(--glass-edge);display:grid;place-items:center;color:var(--cream)}
.dmap .locate svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.dfail{position:absolute;inset:0;display:grid;place-items:center;padding:0 24px;text-align:center;font-size:13px;color:var(--cream-70);margin:0}
.dfee{margin:2px 2px 0;font-size:13px;font-weight:500;color:var(--cream-70)}
.dfee.far{color:#ffb38f}
.arow{display:flex;gap:6px}
.afield{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;padding:7px 10px 6px;border-radius:14px;background:var(--fill);border:.5px solid var(--glass-edge)}
.afield.wide{flex:3}
.afield span{font-size:11px;font-weight:500;color:var(--cream-70)}
.afield input{width:100%;min-width:0;border:0;background:none;padding:0;font:inherit;font-size:16px;font-weight:600;color:var(--cream)}
.afield input::placeholder{color:var(--cream-30);font-weight:500}
.afield:focus-within{border-color:var(--cream-70)}
.addr .note{min-height:44px}
/* четыре окна (с доставкой) — в один ряд, окна чуть уже и ниже */
.arches.four{grid-template-columns:repeat(4,1fr);gap:6px}
.arches.four .win{height:138px;border-radius:44px 44px 14px 14px;padding:0 2px 14px}
.arches.four .win .wi{width:32px;height:32px;margin-top:34px}
#venueSeg.four .win b{font-size:13px;white-space:nowrap}
#venueSeg.four .win small{font-size:11px;white-space:nowrap}

/* экран заказа: та же идущая сборщица поверх панели, по форме арки (14.10); при «отменён» — стоит */
#status .walk{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;opacity:0;pointer-events:none;
  -webkit-mask:url(/app/arch-panel.svg) center/100% 100% no-repeat;mask:url(/app/arch-panel.svg) center/100% 100% no-repeat;transition:opacity .4s ease,filter .6s ease}
#status .walk.go{opacity:1}
#status .arch[data-state=wait] .walk{filter:brightness(.8)}
/* Низ полосы «Кухня / Напитки» с категориями растворяется плавно (владелец, 14.10: была заметная граница):
   зона растворения 44 px под кнопками вместо 15, затухание по мягкой кривой — и заливки, и размытия.
   Отступ снизу больше, а margin-bottom его компенсирует: лента стоит на том же месте. */
.chips-wrap{padding-bottom:44px;margin-bottom:-28px;
  background:linear-gradient(180deg,rgba(124,52,32,.97) 0%,rgba(124,52,32,.94) calc(100% - 44px),rgba(124,52,32,.8) calc(100% - 33px),rgba(124,52,32,.52) calc(100% - 22px),rgba(124,52,32,.22) calc(100% - 11px),rgba(124,52,32,0) 100%);
  -webkit-mask-image:linear-gradient(#000 calc(100% - 44px),rgba(0,0,0,.86) calc(100% - 33px),rgba(0,0,0,.56) calc(100% - 22px),rgba(0,0,0,.24) calc(100% - 11px),transparent);
  mask-image:linear-gradient(#000 calc(100% - 44px),rgba(0,0,0,.86) calc(100% - 33px),rgba(0,0,0,.56) calc(100% - 22px),rgba(0,0,0,.24) calc(100% - 11px),transparent)}
/* заголовок раздела после нажатия на категорию встаёт ниже растворения полосы, а не под ним */
.grp{scroll-margin-top:calc(var(--sat) + 126px)}

/* «С собой / Доставка» в шапке (17.10): та же капсула с бегунком, что «Кухня / Напитки» */
#topbar .vsect{margin:0;flex:1;max-width:290px;height:46px;border-radius:23px}
.vsect button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border-radius:20px;line-height:1.1}
.vsect button b{font-size:13px;font-weight:600}
.vsect button small{font-size:10.5px;opacity:.72}
.vsect .knob{border-radius:20px}
.vsect[data-on=take] .knob{transform:none}
.vsect[data-on=delivery] .knob{transform:translateX(100%)}

/* «Хорошо сочетается» (17.10): в карточке блюда — тихая строка капсул над кнопкой «В заказ», в корзине — плитки с причиной */
.pairs{width:100%}
.pairs .ptitle{font-size:11px;color:var(--cream-70);margin:0 4px 6px;text-shadow:0 1px 8px rgba(60,22,12,.5)}
.prow{display:flex;gap:7px;margin:0 -14.1px;padding:0 14.1px}
.pr{flex:none;display:flex;align-items:center;gap:8px;max-width:calc(100vw - 56px);height:50px;padding:5px 12px 5px 5px;border-radius:25px;text-align:left}
.pr .th{width:40px;height:40px;border-radius:50%;overflow:hidden;flex:none;background:var(--deep)}
.pr .th img{width:100%;height:100%;object-fit:cover}
.pr .t{min-width:0;display:flex;flex-direction:column;gap:1px}
.pr .t b{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr .t small{font-size:10.5px;color:var(--cream-70);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr .pp{flex:none;font-size:12px;font-weight:600;margin-left:2px}
.pr .pp svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.up .why{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-style:normal;font-size:10.5px;line-height:1.25;color:var(--cream-70);margin-top:2px}
/* Ко времени (21.10): день — под выбором «Когда», время и гости — системный список телефона */
.seg2.whday{margin-top:8px}
.numfield select{width:92px;height:38px;border-radius:12px;background:rgba(0,0,0,.2);border:0;color:var(--cream);font:inherit;font-size:16px;font-weight:600;text-align:center;text-align-last:center;padding:0 8px;-webkit-appearance:none;appearance:none}
.numfield select:focus-visible{outline:1.8px solid var(--cream)}
#statusCancel{margin:0 auto 6px}
/* Что в заказе и сумма на экране заказа (21.10): спокойной строкой под номером */
#status .olines{max-width:340px;margin:8px auto 0;padding:0 16px;display:flex;flex-wrap:wrap;justify-content:center;gap:2px 10px;font-size:13px;line-height:1.45;color:var(--cream-70);text-align:center}
#status .olines b{flex-basis:100%;margin-top:4px;font-size:15px;color:var(--cream)}
#profEdit{margin-top:8px}
/* Названия (23.10, владелец): переносим целыми словами на следующую строку, строки по длине ровные — без дефисов и обрывков слов */
.card .name,.pcard .strip b,.up > b,.line .t b,.hrow .t b,.slide .cap h2,.chead .ttl{hyphens:manual;-webkit-hyphens:manual;overflow-wrap:break-word;word-break:normal;text-wrap:balance}
/* в «Хитах» название целиком — до трёх строк, без многоточия на полуслове */
.pcard .strip b{-webkit-line-clamp:3}

/* Слайд меню для Instagram (?shot=id, menu/tools/stories.mjs): только карточка, без цены и кнопок; сверху и снизу место под кнопки Instagram */
html.shot{--sat:30px;--sab:34px}   /* владелец 24.10: «слишком много места наверху, внизу» — воздуха меньше */
html.shot #cardBg .shotfill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(18px) brightness(.9);transform:scale(1.15)}
html.shot #cardBg .shotmask-t{-webkit-mask-image:linear-gradient(transparent 0,#000 70px);mask-image:linear-gradient(transparent 0,#000 70px)}
html.shot #cardBg .shotmask-b{-webkit-mask-image:linear-gradient(#000 calc(100% - 70px),transparent 100%);mask-image:linear-gradient(#000 calc(100% - 70px),transparent 100%)}
html.shot #cardBg .shotmask-tb{-webkit-mask-image:linear-gradient(transparent 0,#000 70px,#000 calc(100% - 70px),transparent 100%);mask-image:linear-gradient(transparent 0,#000 70px,#000 calc(100% - 70px),transparent 100%)}
html.shot #topbar,html.shot #dock,html.shot #live,html.shot #splash,html.shot #card .cbar,html.shot #card #opts,html.shot #card #tiles,
html.shot #card #cardPairs,html.shot #card .dmore,html.shot #cardBack,html.shot .cnav,html.shot .toast{display:none!important}