/* ============================================================================
   DomTextil · profile.css — UI-система личного кабинета (MAX Mini App)
   Версия: 20260824-header
   Назначение: новый дизайн личного кабинета (заказы, резервы, профиль).
   Скоуп: ВСЕ правила действуют только внутри #profile-modal,
          каталог/карточки/главная не затрагиваются.
   Откат: достаточно удалить подключение этого файла из index.html.
   Токены — алиасы брендовых :root из styles.css (акцент #2f6fed, НЕ индиго).
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1) ТОКЕНЫ ПРОФИЛЯ (алиасы брендовых значений, объявлены в скоупе модалки)
   ---------------------------------------------------------------------------- */
#profile-modal {
  /* Поверхности */
  --profile-bg: var(--bg);                        /* #f4f7fc */
  --profile-surface: var(--surface);              /* #ffffff */
  --profile-surface-muted: var(--surface-soft);   /* #f2f6ff */
  --profile-border: var(--line);                  /* #dbe3f1 */
  --profile-border-soft: rgba(23, 31, 46, 0.08);

  /* Текст */
  --profile-text: var(--text);                    /* #171f2e */
  --profile-text-secondary: var(--muted);         /* #67758e */
  --profile-text-disabled: #9aa6ba;

  /* Акцент — строго брендовый синий, дозированное применение */
  --profile-accent: var(--accent);                /* #2f6fed */
  --profile-accent-strong: var(--accent-strong);  /* #225cd1 */
  --profile-accent-soft: var(--accent-soft);      /* #e7f0ff */
  --profile-accent-ring: rgba(47, 111, 237, 0.18);

  /* Семантические статусы — приглушённые, не яркие */
  --profile-success: #1e7a4d;
  --profile-success-bg: #e8f5ee;
  --profile-success-border: #c9e6d6;
  --profile-warning: #9a6a12;
  --profile-warning-bg: #fbf1dd;
  --profile-warning-border: #ecd9ac;
  --profile-danger: #bb3a34;
  --profile-danger-bg: #fdecea;
  --profile-danger-border: #f2cdc8;

  /* Скругления — из брендовых значений */
  --profile-radius-sm: var(--radius-sm);  /* 0.55rem */
  --profile-radius-md: var(--radius-md);  /* 0.7rem  */
  --profile-radius-lg: var(--radius-lg);  /* 0.9rem  */
  --profile-radius-xl: var(--radius-xl);  /* 1.1rem  */
  --profile-radius-full: 999px;

  /* Тени */
  --profile-shadow-sm: var(--shadow-sm);
  --profile-shadow-lg: var(--shadow-lg);
  --profile-shadow-card: 0 1px 2px rgba(24, 41, 77, 0.05),
                         0 4px 12px rgba(24, 41, 77, 0.06);

  /* Фокус-кольцо (единое для всех интерактивных элементов) */
  --profile-focus-ring: 0 0 0 3px var(--profile-accent-ring);

  /* Анимация */
  --profile-transition: 160ms cubic-bezier(0.3, 0, 0.4, 1);

  /* Высота шапки под-экранов (кнопки 44px + вертикальные отступы + рамка).
     Единый источник истины: тосты и другие оверлеи позиционируются
     относительно неё, чтобы ничего не накладывалось на шапку. */
  --pux-header-h: calc(44px + 2 * var(--profile-space-2) + 1px);
}

/* ----------------------------------------------------------------------------
   2) ТИПОГРАФИЧЕСКАЯ ШКАЛА (Inter подключён в styles.css)
   Каждая роль имеет конкретное назначение, размеры умеренные — без гигантизма.
   ---------------------------------------------------------------------------- */
#profile-modal {
  --profile-font-display: 1.5rem;     /* 24 — заголовок hero-зоны профиля */
  --profile-font-h1: 1.25rem;         /* 20 — заголовок экрана */
  --profile-font-h2: 1.0625rem;       /* 17 — заголовок секции/карточки */
  --profile-font-h3: 0.9375rem;       /* 15 — подзаголовок карточки */
  --profile-font-body: 0.9375rem;     /* 15 — основной текст, комфорт с моб. */
  --profile-font-body2: 0.8125rem;    /* 13 — вторичный текст, приглушённый */
  --profile-font-caption: 0.75rem;    /* 12 — подписи, даты, хинты */
  --profile-font-label: 0.6875rem;    /* 11 — компактные лейблы полей/бейджей */
  --profile-font-price: 1.0625rem;    /* 17 — цена, выделена, но не кричит */
  --profile-font-metric: 1.0625rem;   /* 17 — компактные цифры статистики (p14) */

  --profile-lh-display: 1.2;
  --profile-lh-h1: 1.25;
  --profile-lh-h2: 1.3;
  --profile-lh-h3: 1.35;
  --profile-lh-body: 1.5;
  --profile-lh-body2: 1.45;
  --profile-lh-caption: 1.35;
  --profile-lh-label: 1.25;
  --profile-lh-price: 1.2;
  --profile-lh-metric: 1.25;
}

/* Ролевые типографические классы */
#profile-modal .pux-display {
  margin: 0;
  font-size: var(--profile-font-display);
  line-height: var(--profile-lh-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--profile-text);
}

#profile-modal .pux-h1 {
  margin: 0;
  font-size: var(--profile-font-h1);
  line-height: var(--profile-lh-h1);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--profile-text);
}

#profile-modal .pux-h2 {
  margin: 0;
  font-size: var(--profile-font-h2);
  line-height: var(--profile-lh-h2);
  font-weight: 600;
  color: var(--profile-text);
}

#profile-modal .pux-h3 {
  margin: 0;
  font-size: var(--profile-font-h3);
  line-height: var(--profile-lh-h3);
  font-weight: 600;
  color: var(--profile-text);
}

#profile-modal .pux-body {
  margin: 0;
  font-size: var(--profile-font-body);
  line-height: var(--profile-lh-body);
  font-weight: 400;
  color: var(--profile-text);
}

#profile-modal .pux-body-secondary {
  margin: 0;
  font-size: var(--profile-font-body2);
  line-height: var(--profile-lh-body2);
  font-weight: 400;
  color: var(--profile-text-secondary);
}

#profile-modal .pux-caption {
  margin: 0;
  font-size: var(--profile-font-caption);
  line-height: var(--profile-lh-caption);
  font-weight: 500;
  color: var(--profile-text-secondary);
}

#profile-modal .pux-label {
  margin: 0;
  font-size: var(--profile-font-label);
  line-height: var(--profile-lh-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--profile-text-secondary);
}

#profile-modal .pux-price {
  font-size: var(--profile-font-price);
  line-height: var(--profile-lh-price);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--profile-text);
}

#profile-modal .pux-metric {
  font-size: var(--profile-font-metric);
  line-height: var(--profile-lh-metric);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  white-space: nowrap; /* сумма вида «3 910 ₽» не переносится на 2 строки */
  min-width: 0;
  color: var(--profile-text);
}

/* ----------------------------------------------------------------------------
   3) SPACING — строгая шкала 4/8/12/16/20/24/32px, без случайных значений.
   ---------------------------------------------------------------------------- */
#profile-modal {
  --profile-space-1: 4px;
  --profile-space-2: 8px;
  --profile-space-3: 12px;
  --profile-space-4: 16px;
  --profile-space-5: 20px;
  --profile-space-6: 24px;
  --profile-space-8: 32px;
}

/* ----------------------------------------------------------------------------
   4) БАЗОВЫЙ КОНТЕЙНЕР ПРОФИЛЯ — скролл внутри модалки, без fixed вне диалога
   ---------------------------------------------------------------------------- */
#profile-modal .pux-root {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--profile-font-body);
  line-height: var(--profile-lh-body);
  color: var(--profile-text);
  background: var(--profile-bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

#profile-modal .pux-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* Вертикальный скролл профиля (модалка поверх каталога): touch-action
     явно pan-y, чтобы скролл работал, а zoom-жесты были запрещены. */
  touch-action: pan-y;
  padding: var(--profile-space-4);
  /* Нижний safe-area: в MAX WebView контент не прячется под домашний индикатор */
  padding-bottom: calc(var(--profile-space-4) + env(safe-area-inset-bottom));
}

/* ----------------------------------------------------------------------------
   5) .pux-card — единый стиль карточки
   ---------------------------------------------------------------------------- */
#profile-modal .pux-card {
  display: flex;
  flex-direction: column;
  gap: var(--profile-space-3);
  padding: var(--profile-space-4);
  background: var(--profile-surface);
  border: 1px solid var(--profile-border);
  border-radius: var(--profile-radius-lg);
  box-shadow: var(--profile-shadow-card);
}

#profile-modal .pux-card + .pux-card {
  margin-top: var(--profile-space-3);
}

/* Интерактивная карточка (тап → переход на под-экран) */
#profile-modal .pux-card--interactive {
  cursor: pointer;
  transition: border-color var(--profile-transition),
              box-shadow var(--profile-transition),
              transform var(--profile-transition);
}

#profile-modal .pux-card--interactive:hover {
  border-color: var(--profile-accent);
  box-shadow: var(--profile-shadow-sm);
}

#profile-modal .pux-card--interactive:active {
  transform: scale(0.99);
}

/* Компактная карточка для плотных списков */
#profile-modal .pux-card--compact {
  gap: var(--profile-space-2);
  padding: var(--profile-space-3);
}

/* Карточка без подложки/тени — вложенный блок */
#profile-modal .pux-card--flat {
  background: var(--profile-surface-muted);
  border-color: var(--profile-border-soft);
  box-shadow: none;
}

/* ----------------------------------------------------------------------------
   6) .pux-avatar — фикс. размеры, fallback-инициалы
   ---------------------------------------------------------------------------- */
#profile-modal .pux-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  overflow: hidden;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--profile-accent);
  background: var(--profile-accent-soft);
  border-radius: var(--profile-radius-full);
  user-select: none;
}

#profile-modal .pux-avatar--sm {
  width: 32px;
  height: 32px;
  font-size: 0.75rem;
}

#profile-modal .pux-avatar--lg {
  width: 64px;
  height: 64px;
  font-size: 1.25rem;
}

#profile-modal .pux-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* SVG-иконка внутри аватара (гость/нет фото) */
#profile-modal .pux-avatar svg {
  width: 60%;
  height: 60%;
}

/* Fallback: инициалы показываются всегда; фото перекрывает их при наличии */
#profile-modal .pux-avatar__initials {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

#profile-modal .pux-avatar img ~ .pux-avatar__initials,
#profile-modal .pux-avatar--has-image .pux-avatar__initials {
  visibility: hidden;
}

/* ----------------------------------------------------------------------------
   7) .pux-badge — статусы читаются не только цветом (текст + цвет + точка)
   ---------------------------------------------------------------------------- */
#profile-modal .pux-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 3px 8px;
  font-size: var(--profile-font-label);
  line-height: var(--profile-lh-label);
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  border-radius: var(--profile-radius-full);
  border: 1px solid transparent;
}

/* Маркер-точка: статус различим и при отключённом цвете */
#profile-modal .pux-badge::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* «Зарезервирован» — warning (ожидание решения) */
#profile-modal .pux-badge--reserved {
  color: var(--profile-warning);
  background: var(--profile-warning-bg);
  border-color: var(--profile-warning-border);
}

/* «Выполнен» — success */
#profile-modal .pux-badge--closed {
  color: var(--profile-success);
  background: var(--profile-success-bg);
  border-color: var(--profile-success-border);
}

/* «Возвращён» — нейтрально-приглушённый */
#profile-modal .pux-badge--returned_to_catalog {
  color: var(--profile-text-secondary);
  background: var(--profile-surface-muted);
  border-color: var(--profile-border);
}

/* Нейтральный служебный бейдж (кол-во, категория) */
#profile-modal .pux-badge--neutral {
  color: var(--profile-text-secondary);
  background: var(--profile-surface-muted);
  border-color: var(--profile-border-soft);
}

/* ----------------------------------------------------------------------------
   8) .pux-button — primary / ghost / danger, размеры, состояния
   ---------------------------------------------------------------------------- */
#profile-modal .pux-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--profile-space-2);
  min-height: 44px; /* тач-зона */
  padding: 0 var(--profile-space-4);
  font-family: inherit;
  font-size: var(--profile-font-body2);
  line-height: var(--profile-lh-body2);
  font-weight: 600;
  white-space: nowrap;
  color: var(--profile-text);
  background: var(--profile-surface);
  border: 1px solid var(--profile-border);
  border-radius: var(--profile-radius-md);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--profile-transition),
              border-color var(--profile-transition),
              color var(--profile-transition),
              transform var(--profile-transition),
              box-shadow var(--profile-transition);
}

#profile-modal .pux-button:hover {
  background: var(--profile-surface-muted);
  border-color: var(--profile-accent);
}

#profile-modal .pux-button:active {
  transform: scale(0.98);
}

#profile-modal .pux-button:focus-visible {
  outline: none;
  box-shadow: var(--profile-focus-ring);
}

#profile-modal .pux-button:disabled,
#profile-modal .pux-button--disabled {
  color: var(--profile-text-disabled);
  background: var(--profile-surface-muted);
  border-color: var(--profile-border);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Primary — единственный акцент на действие в экране */
#profile-modal .pux-button--primary {
  color: #ffffff;
  background: var(--profile-accent);
  border-color: var(--profile-accent);
}

#profile-modal .pux-button--primary:hover {
  background: var(--profile-accent-strong);
  border-color: var(--profile-accent-strong);
}

#profile-modal .pux-button--primary:disabled,
#profile-modal .pux-button--primary.pux-button--disabled {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(47, 111, 237, 0.45);
  border-color: transparent;
}

/* Login-max — белая SSO-кнопка «Авторизоваться через Макс» (p11):
   градиентная иконка MAX плохо читается на акцентном фоне, поэтому
   белый фон + тёмный текст (как чипы MAX в модалках сайта) */
#profile-modal .pux-button--login-max {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--profile-text);
  background: #ffffff;
  border-color: var(--profile-border);
  box-shadow: 0 1px 2px rgba(23, 31, 46, 0.05);
}

#profile-modal .pux-button--login-max:hover {
  color: var(--profile-text);
  background: #ffffff;
  border-color: var(--profile-accent);
}

#profile-modal .pux-button--login-max .pux-button__icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  display: block;
  border-radius: 0.375rem;
}

/* Ghost — вторичное действие */
#profile-modal .pux-button--ghost {
  color: var(--profile-accent);
  background: transparent;
  border-color: transparent;
}

#profile-modal .pux-button--ghost:hover {
  background: var(--profile-accent-soft);
  border-color: transparent;
}

#profile-modal .pux-button--ghost:disabled,
#profile-modal .pux-button--ghost.pux-button--disabled {
  color: var(--profile-text-disabled);
  background: transparent;
}

/* Danger — деструктивные действия */
#profile-modal .pux-button--danger {
  color: var(--profile-danger);
  background: var(--profile-surface);
  border-color: var(--profile-danger-border);
}

#profile-modal .pux-button--danger:hover {
  background: var(--profile-danger-bg);
  border-color: var(--profile-danger);
}

/* Размеры */
#profile-modal .pux-button--sm {
  min-height: 36px;
  padding: 0 var(--profile-space-3);
  font-size: var(--profile-font-caption);
}

#profile-modal .pux-button--block {
  width: 100%;
}

/* ----------------------------------------------------------------------------
   9) .pux-skeleton — шиммер + prefers-reduced-motion
   ---------------------------------------------------------------------------- */
#profile-modal .pux-skeleton {
  display: block;
  position: relative;
  overflow: hidden;
  background: rgba(23, 31, 46, 0.08);
  border-radius: var(--profile-radius-sm);
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}

#profile-modal .pux-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.65) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: pux-skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes pux-skeleton-shimmer {
  to {
    transform: translateX(100%);
  }
}

#profile-modal .pux-skeleton--text {
  height: 0.875rem;
  width: 100%;
}

#profile-modal .pux-skeleton--text-short {
  height: 0.875rem;
  width: 60%;
}

#profile-modal .pux-skeleton--avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--profile-radius-full);
}

#profile-modal .pux-skeleton--badge {
  height: 1.125rem;
  width: 72px;
  border-radius: var(--profile-radius-full);
}

#profile-modal .pux-skeleton--card {
  height: 96px;
  width: 100%;
  border-radius: var(--profile-radius-lg);
}

/* ----------------------------------------------------------------------------
   10) .pux-field — label + input + helper/error, компактные поля
   ---------------------------------------------------------------------------- */
#profile-modal .pux-field {
  display: flex;
  flex-direction: column;
  gap: var(--profile-space-1);
}

#profile-modal .pux-field + .pux-field {
  margin-top: var(--profile-space-3);
}

#profile-modal .pux-field__label {
  font-size: var(--profile-font-caption);
  line-height: var(--profile-lh-caption);
  font-weight: 600;
  color: var(--profile-text);
}

#profile-modal .pux-field__label--required::after {
  content: " *";
  color: var(--profile-danger);
}

#profile-modal .pux-field__input {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--profile-space-3);
  font-family: inherit;
  font-size: var(--profile-font-body);
  line-height: var(--profile-lh-body);
  color: var(--profile-text);
  background: var(--profile-surface);
  border: 1px solid var(--profile-border);
  border-radius: var(--profile-radius-md);
  transition: border-color var(--profile-transition),
              box-shadow var(--profile-transition);
}

#profile-modal .pux-field__input::placeholder {
  color: var(--profile-text-disabled);
}

#profile-modal .pux-field__input:hover {
  border-color: var(--profile-text-secondary);
}

#profile-modal .pux-field__input:focus,
#profile-modal .pux-field__input:focus-visible {
  outline: none;
  border-color: var(--profile-accent);
  box-shadow: var(--profile-focus-ring);
}

#profile-modal .pux-field__input:disabled {
  color: var(--profile-text-disabled);
  background: var(--profile-surface-muted);
  cursor: not-allowed;
}

#profile-modal .pux-field__helper {
  font-size: var(--profile-font-caption);
  line-height: var(--profile-lh-caption);
  color: var(--profile-text-secondary);
}

/* Состояние ошибки */
#profile-modal .pux-field--error .pux-field__label {
  color: var(--profile-danger);
}

#profile-modal .pux-field--error .pux-field__input {
  border-color: var(--profile-danger);
  background: var(--profile-danger-bg);
}

#profile-modal .pux-field--error .pux-field__input:focus {
  box-shadow: 0 0 0 3px rgba(187, 58, 52, 0.16);
}

#profile-modal .pux-field__error {
  font-size: var(--profile-font-caption);
  line-height: var(--profile-lh-caption);
  font-weight: 500;
  color: var(--profile-danger);
}

/* ----------------------------------------------------------------------------
   11) .pux-empty — пустое состояние: иконка + заголовок + подсказка + CTA
   ---------------------------------------------------------------------------- */
#profile-modal .pux-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--profile-space-2);
  padding: var(--profile-space-8) var(--profile-space-4);
  text-align: center;
}

#profile-modal .pux-empty__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--profile-space-1);
  font-size: 1.375rem;
  color: var(--profile-text-secondary);
  background: var(--profile-surface-muted);
  border: 1px dashed var(--profile-border);
  border-radius: var(--profile-radius-full);
}

#profile-modal .pux-empty__icon svg {
  width: 22px;
  height: 22px;
}

#profile-modal .pux-empty__title {
  font-size: var(--profile-font-h3);
  line-height: var(--profile-lh-h3);
  font-weight: 600;
  color: var(--profile-text);
}

#profile-modal .pux-empty__hint {
  max-width: 22rem;
  font-size: var(--profile-font-body2);
  line-height: var(--profile-lh-body2);
  color: var(--profile-text-secondary);
}

#profile-modal .pux-empty__action {
  margin-top: var(--profile-space-2);
}

/* ----------------------------------------------------------------------------
   12) .pux-section-link — строка-ссылка, тач-зона ≥ 44px
   ---------------------------------------------------------------------------- */
#profile-modal .pux-section-link {
  display: flex;
  align-items: center;
  gap: var(--profile-space-3);
  width: 100%;
  min-height: 48px;
  padding: var(--profile-space-2) var(--profile-space-3);
  font-family: inherit;
  font-size: var(--profile-font-body);
  line-height: var(--profile-lh-body);
  font-weight: 500;
  text-align: left;
  color: var(--profile-text);
  background: transparent;
  border: 0;
  border-radius: var(--profile-radius-md);
  cursor: pointer;
  transition: background-color var(--profile-transition);
}

#profile-modal .pux-section-link:hover {
  background: var(--profile-surface-muted);
}

#profile-modal .pux-section-link:active {
  background: var(--profile-accent-soft);
}

#profile-modal .pux-section-link:focus-visible {
  outline: none;
  box-shadow: var(--profile-focus-ring);
}

#profile-modal .pux-section-link__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  font-size: 1rem;
  color: var(--profile-accent);
  background: var(--profile-accent-soft);
  border-radius: var(--profile-radius-sm);
}

/* Явный размер SVG обязателен: без атрибутов width/height разные движки
   (Chromium растягивает, WebKit в MAX WebView сворачивает в 0) ведут себя
   по-разному — на устройствах иконки строк пропадали. Как у .pux-icon-btn. */
#profile-modal .pux-section-link__icon svg {
  display: block;
  width: 18px;
  height: 18px;
}

/* Дублирующий слой иконок строк фоном (data-URI, техника chevron):
   если окружение устройства убивает inline-SVG (прокси/turbo-сжатие,
   экзотический WebView) — глиф остаётся виден. Цвет — брендовый акцент. */
#profile-modal .pux-section-link__icon--orders,
#profile-modal .pux-section-link__icon--heart,
#profile-modal .pux-section-link__icon--settings {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}

#profile-modal .pux-section-link__icon--orders {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6fed' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4.8h10A2.2 2.2 0 0 1 19.2 7v10A2.2 2.2 0 0 1 17 19.2H7A2.2 2.2 0 0 1 4.8 17V7A2.2 2.2 0 0 1 7 4.8Zm2.2 4.2h5.6M9.2 12h5.6M9.2 15h3.2'/%3E%3C/svg%3E");
}

#profile-modal .pux-section-link__icon--heart {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6fed' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19.2 5.6 13a3.8 3.8 0 0 1 5.4-5.4l1 1 1-1a3.8 3.8 0 0 1 5.4 5.4L12 19.2Z'/%3E%3C/svg%3E");
}

#profile-modal .pux-section-link__icon--settings {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6fed' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
}

/* Тот же дублирующий слой для круглых иконок-кнопок шапки
   (шестерёнка настроек, копирование MAX ID) — цвет вторичный */
#profile-modal .pux-icon-btn--settings,
#profile-modal .pux-icon-btn--copy {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}

#profile-modal .pux-icon-btn--settings {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2367758e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
}

#profile-modal .pux-icon-btn--copy {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2367758e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8.5' y='8.5' width='11' height='11' rx='2'/%3E%3Cpath d='M15.5 5.5v-1a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h1'/%3E%3C/svg%3E");
}

#profile-modal .pux-section-link__title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#profile-modal .pux-section-link__counter {
  flex: 0 0 auto;
  min-width: 22px;
  padding: 2px 7px;
  font-size: var(--profile-font-caption);
  line-height: var(--profile-lh-caption);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--profile-accent);
  background: var(--profile-accent-soft);
  border-radius: var(--profile-radius-full);
}

#profile-modal .pux-section-link__chevron {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--profile-text-secondary);
  background: no-repeat center / 18px 18px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2367758e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
}

/* ----------------------------------------------------------------------------
   13) ЕДИНАЯ ШАПКА .dt-header (перенесено в styles.css, версия 20260824-header)
   Все экраны/модалки используют общий компонент [ ← ] Название [ × ]:
   .dt-header + .dt-header__btn/.dt-header__icon/.dt-header__title (44×44 кнопки,
   safe-area, surface-фон). Кнопки профиля сохраняют свои data-атрибуты
   (data-profile-view-back / data-profile-close) — бизнес-логика навигации
   под-экранов не меняется. Класс .pux-subview по-прежнему ставится на
   #profile-modal (используется profile.js для состояния под-экрана).
   ---------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------
   14) НИЖНЯЯ STICKY-ЗОНА (кнопка «Сохранить») + safe-area для WebView
   ---------------------------------------------------------------------------- */
#profile-modal .pux-footer {
  flex: 0 0 auto;
  padding: var(--profile-space-3) var(--profile-space-4);
  padding-bottom: calc(var(--profile-space-3) + env(safe-area-inset-bottom));
  background: var(--profile-surface);
  border-top: 1px solid var(--profile-border);
}

/* ----------------------------------------------------------------------------
   15) WEBVIEW / МОБИЛЬНЫЕ ПРАВИЛА
   ---------------------------------------------------------------------------- */

/* Отключение анимаций и шиммера при prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  #profile-modal .pux-skeleton::after {
    animation: none;
  }

  #profile-modal .pux-button,
  #profile-modal .pux-card--interactive,
  #profile-modal .pux-section-link,
  #profile-modal .pux-field__input {
    transition: none;
  }

  #profile-modal .pux-card--interactive:active,
  #profile-modal .pux-button:active {
    transform: none;
  }
}

/* ----------------------------------------------------------------------------
   16) РАЗМЕТКА ЭКРАНА MAIN (profile.js, этап 2 редизайна 20260819-p2)
   Только новые классы .pux-*; старые .profile-* и токены --p-* НЕ используются.
   ---------------------------------------------------------------------------- */

/* Полноэкранная высота цепочки: .profile → [data-profile-body] → .pux-root.
   Скролл живёт внутри .pux-scroll; dialog не скроллится → modal__close (sticky,
   правило ниже в этом файле) остаётся на месте. Старый рендер (grid + gap 1rem)
   сохранён: minmax(0,1fr) задаёт высоту только первой строке, остальные — auto.
   Базовый layout контейнеров перенесён сюда из styles.css (финальная чистка
   20260820-p7): старый профильный блок из styles.css удалён. */
#profile-modal .profile[data-profile-root] {
  display: grid;
  gap: 0;
  width: 100%;
  max-width: var(--screen-max);
  min-height: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  /* Отступы владеет .pux-scroll (единый ритм 16px); здесь двойного
     паддинга нет — колонка прозрачна над общим фоном диалога */
  padding: 0;
  grid-template-rows: minmax(0, 1fr);
}

#profile-modal [data-profile-body] {
  display: grid;
  gap: 0;
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
}

/* Каркас модалки профиля: перенесено из styles.css (финальная чистка 20260820-p7).
   Dialog отдаёт скролл содержимому; кнопка закрытия — sticky поверх контента.
   Фон диалога = фон профиля: непрерывно на весь экран (по бокам колонки на
   desktop и под коротким контентом нет белых полос), продолжается при скролле. */
#profile-modal .modal__dialog {
  overflow-y: auto;
  background: var(--profile-bg);
}

/* Кнопки «×»/«←» — в единой шапке .dt-header (styles.css); статическая
   кнопка .modal__close из разметки модалки профиля удалена (20260824-header). */

/* Нейтрализация наследованных размеров старого контейнера .profile */
#profile-modal .pux-root {
  max-width: 100%;
  box-sizing: border-box;
}

#profile-modal .pux-scroll {
  display: grid;
  gap: var(--profile-space-3);
  align-content: start;
}

#profile-modal .pux-view {
  display: contents;
}

/* display:contents отменяет UA-[hidden], поэтому прячем явно */
#profile-modal .pux-view[hidden] {
  display: none;
}

/* Аналогично для слотов stats/nav: display:grid|flex не должен
   переопределять атрибут hidden (иначе в error/guest они остаются видимыми) */
#profile-modal .pux-stats[hidden],
#profile-modal .pux-nav[hidden] {
  display: none;
}

/* --- Greeting-карточка --- */
#profile-modal .pux-greeting__top {
  display: flex;
  align-items: center;
  gap: var(--profile-space-3);
  min-width: 0;
}

#profile-modal .pux-greeting__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

#profile-modal .pux-greeting__name {
  overflow-wrap: anywhere;
}

#profile-modal .pux-greeting__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--profile-space-2);
  margin-top: var(--profile-space-1);
}

/* Телефон + копирование MAX ID: nowrap-пара, на узких экранах переносится
   целиком — кнопка не остаётся сиротой на отдельной строке */
#profile-modal .pux-greeting__phonebox {
  display: inline-flex;
  align-items: center;
  gap: var(--profile-space-1);
  min-width: 0;
  white-space: nowrap;
}

#profile-modal .pux-greeting__phone {
  white-space: nowrap;
}

/* Компактная кнопка копирования внутри мета-строки (вписывается в ряд) */
#profile-modal .pux-greeting__phonebox .pux-icon-btn {
  width: 28px;
  height: 28px;
}

/* Тач-зона компактной кнопки 28×28 → ≥44×44 без изменения визуального
   размера: невидимый расширитель кликабельной области */
#profile-modal .pux-greeting__phonebox .pux-icon-btn::before {
  inset: -8px;
}

#profile-modal .pux-greeting__phonebox .pux-icon-btn svg {
  width: 15px;
  height: 15px;
}

#profile-modal .pux-greeting__actions {
  display: flex;
  gap: var(--profile-space-2);
}

/* --- Компактная статистика: ОДИН компонент-поверхность из трёх колонок --- */
#profile-modal .pux-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
  padding: 0;
  background: var(--profile-surface);
  border: 1px solid var(--profile-border);
  border-radius: var(--profile-radius-lg);
  box-shadow: var(--profile-shadow-card);
}

/* Колонки-метрики — прозрачные, без собственных поверхностей: единый блок */
#profile-modal .pux-stats .pux-metric-card {
  margin-top: 0;
  padding: var(--profile-space-3) var(--profile-space-2);
  gap: 2px;
  align-items: center;
  min-width: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}

/* Волосяные разделители между колонками (не между карточками-поверхностями) */
#profile-modal .pux-stats .pux-metric-card + .pux-metric-card {
  border-left: 1px solid var(--profile-border-soft);
}

/* Скелетон цифры повторяет итоговую высоту .pux-metric (1.0625rem × 1.25) */
#profile-modal .pux-metric--skeleton {
  height: 1.35rem;
  width: 55%;
}

/* --- Секции-ссылки: единая surface-карточка (нативная inset-группа) --- */
#profile-modal .pux-nav {
  display: flex;
  flex-direction: column;
  background: var(--profile-surface);
  border: 1px solid var(--profile-border);
  border-radius: var(--profile-radius-lg);
  box-shadow: var(--profile-shadow-card);
  overflow: hidden;
}

#profile-modal .pux-nav .pux-section-link {
  min-height: 52px;
  padding: var(--profile-space-2) var(--profile-space-3);
  border-radius: 0; /* скругляет контейнер, hover не даёт «внутренних» углов */
}

/* Волосяный разделитель между строками (вместо зазоров на фоне) */
#profile-modal .pux-nav .pux-section-link + .pux-section-link {
  margin-top: 0;
  border-top: 1px solid var(--profile-border-soft);
}

/* --- Круглая иконка-кнопка (настройки / копирование ID / удалить) --- */
#profile-modal .pux-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  position: relative;
  width: 36px;
  height: 36px;
  padding: 0;
  color: var(--profile-text-secondary);
  background: transparent;
  border: 0;
  border-radius: var(--profile-radius-full);
  cursor: pointer;
  transition: background-color var(--profile-transition),
              color var(--profile-transition);
}

#profile-modal .pux-icon-btn:hover {
  color: var(--profile-text);
  background: var(--profile-surface-muted);
}

#profile-modal .pux-icon-btn:active {
  background: var(--profile-accent-soft);
}

#profile-modal .pux-icon-btn:focus-visible {
  outline: none;
  box-shadow: var(--profile-focus-ring);
}

#profile-modal .pux-icon-btn:disabled {
  color: var(--profile-text-disabled);
  cursor: not-allowed;
}

/* Тач-зона ≥44×44px (ТЗ): визуальный размер 36×36 сохранён — клик ловит
   невидимый ::before-расширитель за пределами кнопки */
#profile-modal .pux-icon-btn::before {
  content: "";
  position: absolute;
  inset: -4px;
}

/* Атрибут hidden должен работать: display:flex/inline-flex перебивает
   UA-правило [hidden] (та же проблема уже фиксилась для .pux-nav/.pux-stats) */
#profile-modal .pux-icon-btn[hidden] {
  display: none;
}

#profile-modal .pux-greeting__phonebox[hidden] {
  display: none;
}

#profile-modal .pux-icon-btn svg {
  width: 18px;
  height: 18px;
}

#profile-modal .pux-greeting__settings {
  margin-left: auto;
}

/* --- Карточка заказа --- */
#profile-modal .pux-order__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--profile-space-2);
}

#profile-modal .pux-order__date {
  margin-top: 2px;
}

#profile-modal .pux-order__items {
  display: flex;
  flex-direction: column;
  gap: var(--profile-space-2);
  margin-top: var(--profile-space-1);
}

#profile-modal .pux-order__item {
  display: flex;
  align-items: center;
  gap: var(--profile-space-3);
  min-width: 0;
}

#profile-modal .pux-order__thumb {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  object-fit: cover;
  background: var(--profile-surface-muted);
  border-radius: var(--profile-radius-sm);
}

#profile-modal .pux-order__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

#profile-modal .pux-order__item-price {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#profile-modal .pux-order__footer {
  display: flex;
  justify-content: flex-end;
}

/* --- Строка избранного --- */
#profile-modal .pux-fav {
  flex-direction: row;
  align-items: center;
}

#profile-modal .pux-fav__thumb {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  object-fit: cover;
  background: var(--profile-surface-muted);
  border-radius: var(--profile-radius-sm);
}

#profile-modal .pux-fav__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

#profile-modal .pux-fav__title {
  padding: 0;
  font-family: inherit;
  font-size: var(--profile-font-body);
  line-height: var(--profile-lh-body);
  font-weight: 600;
  text-align: left;
  color: var(--profile-text);
  background: none;
  border: 0;
  cursor: pointer;
  overflow-wrap: anywhere;
}

#profile-modal .pux-fav__title:hover {
  color: var(--profile-accent);
}

#profile-modal .pux-fav__title:focus-visible {
  outline: none;
  box-shadow: var(--profile-focus-ring);
  border-radius: var(--profile-radius-sm);
}

#profile-modal .pux-fav__remove {
  color: var(--profile-text-secondary);
}

#profile-modal .pux-fav__remove:hover {
  color: var(--profile-danger);
}

/* --- Форма настроек --- */
#profile-modal .pux-settings-form {
  display: flex;
  flex-direction: column;
  gap: var(--profile-space-3);
}

#profile-modal .pux-settings-form .pux-button {
  margin-top: var(--profile-space-1);
}

#profile-modal .pux-settings__note {
  margin-top: var(--profile-space-2);
}

/* --- Очень узкие экраны: базовые 17px помещаются везде, добор только на 320–359 --- */
@media (max-width: 359px) {
  #profile-modal .pux-metric {
    font-size: 1rem; /* 16 — запас для длинных сумм на самых узких экранах */
  }

  #profile-modal .pux-metric--skeleton {
    height: 1.25rem;
  }
}

/* ----------------------------------------------------------------------------
   17) ЭТАП 3 (20260819-p3) — список заказов с пагинацией, детализация заказа,
       избранное (optimistic-удаление, fallback), sticky-сохранение настроек.
   ---------------------------------------------------------------------------- */

/* Кнопка «Показать ещё» в списке заказов */
#profile-modal .pux-orders-more {
  margin-top: var(--profile-space-1);
}

/* Клавиатурный фокус на интерактивных карточках (role="button") */
#profile-modal .pux-order[role="button"]:focus-visible,
#profile-modal .pux-fav[role="button"]:focus-visible {
  outline: none;
  border-color: var(--profile-accent);
  box-shadow: var(--profile-focus-ring);
}

/* Строки «ключ — значение» в детализации заказа */
#profile-modal .pux-detail__rows {
  display: flex;
  flex-direction: column;
  gap: var(--profile-space-3);
}

#profile-modal .pux-detail__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

#profile-modal .pux-detail__value {
  overflow-wrap: anywhere;
}

/* Избранное: анимация optimistic-удаления карточки */
#profile-modal .pux-fav {
  transition: opacity var(--profile-transition),
              transform var(--profile-transition),
              border-color var(--profile-transition),
              box-shadow var(--profile-transition);
}

#profile-modal .pux-fav--removing {
  opacity: 0;
  transform: translateX(16px);
  pointer-events: none;
}

/* Тап по карточке избранного целиком → карточка товара */
#profile-modal .pux-fav[data-profile-product] {
  cursor: pointer;
}

#profile-modal .pux-fav[data-profile-product]:hover {
  border-color: var(--profile-accent);
}

#profile-modal .pux-fav[data-profile-product]:active {
  transform: scale(0.99);
}

/* Цена избранного (диапазон не должен прыгать) */
#profile-modal .pux-fav__price {
  font-variant-numeric: tabular-nums;
}

/* Fallback «товар недоступен»: плейсхолдер вместо фото */
#profile-modal .pux-fav__thumb--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--profile-text-secondary);
}

#profile-modal .pux-fav__thumb--placeholder svg {
  width: 20px;
  height: 20px;
}

#profile-modal .pux-fav--unavailable .pux-fav__title {
  color: var(--profile-text-secondary);
}

/* Настройки: секция занимает всю высоту экрана, кнопка прижата к низу.
   .pux-view — display:contents, поэтому subheader/scroll/footer работают
   как прямые flex-дети .pux-root; footer — не fixed, safe-area учтён в .pux-footer. */
#profile-modal .pux-view[data-view="settings"] .pux-scroll {
  display: block;
}

#profile-modal .pux-view[data-view="settings"] .pux-settings-form {
  margin-bottom: var(--profile-space-2);
}

@media (prefers-reduced-motion: reduce) {
  #profile-modal .pux-fav {
    transition: none;
  }

  #profile-modal .pux-fav--removing {
    transform: none;
  }
}

/* ----------------------------------------------------------------------------
   18) ЭТАП p6 (20260819-p6) — фиксы визуальной E2E-проверки:
       композиция Main, тосты профиля (замена вместо стека).
   ---------------------------------------------------------------------------- */

/* Пустая зона внизу Main убрана (p9): greeting/stats/nav стекаются естественно
   от верха через align-content:start на .pux-scroll — без minmax(0,1fr) и
   justify-content:flex-end, которые создавали гигантский разрыв. */

/* Тосты профиля: контейнер поверх контента, НО ниже шапки (не перекрывает
   заголовок). position:fixed + safe-area; отдельный z-index; pointer-events
   none (не блокирует интерфейс). Один активный тост — логика в puxToast.
   Отступ = высота шапки (--pux-header-h) + зазор, оба с учётом
   env(safe-area-inset-top) — на нештрихованных экранах тост висит ровно
   под шапкой, на iPhone с вырезом — под статус-баром и шапкой. */
#profile-modal .pux-toast-stack {
  position: fixed;
  top: calc(env(safe-area-inset-top) + var(--pux-header-h) + var(--profile-space-3));
  left: 50%;
  z-index: 1000;
  display: grid;
  width: min(calc(100% - 2 * var(--profile-space-4)), 24.5rem);
  transform: translateX(-50%);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  #profile-modal .pux-toast {
    transition: none;
  }
}

/* ----------------------------------------------------------------------------
   19) ЭКРАН «ИЗБРАННОЕ» (2026-08-24): пустое состояние центрируется
   в доступном пространстве под header (без прилипания к верху);
   список карточек — обычная колонка.
   ---------------------------------------------------------------------------- */
#profile-modal .pux-view[data-view="favorites"] .pux-scroll {
  display: flex;
  flex-direction: column;
}

#profile-modal .pux-fav-empty {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 14rem;
}

/* «Смотрели ранее»: контейнер — колонка, кнопка «Очистить историю»
   прижата вправо; карточки сохраняют прежнюю раскладку (растянуты по ширине). */
#profile-modal .pux-view[data-view="recents"] .pux-scroll > [data-slot] {
  display: flex;
  flex-direction: column;
}
#profile-modal .pux-recents__clear {
  align-self: flex-end;
  margin-bottom: var(--profile-space-3);
}

/* Empty state «Избранного»: мягкая акцентная подложка под контурным SVG-
   сердцем (puxIcon "heart") — без emoji и случайных символов */
#profile-modal .pux-view[data-view="favorites"] .pux-empty__icon {
  width: 72px;
  height: 72px;
  margin-bottom: var(--profile-space-3);
  color: var(--profile-accent);
  background: var(--profile-accent-soft);
  border: 1px solid transparent;
}

#profile-modal .pux-view[data-view="favorites"] .pux-empty__icon svg {
  width: 32px;
  height: 32px;
}

/* Ритм: отступ до CTA чуть больше, чем между строками текста */
#profile-modal .pux-view[data-view="favorites"] .pux-empty__action {
  margin-top: var(--profile-space-4);
}

/* CTA «В каталог»: акцентная кнопка, комфортная тач-зона, по ширине
   подстраивается под текст (не растягивается на весь экран) */
#profile-modal .pux-view[data-view="favorites"] .pux-empty__action .pux-button {
  min-height: 48px;
  padding: 0 var(--profile-space-6);
}