/* ============================================================
   ЛИЧНЫЙ КАБИНЕТ
   Figma: account/desktop 3765:20689, loyalty/desktop 3773:28970,
          account/mobile 3903:17223, loyalty/mobile 3903:18008

   Геометрия — в rem по базе 1440 (1rem = 10px), как во всём редизайне:
   html font-size флюидный, поэтому значения из макета делятся на 10 и
   масштабируются сами. Цвета — только токенами .new-design.

   Мобильная раскладка включается на 767/768 — там же, где меняется режим
   html font-size (мобайл: 1rem = 10px при 375). Утилиты u-hidden-* здесь
   не годятся: у них порог 1024.
   ============================================================ */

/* ============================================================
   1. КАРКАС
   ============================================================ */

.new-design.cabinet {
  padding-bottom: 8rem;
}

.new-design .cabinet__layout {
  max-width: 73.2rem;
  margin: 0 auto;
  padding: 0 var(--container-padding);
  display: flex;
  align-items: flex-start;
  gap: 8.7rem;
}

.new-design .cabinet__content {
  flex: 1 1 0;
  min-width: 0;
}

/* Мобильная панель и табы живут только на мобильном */
.new-design .cabinet__panel,
.new-design .cabinet__tabs {
  display: none;
}

/* ============================================================
   2. НАВИГАЦИЯ (desktop)
   ============================================================ */

.new-design .cabinet__nav {
  flex: 0 0 auto;
  width: 9.2rem;
  min-height: 16.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Пункты растянуты на всю ширину колонки: в макете каждый — w-full внутри 92,
   так и зона клика совпадает с колонкой, а не обрезается по длине слова. */
.new-design .cabinet__nav-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
}

/* Каждый пункт — в одну строку. Колонка 92 узка для «Личных данных»: в макете
   этот пункт так же не помещается и выходит за рамку фрейма в пустой отступ
   до контента (87). Без nowrap он ломался на две строки, чего в макете нет. */
.new-design .cabinet__nav-item {
  white-space: nowrap;
}

.new-design .cabinet__nav-item,
.new-design .cabinet__logout,
.new-design .cabinet__tab {
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  letter-spacing: 0.11rem;
  text-transform: uppercase;
  color: var(--color-primary);
}

/* Активный раздел в макете БЛЕДНЕЕ остальных (black/35), а не наоборот */
.new-design .cabinet__nav-item.is-active,
.new-design .cabinet__tab.is-active {
  color: var(--black-35);
}


.new-design .cabinet__logout {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

/* В десктопной колонке строка «выйти» тоже во всю ширину (в макете w-full) */
.new-design .cabinet__nav .cabinet__logout {
  width: 100%;
}

/* Крестик собран из двух линий, как в макете: 10×1 под 45° и 135° в боксе 16.
   Готовый close.svg тут не подходит — у него штрих ~1px при вьюбоксе 20, и при
   уменьшении до 8px линия истончается до 0.4px, вдвое тоньше макета. */
.new-design .cabinet__logout-icon,
.new-design .cabinet__close-icon {
  position: relative;
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
}

.new-design .cabinet__logout-icon::before,
.new-design .cabinet__logout-icon::after,
.new-design .cabinet__close-icon::before,
.new-design .cabinet__close-icon::after {
  content: '';
  position: absolute;
  left: 0.3rem; /* (16 - 10) / 2 — линия по центру бокса */
  top: 50%;
  width: 1rem;
  height: 1px;
  background: currentColor;
}

.new-design .cabinet__logout-icon::before,
.new-design .cabinet__close-icon::before {
  transform: translateY(-50%) rotate(45deg);
}

.new-design .cabinet__logout-icon::after,
.new-design .cabinet__close-icon::after {
  transform: translateY(-50%) rotate(-45deg);
}

/* ============================================================
   3. ОБЩИЕ КОМПОНЕНТЫ: тег статуса и таб страницы
   ============================================================ */

.new-design .status-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.4rem;
  padding: 0 var(--spacing-xs);
  /* FIXME: Figma radius 2px -> --border-radius-sm (4px), токена под 2px нет */
  border-radius: var(--border-radius-sm);
  border: 1px solid transparent;
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  letter-spacing: 0.11rem;
  text-transform: uppercase;
  color: var(--color-primary);
  white-space: nowrap;
}

/* «Оформлен» — залитый */
.new-design .status-tag--filled {
  /* black/5 поверх белого даёт ровно #F2F2F2 из макета */
  background: var(--black-5);
}

/* «В пути» — рамочный */
.new-design .status-tag--outline {
  border-color: var(--black-15);
}

/* Пагинация «1 2 3» (Figma Page tab 16x16) */
.new-design .page-tabs {
  display: flex;
  align-items: center;
}

.new-design .page-tab {
  width: 1.6rem;
  height: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: var(--color-bg);
  cursor: pointer;
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  letter-spacing: 0.11rem;
  color: var(--color-primary);
}

.new-design .page-tab.is-active,
.new-design .page-tab:hover {
  background: var(--black-5);
}

/* ============================================================
   4. КАРТОЧКА ЛОЯЛЬНОСТИ (Figma 3517:2867)
   ============================================================ */

.new-design .loyalty-card {
  position: relative;
  width: 23rem;
  height: 30rem;
  flex: 0 0 auto;
  padding: var(--container-padding);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  background: var(--color-bg-beige);
  border-radius: var(--border-radius-sm);
}

/* Вотермарка N'C — под контентом карточки */
.new-design .loyalty-card__mark {
  position: absolute;
  left: 3.6rem;
  top: 10.1rem;
  width: 15.8rem;
  height: 8.4rem;
  /* FIXME: Figma #EFEBE9 -> --black-5 поверх бежевого (#EAE6E4), токена нет */
  background-color: var(--black-5);
  -webkit-mask: url('/app/media/img/minified-svg/nc-watermark.svg') center / contain no-repeat;
          mask: url('/app/media/img/minified-svg/nc-watermark.svg') center / contain no-repeat;
  pointer-events: none;
}

.new-design .loyalty-card__stats,
.new-design .loyalty-card__bonus {
  position: relative; /* над вотермаркой */
}

.new-design .loyalty-card__stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
}

.new-design .loyalty-card__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
}

.new-design .loyalty-card__stat--level {
  flex: 1 1 0;
  min-width: 0;
}

/* Владелец — справа, как на карте в Wallet. Имя бывает длинным: колонка
   не шире половины строки, длинное слово переносится, а не вылезает. */
.new-design .loyalty-card__stat--owner {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 50%;
  overflow-wrap: anywhere;
}

.new-design .loyalty-card__label,
.new-design .cabinet__stat-label {
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  letter-spacing: 0.11rem;
  text-transform: uppercase;
  color: var(--black-35);
}

.new-design .loyalty-card__value,
.new-design .cabinet__stat-value {
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  letter-spacing: 0.11rem;
  text-transform: uppercase;
  color: var(--color-primary);
}

.new-design .loyalty-card__bonus {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}

.new-design .loyalty-card__bonus-head,
.new-design .cabinet__bonus-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* История открыта: строка «Бонусы» тянется на всю ширину карточки, чтобы
   крестик встал на противоположном от подписи краю. */
.new-design .loyalty-card__bonus-head.is-history-open,
.new-design .cabinet__bonus-head.is-history-open {
  align-self: stretch;
  justify-content: space-between;
}

/* Иконка «i»: двухцветная (белый круг + чёрная буква), поэтому фоном,
   а не маской — маска схлопнула бы её в сплошное пятно. 16px вместо 12
   из макета: в 12px значок терялся рядом с подписью (правки заказчика). */
.new-design .loyalty-card__info,
.new-design .cabinet__info {
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  flex: 0 0 auto;
  background: url('/app/media/img/minified-svg/icon-info.svg') center / contain no-repeat;
}

/* Крестик лежит внутри «i» и виден, только пока история открыта */
.new-design .loyalty-card__info .cabinet__close-icon,
.new-design .cabinet__info .cabinet__close-icon {
  display: none;
}

.new-design .is-history-open .loyalty-card__info,
.new-design .is-history-open .cabinet__info {
  background: none;
  color: var(--color-primary);
}

.new-design .is-history-open .cabinet__close-icon {
  display: block;
}

.new-design .loyalty-card__bonus-value {
  font-family: var(--font-price);
  font-weight: var(--font-weight-black);
  font-size: 5.2rem;
  line-height: 4rem;
  letter-spacing: 0;
  color: var(--color-primary);
}

/* ============================================================
   5. АККАУНТ: последний заказ (Figma 3513:6018)
   ============================================================ */

.new-design .cabinet-account {
  display: flex;
  align-items: flex-start;
  gap: 3.9rem;
}

.new-design .cabinet-account__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3.1rem;
  flex: 0 0 auto;
}

.new-design .cabinet-account__main {
  width: 25.2rem;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--container-padding);
}

.new-design .cabinet-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
}

.new-design .cabinet-section__title {
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  letter-spacing: 0.11rem;
  text-transform: uppercase;
  color: var(--black-35);
}

.new-design .order-detail {
  display: flex;
  flex-direction: column;
  gap: var(--container-padding);
}

/* Панель прячется атрибутом hidden из переключателя «1 2 3». Без этого правила
   она не пряталась бы вовсе: display:flex выше — авторский стиль со
   специфичностью (0,2,0), а браузерное [hidden]{display:none} слабее (0,1,0).
   В проекте на эти грабли уже наступали — см. main-new.css:3077. */
.new-design .order-detail[hidden] {
  display: none;
}

.new-design .order-detail__summary {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

/* Лента фото: 5 слотов, пустые — тот же бежевый, но почти прозрачный */
.new-design .order-strip {
  display: flex;
  flex-wrap: wrap;
}

/* Ячейки делят ширину колонки поровну: в макете они 50/50/51/51/50 при
   ленте 252, фиксированные 5rem дали бы 250 и 2px недобора справа. */
.new-design .order-strip__cell {
  flex: 1 1 0;
  min-width: 0;
  height: 7rem;
  overflow: hidden;
  background: var(--color-bg-beige);
}

.new-design .order-strip__cell--empty {
  opacity: 0.14;
}

.new-design .order-strip__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.new-design .order-detail__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
}

.new-design .order-detail__date {
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  letter-spacing: 0.11rem;
  text-transform: uppercase;
  color: var(--color-primary);
  text-align: right;
}

.new-design .order-detail__fields {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.new-design .order-detail__group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.new-design .order-detail__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.new-design .order-detail__label {
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  letter-spacing: 0.11rem;
  text-transform: uppercase;
  color: var(--black-35);
}

.new-design .order-detail__value {
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  letter-spacing: 0.11rem;
  text-transform: uppercase;
  color: var(--color-primary);
}

/* Трек-номер — Body 3, подчёркнутый; у этого поля в макете шаг 2, а не 4 */
.new-design .order-detail__field--track {
  gap: 0.2rem;
}

.new-design .order-detail__track {
  font-size: var(--font-size-sm);
  line-height: 1.1;
  letter-spacing: 0.06rem;
  text-decoration: underline;
}

/* ============================================================
   5b. ЗАКАЗЫ — список (Figma 3766:18689)
   ============================================================ */

.new-design .cabinet-orders {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxl);
}

.new-design .cabinet-order {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-sm);
}

.new-design .cabinet-order__details {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
}

.new-design .cabinet-order__date {
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  letter-spacing: 0.11rem;
  text-transform: uppercase;
  color: var(--black-35);
}

.new-design .cabinet-order__meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.11rem;
  text-transform: uppercase;
  color: var(--color-primary);
  white-space: nowrap;
}

.new-design .cabinet-order__number {
  line-height: 1.3;
}

.new-design .cabinet-order__sum {
  line-height: 1.2;
}

/* Лента списка заказов крупнее, чем в блоке последнего заказа, и не тянется
   на всю колонку: пять слотов 68×95 прижаты влево (в макете 340 из 521). */
.new-design .order-strip--lg .order-strip__cell {
  flex: 0 0 auto;
  width: 6.8rem;
  height: 9.5rem;
}

/* Пустой раздел: одна строка тем же муted-стилем, без выдуманных иллюстраций */
.new-design .cabinet-empty {
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  letter-spacing: 0.11rem;
  text-transform: uppercase;
  color: var(--black-35);
}

/* ============================================================
   6. ЛОЯЛЬНОСТЬ (Figma 3773:28970)
   ============================================================ */

/* Колонки выравниваем по верху, а не по центру. В макете правая колонка ровно
   300 — той же высоты, что карточка, поэтому center и flex-start там неотличимы.
   Но аккордеон раскрывается и колонка растёт вниз: при center карточка с
   логотипом уезжала бы вниз на половину прироста. */
.new-design .cabinet-loyalty__top {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xxl);
}

.new-design .cabinet-loyalty__side {
  width: 25.1rem;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8.2rem;
}

.new-design .loyalty-info {
  width: 22.8rem;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.new-design .loyalty-info__text {
  font-family: var(--font-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.1;
  letter-spacing: 0.06rem;
  color: var(--color-primary);
  white-space: pre-line; /* пустая строка между абзацами — из текста */
}

/* Раскрывающиеся разделы: нативный <details>, шеврон поворачивается */
.new-design .loyalty-sections {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.new-design .loyalty-sections__item {
  width: 100%;
}

.new-design .loyalty-sections__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  min-height: 1.6rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  letter-spacing: 0.11rem;
  text-transform: uppercase;
  color: var(--color-primary);
}

.new-design .loyalty-sections__summary::-webkit-details-marker {
  display: none;
}

/* Hover — на всю строку целиком, а не только на текст: <summary> тянется во
   всю ширину колонки, поэтому наведение ловится и в пустом промежутке между
   названием и шевроном. Текст уходит в black/50; шеврон нарисован маской с
   background-color: currentColor и гаснет вместе с ним — по общему правилу
   дизайн-системы «иконки-маски наследуют цвет текста». */
.new-design .loyalty-sections__summary:hover,
.new-design .loyalty-sections__summary:focus-visible {
  color: var(--black-50);
}

.new-design .loyalty-sections__chevron {
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  background-color: currentColor;
  -webkit-mask: url('/app/media/img/minified-svg/icon-chevron-right.svg') center / contain no-repeat;
          mask: url('/app/media/img/minified-svg/icon-chevron-right.svg') center / contain no-repeat;
  transition: transform var(--transition-fast);
}

.new-design .loyalty-sections__item[open] .loyalty-sections__chevron {
  transform: rotate(90deg);
}

.new-design .loyalty-sections__body {
  padding: var(--spacing-sm) 0 var(--spacing-lg);
  font-family: var(--font-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  letter-spacing: 0.06rem;
  color: var(--color-primary);
}

.new-design .loyalty-sections__body p + p {
  margin-top: var(--spacing-sm);
}

/* --- История бонусов --- */

.new-design .bonus-history {
  margin-top: 3.8rem;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

/* Скрыта по умолчанию, открывается «i» в карточке. Без правила display:flex перебьёт hidden */
.new-design .bonus-history[hidden] {
  display: none;
}

.new-design .bonus-history__list {
  display: flex;
  flex-direction: column;
}

.new-design .bonus-history__row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) 0;
  min-height: 4rem;
}

/* Зебра выходит за колонку на 16px с каждой стороны — как в макете */
.new-design .bonus-history__row:nth-child(even)::before {
  content: '';
  position: absolute;
  inset: 0 calc(-1 * var(--container-padding));
  /* Figma #FAFAFA — на белом это ровно 2% чёрного */
  background: var(--black-2);
}

.new-design .bonus-history__cell {
  position: relative; /* над зеброй */
  display: flex;
  align-items: center;
}

/* Левая часть строки — боксы из макета: номер 9, дата 100, между ними 16
   (итого 125). Ширины фиксированные, поэтому дата стоит на одном месте при
   любой длине номера, а не съезжает на «10.» после «9.». */
.new-design .bonus-history__cell--left {
  gap: var(--container-padding);
}

.new-design .bonus-history__index {
  width: 0.9rem;
  flex: 0 0 auto;
}

.new-design .bonus-history__date {
  width: 10rem;
  flex: 0 0 auto;
}

.new-design .bonus-history__cell--right {
  width: 25.2rem;
  flex: 0 0 auto;
  justify-content: space-between;
  gap: var(--spacing-sm);
}

.new-design .bonus-history__index,
.new-design .bonus-history__date,
.new-design .bonus-history__note {
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  letter-spacing: 0.11rem;
  text-transform: uppercase;
  color: var(--color-primary);
}

.new-design .bonus-history__note {
  color: var(--black-35);
}

.new-design .bonus-history__order {
  color: var(--color-primary);
  text-decoration: underline;
}

.new-design .bonus-history__amount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.4rem;
  min-width: 5.3rem; /* Figma: плашка фиксированной ширины 53 */
  /* Поля 8, а не 12: с 12 плашка с «+1 200» раздувалась до 57 и min-width
     уже ни на что не влиял. С 8 обычная сумма укладывается ровно в 53. */
  padding: 0 var(--spacing-xs);
  /* FIXME: Figma radius 2px -> --border-radius-sm (4px), токена под 2px нет */
  border-radius: var(--border-radius-sm);
  background: var(--color-bg-beige);
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  letter-spacing: 0.11rem;
  color: var(--color-primary);
  white-space: nowrap;
}

/* ============================================================
   7. ЛИЧНЫЕ ДАННЫЕ
   Форма собрана на компонентах оформления заказа (.checkout__step*,
   .checkout__field) — отдельных стилей не заводим.
   ============================================================ */

.new-design .cabinet-personal {
  display: flex;
  flex-direction: column;
  gap: 6rem;
  max-width: 34.2rem;
}

/* Шаг формы растянут на колонку — карандаш прижимается к правому краю */
.new-design .cabinet-personal .checkout__step-head {
  width: 100%;
}

/* Внутри шага здесь шаг 24, а не 32 как в оформлении заказа: в макете
   (Figma 3770:20410) от полей до чекбоксов и от списка адресов до кнопки —
   ровно 24. */
.new-design .cabinet-personal .checkout__step-body {
  gap: var(--spacing-xl);
}

/* Расстояние до кнопки «Добавить адрес» держит шаг блока — свой нижний
   отступ списку не нужен, иначе получается 56 вместо 24. */
.new-design .cabinet-personal .cabinet-address__list {
  margin-bottom: 0;
}

/* Карандаш секции и карандаш в строке адреса — один и тот же значок.
   Поворот на 180° обязателен: в макете значок перевёрнут, без него карандаш
   смотрит вверх тормашками. Те же грабли уже описаны в main-new.css
   у .checkout__pickpoint-edit. */
.new-design .cabinet-personal__edit,
.new-design .cabinet-address__edit {
  width: 1.6rem;
  height: 1.6rem;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background-color: var(--color-primary);
  cursor: pointer;
  transform: rotate(180deg);
  -webkit-mask: url('/app/media/img/minified-svg/pencil.svg') center / 1rem no-repeat;
          mask: url('/app/media/img/minified-svg/pencil.svg') center / 1rem no-repeat;
}

.new-design .cabinet-personal__edit {
  margin-left: auto;
}

/* Поля идут шагом 4, а не 18 как в оформлении заказа */
.new-design .cabinet-personal__fields {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* До нажатия на карандаш поля закрыты, но читаются как обычный текст:
   браузерный серый у disabled сделал бы их похожими на ошибку. */
.new-design .cabinet-personal .checkout__input:disabled {
  color: var(--color-primary);
  opacity: 1;
  -webkit-text-fill-color: var(--color-primary);
}

/* Чекбоксы: квадрат 8x8, подпись обычным регистром (Figma 13/1.2).
   Шаг между строками в макете — 25 от верха до верха (и на десктопе 3770:20415,
   и на мобильном 3903:17775). Высота строки там 9, потому что у текста включён
   text-box-trim: это высота заглавной буквы 13px, а не размер шрифта. У нас
   строка занимает честные 15.6, поэтому зазор берём меньше — иначе шаг уезжает
   до 27.6.
   FIXME: Figma шаг 25 -> --spacing-xs (8) даёт 23.6, точного значения (9.4) в
   шкале нет. */
.new-design .cabinet-check {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.new-design .cabinet-check__row {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  cursor: pointer;
}

.new-design .cabinet-check__row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.new-design .cabinet-check__box {
  width: 0.8rem;
  height: 0.8rem;
  flex: 0 0 auto;
  border: 1px solid var(--black-15);
}

.new-design .cabinet-check__row input:checked + .cabinet-check__box {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.new-design .cabinet-check__label {
  font-family: var(--font-secondary);
  font-size: 1.3rem;
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  letter-spacing: 0.065rem;
  color: var(--color-primary);
}

/* ============================================================
   7b. СОХРАНЁННЫЕ АДРЕСА
   ============================================================ */

.new-design .cabinet-address__list {
  list-style: none;
  margin: 0 0 var(--spacing-xl);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.new-design .cabinet-address__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: color-mix(in srgb, var(--color-button) 40%, transparent);
}

.new-design .cabinet-address__text {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  letter-spacing: 0.11rem;
  text-transform: uppercase;
  color: var(--color-primary);
}

/* Кнопка «Добавить адрес» здесь светлая, а не чёрная как в оформлении заказа */
.new-design .cabinet-address__add {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  height: 5.2rem;
  padding: 0 1.4rem 0 var(--container-padding);
  border: 0;
  cursor: pointer;
  background: var(--black-5);
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  letter-spacing: 0.11rem;
  text-transform: uppercase;
  color: var(--color-primary);
}

.new-design .cabinet-address__add-icon {
  width: 1.6rem;
  height: 1.6rem;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: url('/app/media/img/minified-svg/plus.svg') center / 0.8rem no-repeat;
          mask: url('/app/media/img/minified-svg/plus.svg') center / 0.8rem no-repeat;
}

/* ============================================================
   7c. ПАНЕЛЬ ПРАВКИ КОНТАКТНЫХ ДАННЫХ (Figma «info edit / desktop»)
   Правый оверлей 510 на BaseOverlay; колонка формы 300 по центру панели.
   ============================================================ */

.new-design .cabinet-edit__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding: var(--spacing-xl) var(--container-padding) 0;
}

/* Форма стоит посередине панели по вертикали, а не под шапкой (см. макет).
   Тело оверлея — обычный блок с прокруткой, поэтому включаем ему флекс:
   при нём margin:auto у формы центрирует по обеим осям и, в отличие от
   justify-content:center, не срезает верх, если контент выше панели. */
.new-design .overlay__body:has(> .cabinet-edit) {
  display: flex;
}

.new-design .cabinet-edit__title {
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  letter-spacing: 0.11rem;
  text-transform: uppercase;
  color: var(--color-primary);
}

/* Крестик — та же геометрия, что у «выйти»: 10×1 под 45°/135° в боксе 16 */
.new-design .cabinet-edit__close {
  position: relative;
  width: 1.6rem;
  height: 1.6rem;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--color-primary);
}

.new-design .cabinet-edit__close::before,
.new-design .cabinet-edit__close::after {
  content: '';
  position: absolute;
  left: 0.3rem;
  top: 50%;
  width: 1rem;
  height: 1px;
  background: currentColor;
}

.new-design .cabinet-edit__close::before { transform: translateY(-50%) rotate(45deg); }
.new-design .cabinet-edit__close::after { transform: translateY(-50%) rotate(-45deg); }

/* Форма прижата к центру панели по вертикали, как в макете */
.new-design .cabinet-edit {
  width: 30rem;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.new-design .cabinet-edit__fields {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

/* Панель адреса: шаг 18 (см. комментарий в _address-edit-overlay.php) */
.new-design .cabinet-edit__fields--tight {
  gap: 1.8rem;
}

/* Имя и фамилия — в строку, поровну */
.new-design .cabinet-edit__row {
  display: flex;
  gap: var(--spacing-xl);
}

.new-design .cabinet-edit__row .checkout__field {
  flex: 1 1 0;
  min-width: 0;
}

/* В панели подписки заголовка нет — только крестик, прижатый вправо */
.new-design .cabinet-edit__head--bare {
  justify-content: flex-end;
}

/* Пояснение над полем почты: по центру, как в макете */
.new-design .cabinet-edit__note {
  margin: 0;
  text-align: center;
  /* Строки равной длины, без одинокого слова на последней (правки заказчика) */
  text-wrap: balance;
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  /* Body 2 — 11/1.3 (Figma 3770:25144), а не 1.4 */
  line-height: 1.3;
  letter-spacing: 0.11rem;
  text-transform: uppercase;
  color: var(--color-primary);
}

/* Кнопки панели столбиком: «Сохранить», под ней «Удалить адрес» */
.new-design .cabinet-edit__actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

/* Кнопка — primary по дизайн-системе: beige, на hover чёрная */
.new-design .cabinet-edit__submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  height: 5.2rem;
  padding: 0 1.4rem 0 var(--container-padding);
  border: 0;
  cursor: pointer;
  background: var(--color-button);
  color: var(--color-primary);
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  letter-spacing: 0.11rem;
  text-transform: uppercase;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.new-design .cabinet-edit__submit:hover,
.new-design .cabinet-edit__submit:focus-visible {
  background: var(--color-primary);
  color: var(--color-bg);
}

/* Чёрная кнопка «Повторить заказ» — вторая по значимости после beige */
.new-design .cabinet-edit__submit--repeat {
  background: var(--color-primary);
  color: var(--color-bg);
}

.new-design .cabinet-edit__submit--repeat:hover,
.new-design .cabinet-edit__submit--repeat:focus-visible {
  background: var(--color-button);
  color: var(--color-primary);
}

/* Кнопка без своего сценария (отзывов в проекте ещё нет) не должна выглядеть
   рабочей: гасим её и снимаем наведение. */
.new-design .cabinet-edit__submit[disabled] {
  cursor: default;
  color: var(--black-35);
}

.new-design .cabinet-edit__submit[disabled]:hover {
  background: var(--color-button);
  color: var(--black-35);
}

/* ============================================================
   7d. ПОДРОБНОСТИ ЗАКАЗА (панель «order detail's»)
   ============================================================ */

/* Колонка содержимого — 300 по центру панели: и на десктопе (Figma 3770:24108,
   панель 509, контент 92.5+300), и на мобильном (3770:24234, 375 → 37.5+300).
   Шаг между блоками — 40 (товары → поля → итоги → кнопки). */
.new-design .order-sheet {
  width: 30rem;
  margin: 0 auto;
  /* Тело оверлея своего нижнего отступа не даёт — без этого кнопки
     «Оставить отзыв / Повторить заказ» упирались в край экрана. Отступ
     равен шагу между блоками, на iPhone к нему добавляется safe-area. */
  padding-bottom: calc(var(--spacing-xxl) + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

/* Фото позиции в панели меньше, чем на странице статуса заказа: там колонка
   шире. В макете (Figma 3770:24119) слот 80×111 при колонке 300. */
.new-design .order-sheet .order-status__item-photo {
  flex: 0 0 8rem;
}

.new-design .order-sheet__block {
  display: flex;
  flex-direction: column;
  /* Figma 3770:24115: от заголовка «Товары» до списка — 12, а не 16 */
  gap: var(--spacing-sm);
}

/* Между позициями в панели тоже 12 (Figma 3770:24117: шаг 123 при карточке 111),
   на странице статуса заказа лента идёт шагом 16 — её не трогаем. */
.new-design .order-sheet .order-status__items {
  gap: var(--spacing-sm);
}

/* Фото и описание разделяет 11 (Figma 3770:24118), а не 12 как на странице
   статуса заказа. */
.new-design .order-sheet .order-status__item {
  gap: 1.1rem;
}

/* Название с ценой прижаты к верху слота, размер с цветом — к низу: в макете
   (Figma 3770:24121) колонка ровно по высоте фото, между блоками 29 свободного
   места, а не фиксированный отступ. */
.new-design .order-sheet .order-status__item-top {
  flex: 1 1 auto;
  justify-content: space-between;
}

/* Поля доставки в панели идут тем же шагом 40, что и остальные блоки
   (Figma 3770:24166), а не 24 как в блоке «последний заказ» на Аккаунте. */
.new-design .order-sheet .order-detail__fields {
  gap: 4rem;
}

/* Разбивка суммы — тоже Body 2: строка 14 при шаге 22 (Figma 3770:24189).
   Без своего интерлиньяжа строки наследовали 1.5 и шаг уезжал до 24.5. */
.new-design .order-sheet .order-status__total-row {
  line-height: 1.3;
}

/* «Итого» — Price 14/16 (Figma 3770:24206). До него от последней строки 32:
   у списка уже есть свой шаг 8, поэтому собственный отступ строки — 24. */
.new-design .order-sheet .order-status__total-row--grand {
  margin-top: 2.4rem;
  line-height: 1.6rem;
}

/* Кнопки панели стоят вплотную: 4 между ними (Figma 3770:24209 — шаг 56 при
   кнопке 52), тогда как в панелях правки шаг 8. */
.new-design .order-sheet .cabinet-edit__actions {
  gap: 0.4rem;
}

/* Трек-номер и статус в макете на одной линии: номер слева, тег справа */
.new-design .order-sheet__track {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--container-padding);
}

/* Лента состава внутри панели своего нижнего отступа не просит — расстояния
   между блоками держит сама панель (gap). */
.new-design .order-sheet .order-status__items {
  margin-bottom: 0;
}

/* Карточка заказа открывает панель — показываем это курсором */
.new-design .cabinet-order[data-order-detail],
.new-design .order-detail[data-order-detail] {
  cursor: pointer;
}

/* Крестик на «Удалить адрес» — та же геометрия, что у «выйти»: 10×1 под 45°/135° */
.new-design .cabinet-edit__submit-cross {
  position: relative;
  width: 1.6rem;
  height: 1.6rem;
  flex: 0 0 auto;
}

.new-design .cabinet-edit__submit-cross::before,
.new-design .cabinet-edit__submit-cross::after {
  content: '';
  position: absolute;
  left: 0.3rem;
  top: 50%;
  width: 1rem;
  height: 1px;
  background: currentColor;
}

.new-design .cabinet-edit__submit-cross::before { transform: translateY(-50%) rotate(45deg); }
.new-design .cabinet-edit__submit-cross::after { transform: translateY(-50%) rotate(-45deg); }

/* Стрелка «вправо» с хвостом, как в макете. Оба стрелочных файла проекта
   смотрят ВНИЗ (icon-arrow.svg — об этом есть отметка в main-new.css:5625),
   поэтому берём хвостатую и доворачиваем на четверть против часовой. */
.new-design .cabinet-edit__submit-icon {
  width: 1.6rem;
  height: 1.6rem;
  flex: 0 0 auto;
  background-color: currentColor;
  transform: rotate(-90deg);
  -webkit-mask: url('/app/media/img/minified-svg/icon-arrow-tail.svg') no-repeat center / 0.8rem 1rem;
          mask: url('/app/media/img/minified-svg/icon-arrow-tail.svg') no-repeat center / 0.8rem 1rem;
}

/* На узком экране панель во всю ширину, а колонка формы — 230 по центру
   (Figma 3770:23874 / 3770:24838: контент 230 при экране 375). */
@media screen and (max-width: 47.99em) {
  .new-design .cabinet-edit {
    width: 23rem;
    padding: 0;
  }
}

/* Поле даты: кнопка-календарь у правого края и сам нативный выбор даты,
   спрятанный от глаз. Раскрывает его кнопка (showPicker), потому что клик
   по невидимому date-инпуту календарь сам по себе не открывает. */
.new-design .checkout__field--date {
  position: relative;
}

.new-design .checkout__field-chevron {
  position: absolute;
  right: 0;
  bottom: 1.2rem;
  width: 1.4rem;
  height: 0.9rem;
  padding: 0;
  border: 0;
  cursor: pointer;
  background-color: var(--black-35);
  -webkit-mask: url('/app/media/img/minified-svg/arr-select.svg') center / contain no-repeat;
          mask: url('/app/media/img/minified-svg/arr-select.svg') center / contain no-repeat;
}

.new-design .checkout__field-chevron:hover {
  background-color: var(--color-primary);
}

/* Скрываем визуально, но оставляем в потоке: display:none у некоторых браузеров
   отключает showPicker(). */
.new-design .checkout__field-picker {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* Всплывающий лейбл без Vue: в кабинете формы обычные, поэтому состояние
   «поле заполнено» читаем прямо из DOM (у полей placeholder=" "), а не из
   класса is-filled, который в оформлении заказа проставляет компонент.
   Область действия — обе формы кабинета: и раздел, и панель правки. Правило,
   ограниченное только разделом, оставляло лейбл поверх значения в панели. */
.new-design .cabinet-personal .checkout__input:not(:placeholder-shown),
.new-design .cabinet-edit .checkout__input:not(:placeholder-shown) {
  border-bottom-color: var(--color-primary);
}

.new-design .cabinet-personal .checkout__input:not(:placeholder-shown) + .checkout__label,
.new-design .cabinet-edit .checkout__input:not(:placeholder-shown) + .checkout__label {
  bottom: 3rem;
  font-size: 0.8rem;
  letter-spacing: 0.08rem;
}

/* CTA по правилам дизайн-системы: beige → чёрный на hover/focus */
.new-design .cabinet-personal__submit {
  align-self: flex-start;
  height: 4.6rem;
  padding: 0 var(--spacing-xl);
  border: 0;
  cursor: pointer;
  background: var(--color-button);
  color: var(--color-primary);
  font-family: var(--font-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  letter-spacing: 0.11rem;
  text-transform: uppercase;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.new-design .cabinet-personal__submit:hover,
.new-design .cabinet-personal__submit:focus-visible {
  background: var(--color-primary);
  color: var(--color-bg);
}

/* ============================================================
   8. МОБАЙЛ (<= 767)
   ============================================================ */

@media screen and (max-width: 47.99em) {
  /* Панель уходит под прозрачную шапку: распорку под шапкой убираем */
  body.is-cabinet-page .header-new {
    background: transparent;
  }

  body.is-cabinet-page .header-new__gap {
    display: none;
  }

  .new-design.cabinet {
    padding-bottom: 6rem;
  }

  .new-design .cabinet__panel {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 23.2rem;
    padding: var(--spacing-sm);
    /* FIXME: Figma #F4F0EE -> --color-bg-beige (#F6F2F0), на десктопе тот же блок бежевый */
    background: var(--color-bg-beige);
  }

  .new-design .cabinet__panel-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6.4rem;
  }

  /* 6rem из макета рассчитаны под «LVL/СКИДКА»; «УРОВЕНЬ/ВЛАДЕЛЕЦ» и имя
     владельца длиннее — колонка от 6rem, но не шире 12rem, длинное имя
     переносится. */
  .new-design .cabinet__panel-stats {
    min-width: 6rem;
    max-width: 12rem;
    flex: 0 1 auto;
    overflow-wrap: anywhere;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
  }

  .new-design .cabinet__stat {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }

  .new-design .cabinet__panel-bonus {
    width: 11.5rem;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  .new-design .cabinet__bonus-value {
    font-family: var(--font-price);
    font-weight: var(--font-weight-black);
    font-size: 4.2rem;
    line-height: 4.2rem;
    color: var(--color-primary);
  }

  /* Ширина колонки раздела (Figma). Ею выравниваются и сам контент, и ряд
     табов над ним: в макетах плашка активного таба, заголовок блока и лента
     заказов стоят на одной вертикали. Число одно на раздел — разъехаться
     колонке и табам больше негде. «Заказы» идут во всю ширину с паддингом. */
  .new-design.cabinet--account {
    --cabinet-column: 25.2rem;
  }

  .new-design.cabinet--loyalty {
    --cabinet-column: 22.8rem;
  }

  .new-design.cabinet--personal {
    --cabinet-column: 23rem;
  }

  .new-design.cabinet--orders {
    --cabinet-column: calc(100% - var(--container-padding) * 2);
  }

  /* Табы: ряд шире экрана, скроллится, полосу прокрутки прячем */
  .new-design .cabinet__tabs {
    display: block;
    margin-top: var(--spacing-xl);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .new-design .cabinet__tabs::-webkit-scrollbar {
    display: none;
  }

  .new-design .cabinet__tabs-row {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    /* Слева — ровно по колонке раздела, справа хватает паддинга страницы:
       ряд всё равно шире экрана и доскролливается до «Выйти». */
    padding-left: calc((100% - var(--cabinet-column)) / 2);
    padding-right: var(--container-padding);
  }

  .new-design .cabinet__tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 3.2rem;
    padding: 0 var(--spacing-xs);
    /* FIXME: Figma radius 3px -> --border-radius-sm (4px), токена под 3px нет */
    border-radius: var(--border-radius-sm);
    white-space: nowrap;
  }

  .new-design .cabinet__tab.is-active {
    background: var(--black-5);
    color: var(--color-primary);
  }

  /* «Выйти» отстоит от последнего таба на те же 8, что и табы друг от друга
     (Figma 3903:17265 — зазор 8 при ряде с gap 8). Своего левого поля у строки
     нет: паддинг оставляем только справа, чтобы в конце прокручиваемого ряда
     оставался воздух. */
  .new-design .cabinet__tabs .cabinet__logout {
    padding: 0 var(--spacing-sm) 0 0;
  }

  /* Десктопная навигация на мобильном не нужна — её роль играют табы */
  .new-design .cabinet__nav {
    display: none;
  }

  .new-design .cabinet__layout {
    padding: 0;
    margin-top: 3.2rem; /* Figma: 32px от табов до контента */
    gap: 0;
  }

  /* Баланс на мобильном показывает бежевая панель наверху — карточка из
     десктопной раскладки в макетах мобайла отсутствует, иначе цифра дублируется. */
  .new-design .loyalty-card {
    display: none;
  }

  /* Аккаунт: одна колонка 252 по центру. Левая колонка сейчас несёт только
     карточку баланса, поэтому целиком скрыта; когда появятся сертификаты,
     её нужно вернуть и поставить ПОСЛЕ заказов (в макете они ниже). */
  .new-design .cabinet-account {
    flex-direction: column;
    align-items: center;
    gap: 4.1rem;
  }

  .new-design .cabinet-account__main {
    width: var(--cabinet-column);
  }

  .new-design .cabinet-account__aside {
    display: none;
  }

  /* Заказы: карточки во всю ширину, содержимое по центру, пустых слотов нет
     (в мобильном макете лента центрирована по реальным товарам) */
  .new-design .cabinet-order {
    align-items: center;
    text-align: center;
  }

  .new-design .cabinet-order__meta {
    justify-content: center;
  }

  .new-design .order-strip--lg {
    justify-content: center;
  }

  .new-design .order-strip--lg .order-strip__cell--empty {
    display: none;
  }

  /* Лояльность: колонка 228 по центру, история — во всю ширину */
  .new-design .cabinet-loyalty__top {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xl);
  }

  .new-design .cabinet-loyalty__side {
    width: var(--cabinet-column);
    gap: 3.2rem;
  }

  .new-design .loyalty-info {
    width: 100%;
  }

  /* Таблица намеренно не влезает в экран: в макете строка 420 при колонке
     раздела 228 и левом крае 74 — то есть уезжает за правый край и
     доскролливается вбок. Ужимать её нельзя, иначе плашка суммы с подписью
     наедут друг на друга.

     Контейнер при этом во всю ширину, а до колонки добираемся паддингом:
     так зебра, вылезающая на 16 влево, остаётся внутри него и видна
     целиком — при контейнере по колонке её бы срезало. */
  .new-design .bonus-history {
    margin-top: 4rem;
    width: 100%;
    padding-left: calc((100% - var(--cabinet-column)) / 2);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .new-design .bonus-history::-webkit-scrollbar {
    display: none;
  }

  /* Строка 420 (Figma 3903:18012): левая часть 125, правая 252 у правого края */
  .new-design .bonus-history__list {
    width: 42rem;
  }

  /* Личные данные: колонка 230 по центру (Figma 3903:17604) */
  .new-design .cabinet-personal {
    width: var(--cabinet-column);
    max-width: none;
    margin: 0 auto;
    gap: 4rem;
  }
}