/* =========================================================
   Заказы Сервис бар · Temple of Deer — компоненты Mini App
   Переносится в index.html как есть.
   body: class="sb", data-theme = Telegram.WebApp.colorScheme ('light'|'dark').
   Бренд: background #000000 · primary #FFFFFF · secondary #9D192B
   Шрифты: Manrope (заголовки, цифры, кнопки) · SF Pro (текст, системный на iOS)
   Manrope в продакшене — свои файлы woff2 рядом с index.html:
   @font-face{font-family:"Manrope";src:url(fonts/manrope-600.woff2) format("woff2");font-weight:600;font-display:swap}
   (так же для 400, 700, 800)
   ========================================================= */

.sb{
  /* светлая — инверсия бренда */
  --bg: #ffffff;
  --bg2: #f4f2f2;
  --text: #000000;
  --hint: #5e5e5e;
  --line: rgba(0, 0, 0, .12);
  --accent: #000000;          /* главная кнопка, «встреча», новый статус */
  --accent-text: #ffffff;
  --accent-tint: #ecebeb;     /* выбранная строка */

  --crimson: #9D192B;         /* secondary бренда: «для себя», не оплачено */
  --crimson-text: #ffffff;
  --crimson-ink: #9D192B;     /* текст и иконки этого цвета */
  --crimson-tint: #f8e6e8;

  --amber: #7a5200; --amber-tint: #f9efd6;
  --ok: #1b6e40;    --ok-tint: #e2f1e7;

  --font-display: "Manrope", -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", Roboto, sans-serif;

  font: 400 17px/1.35 var(--font-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
/* тёмная — основная тема бренда */
.sb[data-theme="dark"]{
  --bg: #000000;
  --bg2: #151515;
  --text: #ffffff;
  --hint: #9b9b9b;
  --line: rgba(255, 255, 255, .13);
  --accent: #ffffff;
  --accent-text: #000000;
  --accent-tint: #1d1d1d;
  --crimson-ink: #ff7a8a;
  --crimson-tint: #2b0c11;
  --amber: #f0c25a; --amber-tint: #2e2510;
  --ok: #6fd49b;    --ok-tint: #10261a;
}
.sb *{ box-sizing: border-box; }
.sb button, .sb input, .sb select, .sb textarea{ font: inherit; }
/* цвет наследуем с низкой специфичностью, чтобы .btn-primary, .link-btn и т.п. его перебивали */
button, input, select, textarea{ color: inherit; }
.sb button{ cursor: pointer; }
.sb a{ color: inherit; text-decoration: none; }
.sb :focus-visible{ outline: 2px solid var(--crimson-ink); outline-offset: 2px; }
.ic{ width: 20px; height: 20px; flex: none; }

/* логотип: файлы белые, в светлой теме инвертируются в чёрный */
.brand-img{ display: block; }
.sb:not([data-theme="dark"]) .brand-img{ filter: invert(1); }

/* ---------- каркас ---------- */
.sb-shell{
  position: relative; display: flex; flex-direction: column;
  height: var(--tg-viewport-stable-height, 100vh);
  background: var(--bg); overflow: hidden;
}
.sb-top{ flex: none; background: var(--bg); }
.sb-scroll{ flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sb-scroll.has-bar{ padding-bottom: 96px; }

/* ---------- шапка ---------- */
.hdr{ display: flex; align-items: center; gap: 12px; padding: 12px 16px 8px; }
.hdr-logo{ height: 40px; width: auto; flex: none; }
.hdr-main{ flex: 1; min-width: 0; }
.hdr-name{ font: 700 17px/1.2 var(--font-display); }
.hdr-role{ font-size: 14px; color: var(--hint); }
.hdr-brand{ font: 700 11px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--crimson-ink); margin-bottom: 4px; }

/* ---------- вкладки ---------- */
.tabs{ display: flex; gap: 4px; margin: 4px 16px 8px; padding: 4px; background: var(--bg2); border-radius: 12px; }
.tab{
  flex: 1; min-height: 44px; border: 0; background: transparent; border-radius: 9px;
  font: 600 15px/1 var(--font-display); color: var(--hint);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.tab.on{ background: var(--accent); color: var(--accent-text); font-weight: 700; }
.badge{
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  background: var(--crimson); color: var(--crimson-text);
  font: 700 13px/1 var(--font-display); display: inline-grid; place-items: center;
}

/* ---------- поиск ---------- */
.search{ position: relative; margin: 0 16px 10px; }
.search input{
  width: 100%; height: 44px; border: 0; border-radius: 12px; background: var(--bg2);
  padding: 0 44px 0 42px; font-size: 17px; outline: none;
}
.search input::placeholder{ color: var(--hint); }
.search > .ic{ position: absolute; left: 12px; top: 12px; color: var(--hint); }
.search-clear{
  position: absolute; right: 0; top: 0; width: 44px; height: 44px; border: 0;
  background: transparent; color: var(--hint); display: grid; place-items: center;
}

/* ---------- раздел меню ---------- */
.sec-h{
  position: sticky; top: 0; z-index: 2;
  width: 100%; min-height: 52px; padding: 0 16px; border: 0;
  border-top: 1px solid var(--line); background: var(--bg2);
  display: flex; align-items: center; gap: 10px; text-align: left;
}
.sec-title{ font: 800 19px/1.2 var(--font-display); flex: 1; }
.sec-meta{ font-size: 15px; color: var(--hint); }
.sec-h .chev{ color: var(--hint); transition: transform .15s; }
.sec-h.open .chev{ transform: rotate(180deg); }

.grp-h{
  position: sticky; top: 52px; z-index: 1;
  width: 100%; min-height: 48px; padding: 0 16px; border: 0;
  border-bottom: 1px solid var(--line); background: var(--bg);
  display: flex; align-items: center; gap: 10px; text-align: left;
  font: 600 16px/1.2 var(--font-display);
}
.grp-h span:first-child{ flex: 1; }
.grp-h .chev{ color: var(--hint); }

/* ---------- строка позиции ---------- */
.item{ border-bottom: 1px solid var(--line); }
.item.on{ background: var(--accent-tint); }
.row{ display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 8px 8px 16px; }
.row-main{ flex: 1; min-width: 0; }
.row-name{ font-size: 17px; line-height: 1.25; }
.item.on .row-name{ font-weight: 600; }
.row-price{ font-size: 15px; color: var(--hint); margin-top: 2px; font-variant-numeric: tabular-nums; }

/* ---------- счётчик ---------- */
.step{ display: flex; align-items: center; flex: none; }
.step-btn{
  width: 44px; height: 44px; border-radius: 12px; border: 0;
  background: var(--bg2); color: var(--text);
  display: grid; place-items: center;
}
.step-btn .ic{ width: 22px; height: 22px; }
.item.on .step-btn{ background: var(--bg); }
.step-btn.plus, .item.on .step-btn.plus{ background: var(--accent); color: var(--accent-text); }
.step-qty{ min-width: 36px; text-align: center; font: 800 19px/1 var(--font-display); font-variant-numeric: tabular-nums; }

/* ---------- выбор молока ---------- */
.milk{ padding: 0 16px 12px; }
.milk-label{ font: 700 12px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--hint); margin: 0 0 8px 2px; }
.chips{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.chip{
  min-height: 44px; padding: 0 4px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg);
  font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 4px;
  white-space: nowrap;
}
.chip.on{ background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }

/* ---------- нижняя полоса (корзина / действия) ---------- */
.bar{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--bg); border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px;
}
.bar-sum{ flex: 1; min-width: 0; }
.bar-count{ font-size: 14px; color: var(--hint); }
.bar-total{ font: 800 21px/1.2 var(--font-display); font-variant-numeric: tabular-nums; }
.bar.empty .bar-total{ font-size: 17px; font-weight: 600; color: var(--hint); }
.bar.actions{ display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }

/* ---------- кнопки ---------- */
.btn{
  min-height: 50px; padding: 0 20px; border-radius: 12px; border: 0;
  font: 700 16px/1 var(--font-display); white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-primary{ background: var(--accent); color: var(--accent-text); }
.btn-self{ background: var(--crimson); color: var(--crimson-text); }
.btn-secondary{ background: var(--bg2); color: var(--text); }
.btn-block{ width: 100%; }
.btn[disabled], .btn[aria-disabled="true"]{ opacity: .4; pointer-events: none; }
.icon-btn{
  width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent;
  color: var(--text); display: grid; place-items: center;
}
.icon-btn .ic{ width: 24px; height: 24px; }

/* ---------- страницы ---------- */
.page-h{ display: flex; align-items: center; gap: 4px; padding: 8px 8px 0; min-height: 52px; }
.page-title{ font: 800 22px/1.2 var(--font-display); flex: 1; }
.page-h .brand-img{ height: 30px; width: auto; margin-right: 8px; }
.blk{ margin: 0 16px 20px; }
.blk-h{ display: flex; align-items: center; justify-content: space-between; margin: 0 4px 8px; }
.blk-label{ font: 700 12px/1 var(--font-display); color: var(--hint); text-transform: uppercase; letter-spacing: .06em; }
.link-btn{ border: 0; background: transparent; color: var(--crimson-ink); font: 700 15px/1 var(--font-display); min-height: 44px; padding: 0 4px; display: inline-flex; align-items: center; }
.card{ background: var(--bg2); border-radius: 14px; overflow: hidden; }
.line{ display: flex; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.line:last-child{ border-bottom: 0; }
.line-qty{ font: 800 17px/1.35 var(--font-display); min-width: 30px; font-variant-numeric: tabular-nums; }
.line-main{ flex: 1; min-width: 0; }
.line-opt{ font-size: 14px; color: var(--hint); margin-top: 2px; }
.line-price{ color: var(--hint); font-size: 15px; font-variant-numeric: tabular-nums; }

/* ---------- поля ---------- */
.field{ position: relative; }
.field select, .field input, .field textarea{
  width: 100%; border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg2); font-size: 17px; outline: none;
}
.field select{ appearance: none; -webkit-appearance: none; height: 50px; padding: 0 44px 0 14px; }
.field input{ height: 50px; padding: 0 14px; }
.field textarea{ min-height: 84px; padding: 12px 14px; resize: none; line-height: 1.35; }
.field select:focus, .field input:focus, .field textarea:focus{ border-color: var(--text); }
.field ::placeholder{ color: var(--hint); }
.field > .ic{ position: absolute; right: 14px; top: 15px; color: var(--hint); pointer-events: none; }
.field + .field{ margin-top: 8px; }

/* ---------- переключатель «На встречу» / «Для себя» ---------- */
.mode{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mode-opt{
  position: relative; min-height: 84px; padding: 12px 12px 12px 14px;
  border-radius: 14px; border: 2px solid var(--line); background: var(--bg);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px;
  text-align: left;
}
.mode-t{ font: 800 18px/1.2 var(--font-display); display: flex; align-items: center; gap: 6px; }
.mode-s{ font-size: 14px; color: var(--hint); }
.mode-dot{
  position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--line); display: grid; place-items: center;
}
.mode-dot .ic{ width: 14px; height: 14px; opacity: 0; }
.mode-opt.on .mode-s{ color: inherit; opacity: .9; }
.mode-opt.on .mode-dot{ border-color: currentColor; background: currentColor; }
.mode-opt.on .mode-dot .ic{ opacity: 1; }
.mode-opt.meet.on{ background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.mode-opt.meet.on .mode-dot .ic{ color: var(--accent); }
.mode-opt.self.on{ background: var(--crimson); border-color: var(--crimson); color: var(--crimson-text); }
.mode-opt.self.on .mode-dot .ic{ color: var(--crimson); }

/* ---------- итог ---------- */
.total{ border-radius: 14px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.total.meet{ background: var(--bg2); }
.total.self{ background: var(--crimson-tint); }
.total-main{ flex: 1; }
.total-l{ font-size: 14px; color: var(--hint); }
.total-v{ font: 800 24px/1.15 var(--font-display); font-variant-numeric: tabular-nums; }
.total.self .total-v{ color: var(--crimson-ink); }
.total .ic{ width: 28px; height: 28px; }
.total.self .ic{ color: var(--crimson-ink); }

/* ---------- сообщение об ошибке ---------- */
.alert{ display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--crimson-tint); }
.alert .ic{ color: var(--crimson-ink); width: 22px; height: 22px; margin-top: 1px; }
.alert-t{ font: 700 16px/1.3 var(--font-display); }
.alert-s{ font-size: 15px; margin-top: 2px; }

/* ---------- центрированные состояния ---------- */
.state{ flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px 28px; gap: 8px; }
.state-ic{ width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--bg2); color: var(--hint); margin-bottom: 8px; }
.state-ic .ic{ width: 34px; height: 34px; }
.state-ic.ok{ background: var(--ok-tint); color: var(--ok); }
.state-t{ font: 800 24px/1.2 var(--font-display); }
.state-s{ font-size: 16px; color: var(--hint); max-width: 300px; }
.state .btn{ margin-top: 12px; min-width: 220px; }
.hero-logo{ height: 132px; width: auto; margin-bottom: 12px; }

/* ---------- метка статуса ---------- */
.st{
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  border-radius: 13px; font: 700 13px/1 var(--font-display); white-space: nowrap;
}
.st::before{ content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.st-new{ background: var(--accent); color: var(--accent-text); }
.st-acc{ background: var(--amber-tint); color: var(--amber); }
.st-ready{ background: var(--ok-tint); color: var(--ok); }
.st-paid{ background: transparent; color: var(--hint); box-shadow: inset 0 0 0 1px var(--line); }
.st-paid::before{ display: none; }
.tag{
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px;
  border-radius: 13px; font: 700 13px/1 var(--font-display); white-space: nowrap;
}
.tag .ic{ width: 15px; height: 15px; }
.tag-meet{ background: var(--bg); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.tag-unpaid{ background: var(--crimson-tint); color: var(--crimson-ink); }

/* ---------- мои заказы ---------- */
.summary{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 4px 16px 16px; }
.sum-card{ background: var(--bg2); border-radius: 14px; padding: 12px 14px; }
.sum-card.unpaid{ background: var(--crimson-tint); }
.sum-l{ font-size: 13px; color: var(--hint); }
.sum-v{ font: 800 24px/1.2 var(--font-display); font-variant-numeric: tabular-nums; margin-top: 2px; }
.sum-card.unpaid .sum-v{ color: var(--crimson-ink); }
.order{ background: var(--bg2); border-radius: 14px; padding: 14px; margin: 0 16px 10px; }
.order.unpaid{ box-shadow: inset 0 0 0 2px var(--crimson); }
.order-top{ display: flex; align-items: center; gap: 8px; }
.order-no{ font: 800 18px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.order-date{ font-size: 14px; color: var(--hint); flex: 1; }
.order-hall{ font: 700 16px/1.3 var(--font-display); margin-top: 8px; }
.order-items{ font-size: 15px; margin-top: 2px; line-height: 1.4; }
.order-foot{ display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.order-sum{ font: 700 16px/1.2 var(--font-display); font-variant-numeric: tabular-nums; }
.list-h{ font: 700 12px/1 var(--font-display); color: var(--hint); text-transform: uppercase; letter-spacing: .06em; margin: 8px 20px 10px; }

/* ---------- очередь исполнителя ---------- */
.q-note{ font-size: 14px; color: var(--hint); padding: 0 16px 12px; display: flex; align-items: center; gap: 8px; }
.q-note span{ flex: 1; }
.qcard{ background: var(--bg2); border-radius: 16px; padding: 14px; margin: 0 16px 10px; }
.qcard.new{ background: var(--bg); box-shadow: inset 0 0 0 2px var(--accent); }
.q-top{ display: flex; align-items: flex-start; gap: 12px; }
.q-no{ font: 800 34px/1 var(--font-display); font-variant-numeric: tabular-nums; flex: none; }
.q-head{ flex: 1; min-width: 0; }
.q-hall{ font: 800 20px/1.15 var(--font-display); }
.q-who{ font-size: 14px; color: var(--hint); margin-top: 3px; }
.q-items{ list-style: none; margin: 12px 0 0; padding: 0; font-size: 16px; line-height: 1.45; }
.q-items b{ font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.q-items small{ color: var(--hint); font-size: 14px; }
.q-comment{ display: flex; gap: 8px; margin-top: 10px; padding: 9px 11px; border-radius: 10px; background: var(--amber-tint); font-size: 15px; }
.q-comment .ic{ width: 18px; height: 18px; color: var(--amber); margin-top: 1px; }
.q-foot{ display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }


/* ---------- меню карточками: две в ряд (задача 3) ---------- */
.grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px 16px 16px; }
.pcard{ background: var(--bg2); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.pcard.on{ box-shadow: inset 0 0 0 2px var(--accent); }
.pcard-ph{ position: relative; aspect-ratio: 1 / 1; background: var(--accent-tint); }
.pcard-ph img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.pcard-ph.none{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--hint); }
.pcard-ph.none .brand-img{ height: 44px; width: auto; opacity: .25; }
.pcard-ph.none span{ font: 700 11px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.pcard-qty{
  position: absolute; top: 8px; right: 8px; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 14px;
  background: var(--accent); color: var(--accent-text); font: 800 15px/1 var(--font-display);
  display: grid; place-items: center; font-variant-numeric: tabular-nums;
}
.pcard-body{ padding: 10px 10px 10px; display: flex; flex-direction: column; flex: 1; }
.pcard-name{ font-size: 15px; line-height: 1.25; flex: 1; }
.pcard-price{ font: 700 15px/1.2 var(--font-display); color: var(--hint); margin-top: 4px; font-variant-numeric: tabular-nums; }
.pcard.on .pcard-price{ color: var(--text); }
.pcard-step{ display: flex; align-items: center; justify-content: space-between; margin-top: 10px; gap: 4px; }
.pcard-step .step-btn{ width: 44px; height: 44px; }
.pcard-step .step-qty{ font-size: 18px; min-width: 24px; }
.pcard-add{
  width: 100%; height: 44px; border: 0; border-radius: 12px; margin-top: 10px;
  background: var(--accent); color: var(--accent-text); font: 700 15px/1 var(--font-display);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.pcard .milk{ padding: 0 10px 10px; }
.pcard .chips{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.pcard .chip{ min-height: 38px; font-size: 13px; border-radius: 10px; }
.pcard .milk-label{ margin-left: 0; }

/* ---------- выбор места: быстрые кнопки и карточки залов (задача 4) ---------- */
.places{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.places .chip{ flex: 1 1 calc(50% - 3px); min-height: 44px; font-size: 15px; }
.hgrid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hcard{
  position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; border: 0; padding: 0;
  background: var(--accent-tint); color: #fff; text-align: left; display: block;
}
.hcard img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hcard::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.15) 55%, rgba(0,0,0,0) 100%); }
.hcard-name{ position: absolute; left: 10px; right: 10px; bottom: 9px; z-index: 1; font: 700 14px/1.2 var(--font-display); text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.hcard.none{ color: var(--hint); }
.hcard.none::after{ display: none; }
.hcard.none .brand-img{ position: absolute; left: 50%; top: 38%; height: 36px; width: auto; transform: translate(-50%, -50%); opacity: .25; }
.hcard.none .hcard-name{ color: var(--text); text-shadow: none; }
.hcard.on{ box-shadow: inset 0 0 0 3px var(--accent); }
.hcard.on .hcard-check{
  position: absolute; top: 8px; right: 8px; z-index: 1; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: var(--accent-text); display: grid; place-items: center;
}
.hcard-check{ display: none; }
.hcard.on .hcard-check{ display: grid; }
.hcard-check .ic{ width: 15px; height: 15px; }

/* ---------- «своими словами» под поиском: такое же поле, как поиск ---------- */
.search.custom input{ border: 1px dashed var(--line); background: transparent; }
.search.custom.has-add input{ padding-right: 104px; }
.search.custom input:focus{ border-style: solid; border-color: var(--text); }
.custom-add{
  position: absolute; right: 4px; top: 4px; height: 36px; padding: 0 14px; border: 0; border-radius: 10px;
  background: var(--accent); color: var(--accent-text); font: 700 14px/1 var(--font-display);
}

/* ---------- опции подачи и объёма в карточке ---------- */
.pcard .chips-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pcard .chips-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pcard .milk + .milk{ padding-top: 0; }
.pcard .serve .chip, .pcard .volume .chip{ text-transform: none; font-size: 12px; padding: 0 2px; }
.pcard .chip{ white-space: normal; line-height: 1.1; font-size: 12px; padding: 2px 4px; min-height: 36px; }

/* ---------- производительность прокрутки ---------- */
.pcard{ content-visibility: auto; contain-intrinsic-size: 180px 280px; }
.hcard{ content-visibility: auto; contain-intrinsic-size: 160px 120px; }
.pcard-ph img, .hcard img{ transform: translateZ(0); }

/* подпись над карточкой очереди: кто и когда */
.q-cap{ display: flex; justify-content: space-between; gap: 8px; margin: 0 24px 6px; font-size: 13px; color: var(--hint); }
.q-cap span:first-child{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-cap span:last-child{ flex: none; white-space: nowrap; }
.q-head{ align-self: center; }

/* заголовок дня над заказами */
.day-h{ font: 800 20px/1.2 var(--font-display); margin: 14px 16px 10px; }
.day-h:first-child{ margin-top: 4px; }
.list-h + .day-h{ margin-top: 0; }