/* ВИТРИНА — оформление покупательского мини-приложения.
   Тёмная тема выбрана намеренно: лента на весь экран, фотографии еды
   читаются лучше всего на глубоком фоне, а плашка товара держится поверх
   любого кадра за счёт размытия. */

:root{
  --bg:#0a0a0d;
  --ink:#ffffff;
  --ink-dim:rgba(255,255,255,.62);
  --ink-mute:rgba(255,255,255,.38);
  --glass:rgba(18,18,22,.72);
  --glass-line:rgba(255,255,255,.14);
  --accent:#ff7a2f;
  --accent-soft:rgba(255,122,47,.16);
  --gold:#ffc46b;
  --danger:#ff4d4d;
  --radius:20px;
  --tabbar-h:62px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
  font-synthesis:none;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Inter,system-ui,sans-serif;
  font-size:15px;line-height:1.4;overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img{display:block}
svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hidden{display:none !important}
.muted{color:var(--ink-dim)}

/* ── Каркас ───────────────────────────────────────────────────────────── */
.app{position:fixed;inset:0;height:100dvh;overflow:hidden}
.screen{position:absolute;inset:0;display:none}
.screen.is-active{display:block}
.screen--scroll{
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:calc(var(--safe-t) + 14px) 16px calc(var(--tabbar-h) + var(--safe-b) + 24px);
  background:radial-gradient(120% 60% at 50% 0%,#17171e 0%,var(--bg) 60%);
}
.page-head{padding:6px 2px 18px}
.page-head h1{margin:0 0 4px;font-size:27px;font-weight:800;letter-spacing:-.5px}

/* ── Верхняя панель ленты ────────────────────────────────────────────── */
.topbar{
  position:absolute;z-index:6;top:0;left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(var(--safe-t) + 12px) 14px 6px;
  pointer-events:none;
}
.topbar > *{pointer-events:auto}
.shop{display:flex;align-items:center;gap:10px;min-width:0}
.shop__avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;
  border:1.5px solid rgba(255,255,255,.55);box-shadow:0 4px 14px rgba(0,0,0,.45)}
.shop__meta{min-width:0}
.shop__name{font-size:15px;font-weight:700;letter-spacing:-.2px;
  text-shadow:0 1px 10px rgba(0,0,0,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shop__sub{font-size:11.5px;color:rgba(255,255,255,.72);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.icon-btn{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
  background:rgba(0,0,0,.28);backdrop-filter:blur(10px)}

/* ── Чипсы категорий ─────────────────────────────────────────────────── */
.chips{
  position:absolute;z-index:6;left:0;right:0;top:calc(var(--safe-t) + 58px);
  display:flex;gap:8px;padding:0 14px;overflow-x:auto;scrollbar-width:none;
}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;padding:9px 15px;border-radius:999px;font-size:13px;font-weight:600;
  color:rgba(255,255,255,.86);background:rgba(0,0,0,.3);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.1);white-space:nowrap;
}
.chip.is-active{background:#fff;color:#111;border-color:#fff}

/* ── Лента ───────────────────────────────────────────────────────────── */
.feed{
  height:100%;overflow-y:auto;scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.feed::-webkit-scrollbar{display:none}
.slide{position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden}

/* Слайд-шоу из фотографий с медленным зумом: заменяет видео там,
   где у магазина роликов нет. */
.slide__media{position:absolute;inset:0;background:#111}
.slide__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transform:scale(1.02);
}
/* Первый кадр активного слайда виден сам по себе, без анимации: если браузер
   её не запустит (экономия энергии, отключённая анимация), лента всё равно
   покажет фотографию, а не чёрный экран. */
.slide.is-live .slide__media picture:nth-of-type(1) img{opacity:1}
.slide.is-live .slide__media img{animation:kb 14s infinite}
.slide.is-live .slide__media picture:nth-of-type(1) img{animation-delay:-.6s}
.slide.is-live .slide__media picture:nth-of-type(2) img{animation-delay:6.4s}
@keyframes kb{
  0%   {opacity:0;transform:scale(1.02)}
  4%   {opacity:1}
  46%  {opacity:1}
  50%  {opacity:0;transform:scale(1.16)}
  100% {opacity:0;transform:scale(1.16)}
}
.slide__shade{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 22%),
    linear-gradient(0deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.3) 26%,rgba(0,0,0,0) 48%);
}

/* Правая колонка действий */
.rail{
  position:absolute;right:4px;bottom:calc(var(--tabbar-h) + var(--safe-b) + 118px);
  display:flex;flex-direction:column;gap:12px;align-items:center;z-index:4;
}
.rail button{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;min-width:48px;min-height:48px;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.6))}
.rail svg{width:27px;height:27px}
.rail span{font-size:11px;font-weight:600;color:rgba(255,255,255,.92)}
.rail .is-on svg{fill:var(--accent);stroke:var(--accent)}
.rail .is-on span{color:var(--accent)}

/* Плашка товара */
.plaque{
  position:absolute;z-index:5;left:12px;right:74px;
  bottom:calc(var(--tabbar-h) + var(--safe-b) + 14px);
  display:flex;align-items:center;gap:11px;padding:9px 10px;
  border-radius:18px;border:1px solid var(--glass-line);
  background:var(--glass);backdrop-filter:blur(22px) saturate(1.5);
  box-shadow:0 12px 34px rgba(0,0,0,.44);
  transform:translateY(18px);opacity:0;
}
/* Плашка выезжает через полсекунды после кадра. Паузу держим внутри самих
   кадров, без задержки и fill-mode: покоящееся состояние — видимое, поэтому
   даже с выключенными анимациями плашка на месте. */
.slide.is-live .plaque{opacity:1;transform:translateY(0);
  animation:plaque-in 1.1s cubic-bezier(.2,.9,.25,1)}
@keyframes plaque-in{
  0%,45%{transform:translateY(18px);opacity:0}
  100%{transform:translateY(0);opacity:1}
}

/* Уважаем системную настройку «меньше движения»: показываем статичный кадр. */
@media (prefers-reduced-motion:reduce){
  .slide.is-live .slide__media img{animation:none}
  .slide.is-live .slide__media picture:nth-of-type(2) img{opacity:0}
  .slide.is-live .plaque{animation:none}
}
.plaque__thumb{width:48px;height:48px;border-radius:13px;object-fit:cover;flex:0 0 auto;
  border:1px solid rgba(255,255,255,.22)}
.plaque__body{min-width:0;flex:1}
.plaque__title{font-size:13.5px;font-weight:600;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.plaque__price{display:flex;align-items:baseline;gap:7px;margin-top:3px}
.plaque__now{font-size:17px;font-weight:800;letter-spacing:-.3px}
.plaque__old{font-size:12.5px;color:var(--ink-mute);text-decoration:line-through}
.plaque__go{width:38px;height:38px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);color:#12070a}
.plaque__go svg{width:19px;height:19px;stroke-width:2.4}

/* Подпись над плашкой */
.slide__caption{
  position:absolute;z-index:5;left:12px;right:74px;
  bottom:calc(var(--tabbar-h) + var(--safe-b) + 92px);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;
  font-size:12px;font-weight:600;background:rgba(0,0,0,.42);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12)}
.pill--hot{background:rgba(255,122,47,.9);border-color:transparent;color:#1a0d05}
.pill--sale{background:rgba(255,77,77,.92);border-color:transparent}
.pill--out{background:rgba(0,0,0,.6);color:var(--ink-dim)}
.slide__sub{font-size:13px;color:rgba(255,255,255,.8);text-shadow:0 1px 10px rgba(0,0,0,.7);
  width:100%;margin-top:2px}

/* Счётчик слайдов */
.counter{position:absolute;z-index:5;right:12px;top:calc(var(--safe-t) + 104px);
  padding:5px 9px;border-radius:10px;font-size:11.5px;font-weight:700;
  background:rgba(0,0,0,.4);backdrop-filter:blur(10px)}

/* ── Нижняя навигация ────────────────────────────────────────────────── */
.tabbar{
  position:absolute;z-index:8;left:0;right:0;bottom:0;height:calc(var(--tabbar-h) + var(--safe-b));
  padding-bottom:var(--safe-b);
  display:grid;grid-template-columns:repeat(4,1fr);align-items:center;
  background:rgba(10,10,13,.82);backdrop-filter:blur(24px);
  border-top:1px solid rgba(255,255,255,.08);
}
.tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;min-height:48px;color:var(--ink-mute);padding-top:2px}
.tab svg{width:22px;height:22px}
.tab span{font-size:10.5px;font-weight:600}
.tab.is-active{color:#fff}
.badge{position:absolute;top:-2px;right:calc(50% - 20px);min-width:17px;height:17px;padding:0 5px;
  border-radius:9px;background:var(--accent);color:#160a03;font-size:10.5px;font-weight:800;
  font-style:normal;display:grid;place-items:center}

/* ── Каталог сеткой ──────────────────────────────────────────────────── */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.card{border-radius:18px;overflow:hidden;background:#141419;border:1px solid rgba(255,255,255,.07)}
.card__img{position:relative;aspect-ratio:3/4;background:#1b1b21}
.card__img img{width:100%;height:100%;object-fit:cover}
.card__tag{position:absolute;left:8px;top:8px}
.card__body{padding:10px 11px 12px}
.card__title{font-size:13.5px;font-weight:600;line-height:1.25;min-height:34px}
.card__price{margin-top:6px;display:flex;align-items:baseline;gap:6px}
.card__now{font-size:16px;font-weight:800}
.card__old{font-size:12px;color:var(--ink-mute);text-decoration:line-through}

/* ── Карточка товара ─────────────────────────────────────────────────── */
.sheet{position:fixed;inset:0;z-index:20}
.sheet__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);
  animation:fade .2s ease both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet__panel{
  position:absolute;left:0;right:0;bottom:0;max-height:94%;
  background:#101015;border-radius:26px 26px 0 0;border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-direction:column;animation:up .32s cubic-bezier(.2,.9,.25,1) both;
}
@keyframes up{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet__grip{height:22px;flex:0 0 auto;display:grid;place-items:center}
.sheet__grip::after{content:"";width:40px;height:4px;border-radius:2px;background:rgba(255,255,255,.24)}
.sheet__content{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 16px calc(var(--safe-b) + 16px)}

.gallery{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;
  margin:0 -16px 14px;padding:0 16px;scrollbar-width:none}
.gallery::-webkit-scrollbar{display:none}
.gallery img{width:73%;aspect-ratio:4/5;object-fit:cover;border-radius:18px;scroll-snap-align:center;flex:0 0 auto}

.p-title{font-size:22px;font-weight:800;letter-spacing:-.4px;margin:0}
.p-sub{color:var(--ink-dim);font-size:14px;margin:4px 0 0}
.p-price{display:flex;align-items:baseline;gap:10px;margin:14px 0 4px}
.p-now{font-size:28px;font-weight:850;letter-spacing:-.8px}
.p-old{font-size:15px;color:var(--ink-mute);text-decoration:line-through}
.p-stock{font-size:13px;color:var(--ink-dim);margin-bottom:14px}
.p-desc{font-size:14.5px;color:rgba(255,255,255,.82);line-height:1.5}

.section-label{font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:var(--ink-mute);margin:20px 0 9px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{padding:10px 14px;border-radius:14px;font-size:13.5px;font-weight:600;
  background:#191920;border:1px solid rgba(255,255,255,.09)}
.opt.is-on{background:var(--accent-soft);border-color:var(--accent);color:#ffd3b8}
.opt small{display:block;font-size:11px;color:var(--ink-mute);font-weight:500}

.qty{display:flex;align-items:center;gap:14px;margin-top:14px}
.qty button{width:44px;height:44px;border-radius:12px;background:#191920;
  border:1px solid rgba(255,255,255,.09);display:grid;place-items:center;font-size:20px}
.qty b{font-size:17px;min-width:24px;text-align:center}

.sticky-cta{position:sticky;bottom:0;padding:12px 0 4px;margin-top:20px;
  background:linear-gradient(180deg,rgba(16,16,21,0),#101015 26%)}
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  padding:16px;border-radius:17px;font-size:16px;font-weight:700;
  background:var(--accent);color:#180a02}
.btn--ghost{background:#191920;color:#fff;border:1px solid rgba(255,255,255,.1)}
.btn:disabled{opacity:.45}

/* ── Корзина и формы ─────────────────────────────────────────────────── */
.line{display:flex;gap:12px;padding:12px;border-radius:18px;background:#131319;
  border:1px solid rgba(255,255,255,.06);margin-bottom:10px;align-items:center}
.line img{width:56px;height:56px;border-radius:14px;object-fit:cover;flex:0 0 auto}
.line__b{flex:1;min-width:0}
.line__t{font-size:14px;font-weight:600}
.line__o{font-size:12px;color:var(--ink-mute)}
.line__p{font-size:15px;font-weight:800;margin-top:3px}
.line__x{color:var(--ink-mute);padding:6px}

.field{margin-bottom:11px}
.field label{display:block;font-size:12px;font-weight:600;color:var(--ink-dim);margin:0 0 6px 4px}
.field input,.field textarea{
  width:100%;padding:14px;border-radius:15px;background:#131319;color:#fff;
  border:1px solid rgba(255,255,255,.09);outline:none;
  /* Ровно 16px: на меньшем размере iOS зумит страницу при фокусе и ломает вёрстку. */
  font-size:16px}
.field input:focus,.field textarea:focus{border-color:var(--accent)}
.switch{display:flex;gap:8px;margin-bottom:12px}
.switch button{flex:1;padding:13px;border-radius:15px;background:#131319;font-size:14px;font-weight:600;
  border:1px solid rgba(255,255,255,.09)}
.switch button.is-on{background:var(--accent-soft);border-color:var(--accent);color:#ffd3b8}

.total{display:flex;justify-content:space-between;align-items:baseline;
  padding:16px 4px 12px;font-size:15px;color:var(--ink-dim)}
.total b{font-size:24px;font-weight:850;color:#fff;letter-spacing:-.6px}

.empty{text-align:center;padding:70px 20px;color:var(--ink-mute)}
.empty svg{width:44px;height:44px;margin-bottom:14px;opacity:.4}

/* ── Профиль ─────────────────────────────────────────────────────────── */
.tile{padding:16px;border-radius:20px;background:#131319;
  border:1px solid rgba(255,255,255,.07);margin-bottom:12px}
.tile__k{font-size:12px;color:var(--ink-mute);font-weight:600;letter-spacing:.4px;text-transform:uppercase}
.tile__v{font-size:17px;font-weight:700;margin-top:5px}
.tile__row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,.06);font-size:14px}
.tile__row:last-child{border:0}
.tile__row span{color:var(--ink-dim)}

.order-card{padding:14px;border-radius:18px;background:#131319;
  border:1px solid rgba(255,255,255,.07);margin-bottom:10px}
.order-card__h{display:flex;justify-content:space-between;font-size:14px;font-weight:700}
.order-card__i{font-size:13px;color:var(--ink-dim);margin-top:6px}

/* ── Тост ────────────────────────────────────────────────────────────── */
.toast{
  position:fixed;z-index:40;left:50%;bottom:calc(var(--tabbar-h) + var(--safe-b) + 22px);
  transform:translate(-50%,20px);opacity:0;pointer-events:none;
  padding:12px 18px;border-radius:14px;font-size:14px;font-weight:600;
  background:rgba(28,28,34,.96);border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 30px rgba(0,0,0,.5);transition:.24s;max-width:86vw;text-align:center;
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}