/* ═══════════════════════════════════════════════════════════════════════════
   КОРЗИНА — redesign 2026-07: строки + sticky-сводка + умные подсказки
   Порядок секций файла = порядок секций страницы:
   настройки → шапка → светофор совместимости → раскладка → строки товаров →
   степпер → «не забыли?» → сводка (aside) → undo-тост → mobile →
   reduced-motion
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Настройки страницы ──
   Локальные алиасы уровней светофора — репойнтятся на семантические токены
   --success/--warning/--danger (00-settings/colors.css); тот же паттерн в
   compare.css/support.css. */
.crt-page{
  --crt-ok:var(--success);
  --crt-warn:var(--warning);
  --crt-danger:var(--danger);
  padding:var(--sp-9) var(--page-x) var(--sp-8);
  max-width:var(--container-page);
  margin:0 auto;
}

/* ── Шапка ── */
.crt-head{ margin-bottom:var(--sp-3); }
.crt-title{
  font-size:clamp(2rem,5vw,3rem); font-weight:800; color:var(--text-hi);
  margin:0; letter-spacing:-.01em;
}
.crt-count{
  font-family:var(--font-mono); font-size:.38em; font-weight:500;
  color:var(--text-dim); letter-spacing:.04em; vertical-align:middle;
}

/* ── Светофор совместимости (покупатель собирает ПК) ── */
.crt-compat{
  padding:16px 18px; border-radius:var(--r-lg); margin-bottom:var(--sp-3);
  background:var(--glass); border:1px solid var(--line);
}
.crt-compat.is-ok{ border-color:color-mix(in srgb, var(--success) 35%, transparent); }
.crt-compat.is-warn{ border-color:color-mix(in srgb, var(--warning) 35%, transparent); }
.crt-compat.is-error{ border-color:color-mix(in srgb, var(--danger) 45%, transparent); }
.crt-compat-head{
  display:flex; align-items:center; gap:10px;
  font-size:.98rem; font-weight:700; color:var(--text-hi);
}
.crt-compat-head .ic{ width:20px; height:20px; color:var(--crt-ok); flex-shrink:0; }
.crt-compat.is-warn .crt-compat-head .ic{ color:var(--crt-warn); }
.crt-compat.is-error .crt-compat-head .ic{ color:var(--crt-danger); }
.crt-compat-chips{ display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.crt-check{
  display:inline-flex; align-items:center; padding:4px 11px;
  border-radius:var(--r-pill); font-size:.78rem; cursor:default;
  border:1px solid var(--line); color:var(--text-dim);
}
.crt-check.is-ok{ color:var(--crt-ok); border-color:color-mix(in srgb, var(--success) 32%, transparent); }
.crt-check.is-warn{ color:var(--crt-warn); border-color:color-mix(in srgb, var(--warning) 32%, transparent); }
.crt-check.is-error{ color:var(--crt-danger); border-color:color-mix(in srgb, var(--danger) 40%, transparent); }
.crt-check.is-info{ color:var(--info); border-color:color-mix(in srgb, var(--info) 25%, transparent); }
.crt-compat-fix{
  margin-top:12px; padding-top:12px; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
  font-size:.88rem; color:var(--text-soft); line-height:1.5;
}
.crt-compat-fix a{ color:var(--cyan); text-decoration:none; }
.crt-compat-fix a:hover{ text-decoration:underline; }
.crt-fix-add{
  flex-shrink:0; height:32px; padding:0 13px; cursor:pointer; white-space:nowrap;
  border-radius:var(--r-md); border:1px solid var(--cyan-a40);
  background:transparent; color:var(--cyan);
  font-size:.8rem; font-family:var(--font-body);
  transition:background .2s;
}
.crt-fix-add:hover{ background:var(--cyan-a12); }
.crt-fix-add:disabled{ opacity:.5; cursor:default; }

/* ── Раскладка: товары + sticky-сводка ── */
.crt-layout{
  display:grid; grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr);
  gap:var(--sp-3); align-items:start;
}
.crt-main{ min-width:0; }

/* ── Строки товаров ── */
.crt-rows{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.crt-row{
  display:grid;
  grid-template-columns:72px minmax(0,1fr) auto auto auto;
  align-items:center; gap:16px; padding:14px 16px;
  transition:opacity var(--dur-base) var(--ease-standard);
}
.crt-row+.crt-row{ border-top:1px solid var(--line); }
.crt-row.is-updating{ opacity:.55; pointer-events:none; }
/* мягкий направленный exit при удалении (main.js: row.classList.add('is-removing')):
   короче входа, небольшой translateY — не «схлопывание» во всю высоту. */
.crt-row.is-removing{
  opacity:0;
  transform:translateY(-12px);
  transition:transform 150ms var(--ease-exit), opacity 150ms var(--ease-exit);
  pointer-events:none;
}
.crt-thumb{
  display:block; width:72px; height:72px; flex-shrink:0;
  border-radius:var(--r-md); overflow:hidden; background:var(--pure-white);
}
.crt-thumb img{ width:100%; height:100%; object-fit:contain; display:block; }
.crt-info{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.crt-name{
  color:var(--text-hi); font-size:.94rem; line-height:1.35; text-decoration:none;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.crt-name:hover{ color:var(--cyan); }
.crt-meta{
  font-family:var(--font-mono); font-size:.7rem; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint);
}
.crt-unit{ font-size:.8rem; color:var(--text-dim); font-variant-numeric:tabular-nums; }
.crt-subtotal{
  font-family:var(--font-mono); font-size:.98rem; font-weight:500;
  color:var(--text-hi); font-variant-numeric:tabular-nums; white-space:nowrap;
  min-width:110px; text-align:right;
}
.crt-acts{ display:flex; gap:6px; }
.crt-act{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; cursor:pointer;
  border-radius:var(--r-md); border:1px solid var(--line);
  background:transparent; color:var(--text-dim);
  transition:border-color .2s, color .2s;
}
.crt-act .ic{ width:16px; height:16px; }
.crt-act:hover{ border-color:var(--cyan-a50); color:var(--cyan); }
.crt-act--del:hover{ border-color:var(--crt-danger); color:var(--crt-danger); }
.crt-act:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }

/* ── Степпер количества ── */
.qty-stepper{
  display:inline-flex; align-items:center;
  border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
}
.qty-btn{
  width:32px; height:36px; cursor:pointer; border:none;
  background:transparent; color:var(--text-soft); font-size:1rem;
  transition:background .15s, color .15s;
}
.qty-btn:hover{ background:var(--cyan-a10); color:var(--cyan); }
.qty-input{
  width:38px; height:36px; text-align:center; border:none;
  background:transparent; color:var(--text-hi);
  font-family:var(--font-mono); font-size:.92rem; font-variant-numeric:tabular-nums;
}
.qty-input:focus{ outline:none; }

/* ── «Не забыли?» — недостающие узлы сборки ── */
.crt-suggest{
  margin-top:14px; padding:14px 16px;
  border:1px dashed var(--glass-line); border-radius:var(--r-lg);
}
.crt-suggest-head{
  margin:0 0 10px; font-family:var(--font-mono); font-size:.72rem;
  font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-dim);
}
.crt-suggest-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; padding:6px 0;
}
.crt-suggest-row+.crt-suggest-row{ border-top:1px solid var(--line); padding-top:12px; }
.crt-suggest-text{ font-size:.88rem; color:var(--text-soft); line-height:1.5; }
.crt-suggest-text a{ color:var(--text-hi); text-decoration:none; }
.crt-suggest-text a:hover{ color:var(--cyan); }

.crt-back{
  display:inline-block; margin-top:var(--sp-3);
  color:var(--text-dim); font-size:.9rem; text-decoration:none;
  transition:color .2s;
}
.crt-back:hover{ color:var(--text-hi); }

/* ── Сводка заказа (sticky-aside) ── */
.crt-aside{ position:sticky; top:calc(var(--nav-h-compact) + 16px); }
.crt-summary{
  padding:20px; border-radius:var(--r-lg);
  background:var(--glass); border:1px solid var(--line);
}
.crt-summary-label{
  margin:0 0 12px; font-family:var(--font-mono); font-size:.72rem;
  font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-dim);
}
.crt-summary-row{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:12px; font-size:.9rem; color:var(--text-soft); margin-bottom:8px;
}
.crt-summary-row--muted{ color:var(--text-dim); font-size:.84rem; }
.crt-summary-num{
  font-family:var(--font-mono); color:var(--text-hi);
  font-variant-numeric:tabular-nums;
}
.crt-summary-total{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  border-top:1px solid var(--line); margin-top:12px; padding-top:14px;
  color:var(--text); font-size:.95rem;
}
.crt-summary-total strong{
  font-family:var(--font-mono); font-weight:500; font-size:1.45rem;
  color:var(--text-hi); font-variant-numeric:tabular-nums;
}
.crt-checkout{
  display:flex; align-items:center; justify-content:center;
  height:var(--h-btn); margin-top:16px; border-radius:var(--r-md);
  background:var(--grad-cta); color:var(--cta-ink);
  font-size:.98rem; font-weight:700; text-decoration:none;
  transition:transform .2s, box-shadow .2s;
}
.crt-checkout:hover{ transform:translateY(-2px); box-shadow:var(--shadow-cta); }
.crt-checkout:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }

.crt-trust{
  display:flex; gap:14px; flex-wrap:wrap; margin-top:14px;
  font-size:.78rem; color:var(--text-faint);
}
.crt-trust .ic{ width:14px; height:14px; vertical-align:-2px; margin-right:4px; }

/* ── Undo-тост (кнопка «Вернуть» внутри стандартного тоста) ── */
.crt-undo-toast{ display:flex; align-items:center; gap:14px; }
.crt-undo-btn{
  flex-shrink:0; border:none; background:transparent; cursor:pointer;
  color:var(--cyan); font-size:.88rem; font-weight:600; font-family:var(--font-body);
  padding:4px 6px;
}
.crt-undo-btn:hover{ text-decoration:underline; }

/* ── Mobile ── */
@media(max-width: 1000px){
  .crt-layout{ grid-template-columns:1fr; }
  .crt-aside{ position:static; }
}

@media(max-width: 700px){
  /* top = высота фикс-навбара (--nav-h) + воздух, иначе заголовок «Корзина»
     заезжает под шапку (та же схема, что support/account/compare). */
  .crt-page{ padding:calc(var(--nav-h) + var(--sp-1)) var(--sp-2) var(--sp-6); }
  .crt-row{
    grid-template-columns:56px minmax(0,1fr) auto;
    grid-template-areas:
      'thumb info acts'
      'thumb stepper subtotal';
    row-gap:10px;
  }
  .crt-thumb{ grid-area:thumb; width:56px; height:56px; align-self:start; }
  .crt-info{ grid-area:info; }
  .qty-stepper{ grid-area:stepper; justify-self:start; }
  .crt-subtotal{ grid-area:subtotal; min-width:0; }
  .crt-acts{ grid-area:acts; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce){
  .crt-checkout, .crt-checkout:hover{ transition:none; transform:none; }
}