/* Besfo — личный кабинет. Общая раскладка кабинета и главная (обзор).
   Меню кабинета лежит в components.css: оно одинаково на всех его страницах.

   Mobile First: базовые правила — узкий экран, шире — через min-width. */

.lk { padding-bottom: var(--gap-page); }

/* Раскладка кабинета: на узком экране меню лентой над содержимым, с 1025px —
   колонка слева. Ширина колонки числом не задается: repeat считает сам, а
   минимум 0 не дает длинному названию заказа растянуть страницу. */
.lk__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-component);
}

.lk__content {
  display: grid;
  gap: var(--gap-section);
  min-width: 0;
}

.lk__subtitle {
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-h2);
  color: var(--color-text);
}

/* ── Кто вошел ─────────────────────────────────────────────────────────────
   Серая плашка: блок отделяется фоном, а не рамкой. */
.lk-user {
  padding: var(--pad-box);
  border-radius: var(--radius-block);
  background: var(--color-gray-light);
}

.lk-user__name {
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-h2);
  color: var(--color-text);
}

.lk-user__rows {
  display: grid;
  gap: var(--gap-inner);
  margin-top: var(--gap-block);
}
.lk-user__rows > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-inner) var(--gap-block);
}
.lk-user__rows dt {
  min-width: 96px;
  font-size: var(--text-ui);
  line-height: var(--lh-ui);
  /* На серой плашке вторичный цвет дает 4.43:1 при норме 4.5 — поэтому цвет
     для текста НА ПЛАШКЕ (раздел «Токен привязан к фону»). */
  color: var(--color-text-on-plate);
}
.lk-user__rows dd {
  font-size: var(--text-ui);
  line-height: var(--lh-ui);
  font-weight: var(--fw-ui);
  color: var(--color-text);
}

/* Ссылка, а не кнопка: переход на страницу личных данных. */
.lk-user__edit {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--gap-inner);
  color: var(--color-action);
  font-size: var(--text-ui);
  line-height: var(--lh-ui);
  font-weight: var(--fw-ui);
}
@media (hover: hover) and (pointer: fine) {
  .lk-user__edit:hover { color: var(--color-action-hover); }
}
.lk-user__edit:active { color: var(--color-action-hover); }

/* ── Плитки разделов ───────────────────────────────────────────────────────
   Число колонок считает auto-fit от минимальной ширины плитки: на телефоне
   две, на десктопе четыре, и ни одного брейкпоинта на это не нужно. */
.lk-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--gap-block);
  margin-top: var(--gap-block);
  list-style: none;
}

.lk-tile {
  display: grid;
  gap: var(--gap-tight);
  height: 100%;
  padding: var(--pad-box);
  border-radius: var(--radius-block);
  background: var(--color-gray-light);
  transition: background-color .15s ease;
}
@media (hover: hover) and (pointer: fine) {
  .lk-tile:hover { background: var(--color-border); }
}
.lk-tile:active { background: var(--color-gray-pressed); }

.lk-tile__name {
  font-size: var(--text-ui);
  line-height: var(--lh-ui);
  font-weight: var(--fw-ui);
  color: var(--color-text);
}
/* Счетчик крупный: он и есть причина зайти в раздел. Цифры табличные, чтобы
   плитки не дрожали при обновлении. */
.lk-tile__count {
  font-size: var(--text-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-h1);
  color: var(--color-text);
  font-feature-settings: "tnum";
}
.lk-tile__note {
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  color: var(--color-text-on-plate);
}

/* ── Последний заказ ───────────────────────────────────────────────────────*/
.lk-order {
  display: grid;
  gap: var(--gap-block);
  min-width: 0;
}
.lk-order__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-inner) var(--gap-block);
}

.lk-order__all {
  color: var(--color-action);
  font-size: var(--text-ui);
  line-height: var(--lh-ui);
}
@media (hover: hover) and (pointer: fine) {
  .lk-order__all:hover { color: var(--color-action-hover); }
}
.lk-order__all:active { color: var(--color-action-hover); }

/* Карточка заказа обведена рамкой, а не залита: внутри нее свои серые плашки
   (снимки товаров), и фон на фоне читался бы хуже. */
.order-card {
  padding: var(--pad-box);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-block);
  background: var(--color-white);
}

.order-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-inner) var(--gap-block);
}

.order-card__num {
  font-size: var(--text-ui);
  line-height: var(--lh-ui);
  font-weight: var(--fw-h2);
  color: var(--color-text);
}
.order-card__date {
  margin-top: var(--gap-tight);
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  color: var(--color-text-secondary);
}

/* Статус словами. Плашка светлая, текст основной: статус — сообщение, а не
   кнопка, и кричать ему незачем. */
.order-card__status {
  padding: var(--gap-tight) var(--gap-inner);
  /* 8px — скругление мелкого элемента; токена для него в проекте нет,
     значение пишется числом, как у кнопок и плашек. */
  border-radius: 8px;
  background: var(--color-gray-light);
  color: var(--color-text);
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-h2);
  white-space: nowrap;
}

.order-card__items {
  display: grid;
  gap: var(--gap-block);
  margin-top: var(--gap-block);
  list-style: none;
}
.order-card__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--gap-block);
}

/* Место под снимок товара. Пока пустая плашка: изображения подставит сервер. */
.order-card__thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: var(--color-gray-light);
}

.order-card__item-name {
  font-size: var(--text-ui);
  line-height: var(--lh-ui);
  color: var(--color-text);
}
.order-card__item-qty {
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.order-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-block);
  margin-top: var(--gap-block);
  padding-top: var(--gap-block);
  border-top: 1px solid var(--color-border);
}

.order-card__sum {
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-h1);
  color: var(--color-text);
  font-feature-settings: "tnum";
}

.order-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-inner);
}

/* «Повторить заказ» кладет товары в корзину — шаг к покупке, поэтому красная
   (дизайн-система, «Красный принадлежит конверсионному действию»). */
.order-card__repeat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--gap-section);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  background: var(--color-cta);
  color: var(--color-white);
  font-family: inherit;
  font-size: var(--text-ui);
  line-height: var(--lh-ui);
  font-weight: var(--fw-h2);
  transition: background-color .15s ease;
}
@media (hover: hover) and (pointer: fine) {
  .order-card__repeat:hover { background: var(--color-cta-hover); }
}
.order-card__repeat:active { background: var(--color-cta-hover); }

/* «Подробнее» — переход: серая кнопка. */
.order-card__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--gap-section);
  border-radius: 8px;
  background: var(--color-gray-light);
  color: var(--color-text);
  font-size: var(--text-ui);
  line-height: var(--lh-ui);
  font-weight: var(--fw-h2);
  transition: background-color .15s ease;
}
@media (hover: hover) and (pointer: fine) {
  .order-card__more:hover { background: var(--color-border); }
}
.order-card__more:active { background: var(--color-gray-pressed); }

/* ── Пустое состояние ──────────────────────────────────────────────────────*/
.lk-empty {
  padding: var(--pad-box-lg);
  border-radius: var(--radius-block);
  background: var(--color-gray-light);
  text-align: center;
}

.lk-empty__text {
  max-width: 44ch;
  margin: var(--gap-inner) auto 0;
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--color-text-on-plate);
}

/* Кнопка серая: переход в каталог — навигация, не вход и не покупка. Белая
   плашка, а не светло-серая: блок уже лежит на светло-сером фоне. */
.lk-empty__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: var(--gap-block);
  padding: 0 var(--gap-section);
  border-radius: 8px;
  background: var(--color-white);
  color: var(--color-text);
  font-size: var(--text-ui);
  line-height: var(--lh-ui);
  font-weight: var(--fw-h2);
  transition: background-color .15s ease;
}
@media (hover: hover) and (pointer: fine) {
  .lk-empty__btn:hover { background: var(--color-border); }
}
.lk-empty__btn:active { background: var(--color-gray-pressed); }

/* ≥ 1025: меню слева, содержимое справа. Колонка меню — минимум по содержимому
   и максимум в четверть ширины: сузится под короткими словами, но не
   растянется. */
@media (min-width: 1025px) {
  /* Колонка меню — те же 240px, что у панели фильтров в листинге: две колонки
     на сайте должны быть одной ширины, иначе при переходе между разделами
     содержимое прыгает. Доля (1fr к 3fr) давала 330px, и рядом с короткими
     капсулами оставалась пустота. */
  .lk__layout {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: var(--gap-section);
    align-items: start;
  }
}

/* ── Список разделов кабинета ──────────────────────────────────────────────
   Заказы, возвраты, отзывы, автомобили идут одинаковыми карточками подряд. */
.lk-list {
  display: grid;
  gap: var(--gap-block);
}

/* Сколько всего отложено или найдено. */
.lk-count {
  font-size: var(--text-ui);
  line-height: var(--lh-ui);
  color: var(--color-text-secondary);
}

/* Подсказка гостю в избранном: список живет в браузере. Светлая плашка, как
   у остальных пояснений кабинета. */
.lk-hint {
  margin-top: var(--gap-component);
  padding: var(--pad-box);
  border-radius: var(--radius-block);
  background: var(--color-gray-light);
  font-size: var(--text-ui);
  line-height: var(--lh-ui);
  color: var(--color-text-on-plate);
}
.lk-hint a { color: var(--color-action); }
@media (hover: hover) and (pointer: fine) {
  .lk-hint a:hover { color: var(--color-action-hover); }
}

/* У гостя меню кабинета скрыто — колонка под него не резервируется. */
.lk__layout:has(> .subcats[hidden]) { grid-template-columns: minmax(0, 1fr); }

/* ── Отбор заказов по состоянию ────────────────────────────────────────────
   Устроен как быстрые теги листинга: ссылки капсулами, текущий — не ссылка. */
.lk-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-inner);
  margin-bottom: var(--gap-component);
}

.lk-filter__item {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--gap-block);
  border-radius: 8px;
  background: var(--color-gray-light);
  color: var(--color-text);
  font-size: var(--text-ui);
  line-height: var(--lh-ui);
  transition: background-color .15s ease;
}
.lk-filter__item[aria-current="page"] {
  background: var(--color-dark-action);
  color: var(--color-white);
  font-weight: var(--fw-h2);
}
@media (hover: hover) and (pointer: fine) {
  .lk-filter__item:not([aria-current="page"]):hover { background: var(--color-border); }
}
.lk-filter__item:not([aria-current="page"]):active { background: var(--color-gray-pressed); }

/* ── Мои отзывы ────────────────────────────────────────────────────────────*/
.lk-review {
  display: grid;
  justify-items: start;
  gap: var(--gap-inner);
  padding: var(--pad-box);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-block);
}

.lk-review__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-inner) var(--gap-block);
  width: 100%;
}

.lk-review__product {
  font-size: var(--text-ui);
  line-height: var(--lh-ui);
  font-weight: var(--fw-h2);
  color: var(--color-text);
}
@media (hover: hover) and (pointer: fine) {
  .lk-review__product:hover { color: var(--color-brand); }
}

.lk-review__meta {
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  color: var(--color-text-secondary);
}

.lk-review__text {
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--color-text);
}

/* ── Мой гараж ─────────────────────────────────────────────────────────────*/
.lk-car {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-block);
  padding: var(--pad-box);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-block);
}

.lk-car__name {
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-h2);
  color: var(--color-text);
}

.lk-car__spec {
  margin-top: var(--gap-tight);
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  color: var(--color-text-secondary);
}

.lk-car__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-inner);
}

.lk-car__edit {
  color: var(--color-action);
  font-size: var(--text-ui);
  line-height: var(--lh-ui);
}
@media (hover: hover) and (pointer: fine) {
  .lk-car__edit:hover { color: var(--color-action-hover); }
}

/* Кнопка «Добавить автомобиль» стоит под списком и тянется по содержимому. */
.lk-car__add { justify-self: start; }

/* ── Форма личных данных ───────────────────────────────────────────────────*/
.lk-form {
  display: grid;
  justify-items: start;
  gap: var(--gap-component);
  max-width: 420px;
}

.lk-form__row {
  display: grid;
  gap: var(--gap-tight);
  width: 100%;
}

.lk-form__label {
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  color: var(--color-text-secondary);
}

.lk-form__input {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--gap-block);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-white);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-ui);
  line-height: var(--lh-ui);
}
.lk-form__input:focus { outline: none; border-color: var(--color-text); }
/* Поле только для чтения: телефон меняется отдельной проверкой кода, и вид
   должен сразу это показывать. */
.lk-form__input[readonly] { background: var(--color-gray-light); }
.lk-form__input--short { max-width: 200px; }

.lk-form__note {
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  color: var(--color-text-secondary);
}
.lk-form__note a { color: var(--color-action); }
@media (hover: hover) and (pointer: fine) {
  .lk-form__note a:hover { color: var(--color-action-hover); }
}

/* Сохранение — не вход и не покупка, поэтому кнопка серая. */
.lk-form__save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--gap-section);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  background: var(--color-gray-light);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-ui);
  line-height: var(--lh-ui);
  font-weight: var(--fw-h2);
  transition: background-color .15s ease;
}
@media (hover: hover) and (pointer: fine) {
  .lk-form__save:hover { background: var(--color-border); }
}
.lk-form__save:active { background: var(--color-gray-pressed); }

/* ── Удаление профиля ──────────────────────────────────────────────────────
   Отделено от формы чертой и набрано спокойно: действие необратимое, но
   пугать красной кнопкой незачем — красный в проекте принадлежит покупке. */
.lk-danger {
  padding-top: var(--gap-section);
  border-top: 1px solid var(--color-border);
}

.lk-danger__text {
  max-width: 60ch;
  margin-top: var(--gap-inner);
  font-size: var(--text-ui);
  line-height: var(--lh-ui);
  color: var(--color-text-secondary);
}

.lk-danger__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-brand);
  font-size: var(--text-ui);
  line-height: var(--lh-ui);
}
@media (hover: hover) and (pointer: fine) {
  .lk-danger__link:hover { color: var(--color-brand-hover); }
}