/* ═══════════════════════════════════════════════════════════════
   LUMÉ — оформление заказа (.co) и отслеживание заказа (.trk)
   Страница оформления — «режим кассы»: льняная подложка во всю ширину,
   белые карточки шагов, липкая сводка справа.
   ═══════════════════════════════════════════════════════════════ */

.co {
  --co-page: var(--bg-soft);
  --co-card: var(--bg);
  --co-sticky: 128px;             /* высота липкой шапки на десктопе + зазор */
  background: var(--co-page);
  min-height: 60vh;               /* как у #app — иначе под короткой страницей остаётся белая полоса */
  padding-bottom: 72px;
  margin-bottom: -72px;           /* подложка доходит до подвала */
}
html[data-theme="dark"] .co { --co-page: var(--bg); --co-card: var(--bg-soft); }

/* .co__wrap — обычная .wrap во всю ширину: хлебные крошки и заголовок стоят
   на одной линии с логотипом, как на остальных страницах */
.co .crumbs { margin: 0; padding: 18px 0 14px; }

.co__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px 24px;
  flex-wrap: wrap; margin-bottom: 22px;
}
.co__back {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 600; color: var(--text-dim);
}
.co__back:hover { color: var(--text); }
.co__back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.co-card {
  background: var(--co-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

.co-alert {
  margin: 0 0 18px; padding: 12px 16px;
  background: var(--madder-soft); color: var(--text);
  border-left: 3px solid var(--madder);
  font-size: 14px;
}
.co-alert a { color: var(--madder); font-weight: 600; text-decoration: underline; }

.co-nowrap { white-space: nowrap; }

/* ── Сетка: форма + сводка ─────────────────────────────────────── */
.co__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 24px;
  align-items: start;
}
.co__form { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* В DOM сводка идёт раньше формы (так на мобильном совпадают порядок чтения и
   визуальный) — на десктопе раскладываем колонки явно: форма слева, сводка справа */
.co__form { grid-column: 1; grid-row: 1; }
.co__side { grid-column: 2; grid-row: 1; }

/* ── Шаги ──────────────────────────────────────────────────────── */
.co-step { padding: 24px 28px 12px; }
.co-step__head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.co-step__no {
  position: relative; flex: none;
  width: 30px; height: 30px; display: grid; place-items: center;
  background: var(--text); color: var(--co-card);
  border-radius: var(--radius);
  font-family: var(--font);
  font-weight: 700; font-size: 16px; line-height: 1;
  transition: background .25s var(--ease);
}
.co-step__no svg {
  position: absolute; inset: 5px; width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; transform: scale(.6);
  transition: opacity .2s var(--ease), transform .3s var(--pop);
}
.co-step.is-complete .co-step__no { background: var(--moss); }
.co-step.is-complete .co-step__no > span { opacity: 0; }
.co-step.is-complete .co-step__no svg { opacity: 1; transform: none; }
.co-step__title {
  font-family: var(--font);
  font-size: 22px; font-weight: 700; letter-spacing: -.01em; text-transform: none; line-height: 1;
}
.co-step__lead { margin: -8px 0 14px; font-size: 14px; color: var(--text-dim); max-width: 60ch; }

.co .field { margin-bottom: 18px; }
.co .field label { font-size: 13px; }
.co-optional { font-weight: 400; color: var(--text-dim); margin-left: 4px; }
.co-hint { margin: 5px 0 0; font-size: 12px; line-height: 1.4; color: var(--text-dim); }
.co .field__error:empty { display: none; }
.co .field__error { line-height: 1.4; }
.co .field.has-error .co-hint { display: none; }
.co .field input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px var(--bg) inset; -webkit-text-fill-color: var(--text); }

.co-prefill {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  margin: -6px 0 16px; padding: 10px 14px;
  background: var(--indigo-soft); font-size: 13px;
}
.co-prefill .btn--link { font-size: 13px; color: var(--indigo); }

/* ── Карточки выбора (доставка, оплата) ────────────────────────── */
.co-opts { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 8px; }
.co-group { margin-bottom: 18px; }
.co-group > .field__error { margin-top: 6px; }
.co-opt {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center; gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--co-card);
  cursor: pointer;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
}
.co-opt:hover { border-color: var(--text-dim); }
.co-opt.is-checked, .co-opt:has(input:checked) { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.co-opt:has(input:focus-visible) { outline: 2px solid var(--indigo); outline-offset: 2px; }
.co-opt__radio { width: 18px; height: 18px; margin: 0; accent-color: var(--indigo); flex: none; }
@supports selector(:has(*)) {
  .co-opt__radio:focus-visible { outline: none; }   /* кольцо фокуса рисует вся карточка */
}
.co-opt__icon svg {
  width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.co-opt__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.co-opt__title { font-size: 15px; font-weight: 600; line-height: 1.3; }
.co-opt__desc { font-size: 13px; color: var(--text-dim); line-height: 1.35; }
.co-opt__price { font-size: 14px; font-weight: 700; white-space: nowrap; text-align: right; }
.co-free { color: var(--moss); font-weight: 700; }
.co-group.has-error .co-opt { border-color: var(--madder); }

.co-free-note { margin: -6px 0 16px; font-size: 13px; color: var(--text-dim); }
.co-free-note b { color: var(--text); }

#co-city::-webkit-calendar-picker-indicator { display: none !important; }
.co-addr__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0 16px; }
.co-warn {
  display: flex; gap: 10px; align-items: flex-start;
  margin: -6px 0 18px; font-size: 13px; color: var(--weld); line-height: 1.45;
}
.co-warn::before {
  content: ""; width: 8px; height: 8px; margin-top: 5px; flex: none;
  border-radius: 50%; background: var(--weld-dot);
}

.co-pickup {
  display: flex; gap: 14px; align-items: flex-start;
  margin-bottom: 18px; padding: 14px 16px;
  background: var(--co-page); font-size: 14px; line-height: 1.5;
}
.co-pickup p { margin: 0; }
.co-pickup svg { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; }

/* ── Шаг 4 ─────────────────────────────────────────────────────── */
.co-comment textarea { min-height: 84px; }
.co-count { text-align: right; font-variant-numeric: tabular-nums; }
.co-consent { margin-bottom: 14px; }
.co-consent a { color: var(--indigo); text-decoration: underline; text-underline-offset: 2px; }
.co-consent > .field__error { margin-left: 28px; }
.co-group.has-error .check input { outline: 2px solid var(--madder); outline-offset: 1px; }
.co-remember { margin-bottom: 18px; }
.co-remember .co-hint { display: block; margin-top: 2px; }

/* ── Отправка ──────────────────────────────────────────────────── */
.co-submit { padding: 22px 28px 20px; }
.co-submit__total { display: none; }
.co-submit__btn { position: relative; min-height: 56px; font-size: 18px; }
.co-submit__btn .spinner,
.trk-form__btn .spinner {
  display: none; width: 18px; height: 18px;
  border-color: currentColor; border-top-color: transparent; opacity: .9;
}
.co-submit__btn.is-busy .spinner,
.trk-form__btn.is-busy .spinner { display: block; }
.co-submit__btn.is-busy, .trk-form__btn.is-busy { cursor: progress; }

.co-submit__error:empty { display: none; }
.co-submit__error { margin-top: 14px; }
.co-submit__box {
  padding: 14px 16px;
  background: var(--madder-soft);
  border-left: 3px solid var(--madder);
  font-size: 14px; line-height: 1.5;
}
.co-submit__box p { margin: 0; }
.co-submit__box p + p { margin-top: 8px; }
.co-submit__box b { color: var(--madder); font-weight: 700; }
.co-submit__box a, .co-submit__box .btn--link { color: var(--text); font-weight: 600; }
.co-submit__box .btn--link { font-size: 14px; }
.co-submit__list { margin: 8px 0 12px 18px; }
.co-submit__list li { margin-bottom: 3px; }
.co-submit__list b { color: var(--text) !important; font-weight: 600 !important; }
.co-submit__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.co-submit__actions .btn--ghost { background: var(--co-card); }
.co-submit__actions .btn--ghost:hover { background: var(--text); }

.co-submit__fine { margin: 14px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-dim); }
.co-submit__fine a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ── Сводка ────────────────────────────────────────────────────── */
.co__side { position: sticky; top: var(--co-sticky); min-width: 0; }
.co-sum { padding: 22px 24px 20px; }
.co-sum__toggle { display: none; }
.co-sum__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.co-sum__title {
  font-family: var(--font);
  font-size: 22px; font-weight: 700; letter-spacing: -.01em; text-transform: none; line-height: 1;
}
.co-sum__count { font-size: 13px; color: var(--text-dim); }
.co-sum__edit { margin-left: auto; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Позиции */
.co-lines { list-style: none; }
/* Сводка всегда помещается в экран: если товаров много, прокручивается только список */
@media (min-width: 901px) and (min-height: 641px) {
  .co__side { display: flex; flex-direction: column; max-height: calc(100vh / var(--zoom, 1) - var(--co-sticky) - 16px); }
  .co-sum { display: flex; flex-direction: column; min-height: 0; }
  .co-sum__body { display: flex; flex-direction: column; min-height: 0; }
  .co-sum__body > * { flex: none; }
  .co-sum__body > .co-lines {
    flex: 0 1 auto; min-height: 0;
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
    margin-right: -12px; padding-right: 12px;
    /* тени-подсказки «список прокручивается» (исчезают у краёв) */
    background:
      linear-gradient(var(--co-card) 30%, transparent) top / 100% 28px no-repeat local,
      linear-gradient(transparent, var(--co-card) 70%) bottom / 100% 28px no-repeat local,
      radial-gradient(farthest-side at 50% 0, color-mix(in srgb, var(--text) 16%, transparent), transparent) top / 100% 10px no-repeat scroll,
      radial-gradient(farthest-side at 50% 100%, color-mix(in srgb, var(--text) 16%, transparent), transparent) bottom / 100% 10px no-repeat scroll;
  }
}
@media (min-width: 901px) and (min-height: 641px) {
  .co-sum__body > .co-lines:has(> li + li) { min-height: 150px; }
}
@media (min-width: 901px) and (max-height: 640px) {
  .co__side { position: static; }
}
.co-line {
  display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; gap: 12px;
  align-items: start;
  padding: 12px 0; border-bottom: 1px solid var(--line-soft);
}
.co-line__img {
  position: relative; display: block; aspect-ratio: 3 / 4;
  background: var(--bg-plate); overflow: hidden;
}
.co-line__img img { width: 100%; height: 100%; object-fit: cover; }
.co-line__img img.is-broken { visibility: hidden; }
.co-line__img > svg { width: 84%; height: auto; margin: 8% auto 0; }
.co-line__info { min-width: 0; }
.co-line__name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin: 0; font-size: 14px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere;
}
.co-line__meta, .co-line__qty { margin: 3px 0 0; font-size: 12.5px; color: var(--text-dim); line-height: 1.35; }
.co-swatch {
  display: inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: -1px;
  border-radius: 50%; border: 1px solid rgba(127, 127, 127, .45);
}
.co-line__qty { font-variant-numeric: tabular-nums; }
.co-line__warn {
  display: flex; align-items: center; gap: 6px;
  margin: 5px 0 0; font-size: 12px; font-weight: 600; color: var(--weld);
}
.co-line__warn::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--weld-dot); flex: none; }
.co-line__warn.is-out { color: var(--madder); }
.co-line__warn.is-out::before { background: var(--madder); }
.co-line__warn.is-low { font-weight: 400; }
.co-line__sum {
  margin: 0; font-size: 14px; text-align: right;
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
}
.co-line__sum .price__old { font-size: 12px; }

/* Промокод */
.co-promo { padding: 16px 0 4px; border-bottom: 1px solid var(--line-soft); }
.co-promo__label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; }
.co-promo__row { display: flex; gap: 8px; }
.co-promo__row .input { min-height: 44px; text-transform: uppercase; letter-spacing: .06em; font-family: var(--font-mono); font-size: 14px; }
.co-promo__row .input::placeholder { text-transform: none; letter-spacing: 0; font-family: var(--font); }
.co-promo__row .btn { flex: none; padding: 0 16px; }
.co-promo__msg { margin: 6px 0 10px; font-size: 12.5px; line-height: 1.4; color: var(--text-dim); }
.co-promo__msg:empty { display: none; }
.co-promo__msg.is-error { color: var(--madder); }
.co-promo__msg.is-ok { color: var(--moss); }
.co-promo__msg.is-warn { color: var(--weld); }
.co-promo__hint { margin: 0 0 10px; font-size: 12.5px; color: var(--text-dim); }
.co-promo__hint .btn--link { font-size: 12px; text-decoration: none !important; }
.co-promo__form .co-promo__row + .co-promo__hint { margin-top: 8px; }
.co-promo__applied {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  font-size: 14px;
}
.co-promo__applied > svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--moss); stroke-width: 1.6; }
.co-promo__applied .btn--link { margin-left: auto; font-size: 13px; }
.co-promo__applied + .co-promo__msg { margin-top: -6px; }
.co-promo__pct { color: var(--madder); font-weight: 700; }

/* Промокод и номер заказа — «код»: моноширинный, пунктирная рамка */
.co-code {
  display: inline-block;
  padding: 1px 6px;
  border: 1px dashed currentColor;
  font-family: var(--font); font-size: .86em; letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap;
}

/* Суммы */
.co-totals { margin: 14px 0 0; font-size: 14px; }
.co-totals > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 4px 0; }
.co-totals dt { color: var(--text-dim); }
.co-totals dd { margin: 0; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.co-totals .is-discount dd { color: var(--madder); }
.co-totals .is-discount .co-code { color: var(--text); font-size: 11.5px; margin-left: 2px; }
.co-totals__sub { display: block; font-size: 12px; opacity: .85; }
.co-totals__total {
  margin-top: 8px; padding-top: 12px !important;
  border-top: 1px solid var(--line);
}
.co-totals__total dt {
  color: var(--text);
  font-family: var(--font);
  font-size: 17px; font-weight: 700; letter-spacing: -.01em; text-transform: none;
}
.co-totals__total dd { font-size: 22px; font-weight: 700; }
.co-totals__saved { margin: 2px 0 0; text-align: right; font-size: 13px; font-weight: 600; color: var(--madder); }
.co-totals--facts dd { white-space: normal; font-weight: 400; max-width: 62%; }
.co-totals--facts .co-totals__total dd { font-weight: 700; }

.co-note {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: 18px; padding: 12px 14px;
  background: var(--co-page);
  font-size: 13px; line-height: 1.5; color: var(--text-dim);
}
.co-note p { margin: 0; }
.co-note b { color: var(--text); font-weight: 600; }
.co-note svg { width: 20px; height: 20px; flex: none; margin-top: 1px; fill: none; stroke: var(--moss); stroke-width: 2; }

.co-assure { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; font-size: 12.5px; color: var(--text-dim); }
.co-assure li { display: flex; align-items: center; gap: 8px; }
.co-assure svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }

/* ── Пустая корзина ────────────────────────────────────────────── */
.co-empty { margin-top: 4px; }
.co-empty .empty { padding: 56px 16px 60px; }
.co-empty .empty h1 { margin-bottom: 12px; }
.co-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.co-empty__more { margin: 22px 0 0 !important; font-size: 14px; }
.co-empty__more a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; color: var(--text); }
.co-empty__more svg { width: 16px !important; height: 16px !important; margin: 0 !important; stroke-width: 1.8 !important; }
.co-empty__more + .co-empty__more { margin-top: 8px !important; }

/* ── Заказ оформлен ────────────────────────────────────────────── */
.co-done {
  display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start;
  padding-top: 28px;
}
.co-done__main { padding: 40px 44px 36px; }
.co-done__mark {
  display: grid; place-items: center;
  width: 52px; height: 52px; margin-bottom: 22px;
  background: var(--moss); color: var(--co-card);
  border-radius: var(--radius);
  animation: coPop .5s var(--pop) both;
}
.co-done__mark svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@keyframes coPop { from { transform: scale(.6); opacity: 0; } }
.co-done__kicker { margin: 0 0 8px; font-size: 15px; color: var(--text-dim); }
.co-done .page-title:focus { outline: 0; }
.co-done__no {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  margin: 24px 0 14px; padding: 16px 18px;
  border: 1px dashed var(--label-edge);
  background: var(--label-bg);
}
.co-done__no-label {
  flex-basis: 100%;
  font-size: 11px; font-family: var(--font); letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim);
}
.co-done__no-value {
  font-family: var(--font-mono); font-size: clamp(24px, 3.4vw, 34px); font-weight: 600;
  letter-spacing: .04em; line-height: 1.1; overflow-wrap: anywhere;
}
.co-done__copy { margin-left: auto; background: var(--co-card); }
.co-done__lead { margin: 0 0 28px; color: var(--text-dim); max-width: 60ch; }
.co-done__h {
  margin-bottom: 14px;
  font-family: var(--font);
  font-size: 17px; font-weight: 700; letter-spacing: -.01em; text-transform: none;
}
.co-done__steps { list-style: none; counter-reset: codone; margin-bottom: 30px; }
.co-done__steps li {
  counter-increment: codone;
  position: relative; padding: 0 0 18px 46px;
}
.co-done__steps li::before {
  content: counter(codone);
  position: absolute; left: 0; top: 0;
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid var(--text); border-radius: var(--radius);
  font-family: var(--font); font-weight: 700; font-size: 15px;
}
.co-done__steps li:not(:last-child)::after {
  content: ""; position: absolute; left: 15px; top: 34px; bottom: 4px; width: 1px; background: var(--line);
}
.co-done__steps b { display: block; font-size: 15px; margin-bottom: 2px; }
.co-done__steps li > span { display: block; font-size: 14px; color: var(--text-dim); }
.co-done__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.co-done__side { padding: 22px 24px 20px; }
.co-done__side .co-sum__title { margin-bottom: 4px; }
.co-done__facts { padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
.co-done__facts + .co-totals { margin-top: 10px; }
.co-done__fine { margin: 12px 0 0; font-size: 12.5px; color: var(--text-dim); }

/* ═══════════════════════════════════════════════════════════════
   Отслеживание заказа
   ═══════════════════════════════════════════════════════════════ */
.trk__head { display: block; }
.trk__head .lead { margin: 10px 0 0; }
.trk__grid {
  display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 24px; align-items: start;
}
.trk__side { position: sticky; top: var(--co-sticky); min-width: 0; }
.trk-form { padding: 24px 24px 20px; }
.trk-form #trk-no { font-family: var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.trk-form #trk-no::placeholder { letter-spacing: .04em; }
.trk-form__btn { margin-top: 4px; }
.trk-form__error:empty { display: none; }
.trk-form__error {
  margin-top: 14px; padding: 12px 14px;
  background: var(--madder-soft); border-left: 3px solid var(--madder);
  font-size: 14px; line-height: 1.45;
}
.trk-form__error p { margin: 0; }
.trk-form__note { margin: 12px 0 0; font-size: 12.5px; color: var(--text-dim); }
.trk-help { margin: 14px 4px 0; font-size: 13px; line-height: 1.5; color: var(--text-dim); }
.trk-help a { color: var(--text); font-weight: 600; }

.trk__result { min-width: 0; }
.trk__result:focus { outline: 0; }

/* Пока ничего не искали */
.trk-how { padding: 26px 28px 22px; }
.trk-how__title { margin-bottom: 18px; }
.trk-how__title, .trk-card__h {
  font-family: var(--font);
  font-size: 18px; font-weight: 700; letter-spacing: -.01em; text-transform: none;
}
.trk-how__list { list-style: none; counter-reset: trkhow; }
.trk-how__list li {
  counter-increment: trkhow;
  position: relative; padding: 0 0 18px 46px;
}
.trk-how__list li::before {
  content: counter(trkhow);
  position: absolute; left: 0; top: 0;
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-family: var(--font); font-weight: 700; font-size: 15px; color: var(--text-dim);
}
.trk-how__list li:not(:last-child)::after {
  content: ""; position: absolute; left: 15px; top: 34px; bottom: 4px; width: 1px; background: var(--line-soft);
}
.trk-how__list b { display: block; font-size: 15px; margin-bottom: 2px; }
.trk-how__list li > span { display: block; font-size: 14px; color: var(--text-dim); max-width: 62ch; }
.trk-how__fine {
  display: flex; align-items: center; gap: 10px;
  margin: 6px 0 0; padding-top: 16px; border-top: 1px solid var(--line-soft);
  font-size: 13px; color: var(--text-dim);
}
.trk-how__fine svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--moss); stroke-width: 2; }

/* Карточка заказа */
.trk-card { padding: 26px 28px 22px; scroll-margin-top: var(--co-sticky); }   /* не под липкой шапкой */
.trk-card:focus { outline: 0; }
.trk-card--loading { min-height: 360px; }
.trk-skel { border-radius: var(--radius); }
.trk-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.trk-card__kicker {
  margin: 0 0 4px; font-family: var(--font); font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-dim);
}
.trk-card__no {
  font-family: var(--font-mono); font-size: clamp(22px, 2.6vw, 28px); font-weight: 600;
  letter-spacing: .04em; line-height: 1.1; overflow-wrap: anywhere;
}
.trk-card__date { margin: 6px 0 0; font-size: 13px; color: var(--text-dim); }

.trk-badge {
  flex: none;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 10px;
  font-family: var(--font); font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  background: var(--indigo-soft); color: var(--indigo);
  border-radius: var(--radius); white-space: nowrap;
}
.trk-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.trk-badge.is-done { background: transparent; color: var(--moss); box-shadow: inset 0 0 0 1px currentColor; }
.trk-badge.is-canceled { background: var(--madder-soft); color: var(--madder); }

/* Лента статусов */
.trk-steps {
  list-style: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 18px;
}
.trk-steps li { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.trk-steps li:not(:last-child)::after {
  content: ""; position: absolute; top: 15px; left: 38px; right: 8px;
  height: 2px; background: var(--line);
}
.trk-steps li.is-done:not(:last-child)::after { background: var(--moss); }
.trk-steps__dot {
  position: relative; z-index: 1;
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--co-card); color: var(--text-dim);
}
.trk-steps__dot i { font-style: normal; font-family: var(--font); font-weight: 700; font-size: 15px; }
.trk-steps__dot svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.trk-steps li.is-done .trk-steps__dot { background: var(--moss); border-color: var(--moss); color: var(--co-card); }
.trk-steps li.is-current:not(.is-done) .trk-steps__dot { background: var(--text); border-color: var(--text); color: var(--co-card); }
.trk-steps li.is-current:not(.is-done) .trk-steps__dot::after {
  content: ""; position: absolute; inset: -5px; border: 1px solid var(--text); border-radius: 3px; opacity: .35;
}
.trk-steps__label {
  font-family: var(--font);
  font-size: 14px; font-weight: 700; letter-spacing: -.01em; text-transform: none; color: var(--text-dim);
}
.trk-steps li.is-done .trk-steps__label, .trk-steps li.is-current .trk-steps__label { color: var(--text); }

.trk-card__status {
  margin: 0 0 22px; padding: 12px 14px;
  background: var(--co-page); font-size: 14px; line-height: 1.5;
}
.trk-card__status a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.trk-canceled {
  display: flex; gap: 12px; align-items: flex-start;
  margin-bottom: 22px; padding: 14px 16px;
  background: var(--madder-soft); border-left: 3px solid var(--madder);
  font-size: 14px; line-height: 1.5;
}
.trk-canceled p { margin: 0; }
.trk-canceled b { color: var(--madder); }
.trk-canceled a { font-weight: 600; text-decoration: underline; }
.trk-canceled svg { width: 20px; height: 20px; flex: none; margin-top: 1px; fill: none; stroke: var(--madder); stroke-width: 2; }

.trk-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px;
  margin: 0 0 24px; padding: 16px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
}
.trk-facts:empty { display: none; }
.trk-facts dt { font-size: 12px; color: var(--text-dim); margin-bottom: 2px; }
.trk-facts dd { margin: 0; font-size: 14px; font-weight: 600; }

.trk-card__h { display: flex; align-items: baseline; gap: 10px; font-size: 16px; }
.trk-card__h span {
  font-family: var(--font);
  text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 13px; color: var(--text-dim);
}
.trk-items { margin-top: 6px; }
.trk-card .co-line { grid-template-columns: 56px minmax(0, 1fr) auto; }
.trk-card .co-totals { max-width: 380px; margin-left: auto; }
.trk-card__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-soft);
}
.trk-card__actions .btn--link { font-size: 14px; }

/* ── Адаптив ───────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .co__grid { grid-template-columns: minmax(0, 1fr) 360px; }
  .co-done { grid-template-columns: minmax(0, 1fr) 340px; }
  .trk__grid { grid-template-columns: 340px minmax(0, 1fr); }
  .co-step { padding: 22px 22px 10px; }
}

/* Мобильный: сводка — сворачиваемая полоска над формой */
@media (max-width: 900px) {
  .co { --co-sticky: 0px; padding-bottom: 56px; }
  .co__head { margin-bottom: 16px; }
  .co__back { display: none; }
  .co__grid { grid-template-columns: 1fr; gap: 12px; }
  .co__form, .co__side { grid-column: auto; grid-row: auto; }
  .co__side { position: static; }

  .co-sum { padding: 0; }
  .co-sum__toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; min-height: 56px; padding: 0 18px;
    background: none; border: 0; text-align: left;
    font-size: 14px; font-weight: 600;
  }
  .co-sum__toggle-l { display: flex; align-items: center; gap: 10px; }
  .co-sum__toggle svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; }
  .co-sum__toggle svg:last-child { width: 16px; height: 16px; stroke-width: 2; transition: transform .25s var(--pop); }
  .co-sum__toggle[aria-expanded="true"] svg:last-child { transform: rotate(180deg); }
  .co-sum__toggle b { font-size: 17px; white-space: nowrap; }
  .co-sum__body { display: none; padding: 0 18px 18px; border-top: 1px solid var(--line-soft); }
  .co-sum.is-open .co-sum__body { display: block; }
  .co-sum__head { margin: 12px 0 0; }
  .co-sum__count { display: none; }
  .co-sum .co-sum__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .co-submit__total {
    display: flex; justify-content: space-between; align-items: baseline;
    margin: 0 0 14px;
    font-family: var(--font);
    font-size: 17px; font-weight: 700; letter-spacing: -.01em; text-transform: none;
  }
  .co-submit__total b { font-family: var(--font); font-size: 22px; letter-spacing: 0; }

  .co-done { grid-template-columns: 1fr; padding-top: 12px; }
  .co-done__main { padding: 28px 22px 26px; }

  .trk__grid { grid-template-columns: 1fr; }
  .trk__side { position: static; }
  /* Шапка на мобильном — 56 px (см. layout.css): верх карточки не прячется под ней */
  .trk-card { scroll-margin-top: calc(56px + 16px); }
}

@media (max-width: 640px) {
  .co-addr__row { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .co__wrap { padding-left: 10px; padding-right: 10px; }
  .co .crumbs { padding-left: 6px; }
  .co__head { padding: 0 6px; }
  .co-step { padding: 20px 16px 6px; }
  .co-step__title { font-size: 20px; }
  .co-submit { padding: 18px 16px; }
  .co-opt { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; padding: 13px 14px; }
  .co-opt__icon { display: none; }
  .co-opt__title { font-size: 14px; }
  .co-sum__toggle { padding: 0 16px; }
  .co-sum__body { padding: 0 16px 16px; }
  .co-done__main { padding: 26px 18px 22px; }
  .co-done__side { padding: 20px 16px; }
  .co-done__copy { margin-left: 0; }
  .co-done__actions .btn { width: 100%; }
  .co-empty__actions .btn { width: 100%; }

  .trk__head { padding: 0 6px; }
  .trk-form, .trk-how, .trk-card { padding-left: 16px; padding-right: 16px; }
  .trk-help { margin-left: 6px; margin-right: 6px; }
  .trk-card__head { flex-direction: column-reverse; gap: 12px; }
  .trk-facts { grid-template-columns: 1fr; }

  /* Лента статусов — вертикально */
  .trk-steps { grid-template-columns: 1fr; gap: 14px; }
  .trk-steps li { flex-direction: row; align-items: center; gap: 14px; }
  .trk-steps li:not(:last-child)::after { top: 34px; left: 15px; right: auto; bottom: -14px; width: 2px; height: auto; }
}