/* базовый сброс */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}

:root{
  color-scheme: dark;
  --ink:#0A0909;       /* основной фон, тушь */
  --nori:#121010;      /* карточки */
  --graphite:#1B1817;  /* приподнятые поверхности */
  --line:#2A2524;      /* линии и рамки */
  --rice:#F2ECE4;      /* основной текст */
  --muted:#9A918C;     /* вторичный текст */
  --soy:#E31E24;       /* красный логотипа */
  --soy-hi:#FF3A30;
  --soy-deep:#7A0D10;
  --ok:#7DB34F;
  --display:"Tektur","Russo One","Arial Narrow",system-ui,sans-serif;
  --body:"Onest","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --hdr:68px;
  --r:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink)}
body{background:var(--ink);color:var(--rice);font:400 16px/1.55 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
:focus-visible{outline:2px solid var(--soy-hi);outline-offset:3px;border-radius:8px}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.eyebrow{font:600 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;letter-spacing:-.01em}
p{margin:0}

/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding-inline:24px;border-radius:999px;font-weight:600;font-size:15px;transition:background .2s,transform .2s,border-color .2s}
.btn-red{background:var(--soy);color:#fff;box-shadow:0 10px 30px -10px rgba(227,30,36,.7)}
.btn-red:hover{background:var(--soy-hi);transform:translateY(-1px)}
.btn-ghost{border:1px solid var(--line);color:var(--rice)}
.btn-ghost:hover{border-color:var(--muted)}

/* ---------- шапка ---------- */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:rgba(10,9,9,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.hdr-in{height:var(--hdr);display:flex;align-items:center;gap:28px}
.logo img{height:46px;width:auto;display:block}
.nav{display:flex;gap:26px;font-size:15px;color:var(--muted)}
.nav a:hover{color:var(--rice)}
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:18px}
.open{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.open i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(125,179,79,.18)}
.phone{font:700 15px/1 var(--mono);letter-spacing:.02em}
.cart-btn{display:flex;align-items:center;gap:10px;height:44px;padding:0 8px 0 16px;border-radius:999px;background:var(--graphite);border:1px solid var(--line);font-weight:600;font-size:14px;transition:border-color .2s}
.cart-btn:hover{border-color:var(--soy)}
.cart-btn .cnt{min-width:30px;height:30px;padding-inline:8px;border-radius:999px;background:var(--soy);color:#fff;display:grid;place-items:center;font:700 13px/1 var(--mono)}
.cart-btn.bump{animation:bump .35s}
@keyframes bump{40%{transform:scale(1.08)}}

/* ---------- первый экран ---------- */
.hero{position:relative;padding-block:56px 40px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(40px,6.4vw,84px);line-height:.98;font-weight:800;text-transform:uppercase;margin-top:18px}
.hero h1 em{font-style:normal;color:var(--soy)}
.hero-lead{margin-top:22px;max-width:30em;color:var(--muted);font-size:18px}
.hero-cta{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px}
.facts{margin-top:44px;display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:0;border-top:1px solid var(--line)}
.fact{padding:18px 28px 0 0;margin-right:28px;border-right:1px solid var(--line)}
.fact:last-child{border-right:0;margin-right:0}
.fact b{display:block;font:700 26px/1.1 var(--mono);letter-spacing:-.02em}
.fact b small{font-size:15px;color:var(--muted);font-weight:500}
.fact span{font-size:13px;color:var(--muted)}
.fact[hidden]{display:none}
/* ссылки на карты, сервисы и соцсети */
.links[hidden]{display:none}
.links{display:grid;gap:10px}
.links>span{font:600 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.links>div{display:flex;flex-wrap:wrap;gap:8px}
.links a{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 11px;border:1px solid var(--line);border-radius:999px;font-size:14px;color:var(--rice);transition:border-color .15s,background .15s}
.links a:hover,.links a:focus-visible{border-color:var(--soy-hi);background:rgba(255,255,255,.04)}
.links svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--soy-hi)}
.links-deliv{margin-top:20px}
.links-ftr{margin-top:36px}
.ftr-note{margin:14px 0 0;font-size:12px;color:var(--muted)}
.hero-art{position:relative;aspect-ratio:1;max-width:560px;width:100%;justify-self:end}
.hero-art svg{width:100%;height:100%;display:block;overflow:visible}
.spin{transform-origin:200px 196px;animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.tag{position:absolute;display:flex;flex-direction:column;gap:2px;padding:12px 16px;border-radius:14px;background:rgba(27,24,23,.92);border:1px solid var(--line);box-shadow:0 20px 40px -20px #000;font-size:13px}
.tag b{font:700 15px/1.2 var(--mono)}
.tag-a{left:-4%;top:14%}
.tag-b{right:0;bottom:12%}
.tag .hot{color:var(--soy-hi)}

/* палочки-разделитель из логотипа */
.sticks{display:block;width:100%;height:28px}

/* ---------- акции ---------- */
.promos{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:16px;padding-block:28px 12px}
.promo{position:relative;overflow:hidden;border-radius:var(--r);padding:26px;min-height:190px;display:flex;flex-direction:column;justify-content:space-between;gap:18px;background:var(--nori);border:1px solid var(--line)}
.promo h3{font-size:24px;line-height:1.1;font-weight:700;max-width:12em}
.promo p{color:var(--muted);font-size:14px;max-width:26em}
.promo .code{align-self:flex-start;font:700 13px/1 var(--mono);padding:9px 12px;border:1px dashed currentColor;border-radius:8px;letter-spacing:.08em;color:inherit;background:none;cursor:pointer;transition:background .2s}
.promo .code:hover{background:rgba(255,255,255,.12)}
.promo .eyebrow{margin-bottom:12px}
.promo-main .eyebrow{color:rgba(255,255,255,.8)}
.promos[data-n="1"]{grid-template-columns:1fr}
.promos[data-n="2"]{grid-template-columns:1fr 1fr}
.promos[data-n="4"],.promos[data-n="5"],.promos[data-n="6"],.promos[data-n="7"],.promos[data-n="8"]{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.promo-main{background:radial-gradient(120% 140% at 100% 0%,#FF3A30 0%,#C4141A 40%,#6E0B0E 100%);border-color:transparent}
.promo-main p{color:rgba(255,255,255,.82)}
.promo-main .big{position:absolute;right:-8px;bottom:-34px;font:800 170px/1 var(--display);color:rgba(0,0,0,.22);letter-spacing:-.04em;pointer-events:none}

/* ---------- меню ---------- */
.menu{padding-block:56px 20px}
.sec-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px 32px;margin-bottom:24px}
.sec-head h2{font-size:clamp(32px,4.4vw,52px);font-weight:800;text-transform:uppercase;line-height:1}
.sec-head p{color:var(--muted);max-width:34em}
.tabs-bar{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--hdr));z-index:30;background:linear-gradient(var(--ink) 75%,rgba(10,9,9,0));padding-block:12px 18px}
.tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;height:44px;padding-inline:20px;border-radius:999px;border:1px solid var(--line);background:var(--nori);font-weight:600;font-size:14px;color:var(--muted);display:flex;align-items:center;gap:8px;transition:all .2s}
.tab span{font:500 12px/1 var(--mono);opacity:.7}
.tab:hover{color:var(--rice)}
.tab.on{background:var(--rice);color:var(--ink);border-color:var(--rice)}
.cat{padding-top:28px;scroll-margin-top:calc(var(--hdr) + 80px)}
.cat-head{display:flex;align-items:baseline;gap:14px;margin-bottom:18px}
.cat-head h3{font-size:28px;font-weight:700;text-transform:uppercase}
.cat-head span{font:500 13px/1 var(--mono);color:var(--muted)}
.cat-head .note{margin-left:auto;font:400 13px/1.3 var(--body)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.card{display:flex;flex-direction:column;background:var(--nori);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:border-color .25s,transform .25s}
.card:hover{border-color:#453c3a;transform:translateY(-3px)}
.plate{position:relative;aspect-ratio:4/3;max-width:100%;background:radial-gradient(70% 70% at 50% 45%,#221D1C 0%,#141211 70%)}
.plate svg{position:absolute;inset:0;width:100%;height:100%;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.card:hover .plate svg{transform:scale(1.05) rotate(-2deg)}
.badge{position:absolute;left:14px;top:14px;z-index:1;font:700 11px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;padding:7px 10px;border-radius:999px;background:var(--rice);color:var(--ink)}
.badge.hot{background:var(--soy);color:#fff}
.badge.new{background:transparent;border:1px solid var(--rice);color:var(--rice)}
.card-b{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.card-b h4{margin:0;font:600 18px/1.25 var(--body)}
.comp{color:var(--muted);font-size:14px;line-height:1.45}
.meta{font:500 12px/1 var(--mono);color:var(--muted);letter-spacing:.02em;margin-top:2px}
.sizes{display:inline-flex;background:var(--ink);border:1px solid var(--line);border-radius:999px;padding:3px;align-self:flex-start;margin-top:4px}
.sizes button{height:30px;padding-inline:14px;border-radius:999px;font:600 12px/1 var(--mono);color:var(--muted)}
.sizes button.on{background:var(--graphite);color:var(--rice);box-shadow:inset 0 0 0 1px var(--line)}
.card-f{margin-top:auto;padding-top:12px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.price{font:700 22px/1 var(--mono);letter-spacing:-.02em}
.add{height:42px;padding-inline:16px;border-radius:999px;background:var(--graphite);border:1px solid var(--line);font-weight:600;font-size:14px;display:flex;align-items:center;gap:8px;transition:all .2s}
.add:hover{background:var(--soy);border-color:var(--soy);color:#fff}
.add svg{width:14px;height:14px}
.step{display:flex;align-items:center;height:42px;border-radius:999px;background:var(--soy);color:#fff}
.step button{width:40px;height:42px;font:700 18px/1 var(--mono);color:#fff}
.step output{min-width:22px;text-align:center;font:700 15px/1 var(--mono)}

/* ---------- как едет заказ ---------- */
.how{padding-block:72px 24px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
.stp{padding:26px 24px 24px;border-radius:var(--r);background:var(--nori);border:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.stp .n{font:800 15px/1 var(--display);color:var(--soy);letter-spacing:.06em}
.stp h3{font:700 22px/1.15 var(--display);text-transform:uppercase}
.stp p{color:var(--muted);font-size:15px}

/* ---------- доставка ---------- */
.deliv{padding-block:64px}
.deliv-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.deliv-grid>*{min-width:0}  /* содержимое колонок не растягивает страницу на узком экране */
.city-map{max-width:460px;width:100%;justify-self:center}
.city-map svg{width:100%;height:auto;display:block}
.deliv-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
.dc{padding:18px;border-radius:var(--r);background:var(--nori);border:1px solid var(--line);display:grid;gap:6px;align-content:start}
.dc b{font:700 26px/1.1 var(--mono);letter-spacing:-.02em}
.dc b:not(.mono){font:700 22px/1.2 var(--display);text-transform:uppercase}
.dc>span{font-size:13px;color:var(--muted)}
.dc-main{background:radial-gradient(120% 140% at 100% 0%,#FF3A30 0%,#C4141A 40%,#6E0B0E 100%);border-color:transparent}
.dc-main>span{color:rgba(255,255,255,.85)}
.deliv-note{margin-top:18px;color:var(--muted);font-size:14px;max-width:40em}
.deliv-note b{color:var(--rice);font-weight:600}

/* ---------- подвал ---------- */
.ftr{border-top:1px solid var(--line);padding-block:48px 40px;background:#070606}
.ftr-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.ftr img{height:92px;width:auto}
.ftr h5{margin:0 0 14px;font:600 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15px}
.ftr ul a:hover{color:var(--soy-hi)}
.ftr .big-phone{font:700 22px/1.2 var(--mono)}
.ftr-bot{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:13px;color:var(--muted)}

/* ---------- корзина ---------- */
.scrim{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;z-index:61;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--nori);border-left:1px solid var(--line);display:flex;flex-direction:column;transform:translateX(102%);transition:transform .38s cubic-bezier(.2,.8,.2,1);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.drawer.on{transform:none}
.dr-h{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--line)}
.dr-h h3{font-size:24px;font-weight:700;text-transform:uppercase}
.x{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center}
.x:hover{border-color:var(--muted)}
.dr-body{flex:1;overflow-y:auto;padding:8px 22px 20px}
.line{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;padding-block:14px;border-bottom:1px solid var(--line)}
.line .th{width:64px;height:64px;border-radius:14px;background:var(--graphite);overflow:hidden}
.line .th svg{width:100%;height:100%}
.line h4{margin:0;font:600 15px/1.25 var(--body)}
.line .meta{margin-top:6px}
.line .r{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.line .price{font-size:16px}
.mini{display:flex;align-items:center;border:1px solid var(--line);border-radius:999px;height:32px}
.mini button{width:30px;height:32px;font:700 15px/1 var(--mono)}
.mini output{min-width:18px;text-align:center;font:700 13px/1 var(--mono)}
.empty{padding:60px 10px;text-align:center;color:var(--muted);display:grid;gap:14px;justify-items:center}
.empty svg{width:120px;height:120px;opacity:.9}
.addons{padding-block:16px 4px;border-bottom:1px solid var(--line)}
.addons h5{margin:0 0 4px;font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.addon{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:10px;font-size:15px}
.addon+.addon{border-top:1px dashed var(--line)}
.addon small{display:block;color:var(--muted);font-size:13px}
.mini button:disabled{opacity:.35;cursor:default}
.dr-f{padding:18px 22px 22px;border-top:1px solid var(--line);display:grid;gap:14px;background:var(--graphite)}
.prog{display:grid;gap:8px;font-size:13px;color:var(--muted)}
.prog b{color:var(--rice)}
.bar{height:6px;border-radius:6px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--soy-deep),var(--soy-hi));border-radius:6px;transition:width .4s}
.sum{display:grid;gap:6px;font-size:14px;color:var(--muted)}
.sum div{display:flex;justify-content:space-between}
.sum .tot{color:var(--rice);font-size:18px;font-weight:600;padding-top:6px}
.sum .tot .mono{font-size:22px;font-weight:700}
.dr-f .btn{width:100%}
.form{display:grid;gap:14px;padding-top:14px}
.form label{display:grid;gap:6px;font-size:13px;color:var(--muted)}
.form input,.form select{height:48px;border-radius:12px;border:1px solid var(--line);background:var(--ink);color:var(--rice);font:500 15px var(--body);padding-inline:14px;width:100%}
.form input:focus,.form select:focus{outline:none;border-color:var(--soy)}
.pay{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pay input{position:absolute;opacity:0;pointer-events:none}
.pay label{display:block;text-align:center;padding:12px 6px;border-radius:12px;border:1px solid var(--line);color:var(--rice);font-size:13px;font-weight:600;cursor:pointer}
.pay input:checked+label{border-color:var(--soy);background:rgba(227,30,36,.1)}
.pay input:focus-visible+label{outline:2px solid var(--soy-hi);outline-offset:2px}
.demo{font-size:12px;color:var(--muted);text-align:center}
.done{padding:50px 10px;text-align:center;display:grid;gap:14px;justify-items:center}
.done h4{margin:0;font:700 26px/1.1 var(--display);text-transform:uppercase}
.done p{color:var(--muted)}
.done .mono{color:var(--rice);font-size:18px}

.toast{position:fixed;z-index:70;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;background:var(--rice);color:var(--ink);font-weight:600;font-size:14px;padding:12px 18px;border-radius:999px;transition:all .3s;pointer-events:none;white-space:nowrap;max-width:calc(100% - 32px);overflow:hidden;text-overflow:ellipsis}
.toast.on{opacity:1;transform:translate(-50%,0)}
.mbar{display:none}

/* ---------- карточка товара ---------- */
.card .plate{cursor:pointer}
.nm{font:inherit;text-align:left;padding:0}
.nm:hover{color:var(--soy-hi)}
.more{position:absolute;right:12px;bottom:12px;z-index:1;font:600 12px/1 var(--body);padding:8px 11px;border-radius:999px;background:rgba(10,9,9,.78);border:1px solid var(--line);color:var(--rice);opacity:.85;transition:opacity .2s,border-color .2s}
.card:hover .more{opacity:1;border-color:var(--soy)}
.pm-scrim{position:fixed;inset:0;z-index:62;background:rgba(0,0,0,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .25s}
.pm-scrim.on{opacity:1;pointer-events:auto}
.pm{position:fixed;inset:0;z-index:63;display:grid;place-items:center;padding:24px 16px;opacity:0;transition:opacity .25s}
.pm.on{opacity:1}
.pm-box{position:relative;width:min(1000px,100%);max-height:100%;overflow-y:auto;overscroll-behavior:contain;background:var(--nori);border:1px solid var(--line);border-radius:24px;display:grid;grid-template-columns:1fr 1fr;transform:translateY(16px) scale(.98);transition:transform .3s cubic-bezier(.2,.8,.2,1);box-shadow:0 40px 80px -30px #000}
.pm.on .pm-box{transform:none}
.pm-x{position:absolute;right:16px;top:16px;z-index:3;background:rgba(10,9,9,.8)}
.pm-art{position:sticky;top:0;align-self:start;aspect-ratio:1;max-width:100%;background:radial-gradient(70% 70% at 50% 45%,#241F1E 0%,#121010 72%);border-right:1px solid var(--line)}
.pm-art svg{position:absolute;inset:0;width:100%;height:100%}
.pm-info{padding:32px 30px 0;display:flex;flex-direction:column;gap:12px;min-width:0}
.pm-info h3{font-size:clamp(28px,3.4vw,38px);font-weight:800;text-transform:uppercase;line-height:1.02;padding-right:44px}
.pm-d{color:var(--muted);font-size:15px;max-width:42em}
.pm-sec{padding-top:18px;margin-top:6px;border-top:1px solid var(--line);display:grid;gap:12px}
.pm-sec h5{margin:0;font:600 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pm-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.pm-h .sizes{margin:0}
.kbju{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:8px}
.kb{background:var(--ink);border:1px solid var(--line);border-radius:14px;padding:12px 12px 10px;display:grid;gap:4px;min-width:0}
.kb b{font:700 20px/1.1 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.kb b small{font-size:12px;color:var(--muted);font-weight:500}
.kb span{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
.kb span i{width:8px;height:8px;border-radius:50%;flex:none}
.kb.kc{background:var(--soy);border-color:var(--soy)}
.kb.kc b{font-size:24px;color:#fff}
.kb.kc span{color:rgba(255,255,255,.85)}
.ebar{display:flex;height:8px;border-radius:8px;overflow:hidden;gap:2px}
.ebar i{display:block;height:100%}
.elg{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--muted)}
.ing{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15px}
.ing li{display:flex;align-items:baseline;gap:8px}
.ing li i{flex:1;border-bottom:1px dotted #4a4240;transform:translateY(-4px);min-width:16px}
.ing li b{font-size:13px;color:var(--rice);white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{font-size:13px;padding:7px 12px;border-radius:999px;border:1px solid var(--line);color:var(--rice)}
.pm-f{position:sticky;bottom:0;margin:10px -30px 0;padding:16px 30px calc(18px + env(safe-area-inset-bottom,0px));background:var(--nori);display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line)}
.pm-f .price{font-size:28px}
.pm-f .step{height:48px}
.pm-f .step button{height:48px;width:46px}
@media (max-width:780px){
  .pm{place-items:end center;padding:0}
  .pm-box{grid-template-columns:1fr;border-radius:24px 24px 0 0;max-height:92%;transform:translateY(40px)}
  .pm-art{position:relative;aspect-ratio:4/3;border-right:0;border-bottom:1px solid var(--line)}
  .pm-info{padding:22px 16px 0}
  .pm-f{margin-inline:-16px;padding-inline:16px}
  .kbju{grid-template-columns:1fr 1fr}
}

/* ---------- данные из API: загрузка, стоп-лист, фото ---------- */
.open.closed i{background:var(--soy);box-shadow:0 0 0 4px rgba(227,30,36,.18)}
.skel{pointer-events:none}
.skel .plate{background:linear-gradient(100deg,#141211 30%,#1d1a19 50%,#141211 70%) 0 0/300% 100%;animation:shimmer 1.4s linear infinite}
.skel .card-b i{display:block;height:12px;border-radius:6px;background:var(--graphite)}
.skel .card-b i:first-child{width:60%;height:16px}
.skel .card-b i:last-child{width:40%}
@keyframes shimmer{to{background-position:-300% 0}}
.load-err{padding:48px 24px;text-align:center;display:grid;gap:14px;justify-items:center;border:1px solid var(--line);border-radius:var(--r);background:var(--nori)}
.load-err h3{font-size:24px;text-transform:uppercase}
.load-err p{color:var(--muted);max-width:32em}
.badge.stop{background:var(--graphite);color:var(--muted);border:1px solid var(--line)}
.card.is-stop .plate svg,.card.is-stop .plate img{filter:grayscale(.85) brightness(.6)}
.stop-note{font-size:13px;color:var(--muted)}
.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.line .th{position:relative}
.warn{font-size:13px;line-height:1.4;padding:10px 12px;border-radius:12px;background:rgba(227,30,36,.12);border:1px solid rgba(227,30,36,.4);color:var(--rice)}
#toForm[disabled],#send[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- оформление заказа ---------- */
.warn ul{margin:0;padding-left:18px;display:grid;gap:4px}
.dr-f .warn{max-height:28vh;overflow-y:auto}
.note{font-size:13px;line-height:1.45;padding:10px 12px;border-radius:12px;background:var(--ink);border:1px solid var(--line);color:var(--muted)}
.note b{color:var(--rice);font-weight:600}
.form textarea{border-radius:12px;border:1px solid var(--line);background:var(--ink);color:var(--rice);font:500 15px/1.4 var(--body);padding:12px 14px;width:100%;resize:vertical}
.form textarea:focus{outline:none;border-color:var(--soy)}
.form optgroup{font-style:normal;color:var(--muted)}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.grid4 input{padding-inline:10px}
.seg{display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:14px;background:var(--ink);border:1px solid var(--line)}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{display:block;text-align:center;padding:11px 6px;border-radius:10px;color:var(--muted);font-size:14px;font-weight:600;cursor:pointer}
.seg input:checked+label{background:var(--graphite);color:var(--rice);box-shadow:inset 0 0 0 1px var(--line)}
.seg input:focus-visible+label{outline:2px solid var(--soy-hi);outline-offset:2px}
.form .chk{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.4;cursor:pointer}
.chk input{width:18px;height:18px;margin:1px 0 0;flex:none;accent-color:var(--soy)}
.promo-in{display:grid;gap:8px;padding-block:16px;border-bottom:1px solid var(--line);font-size:15px}
.promo-row{display:grid;grid-template-columns:1fr auto;gap:8px}
.promo-row input,.gift select{height:44px;border-radius:12px;border:1px solid var(--line);background:var(--ink);color:var(--rice);font:600 14px var(--mono);letter-spacing:.06em;padding-inline:12px;width:100%;min-width:0}
.promo-row input:focus,.gift select:focus{outline:none;border-color:var(--soy)}
.promo-row input[readonly]{color:var(--ok)}
.promo-row .btn{height:44px;padding-inline:16px;font-size:14px}
.promo-msg{font-size:13px;color:var(--ok);min-height:0}
.promo-msg:empty{display:none}
.promo-msg.bad{color:var(--soy-hi)}
.gift{display:grid;gap:6px;font-size:13px;color:var(--muted)}
.gift select{font-family:var(--body);letter-spacing:0}
@media (max-width:420px){.grid4{grid-template-columns:1fr 1fr}}

/* ---------- страница заказа ---------- */
.trk{padding-block:40px 64px;display:grid;gap:28px;max-width:980px}
.trk-load{color:var(--muted);padding:60px 0;text-align:center}
.trk-head{display:grid;gap:12px}
.trk-head h1{font-size:clamp(34px,5.6vw,64px);font-weight:800;text-transform:uppercase;line-height:1}
.trk-head.is-cancel h1{color:var(--soy)}
.trk-eta{font:700 20px/1.3 var(--mono);color:var(--rice)}
.trk-eta:empty{display:none}
.trk-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.trk-steps li{position:relative;display:grid;gap:6px;padding-top:18px;font-size:13px;color:var(--muted)}
.trk-steps li i{position:absolute;top:0;left:0;right:0;height:6px;border-radius:6px;background:var(--line)}
.trk-steps li.is-done i{background:var(--soy-deep)}
.trk-steps li.is-cur i{background:var(--soy);box-shadow:0 0 12px rgba(227,30,36,.6)}
.trk-steps li.is-done,.trk-steps li.is-cur{color:var(--rice)}
.trk-steps li.is-cur span{font-weight:700}
.trk-steps b{font-size:12px;color:var(--muted);font-weight:500}
.trk-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;align-items:start}
.trk-card{padding:22px;border-radius:var(--r);background:var(--nori);border:1px solid var(--line);display:grid;gap:14px}
.trk-card h5{margin:0;font:600 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.trk-items{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15px}
.trk-items li{display:flex;justify-content:space-between;gap:12px}
.trk-items small{color:var(--muted);white-space:nowrap}
.trk-items b{white-space:nowrap}
.trk-items em{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ok);margin-left:4px}
.trk-card .sum{padding-top:12px;border-top:1px solid var(--line)}
.trk-dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 16px;font-size:15px}
.trk-dl dt{color:var(--muted)}
.trk-dl dd{margin:0;overflow-wrap:anywhere}
.trk-help{font-size:14px;color:var(--muted)}
.trk-help a{color:var(--rice);font-weight:700}
.trk-note{font-size:13px;color:var(--muted)}
.trk-note:empty{display:none}
@media (max-width:760px){
  .trk{padding-top:24px}
  .trk-grid{grid-template-columns:1fr}
  .trk-steps{grid-template-columns:1fr;gap:0}
  .trk-steps li{grid-template-columns:1fr auto;padding:0 0 14px 22px}
  .trk-steps li i{top:4px;bottom:0;left:0;right:auto;width:6px;height:auto}
}

@media (max-width:1020px){
  .nav,.open{display:none}
  .promos{grid-template-columns:1fr 1fr}
  .promo-main{grid-column:1/-1}
  .ftr-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .hero-grid,.deliv-grid{grid-template-columns:1fr}
  .hero-art{justify-self:center;max-width:420px;order:-1}
  .hero{padding-top:24px}
  .steps{grid-template-columns:1fr}
  .tag-a{left:0}
}
@media (max-width:620px){
  :root{--hdr:60px}
  .logo img{height:38px}
  .phone{display:none}
  .cart-btn .lbl{display:none}
  .promos{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr 1fr 1fr}
  .fact{padding-right:12px;margin-right:12px}
  .fact b{font-size:20px}
  .ftr-grid{grid-template-columns:1fr}
  .cat-head .note{display:none}
  .mbar{position:fixed;z-index:50;left:0;right:0;bottom:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(10,9,9,.94);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
  .mbar.on{display:block}
  .mbar .btn{width:100%;justify-content:space-between}
  body.has-mbar .ftr{padding-bottom:110px}
  .toast{bottom:calc(90px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ---------- вход через Telegram ---------- */
.auth-slot:empty{display:none}
.auth-btn{display:flex;align-items:center;gap:8px;height:44px;padding-inline:14px;border-radius:999px;border:1px solid var(--line);background:var(--nori);color:var(--rice);font:600 14px/1 var(--body);white-space:nowrap;transition:border-color .2s}
.auth-btn:hover{border-color:var(--muted)}
.auth-btn svg{width:18px;height:18px;flex:none}
.auth-btn span{max-width:9em;overflow:hidden;text-overflow:ellipsis}
.auth-modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;transition:opacity .2s}
.auth-modal.on{opacity:1}
.auth-box{position:relative;width:min(440px,100%);max-height:100%;overflow-y:auto;padding:28px 24px 24px;border-radius:24px;background:var(--nori);border:1px solid var(--line);display:grid;gap:14px;justify-items:start}
.auth-box .x{position:absolute;right:14px;top:14px}
.auth-ico{width:48px;height:48px}
.auth-box h3{font-size:24px;font-weight:700;text-transform:uppercase}
.auth-body{display:grid;gap:14px;width:100%}
.auth-body p{color:var(--muted);font-size:15px}
.auth-go{width:100%;background:#2AABEE;color:#fff;box-shadow:0 10px 30px -10px rgba(42,171,238,.6)}
.auth-go:hover{background:#229ED9}
.auth-steps{margin:0;padding-left:20px;display:grid;gap:6px;font-size:14px;color:var(--rice)}
.auth-wait{display:flex;align-items:center;gap:10px}
.auth-wait::before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--soy);animation:spin .9s linear infinite;flex:none}
.auth-body .auth-note{font-size:13px}
.login-hint{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:14px;border:1px dashed var(--line);font-size:13px;line-height:1.4;color:var(--muted)}
.login-hint .btn{height:38px;padding-inline:16px;flex:none}
.addr-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.addr-chips::-webkit-scrollbar{display:none}
.addr-chips button{flex:none;display:grid;gap:2px;text-align:left;max-width:220px;padding:9px 12px;border-radius:12px;border:1px solid var(--line);background:var(--ink);color:var(--rice);font:600 13px/1.25 var(--body)}
.addr-chips button small{font-weight:400;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.addr-chips button.on{border-color:var(--soy);background:rgba(227,30,36,.1)}

/* ---------- личный кабинет ---------- */
.acc{padding-block:40px 64px;display:grid;gap:36px;max-width:1040px}
.acc h1{font-size:clamp(34px,5.6vw,60px);font-weight:800;text-transform:uppercase;line-height:1}
.acc h2{font-size:22px;font-weight:700;text-transform:uppercase}
.acc-login{display:grid;gap:18px;justify-items:start;max-width:36em;padding:32px;border-radius:var(--r);background:var(--nori);border:1px solid var(--line)}
.acc-login p{color:var(--muted)}
.acc-login .auth-note{font-size:13px}
.acc-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px}
.acc-head h1{margin-top:10px}
.acc-sub{margin-top:10px;color:var(--muted);font-size:14px}
.acc-sec{display:grid;gap:14px;align-content:start}
.acc-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.acc-order{display:grid;gap:10px;padding:18px;border-radius:var(--r);background:var(--nori);border:1px solid var(--line)}
.acc-order.is-active{border-color:rgba(227,30,36,.55)}
.acc-order-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.acc-num{font:700 18px/1 var(--mono)}
.acc-num:hover{color:var(--soy-hi)}
.acc-st{font-size:12px;font-weight:600;padding:6px 10px;border-radius:999px;background:var(--graphite);color:var(--rice);white-space:nowrap}
.acc-st.st-cancelled{color:var(--muted)}
.acc-order.is-active .acc-st{background:var(--soy);color:#fff}
.acc-meta{font-size:13px;color:var(--muted)}
.acc-meta b{color:var(--rice)}
.acc-items{font-size:14px;line-height:1.45;color:var(--rice)}
.acc-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.acc-actions .btn{height:40px;padding-inline:16px;font-size:14px}
.acc-more{justify-self:start;height:44px}
.acc-empty{padding:20px;border-radius:var(--r);border:1px dashed var(--line);color:var(--muted);font-size:14px}
.acc-empty a{color:var(--rice);text-decoration:underline}
.acc-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.acc-addrs{display:grid;gap:10px;justify-items:start}
.acc-addrs>.acc-addr,.acc-addrs>.acc-form,.acc-addrs>.acc-empty{width:100%}
.acc-addr{display:grid;gap:10px;padding:16px;border-radius:var(--r);background:var(--nori);border:1px solid var(--line)}
.acc-addr.is-def{border-color:#453c3a}
.acc-addr b{font-weight:600}
.acc-addr p{font-size:14px;color:var(--muted);margin-top:4px}
.acc-addr .acc-c{font-size:13px;font-style:italic}
.acc-tag{margin-left:8px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--soy-hi)}
.acc-addr-b{display:flex;flex-wrap:wrap;gap:14px}
.lnk{padding:0;font:600 13px/1.3 var(--body);color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.lnk:hover{color:var(--rice)}
.lnk.bad:hover,.lnk.bad[data-sure="1"]{color:var(--soy-hi)}
.acc-form{padding:18px;border-radius:var(--r);background:var(--nori);border:1px solid var(--line)}
.acc-form input:disabled{opacity:.6}
.acc-hint{font-size:12px;line-height:1.4;color:var(--muted)}
.acc-err{font-size:13px;color:var(--soy-hi)}
.acc-err:empty{display:none}
@media (max-width:780px){
  .acc-grid{grid-template-columns:1fr}
  .acc-list{grid-template-columns:1fr}
  .auth-btn span{display:none}
  .auth-btn{padding-inline:12px}
  .login-hint{flex-direction:column;align-items:stretch}
}

/* ---------- политика обработки персональных данных ---------- */
.policy{padding-block:40px 64px;display:grid;gap:22px;max-width:820px}
.policy h1{font-size:clamp(30px,4.6vw,48px);font-weight:800;text-transform:uppercase;line-height:1.05}
.policy h2{font-size:20px;font-weight:700;text-transform:uppercase;margin-bottom:10px}
.policy section{display:grid;gap:10px}
.policy p,.policy li{color:#CFC7C2;font-size:15px;line-height:1.6;max-width:68ch}
.policy b{color:var(--rice)}
.policy ul{margin:0;padding-left:20px;display:grid;gap:6px}
.policy a{color:var(--rice);text-decoration:underline;text-underline-offset:3px}
.policy-req{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:0;padding:16px 18px;border-radius:var(--r);background:var(--nori);border:1px solid var(--line);font-size:15px}
.policy-req dt{color:var(--muted)}
.policy-req dd{margin:0;color:var(--rice)}
.policy-missing{color:var(--soy-hi)!important;font-style:italic}
.policy-tbl-wrap,.policy-tbl{width:100%}
.policy-tbl{border-collapse:collapse;font-size:14px;display:block;overflow-x:auto}
.policy-tbl th,.policy-tbl td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line);color:#CFC7C2}
.policy-tbl th{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.policy-warn{max-width:68ch}
.ftr-bot a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.ftr-bot a:hover{color:var(--rice)}
.chk a,.auth-note a,.acc-login a{color:var(--rice);text-decoration:underline;text-underline-offset:3px}
.acc-danger{display:grid;gap:10px;justify-items:start;margin-top:14px;padding:16px 18px;border-radius:var(--r);border:1px dashed var(--line)}
.acc-danger p{font-size:13px;line-height:1.45;color:var(--muted)}
.acc-danger a{color:var(--rice);text-decoration:underline}
@media (max-width:620px){.policy-req{grid-template-columns:1fr}.policy-req dd{margin-bottom:8px}}