/* L.A.Ribs — компоненты, версия 2 «тёплый уголь». Копия стилей с холста, один в один. */
body{margin:0}
a{color:inherit}
.pg{--bg:#000;--s1:#141110;--s2:#1e1916;--line:rgba(246,239,228,.12);--line2:rgba(246,239,228,.3);--t:#f6efe4;--t2:#d9cfc2;--t3:#a89c8f;--red:#c10016;--addbg:#c10016;position:relative;overflow:hidden;display:flex;flex-direction:column;box-sizing:border-box;font-size:16px;line-height:1.5}
.day{--bg:#f3e8d3;--s1:#fbf4e4;--s2:#eadcc0;--line:rgba(26,20,14,.16);--line2:rgba(26,20,14,.42);--t:#17120d;--t2:#3a3128;--t3:#5e5347;--addbg:#17120d}
.slab{font-family:'Roboto Slab',serif;font-weight:900;text-transform:uppercase;letter-spacing:.02em;line-height:1.05;margin:0}
.script{font-family:Pacifico,cursive;font-weight:400;line-height:1.2}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
svg.ic{width:20px;height:20px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.hd{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 16px;position:relative;z-index:3}
.hd.dark{background:#000;color:#f6efe4}
.hd nav{display:flex;align-items:center;gap:18px;font-weight:700}
.hd nav a{text-decoration:none;min-height:44px;display:flex;align-items:center}
.cartpill{gap:8px;padding:0 14px;border-radius:999px;background:#c10016;color:#fff;box-shadow:0 8px 20px -8px rgba(255,20,48,.8)}
@keyframes flame{0%,100%{transform:scale(1,1) skewX(0);filter:drop-shadow(0 0 4px rgba(255,20,48,.7))}30%{transform:scale(.985,1.05) skewX(-1.6deg);filter:drop-shadow(0 0 12px #ff1430)}60%{transform:scale(1.015,.985) skewX(1.4deg);filter:drop-shadow(0 0 7px #ff1430)}80%{transform:scale(.99,1.035) skewX(-1deg);filter:drop-shadow(0 0 13px #ff1430)}}
.flame{height:48px;width:auto;display:block;transform-origin:50% 100%;animation:flame 2.4s ease-in-out infinite}

.btn{display:flex;min-height:54px;padding:0 24px;box-sizing:border-box;align-items:center;justify-content:center;gap:10px;background:linear-gradient(180deg,#d2001a,#b00014);color:#fff;font-weight:700;font-size:17px;font-family:inherit;text-decoration:none;border:0;border-radius:14px;cursor:pointer;box-shadow:0 12px 28px -12px rgba(255,20,48,.85),inset 0 1px 0 rgba(255,255,255,.22)}
.btn2{display:flex;min-height:54px;padding:0 24px;box-sizing:border-box;align-items:center;justify-content:center;gap:10px;background:rgba(246,239,228,.06);border:1.5px solid var(--line2);color:var(--t);font-weight:700;font-size:17px;font-family:inherit;text-decoration:none;border-radius:14px;cursor:pointer}
.btnk{display:flex;min-height:54px;padding:0 24px;box-sizing:border-box;align-items:center;justify-content:center;background:#000;color:#fff;font-weight:700;font-size:17px;text-decoration:none;border-radius:14px}
.add{width:44px;height:44px;flex-shrink:0;border-radius:50%;background:var(--addbg);color:#fff;border:0;font-size:24px;line-height:1;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 16px -8px rgba(255,20,48,.9)}
.day .add{box-shadow:none}
.plate{display:inline-flex;align-items:center;background:#f6efe4;color:#17120d;border-radius:6px;padding:3px 9px;font-size:11px;line-height:1.3;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;box-shadow:inset 0 0 0 1.5px #17120d,0 0 0 1.5px #f6efe4}
.plate.hot{background:#c10016;color:#fff;box-shadow:inset 0 0 0 1.5px #fff,0 0 0 1.5px #c10016}

.sh{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.sh .rule{flex:1;height:3px;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.sh .cnt{font-size:13px;color:var(--t3);white-space:nowrap}
.card{background:var(--s1);border:1px solid var(--line);border-radius:18px;padding:4px 16px}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.main{min-width:0}
.nm{font-weight:700;font-size:17px;line-height:1.3}
.wt{font-weight:400;font-size:13px;color:var(--t3);white-space:nowrap}
.cp{color:var(--t2);font-size:14px;line-height:1.4;margin-top:2px}
.cp3{color:var(--t3);font-size:14px;line-height:1.4;margin-top:2px}
.pr{font-family:'Roboto Slab',serif;font-weight:700;font-size:19px;white-space:nowrap}
.buy{display:flex;align-items:center;gap:12px;flex-shrink:0}
.stop{font-size:13px;color:var(--t3);border:1px solid var(--line2);border-radius:999px;padding:6px 12px;white-space:nowrap;flex-shrink:0}
.row.off .nm,.row.off .cp{color:var(--t3)}
.view{align-items:flex-start;padding:10px 0}
.view .nm{font-size:16px}
.view .vp{display:flex;align-items:baseline;gap:10px;flex-shrink:0;text-align:right}
.view .vp b{font-size:16px;min-width:46px}

.seg{display:flex;padding:4px;margin:4px 16px 0;background:var(--s1);border:1px solid var(--line);border-radius:999px}
.seg a{flex:1;min-height:44px;display:flex;align-items:center;justify-content:center;border-radius:999px;font-family:'Roboto Slab',serif;font-weight:900;text-transform:uppercase;letter-spacing:.08em;font-size:15px;text-decoration:none;color:var(--t2)}
.seg a.on{background:#c10016;color:#fff;box-shadow:0 8px 18px -8px rgba(255,20,48,.8)}
.chips{display:flex;gap:8px;overflow-x:auto}
.chip{display:flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line2);white-space:nowrap;text-decoration:none;font-weight:700;font-size:14px;color:var(--t2)}
.chip.on{background:var(--t);color:var(--bg);border-color:var(--t)}
.search{display:flex;align-items:center;gap:10px;height:50px;padding:0 16px;border-radius:14px;background:var(--s1);border:1px solid var(--line2);color:var(--t3)}
.search input{flex:1;min-width:0;height:100%;background:transparent;border:0;outline:0;color:var(--t);font-size:16px;font-family:inherit}
.cartbar{position:absolute;left:12px;right:12px;bottom:14px;z-index:4;display:flex;align-items:center;justify-content:space-between;min-height:60px;padding:0 20px;border-radius:18px;background:linear-gradient(180deg,#d2001a,#b00014);color:#fff;font-weight:700;font-size:17px;text-decoration:none;box-shadow:0 18px 36px -12px rgba(255,20,48,.8),0 0 0 4px var(--bg),inset 0 1px 0 rgba(255,255,255,.22)}
.cartbar span{display:flex;align-items:center;gap:10px}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;border-radius:50%;background:#fff;color:#c10016;font-size:14px;font-weight:700}

.f{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--t2)}
.f input,.f textarea,.f select{min-height:50px;box-sizing:border-box;width:100%;padding:12px 14px;border-radius:12px;background:var(--s1);border:1px solid var(--line2);color:var(--t);font-size:16px;font-family:inherit}
.f.err input{border-color:#ff6b78;box-shadow:0 0 0 3px rgba(255,42,60,.25)}
.f .msg{color:#ffa3ab;font-weight:700;font-size:14px}
.opt{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 14px;border-radius:12px;background:var(--s1);border:1px solid var(--line2);font-size:16px;color:var(--t)}
.opt input,.agree input{accent-color:#c10016;width:20px;height:20px;flex-shrink:0;margin:0}
.agree{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--t2)}
.qty{display:flex;align-items:center;background:var(--s2);border-radius:999px;flex-shrink:0}
.qty button{width:44px;height:44px;border-radius:50%;background:transparent;border:0;color:var(--t);font-size:20px;cursor:pointer}
.qty b{min-width:20px;text-align:center}
.qty.in{background:var(--addbg);color:#fff;box-shadow:0 8px 16px -8px rgba(255,20,48,.9)}
.qty.in button{color:#fff}
.day .qty.in{box-shadow:none}
.kv{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.kv:last-child{border-bottom:0}
.kv dt{color:var(--t3)}.kv dd{margin:0;font-weight:700;text-align:right}
.note{color:var(--t3);font-size:14px;margin:0}
.back{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;text-decoration:none;color:var(--t2)}

@keyframes flick{0%,91%,95%,98%,100%{opacity:1}93%{opacity:.7}96.5%{opacity:.86}}
.neon{font-family:Pacifico,cursive;font-weight:400;color:#fff4f4;text-shadow:0 0 3px #fff,0 0 12px #ff5a68,0 0 28px #ff1430,0 0 64px #c10016;animation:flick 7s linear infinite;margin:0}
.sign{border:2px solid #ffc2c8;border-radius:24px;text-align:center;background:rgba(0,0,0,.4);box-shadow:0 0 10px #ff2a3c,0 0 36px rgba(255,20,48,.55),inset 0 0 10px #ff2a3c,inset 0 0 36px rgba(255,20,48,.3)}
.brick{background-color:#18110f;background-image:conic-gradient(at 2px 24px,transparent 75%,#0a0706 0),conic-gradient(at 2px 24px,transparent 75%,#0a0706 0),linear-gradient(#0a0706 2px,transparent 2px);background-size:56px 48px,56px 48px,56px 24px;background-position:0 0,28px 24px,0 0}
.perf{background-color:#0a0808;background-image:radial-gradient(circle,#a80014 0 1.8px,transparent 2.4px);background-size:14px 14px}
.lay{position:absolute;inset:0;pointer-events:none}
.vig{background:radial-gradient(130% 80% at 50% 28%,transparent 28%,rgba(0,0,0,.9) 100%)}
.ember{background:radial-gradient(85% 46% at 50% 100%,rgba(255,84,24,.5),rgba(193,0,22,.22) 48%,transparent 74%)}
.fade{background:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 100%),radial-gradient(70% 70% at 22% 10%,rgba(255,20,48,.3),transparent 70%)}
.rel{position:relative;z-index:1}
@keyframes rise{0%{transform:translate(0,0) scale(1);opacity:0}12%{opacity:1}100%{transform:translate(26px,-340px) scale(.4);opacity:0}}
.spark{position:absolute;bottom:0;width:4px;height:4px;border-radius:50%;background:#ffc089;box-shadow:0 0 8px 1px #ff5a1e;opacity:0;animation:rise 6s linear infinite}
@keyframes mq{to{transform:translateX(-50%)}}
.mq{overflow:hidden;background:#c10016;color:#fff;padding:12px 0;transform:rotate(-2deg) scale(1.05);position:relative;z-index:2;box-shadow:0 14px 34px -14px rgba(255,20,48,.7)}
.mq div{display:flex;align-items:center;gap:22px;width:max-content;animation:mq 28s linear infinite;font-family:'Roboto Slab',serif;font-weight:900;text-transform:uppercase;letter-spacing:.1em;font-size:15px;white-space:nowrap}
.mq svg{width:11px;height:15px;fill:currentColor;flex-shrink:0}
.steel{height:10px;flex-shrink:0;background-color:#16181a;background-image:radial-gradient(circle,#55585c 0 1.6px,transparent 2.2px);background-size:28px 10px}
.vinyl{border-radius:50%;flex-shrink:0;background:conic-gradient(from 30deg,transparent 0 38deg,rgba(255,255,255,.13) 52deg,transparent 68deg 208deg,rgba(255,255,255,.1) 224deg,transparent 240deg),radial-gradient(circle,#000 0 4%,#c10016 4.5% 27%,transparent 27.5%),repeating-radial-gradient(circle,#070606 0 3px,#221d1b 3px 4px);box-shadow:0 20px 40px -18px #000}
.ph{display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;box-sizing:border-box;border-radius:20px;border:1px dashed var(--line2);color:var(--t2);font-size:14px;background:repeating-linear-gradient(135deg,#131010 0 12px,#1a1614 12px 24px)}
.fc{flex:0 0 228px;box-sizing:border-box;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:8px;padding:18px;border-radius:20px;border:1px solid var(--line);background:radial-gradient(90% 60% at 100% 100%,rgba(255,60,24,.3),transparent 70%),linear-gradient(180deg,#1e1916,#141110)}
.fc .no{font-family:'Roboto Slab',serif;font-weight:900;font-size:13px;letter-spacing:.12em;color:var(--t3)}
.fc .ft{margin-top:auto;padding-top:14px;display:flex;align-items:center;justify-content:space-between}
.cta{position:relative;overflow:hidden;border-radius:24px;background-color:#c10016;background-image:radial-gradient(circle,rgba(0,0,0,.2) 0 2px,transparent 2.6px);background-size:14px 14px;color:#fff}
.info{display:flex;align-items:center;gap:8px;color:var(--t2);font-size:14px}

.tl{list-style:none;margin:0;padding:0}
.tl li{display:flex;gap:16px;position:relative;padding-bottom:22px}
.tl li::before{content:"";position:absolute;left:11px;top:28px;bottom:2px;width:2px;border-radius:2px;background:var(--line2)}
.tl li.done::before{background:var(--t)}
.tl li:last-child{padding-bottom:0}.tl li:last-child::before{display:none}
.dot{width:24px;height:24px;border-radius:50%;flex-shrink:0;box-sizing:border-box;display:flex;align-items:center;justify-content:center;margin-top:1px}
.dot svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.done .dot{background:var(--t);color:#000}
@keyframes pulse{0%,100%{box-shadow:0 0 0 5px rgba(255,42,60,.25),0 0 16px #ff1430}50%{box-shadow:0 0 0 10px rgba(255,42,60,.08),0 0 28px #ff1430}}
.now .dot{background:#c10016;animation:pulse 2s ease-in-out infinite}
.next .dot{border:2px solid #6d635a}
.cancel .dot{border:2px solid var(--t);color:var(--t)}
.tt{font-size:18px;font-weight:700;line-height:1.3}
.next .tt{font-weight:400;color:var(--t3)}
.td{color:var(--t3);font-size:14px}
@keyframes spin{to{transform:rotate(360deg)}}
.disc{position:absolute;pointer-events:none;border-radius:50%}
.disc .vinyl{position:absolute;inset:0;background:radial-gradient(circle,#000 0 3%,#c10016 3.5% 26%,#8a0010 26.5% 27%,transparent 27.5%),repeating-radial-gradient(circle,#070606 0 3px,#221d1b 3px 4px);animation:spin 3.6s linear infinite}
.disc .vinyl img{position:absolute;left:50%;top:50%;width:20%;height:auto;transform:translate(-50%,-62%)}
.disc .sheen{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 30deg,transparent 0 38deg,rgba(255,255,255,.14) 52deg,transparent 68deg 208deg,rgba(255,255,255,.1) 224deg,transparent 240deg)}
.sun{border-radius:50%;background:linear-gradient(180deg,#ff3b4c,#c10016 55%,#7a000e);-webkit-mask-image:repeating-linear-gradient(180deg,#000 0 14px,transparent 14px 20px);mask-image:repeating-linear-gradient(180deg,#000 0 14px,transparent 14px 20px)}
@media (prefers-reduced-motion:reduce){.neon,.flame,.spark,.mq div,.now .dot,.disc .vinyl{animation:none!important}}