:root{
  --ink:#120F0E;
  --charcoal:#1D1815;
  --charcoal-2:#241E1A;
  --chili:#FF4438;
  --mango:#FFB23E;
  --cream:#F7F2E9;
  --smoke:#B8AFA6;
  --sage:#92B27C;
  --line: rgba(247,242,233,0.12);
  --app-height: 100vh;
}

*{box-sizing:border-box; -webkit-tap-highlight-color: transparent; user-select:none; -webkit-user-select:none;}
html,body{height:100%; overscroll-behavior:none;} /* overscroll-behavior-x:none тут — это то, что гасит жест "смахнуть от края = назад/закрыть сайт" на Android-браузерах */
body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:'Space Grotesk', sans-serif;
  overflow:hidden;
  overscroll-behavior:none;
}

.app{
  position:relative;
  max-width:480px;
  height:var(--app-height);
  margin:0 auto;
  background:var(--ink);
  overflow:hidden;
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
}

#customerView{ height:100%; position:relative; }

/* ---------- TOP PILLS ---------- */
.topbar{
  position:absolute; top:0; left:0; right:0; z-index:30;
  padding:26px 14px 46px;
  background:linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,0));
  pointer-events:none;
}
.pills{
  display:flex; gap:8px; overflow-x:auto; pointer-events:auto;
  scrollbar-width:none; padding-bottom:2px;
}
.pills::-webkit-scrollbar{ display:none; }
.pill{
  flex:none;
  font-family:'Space Grotesk'; font-weight:600; font-size:13.5px;
  color:var(--smoke);
  background:rgba(29,24,21,.7);
  border:1px solid var(--line);
  padding:9px 16px;
  border-radius:100px;
  cursor:pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  white-space:nowrap;
  transition:.2s;
}
.pill.active{
  color:var(--ink);
  background:var(--cream);
  border-color:var(--cream);
}

/* ---------- FEED ---------- */
.feed{
  height:100%;
  overflow-y:auto;
  scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain; /* и по X тоже — иначе горизонтальный свайп категорий на краю трактуется браузером как "назад" */
  scrollbar-width:none;
}
.feed::-webkit-scrollbar{ display:none; }
/* Safari < 15 (в т.ч. iOS 12) не понимает scroll-snap-stop:always, поэтому при
   резком свайпе может "проскочить" сразу через несколько карточек. Фикс:
   для таких браузеров (см. JS-детект ниже) отключаем инерцию скролла — тогда
   палец жёстко ведёт прокрутку 1:1, а при отпускании native scroll-snap-type
   (он поддерживается всюду) точно доводит до ближайшей карточки. На
   современных браузерах, где scroll-snap-stop работает, этот класс не
   добавляется и ничего не меняется. */
.feed.no-native-snap-stop{
  -webkit-overflow-scrolling:auto;
}

.card{
  position:relative;
  height:100%;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  touch-action:pan-y;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}

.vs-bg{
  position:absolute; inset:-10%;
  animation: kenburns 9s ease-in-out infinite alternate;
}
@keyframes kenburns{
  0%{ transform:scale(1) translate(0,0); }
  100%{ transform:scale(1.14) translate(-1.5%, -1.5%); }
}
.vs-glow{
  position:absolute; inset:0;
  mix-blend-mode:screen;
  opacity:.85;
  animation: pulse 5.5s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ opacity:.55; }
  50%{ opacity:.95; }
}
.vs-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(18,15,14,.15) 0%, rgba(18,15,14,.15) 45%, rgba(18,15,14,.92) 100%);
}
.steam{
  position:absolute; bottom:44%; border-radius:50%;
  background:rgba(255,255,255,.5);
  filter:blur(4px);
  animation: rise 3.2s ease-in infinite;
}
@keyframes rise{
  0%{ transform:translateY(0) scale(.4); opacity:0; }
  20%{ opacity:.55; }
  100%{ transform:translateY(-90px) scale(1.1); opacity:0; }
}
.dish-emoji-big{
  position:absolute; left:50%; top:38%;
  transform:translate(-50%,-50%);
  font-size:120px;
  line-height:1;
  z-index:1;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.5));
  animation: bob 4s ease-in-out infinite;
}
@keyframes bob{
  0%,100%{ transform:translate(-50%,-50%) translateY(0) rotate(-2deg); }
  50%{ transform:translate(-50%,-50%) translateY(-10px) rotate(2deg); }
}
/* Обёртка фото/видео блюда: показываем ВЕСЬ кадр без обрезки (contain),
   а пустые поля по бокам/сверху-снизу (если пропорции кадра не совпадают
   с экраном) заполняем размытой увеличенной копией того же изображения —
   вместо чёрных полос получаются мягкие цветные подтёки в тон фото. */
.dish-media-wrap{
  position:absolute; inset:0;
  z-index:1;
  overflow:hidden;
  background:rgba(0,0,0,.15);
}
.dish-media-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; /* временная заглушка, пока canvas ещё не подъехал — обычный блюр всей картинки */
  filter:blur(85px) saturate(1.35) brightness(.65);
  animation: kenburns 9s ease-in-out infinite alternate;
}
.dish-media-bg.edge-blur-ready{
  object-fit:fill; /* canvas уже подогнан ровно под контейнер — тянуть/обрезать не нужно */
  filter:none;
}
.dish-media-fg{
  position:relative;
  z-index:1;
  display:block;
  width:100%; height:100%;
  object-fit:contain;
  /* та же анимация, тот же keyframes, та же длительность и timing-function,
     что и у .dish-media-bg — при одновременном старте (оба слоя рождаются
     в DOM в один момент, при рендере карточки) браузер держит их идеально
     синхронно, поэтому картинка и размытые края "дышат" как одно целое,
     а не порознь */
  animation: kenburns 9s ease-in-out infinite alternate;
}
/* right action rail */
.rail{
  position:absolute; right:12px; bottom:100px; z-index:9; /* выше .meta (z-index:5), иначе растущий padding-bottom .meta перекрывает клики по кнопке "Инфо" */
  display:flex; flex-direction:column; align-items:center; gap:18px;
}
.rail-btn{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background:none; border:none; cursor:pointer; color:var(--cream);
}
.rail-icon{
  width:50px;height:50px;border-radius:50%;
  background:rgba(29,24,21,.55);
  border:1px solid rgba(247,242,233,.18);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  font-size:23px;
  transition:transform .15s ease, background .2s ease, border-color .2s ease;
}
.rail-btn:active .rail-icon{ transform:scale(.88); }
.rail-count{ font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--smoke); }

/* bottom meta */
.meta{
  position:relative; z-index:5;
  width:100%;
  padding:0 78px 16px 16px;
  pointer-events:none; /* тут только текст, без этого растущий padding-bottom перехватывает клики по .rail поверх него */
}
/* виньетка: тёмное затухающее пятно точно под текстом, а не через весь низ —
   в центре максимально тёмно и размыто, к краям по пикселям сходит на нет
   через mask-image, так что дальше пары десятков пикселей видео/фото снова
   чистое. Включена только там, где под текстом настоящее фото/видео —
   на цветных заглушках хватает обычного .vs-scrim. */
.card.has-media .meta::before{
  content:'';
  position:absolute;
  inset:-46px -46px -16px -16px;
  background:radial-gradient(ellipse 100% 100% at 8% 100%, rgba(6,5,4,.97) 0%, rgba(6,5,4,.9) 30%, rgba(6,5,4,.55) 55%, rgba(6,5,4,0) 78%);
  -webkit-mask-image:radial-gradient(ellipse 100% 100% at 8% 100%, #000 0%, #000 42%, transparent 78%);
  mask-image:radial-gradient(ellipse 100% 100% at 8% 100%, #000 0%, #000 42%, transparent 78%);
  backdrop-filter:blur(16px) saturate(120%);
  -webkit-backdrop-filter:blur(16px) saturate(120%);
  z-index:-1;
  pointer-events:none;
}
.tags{ display:flex; gap:6px; margin-bottom:7px; flex-wrap:wrap; }
.tag{
  font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:.04em;
  padding:4px 9px; border-radius:100px;
  background:rgba(247,242,233,.1);
  border:1px solid rgba(247,242,233,.2);
}
.card.has-media .tag{
  background:rgba(20,16,14,.5);
  border-color:rgba(247,242,233,.26);
}
.dish-name{
  font-family:'Bebas Neue'; font-size:27px; line-height:1.04;
  letter-spacing:.01em; margin:0 0 4px;
  text-shadow:0 1px 3px rgba(0,0,0,.9), 0 3px 14px rgba(0,0,0,.75);
}
.dish-desc{
  font-size:12.5px; color:var(--smoke); line-height:1.4; margin:0 0 8px;
  max-width:82%;
  text-shadow:0 1px 3px rgba(0,0,0,.9), 0 2px 10px rgba(0,0,0,.7);
}
.dish-price{
  font-family:'JetBrains Mono', monospace; font-weight:600; font-size:15.5px; color:var(--mango);
  text-shadow:0 1px 3px rgba(0,0,0,.9), 0 2px 10px rgba(0,0,0,.7);
}
.dish-price .abv{
  font-size:12px; color:var(--chili); font-weight:400; margin-left:6px;
}
.dish-price .weight{
  font-size:12px; color:var(--smoke); font-weight:400; margin-left:6px;
}

/* ---------- SUBCATEGORY PILLS (второй ряд под обычными категориями) ---------- */
.subpills-bar{
  margin-top:8px;
  pointer-events:none;
  display:none;
}
.subpills-bar.show{ display:block; }
.subpills{
  display:flex; gap:8px; overflow-x:auto; pointer-events:auto;
  scrollbar-width:none; padding-bottom:2px;
}
.subpills::-webkit-scrollbar{ display:none; }
.subpill{
  flex:none;
  font-family:'JetBrains Mono', monospace; font-weight:600; font-size:11.5px; letter-spacing:.02em;
  color:var(--smoke);
  background:rgba(29,24,21,.78);
  border:1px solid var(--line);
  padding:8px 14px;
  border-radius:100px;
  cursor:pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  white-space:nowrap;
  transition:.2s;
}
.subpill.active{
  color:var(--ink);
  background:var(--mango);
  border-color:var(--mango);
}

/* ---------- TEXT CATEGORY / SUBCATEGORY (минималистичный список пунктов) ---------- */
.text-card{
  flex-direction:column;
  align-items:stretch;
  background:linear-gradient(180deg, #17130F 0%, #120F0E 100%);
}
.text-list-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  /* низ — минимальный технический отступ (safe-area), не "запас про запас":
     если после списка есть ещё слайд в ленте, нужное пространство под подсказку
     "листайте вниз" добавляет сам .scroll-more-hint своим padding; если это
     последний слайд ленты — добавлять тут больше нечего. */
  padding:128px 18px calc(20px + env(safe-area-inset-bottom, 0px));
}
.text-list-scroll::-webkit-scrollbar{ display:none; }
/* Подсказка "листайте дальше" — показывается только когда после текущего
   текстового слайда в ленте есть ещё контент (см. textGroupHTML/renderFeed).
   Минималистичная стрелка — два штриха (полилиния), без заливки, как и
   шеврон в staff-панели. */
.scroll-more-hint{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:22px 0 calc(28px + env(safe-area-inset-bottom, 0px));
  color:var(--smoke);
  pointer-events:none;
}
.scroll-more-hint-label{
  font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
}
.scroll-more-hint svg{
  width:20px; height:12px;
  animation: scrollHintBounce 1.6s ease-in-out infinite;
}
@keyframes scrollHintBounce{
  0%,100%{ transform:translateY(0); opacity:.5; }
  50%{ transform:translateY(5px); opacity:1; }
}
.list-item{
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  padding:15px 0;
  border-bottom:1px solid var(--line);
}
.list-item:last-child{ border-bottom:none; }
.list-item-main{ flex:1; min-width:0; }
.list-item-name-row{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.list-item-name{
  font-family:'Space Grotesk'; font-weight:700; font-size:15.5px; color:var(--cream);
}
.list-item-abv{
  font-family:'JetBrains Mono', monospace; font-size:10px; color:var(--chili);
  border:1px solid rgba(255,68,56,.4); border-radius:100px; padding:2px 7px;
  white-space:nowrap;
}
.list-item-desc{
  font-size:12.5px; color:var(--smoke); line-height:1.4; margin-top:4px;
}
.list-item-right{
  flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:6px;
}
.list-item-price{
  font-family:'JetBrains Mono', monospace; font-weight:600; font-size:14.5px; color:var(--mango);
  white-space:nowrap;
}
.list-item-price .weight{ font-size:11px; color:var(--smoke); font-weight:400; margin-left:5px; }
.list-item-info{
  width:26px; height:26px; border-radius:50%;
  background:rgba(247,242,233,.08); border:1px solid var(--line); color:var(--smoke);
  display:flex; align-items:center; justify-content:center; font-size:13px;
  cursor:pointer;
}
.list-item-info:active{ transform:scale(.9); }
.text-list-empty{ color:var(--smoke); font-size:13px; text-align:center; padding:30px 0; }

/* progress dots for section */
.progress{
  position:absolute; top:0; left:0; right:0; z-index:31;
  display:flex; gap:5px; padding:10px 14px 0;
}
.progress i{
  flex:1; height:3px; border-radius:3px; background:rgba(247,242,233,.22); overflow:hidden;
}
.progress i b{ display:block; height:100%; width:0%; background:var(--cream); }
.progress i.done b{ width:100%; }
.progress i.current b{ width:100%; transition:width linear; }

/* ---------- SHEETS ---------- */
.overlay{
  position:absolute; inset:0; background:rgba(0,0,0,.55); z-index:40;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.overlay.show{ opacity:1; pointer-events:auto; }

.sheet{
  position:absolute; left:0; right:0; bottom:0; z-index:50;
  background:var(--charcoal-2);
  border-top:1px solid var(--line);
  border-radius:22px 22px 0 0;
  transform:translateY(105%);
  transition:transform .32s cubic-bezier(.32,.72,0,1);
  max-height:78%;
  display:flex;
  flex-direction:column;
  overflow:hidden; /* сама шторка больше НЕ скроллится — скроллится только .sheet-scroll внутри,
                       поэтому крестик и ручка (вне .sheet-scroll) никогда не уезжают вместе с контентом
                       и не страдают от iOS-бага с рендером absolute-элементов внутри overflow:auto */
}
.sheet.show{ transform:translateY(0); }
.sheet-head{
  flex:none;
  padding-top:8px;
  touch-action:none; /* отдельная зона для свайпа-закрытия — не конфликтует со скроллом контента */
}
.sheet-handle{
  width:38px;height:4px;border-radius:3px; background:var(--line);
  margin:6px auto 4px;
}
.sheet-close{
  position:absolute; top:12px; right:14px; z-index:5;
  width:34px;height:34px;border-radius:50%;
  background:rgba(247,242,233,.12); border:none; color:var(--cream);
  font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  -webkit-tap-highlight-color: transparent;
}
.sheet-scroll{
  flex:1 1 auto;
  min-height:0; /* без этого flex-контейнер не даёт внутреннему блоку реально скроллиться в Safari */
  overflow-y:auto;
  -webkit-overflow-scrolling:touch; /* инерционный скролл на iOS — без этого суб-скролл внутри шторки дёргается */
  overscroll-behavior:contain; /* не даёт растянуться "резиновому" bounce на body позади шторки */
  padding:8px 20px calc(26px + env(safe-area-inset-bottom, 0px)); /* отступ снизу под "чёлку"-хоумбар iPhone */
}

/* info sheet content */
.info-emoji{ font-size:44px; margin-bottom:6px; }
.info-title{ font-family:'Bebas Neue'; font-size:30px; margin:0 0 4px; }
.info-desc{ color:var(--smoke); font-size:14px; line-height:1.5; margin-bottom:16px; }
.info-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  margin-bottom:16px;
}
.info-stat{
  background:var(--charcoal); border:1px solid var(--line); border-radius:12px;
  padding:11px 13px;
}
.info-stat span{ display:block; }
.info-stat .k{ font-size:10.5px; color:var(--smoke); text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; font-family:'JetBrains Mono', monospace;}
.info-stat .v{ font-family:'JetBrains Mono', monospace; font-size:14.5px; }
.info-section-title{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--smoke); margin:16px 0 8px; font-family:'JetBrains Mono', monospace;}
.chiplist{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:6px;}
.chip{ font-size:12.5px; background:rgba(247,242,233,.08); border:1px solid var(--line); padding:6px 11px; border-radius:100px;}

/* loading state */
.loading-screen{
  position:absolute; inset:0; z-index:70;
  display:flex; align-items:center; justify-content:center;
  background:var(--ink); color:var(--smoke);
  font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:.08em;
}