/* ==========================================================================
   Страница корзины: список позиций, счётчики количества и итог (US-002).
   Токены и компоненты — из css/style.css, мини-корзина в шапке — из
   css/cart.css; здесь только то, чего там нет.
   ========================================================================== */

/* --- Шапка страницы -------------------------------------------------------- */
.cart-hero {
  padding-block: var(--space-xl) var(--space-lg);
  background: linear-gradient(180deg, var(--color-primary-soft), var(--color-bg));
  border-bottom: 1px solid var(--color-border);
}

.cart-hero__eyebrow { margin-bottom: var(--space-sm); }

.cart-hero__lead {
  margin-top: var(--space-sm);
  max-width: 62ch;
  color: var(--color-muted);
}

/* --- Ответ корзины --------------------------------------------------------- */
/* Та же строка статуса, что в мини-корзине, но шире: здесь в ней помещается и
   «больше 4 шт. не отложить», и причина отказа целиком. */
.cart-page__status {
  margin-bottom: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  background: var(--color-success-soft);
  color: var(--color-success);
  font-weight: 600;
}
.cart-page__status[hidden] { display: none; }
.cart-page__status[data-tone="error"] {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.cart-page__undo-row { margin-bottom: var(--space-md); }
.cart-page__undo-row button[hidden] { display: none; }

/* --- Где живёт корзина (US-003) -------------------------------------------- */
/* Спокойная служебная подпись, а не баннер: она объясняет судьбу заказа, но
   спорить за внимание со списком товаров и суммой ей незачем. */
.cart-page__keep {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs) var(--space-sm);
  margin-bottom: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: var(--fs-small);
}
.cart-page__keep[hidden] { display: none; }
.cart-page__keep-text { flex: 1 1 16rem; }
.cart-page__keep-link {
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
}
.cart-page__keep-link[hidden] { display: none; }

/* --- Корзина не открылась / пуста ------------------------------------------ */
/* Объяснение видно без скриптов и прячется, как только js/config.js поставил
   .has-js. Показать его обратно (каталог не подключился) может только
   js/cart-page.js — атрибутом data-shown. */
.cart-page__offline,
.cart-page__empty {
  display: grid;
  justify-items: center;
  gap: var(--space-sm);
  padding: var(--space-xl) var(--space-md);
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.has-js .cart-page__offline { display: none; }
.has-js .cart-page__offline[data-shown="true"] { display: grid; }
.cart-page__empty[hidden] { display: none; }

/* --- Раскладка страницы ---------------------------------------------------- */
.cart-page__grid {
  display: grid;
  gap: var(--space-lg);
  align-items: start;
}
.cart-page__grid[hidden] { display: none; }

/* Итог уезжает вправо и прилипает при прокрутке только там, где для него есть
   отдельная колонка. На узком экране он остаётся под списком: сумма важнее
   всего в тот момент, когда список уже просмотрен. */
@media (min-width: 60em) {
  .cart-page__grid { grid-template-columns: minmax(0, 1.6fr) minmax(18rem, 0.9fr); }
  .cart-summary { position: sticky; top: calc(var(--header-height) + var(--space-sm)); }
}

.cart-page__subtitle {
  margin-bottom: var(--space-sm);
  font-size: var(--fs-h3);
  letter-spacing: -0.02em;
}

.cart-page__actions {
  margin-top: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: space-between;
}

/* Очистка корзины — действие разрушительное, и выглядеть весёлым ему незачем.
   Второе нажатие (data-armed) уже подтверждение: цвет предупреждает об этом. */
.cart-page__clear[data-armed="true"] {
  background: var(--color-danger-soft);
  color: var(--color-danger);
  border-color: var(--color-danger);
}

/* --- Строка заказа --------------------------------------------------------- */
.cart-lines {
  display: grid;
  gap: var(--space-sm);
}

.cart-line {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  grid-template-areas:
    "media body"
    "controls money";
  gap: var(--space-sm) var(--space-md);
  align-items: start;
  padding: var(--space-md);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.cart-line__media { grid-area: media; }
.cart-line__body { grid-area: body; min-width: 0; }
.cart-line__controls { grid-area: controls; }
.cart-line__money { grid-area: money; justify-self: end; text-align: right; }

@media (min-width: 48em) {
  .cart-line {
    grid-template-columns: 6rem minmax(0, 1fr) auto auto;
    grid-template-areas: "media body controls money";
    align-items: center;
    gap: var(--space-md);
  }
}

.cart-line__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--color-surface);
  border-radius: var(--radius-sm);
}

.cart-line__name { font-weight: 700; line-height: 1.3; }
.cart-line__link { color: var(--color-text); }
.cart-line__link:hover { color: var(--color-primary); }

.cart-line__option,
.cart-line__stock,
.cart-line__unit { font-size: var(--fs-small); color: var(--color-muted); }

.cart-line__option { margin-top: 0.15rem; }

.cart-line__stock { margin-top: 0.25rem; font-weight: 600; }
.cart-line__stock[data-tone="success"] { color: var(--color-success); }
.cart-line__stock[data-tone="warning"] { color: var(--color-warning); }
.cart-line__stock[data-tone="danger"] { color: var(--color-danger); }

.cart-line__unit {
  margin-top: 0.35rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
}
.cart-line__unit-now { font-weight: 700; color: var(--color-text); }
.cart-line__unit-old { color: var(--color-muted); }

/* --- Счётчик количества ---------------------------------------------------- */
.cart-line__stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--color-bg);
}

.cart-line__step {
  min-width: 2.5rem;
  padding: 0.4rem 0.6rem;
  font: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary);
  background: var(--color-bg);
  border: 0;
  cursor: pointer;
}
.cart-line__step:hover:not(:disabled) { background: var(--color-primary-soft); }
.cart-line__step:disabled { color: var(--color-muted); cursor: not-allowed; opacity: 0.55; }

.cart-line__qty {
  width: 3.25rem;
  padding: 0.4rem 0.2rem;
  font: inherit;
  font-weight: 700;
  text-align: center;
  color: var(--color-text);
  background: var(--color-bg);
  border: 0;
  border-inline: 1px solid var(--color-border);
  /* Стрелки браузера рядом с нашими «−» и «+» — два счётчика на одном поле. */
  -moz-appearance: textfield;
  appearance: textfield;
}
.cart-line__qty::-webkit-outer-spin-button,
.cart-line__qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cart-line__limit {
  margin-top: 0.35rem;
  max-width: 12rem;
  font-size: var(--fs-small);
  color: var(--color-warning);
}

/* --- Деньги строки --------------------------------------------------------- */
.cart-line__total {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.cart-line__saving {
  margin-top: 0.15rem;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-success);
}

.cart-line__remove {
  margin-top: var(--space-xs);
  padding: 0;
  font: inherit;
  font-size: var(--fs-small);
  color: var(--color-muted);
  background: none;
  border: 0;
  border-bottom: 1px dashed currentColor;
  cursor: pointer;
}
.cart-line__remove:hover { color: var(--color-danger); }

/* --- Итог заказа ----------------------------------------------------------- */
.cart-summary {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.cart-summary__title { font-size: var(--fs-h3); letter-spacing: -0.02em; }

.cart-summary__rows { display: grid; gap: var(--space-xs); }

.cart-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  color: var(--color-muted);
}
.cart-summary__row dd { font-weight: 600; color: var(--color-text); }

.cart-summary__row--total {
  padding-top: var(--space-xs);
  border-top: 1px solid var(--color-border);
  color: var(--color-text);
  font-weight: 700;
}
.cart-summary__total { font-size: 1.5rem; letter-spacing: -0.03em; }

.cart-summary__saving {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--color-success-soft);
  color: var(--color-success);
  font-size: var(--fs-small);
  font-weight: 600;
}
.cart-summary__saving[hidden] { display: none; }

.cart-summary__note {
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--color-muted);
}
.cart-summary__note[hidden] { display: none; }

.cart-summary__perks {
  display: grid;
  gap: 0.35rem;
  font-size: var(--fs-small);
  color: var(--color-muted);
}
.cart-summary__perks li { padding-left: 1.35rem; position: relative; }
.cart-summary__perks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-success);
  font-weight: 700;
}