/* Раскладка сайта поверх lar.css (компоненты из макетов). Телефон — по умолчанию,
   компьютер — от 900 px. Здесь только то, чего нет в макетах: сетки, фиксированная
   корзина, состояния ошибок и служебные классы. */
html{background:#000}
.pg{overflow:visible;overflow-x:clip;min-height:100vh;font-family:Arimo,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--t)}
.pg main{flex:1;display:flex;flex-direction:column}
.wrap{width:100%;max-width:1280px;margin:0 auto;box-sizing:border-box}
.px{padding-left:16px;padding-right:16px}
[hidden]{display:none!important}
.hd .logo-wide{display:none;width:240px;height:auto}
/* Шапка: логотип слева, разделы «таблеткой» по центру, корзина справа.
   Цвета «таблетки» заданы явно: в дневном меню шапка остаётся чёрной. */
.hd{display:grid;grid-template-columns:1fr auto 1fr;gap:10px}
.hd > a:first-child{justify-self:start}
.hd nav.navpill{justify-self:center;display:flex;align-items:center;gap:2px;padding:4px;border-radius:999px;background:#141110;border:1px solid rgba(246,239,228,.3);box-shadow:0 10px 26px -14px rgba(0,0,0,.9)}
.hd nav.navpill a{min-height:44px;padding:0 10px;border-radius:999px;color:#f6efe4;font-size:14px;font-weight:700;letter-spacing:.01em;transition:background .15s,color .15s}
.hd nav.navpill a:hover{background:rgba(246,239,228,.12)}
.hd nav.navpill a.on{background:#f6efe4;color:#17120d}
.hd > .cartpill{justify-self:end;display:flex;align-items:center;min-height:44px;text-decoration:none;font-weight:700}
.hd > .cartpill.on{box-shadow:0 0 0 2px #f6efe4,0 8px 20px -8px rgba(255,20,48,.8)}
.pg .card .row:last-child{border-bottom:0}
.day .card{background:transparent;border:0;border-radius:0;padding:0}
.day .card .row{border-bottom-color:var(--line)}
.cartbar{position:fixed;left:12px;right:12px;bottom:14px;max-width:560px;margin:0 auto}
.f .msg,.agree-wrap .msg,fieldset .msg{color:#ffa3ab;font-weight:700;font-size:14px}
.day .f .msg{color:#a3000f}
.f.err select,.f.err textarea{border-color:#ff6b78;box-shadow:0 0 0 3px rgba(255,42,60,.25)}
.agree a,.note a{color:inherit}
.f select,.vsel{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a89c8f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
.f select{min-height:50px;line-height:1.2}
.vsel{margin-top:8px;min-height:44px;padding:8px 12px;border-radius:10px;background:var(--s2);border:1px solid var(--line2);color:var(--t);font:inherit;font-size:14px;max-width:100%}
.alert{border-radius:14px;padding:12px 16px;background:rgba(193,0,22,.18);border:1px solid #ff6b78;color:var(--t);font-weight:700}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn:disabled{opacity:.5;cursor:not-allowed}
.fc-row{display:flex;gap:12px;overflow-x:auto;padding:0 16px 6px}
.hero{position:relative;padding:20px 16px 56px;display:flex;flex-direction:column;gap:24px}
.split{display:flex;flex-direction:column}
.side-nav{display:none}
/* Липкая полоса разделов. Родитель .pg не должен обрезать прокрутку (overflow:hidden
   ломает sticky), поэтому выше у .pg overflow-x:clip вместо hidden. */
.chipbar{position:sticky;top:0;z-index:5;background:var(--bg);padding:10px 0;border-bottom:1px solid var(--line);margin-top:12px}
.chipbar .chips{padding:0 16px;scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.chipbar .chips::-webkit-scrollbar{display:none}
.chipbar .chip{scroll-snap-align:start;background:var(--bg)}
.chip.on{background:var(--t);color:var(--bg);border-color:var(--t)}
.cat{scroll-margin-top:84px}
/* Меню плотнее: меньше воздуха в строках, мельче кнопки — больше блюд на экране. */
.sections .sh{margin-bottom:6px;gap:10px}
.sections .sh h2{font-size:22px!important}
.sections .card{padding:2px 14px;border-radius:16px}
.day .sections .card{padding:0}
.sections .row{padding:8px 0;gap:10px}
.sections .nm{font-size:15px;line-height:1.25}
.sections .wt{font-size:12px}
.sections .cp,.sections .cp3{font-size:13px;line-height:1.3;margin-top:1px}
.sections .pr{font-size:16px}
.sections .buy{gap:8px}
.sections .add{width:38px;height:38px;font-size:22px}
.sections .qty.in button{width:36px;height:38px;font-size:18px}
.sections .stop{font-size:12px;padding:4px 10px}
.sections .plate{font-size:10px;padding:2px 7px}
.sections .row .main > div[style*="margin-top: 8px"]{margin-top:4px!important}
.sections .vsel{margin-top:6px;min-height:40px;padding:6px 32px 6px 10px;font-size:16px}
.sections .view{padding:7px 0}
.sections .view .nm{font-size:15px}
.sections{display:flex;flex-direction:column;gap:28px}
.checkout{display:flex;flex-direction:column;gap:24px}
.disc.book{width:250px;height:250px;right:-95px;top:18px}
.duo{display:flex;flex-direction:column;gap:16px;padding-top:8px}
/* Узкие телефоны: «Доставка · Бронирование» должны влезть рядом с логотипом и корзиной. */
/* Телефон: шапка в два этажа — логотип и «Корзина» сверху, разделы ниже во всю ширину. */
.hd{grid-template-areas:"logo cart" "nav nav";grid-template-columns:1fr auto;row-gap:10px}
.hd > a:first-child{grid-area:logo}
.hd nav.navpill{grid-area:nav;justify-self:stretch}
.hd nav.navpill a{flex:1;justify-content:center;font-size:15px}
.hd > .cartpill{grid-area:cart;gap:8px;padding:0 16px}
.hd > .cartpill .badge{min-width:28px;height:28px;font-size:14px;border-radius:999px;padding:0 9px;box-sizing:border-box;white-space:nowrap;margin-right:-10px}
.hd > .cartpill .badge[hidden]{display:none}
@media (max-width:330px){.hd nav.navpill a{font-size:14px;padding:0 6px}}
@media (min-width:900px){
  .px{padding-left:64px;padding-right:64px}
  .hd{padding:18px 64px}
  .hd .logo-wide{display:block}
  .hd .logo-mark{display:none}
  .hd{grid-template-areas:"logo nav cart";grid-template-columns:1fr auto 1fr}
  .hd nav.navpill{justify-self:center}
  .hd nav.navpill a{flex:none}
  .hd nav.navpill{gap:4px;padding:5px}
  .hd nav.navpill a{min-height:44px;padding:0 24px;font-size:17px}
  .hero{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;align-items:center;padding:72px 64px 96px}
  .hero h1{font-size:clamp(54px,6.4vw,96px)!important}
  .hero .neon2{font-size:clamp(33px,4vw,58px)}
  .hero .sign{order:2;padding:44px 24px 56px!important}
  .fc-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible;padding:0 64px}
  .fc-row .fc{min-height:250px}
  .split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .split > *{padding:64px!important}
  .menu-grid{display:grid;grid-template-columns:170px minmax(0,1fr);gap:40px;align-items:start}
  .side-nav{display:flex;flex-direction:column;gap:4px;position:sticky;top:16px}
  .side-nav .chip{border:0;justify-content:flex-start}
  .chipbar{display:none}
  .cat{scroll-margin-top:16px}
  .menu-chips{display:none!important}
  .menu-ctrl{flex-direction:row!important;flex-wrap:wrap;align-items:center}
  .menu-ctrl .search{width:320px}
  /* Разделы ложатся колонками без провалов, как в печатном меню. */
  .sections{display:block;column-count:2;column-gap:28px}
  .sections .cat{break-inside:avoid;margin-bottom:22px}
  .sections > .note{column-span:all}
  .checkout{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:start}
  .checkout .cart-col{order:2;position:sticky;top:16px}
  .disc.book{width:560px;height:560px;right:-170px;top:50%;margin-top:-280px}
  .duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch}
}
@media (min-width:1500px){.sections{column-count:3}}
@media (prefers-reduced-motion:reduce){.mq div{transform:none}}
/* Знак на пластинке брони вдвое меньше, чем в макете (просьба владельца 11.11). */
.disc.book .vinyl img{width:10%}

/* Реквизиты в подвале и страницы документов */
.legal{display:flex;flex-direction:column;gap:6px;color:var(--t3);font-size:13px;line-height:1.45;max-width:420px}
.legal a{color:var(--t2)}
.doc{max-width:760px;padding-top:28px;padding-bottom:48px;display:flex;flex-direction:column;gap:12px}
.doc h1{font-size:34px;margin-bottom:8px}
.doc h2{font-size:20px;margin-top:14px}
.doc p,.doc ul{margin:0;color:var(--t2)}
.doc ul{padding-left:20px;display:flex;flex-direction:column;gap:4px}
.doc a{color:var(--t)}
/* Видимый фокус для клавиатуры */
:focus-visible{outline:2px solid #ffc2c8;outline-offset:2px}
.day :focus-visible{outline-color:#17120d}
.day .hd :focus-visible,.day .cartbar:focus-visible{outline-color:#ffc2c8}
.search:focus-within{border-color:var(--t);box-shadow:0 0 0 2px var(--line2)}
/* Поле «Гостей»: без системных стрелок Safari/Chrome — число вводят с клавиатуры. */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

/* Полоса разделов: при «прилипании» к краю первый чип не съедает отступ. */
.chipbar .chips{scroll-padding-left:16px;scroll-padding-right:16px}
/* Мелкие кнопки меню: зона нажатия 48 px при тех же 38 px на вид. */
.sections .add,.sections .qty.in button{position:relative}
.sections .add::after,.sections .qty.in button::after{content:"";position:absolute;inset:-5px}
/* Ссылки в таблицах «ключ — значение» и в подвале — цветом текста, с подчёркиванием. */
.kv dd a{color:inherit}
.card a.info{color:var(--t2)}
/* Ошибка у галочки согласия */
.agree-wrap.err .agree{outline:2px solid #ff6b78;outline-offset:6px;border-radius:10px}
.agree-wrap .msg{display:block;margin-top:10px}
/* Системные элементы (календарь, списки) — в цвет темы. */
.pg{color-scheme:dark}
.pg.day{color-scheme:light}
.pg.day .hd{color-scheme:dark}
/* Фокус с клавиатуры не прячется под липкой полосой разделов и нижней корзиной. */
html{scroll-padding-top:84px;scroll-padding-bottom:96px}
/* Ссылки в подвале: зона нажатия по высоте пальца. */
/* Отклик на нажатие */
.btn:active,.btn2:active,.btnk:active,.add:active,.chip:active,.cartbar:active{transform:translateY(1px);filter:brightness(.92)}
@media (prefers-reduced-motion:reduce){.btn:active,.btn2:active,.btnk:active,.add:active,.chip:active,.cartbar:active{transform:none}}
/* «Убрать» у позиции, которую нельзя заказать */
#cart-lines .chip{background:transparent;color:var(--t);cursor:pointer;font-family:inherit}
#cart-lines .row.off .main{opacity:.75}

/* ---------- Неоновая вывеска на главной ----------
   Три слоя текста: .off — погашенная стеклянная трубка, .glow — ореол, .core — сердцевина.
   Мигает только свет, поэтому в момент «провала» видна сама трубка. Рамка — вторая трубка. */
.neon2{display:grid;margin:0;font-family:Pacifico,cursive;font-weight:400;font-size:33px;line-height:1.3}
.neon2 .tube{grid-area:1/1}
.neon2 .off{color:#48191e;text-shadow:0 -1px 0 rgba(255,255,255,.14),0 2px 4px rgba(0,0,0,.75)}
.neon2 .glow{color:transparent;
  text-shadow:0 0 6px #ff8f99,0 0 12px #ff4658,0 0 22px #ff1430,0 0 40px #e60019,0 0 72px rgba(214,0,24,.85),0 0 120px rgba(193,0,22,.55);
  animation:neon-main 11s linear infinite}
.neon2 .core{color:#fffdfd;text-shadow:0 0 1px #fff,0 0 3px #fff,0 0 6px #ffc9ce;animation:neon-main 11s linear infinite}
.neon2 .flk{animation:neon-word 7.3s linear infinite}
/* Трубка-рамка: светлая сердцевина, ореол наружу и внутрь, отсвет на кирпиче вокруг. */
.neon-sign{border:3px solid #ffe3e5;border-radius:26px;background:rgba(8,3,3,.55);
  box-shadow:0 0 2px #fff,0 0 8px #ff6b78,0 0 18px #ff1430,0 0 42px rgba(255,20,48,.65),0 0 90px rgba(193,0,22,.45),
    inset 0 0 2px #fff,inset 0 0 8px #ff6b78,inset 0 0 18px #ff1430,inset 0 0 44px rgba(255,20,48,.35);
  animation:neon-frame 11s linear infinite}
.neon-sign::before{content:"";position:absolute;inset:-56px -34px;z-index:-1;border-radius:90px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,36,64,.34),rgba(255,36,64,.12) 55%,transparent 78%);filter:blur(10px);
  animation:neon-wall 11s linear infinite}
/* Крепления трубки к стене: четыре тёмные скобы по рамке. */
.neon-sign::after{content:"";position:absolute;inset:-5px;border-radius:28px;pointer-events:none;
  background:
    linear-gradient(#1a1514,#1a1514) 18% 0/10px 7px no-repeat,
    linear-gradient(#1a1514,#1a1514) 82% 0/10px 7px no-repeat,
    linear-gradient(#1a1514,#1a1514) 18% 100%/10px 7px no-repeat,
    linear-gradient(#1a1514,#1a1514) 82% 100%/10px 7px no-repeat}
/* Свет почти ровный (еле заметное «дыхание»), раз в цикл — короткая серия провалов, как у старого трансформатора. */
@keyframes neon-main{
  0%,18%,40%,61.9%,66.2%,88.9%,91.2%,100%{opacity:1}
  9%,30%,52%,78%{opacity:.955}
  62.4%{opacity:.38} 62.9%{opacity:.96} 63.6%{opacity:.52} 64.1%{opacity:1} 65.3%{opacity:.72} 65.8%{opacity:.98}
  89.6%{opacity:.8} 90.3%{opacity:.97}}
@keyframes neon-word{
  0%,23.9%,26.4%,71.9%,73.6%,100%{opacity:1}
  24.3%{opacity:.18} 24.8%{opacity:.9} 25.4%{opacity:.3} 26%{opacity:.95}
  72.4%{opacity:.45} 73%{opacity:.92}}
@keyframes neon-frame{
  0%,18%,40%,61.9%,66.2%,100%{filter:brightness(1)}
  9%,30%,52%,78%{filter:brightness(.965)}
  62.4%{filter:brightness(.72)} 62.9%{filter:brightness(1)} 63.6%{filter:brightness(.8)} 64.1%{filter:brightness(1)} 65.3%{filter:brightness(.9)}}
@keyframes neon-wall{
  0%,18%,40%,61.9%,66.2%,100%{opacity:1}
  9%,30%,52%,78%{opacity:.93}
  62.4%{opacity:.5} 62.9%{opacity:1} 63.6%{opacity:.62} 64.1%{opacity:1} 65.3%{opacity:.8}}
@media (prefers-reduced-motion:reduce){.neon2 .glow,.neon2 .core,.neon2 .flk,.neon-sign,.neon-sign::before{animation:none!important}}

/* ---------- Подвал: компактный, в четыре строки ---------- */
.foot{padding:14px 16px 18px;display:grid;gap:8px;font-size:14px;color:var(--t2)}
.ft-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ft-logo{display:flex;min-height:44px;align-items:center}
.ft-logo img{width:138px;height:auto;display:block}
.ft-social{display:flex;gap:8px}
.ft-ic{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--t);
  border:1px solid var(--line2);background:rgba(246,239,228,.05);text-decoration:none;transition:background .15s,border-color .15s}
.ft-ic:hover{background:#c10016;border-color:#c10016;color:#fff}
.ft-info{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 16px;padding:6px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ft-info > *{display:inline-flex;align-items:center;gap:7px;min-height:30px;color:var(--t2);text-decoration:none;white-space:nowrap}
.ft-hours{flex-basis:100%}
.ft-info a:hover,.ft-nav a:hover{color:var(--t);text-decoration:underline}
.ft-info svg.ic{width:16px;height:16px;color:var(--t3)}
.ft-bottom{display:grid;gap:2px}
.ft-nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 14px;font-size:13px}
.ft-nav a{display:inline-flex;align-items:center;min-height:32px;color:var(--t2);text-decoration:none;white-space:nowrap}
.ft-legal{margin:0;font-size:11.5px;line-height:1.4;color:var(--t3)}
.day .ft-ic{background:rgba(26,20,14,.04)}
.day .ft-ic:hover{color:#fff}
@media (max-width:359px){.ft-nav{font-size:12px;gap:0 8px}.ft-info{font-size:13px}}
@media (min-width:900px){
  .foot{padding:18px 64px 20px;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px 28px}
  .ft-top{display:contents}
  .ft-logo img{width:160px}
  .ft-social{grid-column:3;grid-row:1}
  .ft-info{grid-column:2;grid-row:1;border:0;padding:0;justify-content:center;gap:0 28px}
  .ft-hours{flex-basis:auto;order:-1}
  .ft-info a:first-child{order:-2}
  .ft-bottom{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid var(--line);padding-top:8px}
  .ft-nav{justify-content:flex-start;gap:0 22px}
  .ft-legal{text-align:right}
}
