/* ============================================================================
   index.css — клиентский Telegram Mini App. Стоит на unity.css.
   Главный сценарий — телефон внутри Telegram; на широком экране страница
   собирается в колонку, а шиты становятся центрированными диалогами.
   ========================================================================== */

/* ── Клиентский слой ─────────────────────────────────────────────────────────
   Поведение — телеграмовское, облик — брендовый, но точечно:
   каталог остаётся тихим, бренд звучит в трёх местах (шапка, экран успеха,
   профиль/онбординг). Свой акцент — «уголёк», у worker/admin он другой.
   ------------------------------------------------------------------------ */

:root {
  --font-display: 'Unbounded', 'Inter', sans-serif;

  /* Оранжевый уголёк. На светлой теме текстовый оттенок затемнён:
     чистый #FF6A00 на белом даёт 2.9:1 и не проходит по контрасту. */
  --a-500: #ff8a3d;
  --a-600: #c2410c;
  --a-400: #ff7a1f;
  --accent: #c2410c;
  --accent-hover: #ea580c;
  --accent-fg: #ffffff;
  --accent-bg: #fff1e8;
  --accent-border: #ffd2b5;
  --info-fg: #c2410c; --info-bg: #fff1e8; --info-border: #ffd2b5;
  --ember: #ff6a00;                     /* «полный» бренд-цвет для громких мест */
}

.theme-dark {
  --accent: #ff7a1f;
  --accent-hover: #ff9248;
  --accent-fg: #200c00;
  --accent-bg: rgba(255, 106, 0, .14);
  --accent-border: rgba(255, 106, 0, .34);
  --info-fg: #ff9248; --info-bg: rgba(255, 106, 0, .14); --info-border: rgba(255, 106, 0, .32);
}
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light):not(.theme-dark) {
    --accent: #ff7a1f;
    --accent-hover: #ff9248;
    --accent-fg: #200c00;
    --accent-bg: rgba(255, 106, 0, .14);
    --accent-border: rgba(255, 106, 0, .34);
    --info-fg: #ff9248; --info-bg: rgba(255, 106, 0, .14); --info-border: rgba(255, 106, 0, .32);
  }
}

/* Контейнер контента: на телефоне во всю ширину, на десктопе — колонка. */
.wrap { width: 100%; max-width: 720px; margin: 0 auto; }

/* ── Шапка ───────────────────────────────────────────────────────────────── */

.hdr {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: 52px;
  padding: 0 var(--pad-page);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.hdr-inner { display: flex; align-items: center; gap: var(--sp-2); width: 100%; max-width: 720px; margin: 0 auto; }
/* Громкий момент №1: марка в шапке горит углём. */
.hdr-logo { display: flex; align-items: center; color: var(--ember); flex-shrink: 0; }
.hdr-title { font-size: var(--fs-13); font-weight: 600; flex: 1; }
/* Вкладки — сегмент-контрол системы: активная едет, а не мигает. */
.hdr-tabs { flex: 0 1 auto; margin: 0 auto; }
.hdr-tab { min-height: 30px; padding: 0 var(--sp-3); font-size: var(--fs-13); }
.hdr-tab .lc { width: 13px; height: 13px; }
.hdr-tabs .u-seg.is-active { color: var(--text); font-weight: 600; }
@media (max-width: 379px) {
  .hdr-tab { padding: 0 var(--sp-2); }
  .hdr-tab .lc { display: none; }
}

.theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--r-md);
  background: none;
  color: var(--text-2);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
@media (hover: hover) { .theme-btn:hover { background: var(--surface-2); color: var(--text); } }

/* Своя кнопка корзины — запасной путь, когда MainButton недоступен. */
.hdr-pill {
  display: none;
  white-space: nowrap;
  align-items: center;
  gap: var(--sp-1);
  min-height: 32px;
  padding: 0 var(--sp-3);
  border: none;
  border-radius: var(--r-full);
  background: var(--accent);
  color: var(--accent-fg);
  font-size: var(--fs-12);
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out);
}
.hdr-pill.bump { animation: pillbump var(--dur-slow) var(--ease-out); }
@keyframes pillbump { 0% { transform: scale(1); } 35% { transform: scale(1.14); } 100% { transform: scale(1); } }
.hdr-pill-n { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.hdr-pill-sum {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-11);
  white-space: nowrap;
  opacity: .85;
  padding-left: var(--sp-1);
  margin-left: var(--sp-1);
  border-left: 1px solid color-mix(in srgb, var(--accent-fg) 35%, transparent);
}
/* Сума в пілюлі — тільки там, де вона поміщається в один рядок. */
@media (max-width: 479px) { .hdr-pill-sum { display: none !important; } }

/* ── Поиск и фильтры ─────────────────────────────────────────────────────── */

.top-bar { position: sticky; top: 52px; z-index: 99; padding: var(--sp-3) var(--pad-page) var(--sp-2); background: var(--bg); }
.top-bar-inner { width: 100%; max-width: 720px; margin: 0 auto; position: relative; }
.search-box {
  width: 100%;
  min-height: var(--tap);
  padding: 0 var(--sp-3) 0 36px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: var(--fs-14);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='none' stroke='%237c838e' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
}
.search-box::placeholder { color: var(--text-3); }
.search-box:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }

.cats {
  position: sticky;
  z-index: 98;
  display: flex;
  gap: var(--sp-2);
  /* Лента живёт в той же колонке, что и остальной контент. */
  width: 100%;
  max-width: calc(720px + var(--pad-page) * 2);
  margin: 0 auto;
  padding: var(--sp-1) var(--pad-page) var(--sp-2);
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--bg);
  /* края уходят в туман, чтобы было видно: список продолжается */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}
.cats::-webkit-scrollbar { display: none; }
#cats-sizes:empty { display: none; }

.cat-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 var(--sp-3);
  white-space: nowrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  color: var(--text-2);
  font-size: var(--fs-12);
  font-weight: 550;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.cat-btn-sm { min-height: 28px; padding: 0 var(--sp-2); font-size: var(--fs-11); }
.cat-btn.active { background: var(--ember); border-color: var(--ember); color: #fff; }
.cat-btn img { height: 14px; filter: grayscale(1); opacity: .7; transition: opacity var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease); }
.theme-dark .cat-btn img { filter: grayscale(1) invert(1); }
/* На угле марка бренда всегда белая — в обеих темах. */
.cat-btn.active img, .theme-dark .cat-btn.active img { filter: brightness(0) invert(1); opacity: 1; }
.cat-btn svg path { fill: currentColor; }

/* Громкое место: заголовок каталога вместо служебной строки «Показано: N». */
.stats {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  width: 100%;
  max-width: 720px;
  margin: var(--sp-2) auto var(--sp-3);
  padding: 0 var(--pad-page);
  font-size: var(--fs-12);
  color: var(--text-2);
}
.stats-title {
  font-family: var(--font-display);
  font-size: var(--fs-28);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text);
  text-transform: uppercase;
}
.stats-count { flex: 1; }
.stats b { color: var(--text); font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.stats-sel { display: none; align-items: center; gap: var(--sp-1); color: var(--accent); font-weight: 650; }
@media (max-width: 479px) { .stats-title { font-size: var(--fs-22); } }

/* ── Строка товара ───────────────────────────────────────────────────────── */

.list { display: flex; flex-direction: column; gap: var(--sp-2); width: 100%; max-width: 720px; margin: 0 auto; padding: 0 var(--pad-page) 140px; }

.row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.row.sel { border-color: var(--accent); background: var(--accent-bg); }
.row.no-stock { opacity: .62; }
.row.no-stock .qbtn, .row.no-stock .qinp { pointer-events: none; }

.rinfo { flex: 1; min-width: 0; }
.rname { font-size: var(--fs-13); font-weight: 500; line-height: var(--lh-snug); }
.rmeta { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-1); }
.rcat { font-size: var(--fs-11); color: var(--text-2); }
.rprice {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-16);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.rstk { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--fs-11); font-weight: 600; white-space: nowrap; }
.rstk.ok { color: var(--text-2); }
.rstk.low { color: var(--warn-fg); }
.rstk.zero { color: var(--danger-fg); }

.badge-low, .badge-zero {
  display: inline-flex;
  align-items: center;
  margin-left: var(--sp-1);
  padding: 1px 6px;
  border: 1px solid;
  border-radius: var(--r-xs);
  font-size: 10px;
  font-weight: 700;
  vertical-align: 1px;
}
.badge-low { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-fg); }
.badge-zero { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-fg); }

.tier-badge {
  padding: 2px 8px;
  border: 1px solid var(--accent-border);
  border-radius: var(--r-full);
  background: var(--accent-bg);
  color: var(--accent);
  font-size: var(--fs-11);
  font-weight: 600;
}

/* Степпер количества */
.qwrap { display: flex; align-items: center; flex-shrink: 0; }
.qbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: var(--fs-16);
  cursor: pointer;
  user-select: none;
  transition: background var(--dur-instant) var(--ease), color var(--dur-instant) var(--ease);
}
.qbtn:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
.qbtn:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; }
.qbtn:active { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.qinp {
  width: 46px;
  height: var(--tap);
  border: 1px solid var(--border);
  border-left: none;
  border-right: none;
  background: var(--surface);
  color: var(--text);
  text-align: center;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-13);
  font-weight: 650;
  outline: none;
}
.qinp::-webkit-outer-spin-button, .qinp::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qinp[type=number] { -moz-appearance: textfield; }
.sel .qbtn, .sel .qinp { border-color: var(--accent-border); }

.notify-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: var(--tap);
  padding: 0 var(--sp-3);
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  color: var(--text-2);
  font-size: var(--fs-12);
  font-weight: 550;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.notify-btn.subscribed { background: var(--accent-bg); border-color: var(--accent-border); color: var(--accent); }

/* Скелет каталога */
.sk-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.sk-item .sk-l { flex: 1; display: flex; flex-direction: column; gap: var(--sp-2); }
.sk-item .sk-a { height: 12px; width: 70%; }
.sk-item .sk-b { height: 10px; width: 35%; }
.sk-item .sk-q { width: 122px; height: 32px; border-radius: var(--r-md); flex-shrink: 0; }

/* ── Шиты ────────────────────────────────────────────────────────────────── */

.moverlay, .doverlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: flex-end;
  background: rgba(6, 7, 9, .5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.doverlay { z-index: 350; }
.moverlay.open, .doverlay.open { opacity: 1; pointer-events: all; }

.modal, .dmodal {
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: var(--sp-3) var(--pad-page) calc(var(--sp-5) + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  transform: translateY(100%);
  transition: transform var(--dur-slow) var(--ease-emphasized);
}
.moverlay.open .modal, .doverlay.open .dmodal { transform: translateY(0); }
.mhandle { width: 36px; height: 4px; margin: 0 auto var(--sp-4); border-radius: var(--r-full); background: var(--border-strong); }

.mtitle { font-family: var(--font-display); font-size: var(--fs-18); font-weight: 700; letter-spacing: -0.03em; line-height: var(--lh-tight); }
.msub { margin-top: var(--sp-1); margin-bottom: var(--sp-4); font-size: var(--fs-12); color: var(--text-2); }
.mclear-btn { background: none; border: none; color: var(--text-2); font-size: var(--fs-12); cursor: pointer; padding: 2px 6px; border-radius: var(--r-sm); }
@media (hover: hover) { .mclear-btn:hover { color: var(--danger-fg); } }

.mcat-title {
  padding: var(--sp-3) 0 var(--sp-1);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--text-2);
}
.mcat-sum { float: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--fs-11); font-weight: 700; color: var(--text); }
.mrow { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); }
.mrow:last-child { border-bottom: none; }
.mrow-name { flex: 1; font-size: var(--fs-13); line-height: var(--lh-snug); }
.mrow-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.mrow-price { margin-top: 2px; font-size: var(--fs-11); color: var(--text-2); }
.mrow-subtotal { margin-left: var(--sp-2); font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--fs-13); font-weight: 650; white-space: nowrap; }
.mrow-qty { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--fs-13); font-weight: 650; white-space: nowrap; }
.mrow-ctrl { display: flex; align-items: center; gap: var(--sp-1); flex-shrink: 0; }
.mrow-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--fs-14);
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
}
.mrow-btn:active { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }

.mbtns { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.mbtn {
  flex: 1;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: var(--fs-14);
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease);
}
.mbtn:active { opacity: .85; }
.mbtn-out { background: var(--surface-2); border-color: var(--border); color: var(--text); }
.mbtn-pri { background: var(--accent); color: var(--accent-fg); }

/* Поля доставки */
.dfield { margin-bottom: var(--sp-3); }
.dfield label { display: block; margin-bottom: var(--sp-1); font-size: var(--fs-11); font-weight: 600; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--text-2); }
.dfield input {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: var(--fs-14);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.dfield input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.dfield input.err { border-color: var(--danger-border); background: var(--danger-bg); }
.derr-msg { display: none; margin-top: var(--sp-1); font-size: var(--fs-11); color: var(--danger-fg); }
.dfield input.err + .derr-msg { display: block; }
.dback { display: flex; align-items: center; gap: var(--sp-1); margin-bottom: var(--sp-3); padding: 0; border: none; background: none; color: var(--text-2); font-size: var(--fs-13); font-weight: 550; cursor: pointer; }

/* На широком экране шит превращается в диалог по центру. */
@media (min-width: 768px) {
  .moverlay, .doverlay { align-items: center; justify-content: center; padding: var(--sp-6); }
  .modal, .dmodal {
    max-width: 560px;
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding-bottom: var(--sp-5);
    box-shadow: var(--shadow-3);
    transform: translateY(12px) scale(.98);
    opacity: 0;
    transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
  }
  .moverlay.open .modal, .doverlay.open .dmodal { transform: none; opacity: 1; }
  .mhandle { display: none; }
}

/* ── Экран успеха ────────────────────────────────────────────────────────── */

.sover {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-8);
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.sover.show { opacity: 1; pointer-events: all; }
/* Громкий момент №2: трафаретная марка «420» углём за галочкой. */
.sover::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 50% 28%, color-mix(in srgb, var(--ember) 20%, transparent), transparent 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 667 313' width='667' height='313'%3E%3Cg fill='%23ff6a00'%3E%3Cpath d='M69.3868 0L0 244.226H135.154L113.804 312.8H205.645L273.498 87.0509H181.657L155.522 174.04H120.062L170.676 0H69.3868Z'/%3E%3Cpath d='M188.545 0L168.975 70.4343H295.54L225.601 312.8H576.093L666.4 0H433.577L370.448 226.307H462.289L506.706 70.1243H546.338L496.768 242.118H345.908L417.687 0H188.545Z'/%3E%3C/g%3E%3C/svg%3E")
      no-repeat center 62% / min(78vw, 420px);
  opacity: .10;
  pointer-events: none;
}
.sico { position: relative; color: var(--ok-fg); animation: pop var(--dur-slow) var(--ease-out) both; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.06); } to { transform: scale(1); opacity: 1; } }
.stitle {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--fs-28);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: var(--lh-tight);
  text-align: center;
}
.ssub { position: relative; font-size: var(--fs-13); color: var(--text-2); text-align: center; line-height: var(--lh-loose); }
#sordernum { position: relative; }

/* ── Пустые состояния ────────────────────────────────────────────────────── */

.empty { padding: var(--sp-12) var(--sp-4); text-align: center; color: var(--text-2); font-size: var(--fs-13); }
.empty .ico { display: block; margin-bottom: var(--sp-2); color: var(--text-3); }

/* ── Страницы и профиль ──────────────────────────────────────────────────── */

.page { display: none; }
.page.active { display: block; }

/* Громкий момент №3: карточка профиля — угольный градиент и типографское зерно. */
.profile-card {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 720px;
  margin: var(--sp-4) auto 0;
  padding: var(--sp-4);
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--ember) 12%, transparent), transparent 58%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.profile-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity: .05;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.profile-card > * { position: relative; }
.profile-name { font-family: var(--font-display); letter-spacing: -0.03em; }
.profile-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.profile-avatar {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--text-2);
  font-size: var(--fs-16); font-weight: 650;
}
.profile-name { font-size: var(--fs-16); font-weight: 620; line-height: var(--lh-tight); }
.profile-username { margin-top: 2px; font-size: var(--fs-12); color: var(--text-2); }
.profile-tiers { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.tier-chip { padding: 3px 10px; border: 1px solid var(--accent-border); border-radius: var(--r-full); background: var(--accent-bg); color: var(--accent); font-size: var(--fs-11); font-weight: 600; }
.profile-hint { margin-top: var(--sp-3); padding: var(--sp-3); background: var(--surface-2); border-radius: var(--r-md); font-size: var(--fs-12); color: var(--text-2); text-align: center; line-height: var(--lh-normal); }

.sub-tabs {
  display: flex;
  gap: 2px;
  width: 100%;
  max-width: 720px;
  margin: var(--sp-3) auto 0;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow-x: auto;
  scrollbar-width: none;
}
.sub-tabs::-webkit-scrollbar { display: none; }
.sub-tab {
  flex: 1 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1);
  min-height: 34px;
  padding: 0 var(--sp-3);
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-2);
  font-size: var(--fs-12);
  font-weight: 550;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.sub-tab.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }

.sub-page { display: none; width: 100%; max-width: 720px; margin: 0 auto; padding: var(--sp-3) var(--pad-page) 140px; }
.sub-page.active { display: block; }

/* Долги */
.debt-total { padding: var(--sp-5); margin-bottom: var(--sp-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); text-align: center; }
.debt-amount { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--fs-36); font-weight: 700; line-height: 1; letter-spacing: var(--tr-tight); color: var(--danger-fg); }
.debt-label { margin-top: var(--sp-2); font-size: var(--fs-12); color: var(--text-2); }
.debt-ok { padding: var(--sp-6); background: var(--ok-bg); border: 1px solid var(--ok-border); border-radius: var(--r-lg); color: var(--ok-fg); font-size: var(--fs-14); font-weight: 600; text-align: center; }
.debt-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3); margin-bottom: var(--sp-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); }
.debt-row-num { font-family: var(--font-num); font-weight: 650; font-size: var(--fs-12); }
.debt-row-date { margin-top: 2px; font-size: var(--fs-11); color: var(--text-2); }
.debt-owed { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--fs-14); font-weight: 650; color: var(--danger-fg); text-align: right; }
.debt-paid-sub { margin-top: 2px; font-size: var(--fs-11); color: var(--text-2); text-align: right; }

/* Вишлист */
.wl-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); margin-bottom: var(--sp-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); }
.wl-name { flex: 1; font-size: var(--fs-13); line-height: var(--lh-snug); }
.wl-cat { display: inline-block; margin-top: 2px; font-size: var(--fs-11); color: var(--text-2); }
.wl-remove { flex-shrink: 0; min-height: 32px; padding: 0 var(--sp-3); background: none; border: 1px solid var(--border); border-radius: var(--r-full); color: var(--text-2); font-size: var(--fs-12); cursor: pointer; white-space: nowrap; }
.wl-remove:active { color: var(--danger-fg); border-color: var(--danger-border); }

/* ── Карточка заказа ─────────────────────────────────────────────────────── */

.ocard { padding: var(--sp-4); margin-bottom: var(--sp-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.ocard-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.ocard-num { font-family: var(--font-num); font-size: var(--fs-13); font-weight: 700; }
.ocard-date { font-size: var(--fs-11); color: var(--text-2); }
.ocard-delivery { margin-bottom: var(--sp-2); font-size: var(--fs-12); color: var(--text-2); line-height: var(--lh-normal); }
.ocard-items { font-size: var(--fs-12); color: var(--text); line-height: var(--lh-loose); }
.ocard-item-unavail { color: var(--danger-fg); text-decoration: line-through; }
.ocard-total { margin-top: var(--sp-2); font-size: var(--fs-12); color: var(--text-2); }
.ocard-toggle-row { display: flex; align-items: center; justify-content: space-between; margin-top: var(--sp-2); padding: var(--sp-1) 0; cursor: pointer; user-select: none; }
.ocard-chevron { color: var(--text-2); transition: transform var(--dur) var(--ease); }
.ocard-chevron.open { transform: rotate(180deg); }
.ocard-body { display: none; margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.ocard-body.open { display: block; }
.ocard-warn { display: none; margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: var(--r-sm); font-size: var(--fs-11); color: var(--warn-fg); }
.ocard-empty { padding: var(--sp-12) var(--sp-4); color: var(--text-2); font-size: var(--fs-13); text-align: center; }

.ocard-repeat, .ocard-claim, .ocard-claim-done, .ocard-invoice, .ocard-edit-btn {
  width: 100%;
  min-height: 40px;
  margin-top: var(--sp-2);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: var(--fs-13);
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease);
}
.ocard-repeat { background: var(--accent); color: var(--accent-fg); }
.ocard-claim { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-fg); }
.ocard-claim-done { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok-fg); cursor: default; }
.ocard-invoice { background: var(--surface-2); border-color: var(--border); color: var(--text); }
.ocard-invoice:disabled { opacity: .5; cursor: not-allowed; }
.ocard-edit-btn { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-fg); }
.ocard-repeat:active, .ocard-claim:active, .ocard-invoice:active, .ocard-edit-btn:active { opacity: .85; }

/* Рекламация */
.claim-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.claim-chip {
  flex: 1;
  min-width: 130px;
  min-height: 40px;
  padding: 0 var(--sp-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: var(--fs-12);
  font-weight: 550;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.claim-chip.sel { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-fg); font-weight: 650; }
.claim-textarea {
  width: 100%;
  height: 84px;
  padding: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-13);
  resize: none;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease);
}
.claim-textarea:focus { border-color: var(--accent); }

/* ── Онбординг ───────────────────────────────────────────────────────────── */

#onboarding {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  background: rgba(6, 7, 9, .6);
  backdrop-filter: blur(4px);
  animation: u-fade var(--dur) var(--ease) both;
}
.onb-card {
  width: 100%;
  max-width: 380px;
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-3);
  animation: onb-in var(--dur-slow) var(--ease-out) both;
}
@keyframes onb-in { from { opacity: 0; transform: translateY(24px) scale(.97); } }
.onb-icon { margin-bottom: var(--sp-3); color: var(--ember); }
.onb-title { font-family: var(--font-display); font-size: var(--fs-22); font-weight: 700; letter-spacing: -0.03em; line-height: var(--lh-tight); }
.onb-sub { margin: var(--sp-1) 0 var(--sp-4); font-size: var(--fs-13); color: var(--text-2); line-height: var(--lh-normal); }
.onb-date-badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  margin-bottom: var(--sp-5);
  padding: var(--sp-2) var(--sp-3);
  background: var(--accent-bg);
  border: 1px solid var(--accent-border);
  border-radius: var(--r-md);
  color: var(--accent);
  font-size: var(--fs-13);
  font-weight: 600;
}
.onb-hint { margin-top: var(--sp-3); font-size: var(--fs-11); color: var(--text-3); text-align: center; }

/* ── Мелочи ──────────────────────────────────────────────────────────────── */

.lc { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; vertical-align: -2px; flex-shrink: 0; display: inline-block; }
.lc-sm { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; fill: none; vertical-align: -1px; display: inline-block; }
.lc-lg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; vertical-align: -4px; display: inline-block; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; vertical-align: middle; margin-right: 2px; flex-shrink: 0; }
.dot-yellow { background: var(--warn-fg); }
.dot-red { background: var(--danger-fg); }
.dot-green { background: var(--ok-fg); }


/* ── Трафаретная лента бренда в каталоге ─────────────────────────────────────
   669 позиций подряд читаются как сплошная стена. Лента даёт ритм и заодно
   говорит, где заканчивается один бренд и начинается другой. */
.brand-sep {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-4) 0 var(--sp-1);
  padding: var(--sp-1) 0;
  background: var(--bg);
}
.brand-sep:first-child { margin-top: 0; }
.brand-sep span {
  font-family: var(--font-display);
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ember);
  white-space: nowrap;
}
.brand-sep::after {
  content: '';
  flex: 1;
  height: 8px;
  /* косая штриховка углём — та же графика, что на складских лентах */
  background-image: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--ember) 55%, transparent) 0 2px,
    transparent 2px 7px
  );
  border-radius: 2px;
}

/* Пустой экран каталога: марка проступает за текстом. */
.empty--brand {
  position: relative;
  padding-top: var(--sp-16);
}
.empty--brand::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 667 313' width='667' height='313'%3E%3Cg fill='%23ff6a00'%3E%3Cpath d='M69.3868 0L0 244.226H135.154L113.804 312.8H205.645L273.498 87.0509H181.657L155.522 174.04H120.062L170.676 0H69.3868Z'/%3E%3Cpath d='M188.545 0L168.975 70.4343H295.54L225.601 312.8H576.093L666.4 0H433.577L370.448 226.307H462.289L506.706 70.1243H546.338L496.768 242.118H345.908L417.687 0H188.545Z'/%3E%3C/g%3E%3C/svg%3E")
    no-repeat center / min(70%, 280px);
  opacity: .08;
  pointer-events: none;
}
.empty--brand > * { position: relative; }


/* ── Картка клієнта ──────────────────────────────────────────────────────────
   Профиль — единственное место клиентской части, где бренд звучит в полный
   голос: угольная фактура, трафаретная марка фоном, имя дисплейным шрифтом.
   Главное число — долг: за ним человек сюда и заходит. */
.pcard {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 720px;
  margin: var(--sp-3) auto 0;
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  background:
    radial-gradient(130% 120% at 100% 0%, color-mix(in srgb, var(--ember) 22%, transparent), transparent 58%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-1);
}
/* Марка проступает как тиснение на пластике карты. */
.pcard::before {
  content: '';
  position: absolute;
  right: -34px;
  bottom: -18px;
  width: 220px;
  height: 104px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 667 313' width='667' height='313'%3E%3Cg fill='%23ff6a00'%3E%3Cpath d='M69.3868 0L0 244.226H135.154L113.804 312.8H205.645L273.498 87.0509H181.657L155.522 174.04H120.062L170.676 0H69.3868Z'/%3E%3Cpath d='M188.545 0L168.975 70.4343H295.54L225.601 312.8H576.093L666.4 0H433.577L370.448 226.307H462.289L506.706 70.1243H546.338L496.768 242.118H345.908L417.687 0H188.545Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
  opacity: .07;
  pointer-events: none;
}
/* Зерно, чтобы градиент не выглядел «пластиковым». */
.pcard::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  opacity: .045;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.pcard > * { position: relative; z-index: 1; }

.pcard__head { display: flex; align-items: center; gap: var(--sp-3); }
.pcard__who { flex: 1; min-width: 0; }
.pcard .profile-name {
  font-family: var(--font-display);
  font-size: var(--fs-18);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pcard .profile-username { margin-top: 2px; font-family: var(--font-num); font-size: var(--fs-11); color: var(--text-2); }
.pcard .profile-avatar {
  width: 52px; height: 52px;
  border: 2px solid color-mix(in srgb, var(--ember) 45%, transparent);
  background-size: cover;
  background-position: center;
  font-size: var(--fs-18);
}
.pcard .profile-avatar.has-photo { background-color: transparent; }
.pcard .profile-tiers { flex-direction: column; align-items: flex-end; gap: 4px; }

/* Главное число карты */
.pcard__debt { margin-top: var(--sp-4); }
.pcard__debt-val {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-36);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--danger-fg);
}
.pcard__debt-val.is-clear { color: var(--ok-fg); font-size: var(--fs-22); }
.pcard__debt-sub { margin-top: var(--sp-1); font-size: var(--fs-12); color: var(--text-2); }

/* Вторичные числа — строкой, тише главного */
.pcard__stats {
  display: flex;
  gap: var(--sp-6);
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}
.pstat { display: flex; flex-direction: column; gap: 2px; }
.pstat__v {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-16);
  font-weight: 650;
  line-height: 1.1;
}
@media (max-width: 379px) {
  .pcard__head { flex-wrap: wrap; }
  .pcard .profile-tiers { flex-direction: row; align-items: center; width: 100%; }
  .pcard__stats { gap: var(--sp-4); justify-content: space-between; }
}

/* ── Профіль: підвкладки ─────────────────────────────────────────────────── */

.sub-tabs { width: 100%; max-width: 720px; margin: var(--sp-3) auto 0; }
.sub-tab { gap: var(--sp-1); }
.seg-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  margin-left: 5px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  color: var(--text-2);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  font-weight: 700;
}
.u-seg.is-active .seg-count { background: var(--accent-bg); color: var(--accent); }
.seg-count--danger { background: var(--danger-bg); color: var(--danger-fg); }
@media (max-width: 479px) { .sub-tab .lc { display: none; } }

/* ── Картка замовлення ───────────────────────────────────────────────────── */

.ord {
  margin-bottom: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) var(--sp-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color var(--dur-fast) var(--ease);
}
.ord--mine { border-color: var(--accent-border); }
.ord__top { display: flex; align-items: center; gap: var(--sp-2); }
.ord__num { font-family: var(--font-num); font-size: var(--fs-13); font-weight: 700; letter-spacing: -0.02em; }
.ord__spacer { flex: 1; }
.ord__date { font-size: var(--fs-11); color: var(--text-2); white-space: nowrap; }
.ord__who {
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: var(--fs-11);
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
}
.ord--mine .ord__who { background: var(--accent-bg); border-color: var(--accent-border); color: var(--accent); }

.ord__money { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); }
.ord__sum {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-22);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

/* Полоса оплаты: сколько из суммы уже закрыто */
.ord__bar, .debt-bar {
  height: 4px;
  margin-top: var(--sp-2);
  border-radius: var(--r-full);
  background: var(--surface-3);
  overflow: hidden;
}
.ord__bar > i, .debt-bar > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--warn-fg);
}
.ord__bar-note, .debt-row__sub { margin-top: 4px; font-size: var(--fs-11); color: var(--text-2); }

.ord__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  width: calc(100% + var(--sp-4) * 2);
  margin: var(--sp-2) calc(var(--sp-4) * -1) 0;
  padding: var(--sp-2) var(--sp-4);
  border: none;
  border-top: 1px solid var(--border);
  background: none;
  color: var(--text-2);
  font-size: var(--fs-12);
  cursor: pointer;
}
.ord__body { padding-bottom: var(--sp-2); }
.ord__delivery {
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-2);
  background: var(--surface-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-12);
  color: var(--text-2);
  line-height: var(--lh-normal);
}
.ord__items { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-12); color: var(--text-2); }
.ord__item { display: flex; justify-content: space-between; gap: var(--sp-3); }
.ord__item b { color: var(--text); font-weight: 600; white-space: nowrap; }
.ord__warn {
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: var(--r-sm);
  font-size: var(--fs-11);
  color: var(--warn-fg);
}
.ord__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.ord__actions .u-btn { flex: 1 1 auto; min-height: 40px; }
.ord__done {
  flex: 1 1 100%;
  padding: var(--sp-2) var(--sp-3);
  background: var(--ok-bg);
  border: 1px solid var(--ok-border);
  border-radius: var(--r-md);
  color: var(--ok-fg);
  font-size: var(--fs-12);
  font-weight: 600;
  text-align: center;
}
.ord__done--wait { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-fg); }

/* ── Борги ───────────────────────────────────────────────────────────────── */

.debt-total { text-align: left; }
.debt-total .debt-amount { margin-top: var(--sp-1); }
.debt-row { display: block; }
.debt-row__head { display: flex; align-items: baseline; gap: var(--sp-2); }
.debt-row__head .debt-row-num { font-size: var(--fs-13); }
.debt-row__head .debt-row-date { flex: 1; margin: 0; }
.debt-owed { font-size: var(--fs-16); }
.debt-ok { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); }
.debt-ok__mark { color: var(--ok-fg); }
.debt-ok__mark svg { width: 28px; height: 28px; }
.debt-ok__title { font-size: var(--fs-16); font-weight: 650; }
.debt-ok__sub { font-size: var(--fs-12); font-weight: 400; color: var(--text-2); }

/* ── Вішліст ─────────────────────────────────────────────────────────────── */

.wl-row { align-items: center; }
.wl-row--ready { border-color: var(--ok-border); background: color-mix(in srgb, var(--ok-bg) 55%, var(--surface)); }
.wl-info { flex: 1; min-width: 0; }
.wl-meta { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-1); flex-wrap: wrap; }
.wl-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  min-height: 32px;
  padding: 0;
  color: var(--text-3);
}

/* ── Заклад ──────────────────────────────────────────────────────────────── */

.venue-head {
  margin-bottom: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.venue-head__name {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-16);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.venue-head__name svg { width: 18px; height: 18px; color: var(--ember); }
.venue-head__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}
.pstat__v.is-debt { color: var(--danger-fg); }

/* ── Онбординг ───────────────────────────────────────────────────────────── */

.onb-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--ember) 24%, transparent), transparent 60%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  text-align: left;
}
.onb-card::before {
  content: '';
  position: absolute;
  right: -30px;
  bottom: -26px;
  width: 210px;
  height: 100px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 667 313' width='667' height='313'%3E%3Cg fill='%23ff6a00'%3E%3Cpath d='M69.3868 0L0 244.226H135.154L113.804 312.8H205.645L273.498 87.0509H181.657L155.522 174.04H120.062L170.676 0H69.3868Z'/%3E%3Cpath d='M188.545 0L168.975 70.4343H295.54L225.601 312.8H576.093L666.4 0H433.577L370.448 226.307H462.289L506.706 70.1243H546.338L496.768 242.118H345.908L417.687 0H188.545Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
  opacity: .08;
  pointer-events: none;
}
.onb-card > * { position: relative; z-index: 1; }
.onb-card .onb-title { margin-top: var(--sp-2); font-size: var(--fs-28); }
.onb-card .onb-date-badge { font-family: var(--font-num); font-size: var(--fs-14); }
.debt-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
  font-size: var(--fs-12);
  color: var(--text-2);
}
.debt-head__paid { color: var(--text-2); }
/* Сумма и статус оплаты не должны переносить друг друга на узком экране. */
.ord__money { flex-wrap: wrap; row-gap: var(--sp-1); }
.ord__sum { white-space: nowrap; }
@media (max-width: 399px) {
  .ord__top { flex-wrap: wrap; row-gap: var(--sp-1); }
  .ord__sum { font-size: var(--fs-18); }
}

/* ── Наявність у кошику ──────────────────────────────────────────────────── */

/* Смужка-попередження над списком позицій */
.cart-warn {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--warn-border);
  border-radius: var(--r-md);
  background: var(--warn-bg);
  color: var(--warn-fg);
  font-size: var(--fs-12);
  line-height: var(--lh-snug);
}
.cart-warn .lc-sm { flex-shrink: 0; margin-top: 1px; }
.cart-warn-txt { flex: 1; min-width: 0; }
.cart-warn-txt b { display: block; font-weight: 650; }
.cart-warn-txt span { color: var(--warn-fg); opacity: .8; }
.cart-warn-fix {
  flex-shrink: 0;
  align-self: center;
  padding: 6px 10px;
  border: 1px solid var(--warn-fg);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--warn-fg);
  font-family: inherit;
  font-size: var(--fs-12);
  font-weight: 600;
  cursor: pointer;
}
.cart-warn-fix:active { background: var(--warn-fg); color: var(--warn-bg); }

/* Варіант після відмови сервера — та ж форма, тривожніший тон */
.cart-warn--hard {
  border-color: var(--danger-border);
  background: var(--danger-bg);
  color: var(--danger-fg);
}
.cart-warn--hard .cart-warn-txt span { color: var(--danger-fg); }
.cart-warn--hard .cart-warn-fix { border-color: var(--danger-fg); color: var(--danger-fg); }
.cart-warn--hard .cart-warn-fix:active { background: var(--danger-fg); color: var(--danger-bg); }

/* Бейдж наявності в рядку */
.mrow-badge {
  align-self: flex-start;
  margin-top: 3px;
  padding: 1px 6px;
  border-radius: var(--r-full);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  white-space: nowrap;
}
.mrow-badge--out   { background: var(--danger-bg); color: var(--danger-fg); }
.mrow-badge--short { background: var(--warn-bg);   color: var(--warn-fg); }

/* Позиція, якої немає: лишається в кошику, але видно що вона не піде */
.mrow--out .mrow-name { color: var(--text-3); text-decoration: line-through; }
.mrow--out .mrow-price { text-decoration: line-through; }
.mrow--out .mrow-qty { color: var(--text-3); }
.mrow--out .mrow-btn:not(.mrow-btn--del) { opacity: .35; pointer-events: none; }
.mrow-btn--del { border-color: var(--danger-border); color: var(--danger-fg); }
.mrow-btn--del:active { background: var(--danger-fg); border-color: var(--danger-fg); color: #fff; }

/* Сума рядка з нестачею: щоб пара «14 шт. / 705 ₴» не читалась як помилка,
   під сумою — мікропідпис, за скільки штук вона порахована. */
.mrow-subwrap { display: flex; flex-direction: column; align-items: flex-end; margin-left: var(--sp-2); }
.mrow-subwrap .mrow-subtotal { margin-left: 0; }
.mrow-subnote { font-size: 10px; line-height: 1.2; color: var(--warn-fg); white-space: nowrap; }

/* Позиція, якої менше ніж треба: тап по бейджу зменшує до залишку */
.mrow-fix {
  padding: 0;
  border: none;
  background: none;
  color: var(--warn-fg);
  font-family: inherit;
  font-size: var(--fs-11);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

/* Кнопка відправки, коли є проблемні позиції: колір штатний (.mbtn-pri),
   змінюється лише напис — окремого кольору кнопки не заводимо. */