/* Маркет. Каркас и карточки — общие (catalog-hero, PortalCard, PortalFilterPanel), здесь только своё. */

.mk {
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.6;
}

.mk a {
  color: inherit;
  text-decoration: none;
}

/* Видимый фокус с клавиатуры — как у сообществ (.cm :focus-visible); у редактора описания своя рамка. */
.mk :focus-visible,
.mk-profile-wishes :focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.mk .portal-editor .ql-editor:focus-visible {
  outline: none;
}

.mk-muted {
  font-size: 14px;
  color: var(--text-secondary);
}

.mk-panel {
  padding: 24px;
  border: 1px solid var(--border-color);
  border-radius: var(--portal-radius-xl);
  background: var(--bg-card);
}

.mk-panel + .mk-panel {
  margin-top: 20px;
}

.mk-empty {
  text-align: center;
  padding: 52px 24px;
}

/* Балансы в своём профиле — карточка ряда профиля: рамку, фон и поля даёт обёртка профиля, здесь только содержимое.
   Шапка — как у соседних карточек ряда (значок на акцентной плашке 36 px, заголовок 15/600, ссылка справа). */
.mk-profile-balance {
  color: var(--text-secondary);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.mk-profile-balance-head {
  min-height: 36px;
  margin-bottom: 18px;
}

.mk-profile-balance-icon.mud-icon-root {
  box-sizing: content-box;
  flex-shrink: 0;
  padding: 8px;
  border-radius: var(--portal-radius-md);
  background: var(--accent-light);
  font-size: 20px;
}

.mk-profile-balance-title {
  margin: 0;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}

/* Карточка счёта внутри блока: своя рамка и подложка с отзвуком акцента — видно, что это отдельный счёт. */
.mk-profile-account.mud-paper {
  border-color: var(--border-light);
  border-radius: var(--portal-radius-lg);
  background: color-mix(in srgb, var(--accent) 4%, var(--bg-card));
}

.mk-profile-account-title {
  margin: 0;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
}

.mk-profile-account-amount {
  margin: 8px 0 4px;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}

.mk-profile-balance-link.mud-button-root {
  flex-shrink: 0;
}

.mk-empty p {
  color: var(--text-secondary);
}

/* Герой: балансы и кнопки. Цвета — токены портала: в тёмной теме герой сам переназначает их. Ряд балансов держит
   высоту и пустым — пока балансы читаются и в управлении на компьютере: высота плашки задана, на телефоне их две
   столбиком (в управлении на телефоне ряда нет). */
.mk-hero-balances {
  --mk-balance-h: 34px;
  margin-top: 12px;
  min-height: var(--mk-balance-h);
}

.mk-balance {
  display: inline-flex;
  box-sizing: border-box;
  height: var(--mk-balance-h);
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-card) 70%, transparent);
  color: var(--text-secondary);
  font-size: 14px;
}

.mk-balance strong {
  color: var(--text-primary);
  font-weight: 600;
}

.mk-balance .mud-icon-root {
  color: var(--accent);
}

.mk-results-heading {
  margin-bottom: 16px;
}

.mk-results-heading h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.mk-results-heading .mk-muted {
  white-space: nowrap;
}

/* Карточка товара: фото выше обложки сообществ — товар показывают по фото. */
.mk-card .portal-card-cover {
  height: 200px;
}

/* Фон под фото — из палитры, как у галереи и миниатюр (PortalImageGallery, PortalThumb): фото с прозрачным фоном
   (PNG, WebP) ложится на цвет темы, обычное его просто закрывает. Задан самой картинке — проступает сквозь её
   прозрачные места; градиент обложки остаётся заглушке без фото. */
.mk-card-photo {
  background: var(--mud-palette-background-gray);
}

.mk-card-placeholder .mud-icon-root {
  font-size: 64px;
  color: color-mix(in srgb, var(--text-primary) 72%, transparent);
}

.mk-card--out .portal-card-cover > img,
.mk-card--out .portal-card-cover > .mk-card-placeholder {
  filter: grayscale(0.85);
  opacity: 0.7;
}

.mk-badge.mud-chip {
  position: absolute;
  right: 14px;
  top: 14px;
  margin: 0;
  height: auto;
  padding: 6px 11px;
  border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--warning) 12%, var(--bg-card));
  color: var(--warning);
  font-size: 13px;
  font-weight: 650;
  line-height: normal;
}

.mk-category {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.mk-price {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 12px 0 18px;
  font-size: 18px;
  font-weight: 650;
}

.mk-price .mud-icon-root {
  font-size: 20px;
  color: var(--accent);
}

.mk-card .portal-tags {
  margin-top: -4px;
}

/* Страница товара. */
.mk-product-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--border-color);
  border-radius: var(--portal-radius-xl);
  background: linear-gradient(120deg, color-mix(in srgb, var(--mud-palette-tertiary) 30%, var(--bg-card)), color-mix(in srgb, var(--accent) 22%, var(--bg-card)) 55%, color-mix(in srgb, var(--mud-palette-secondary) 35%, var(--bg-card)));
}

.mk-product-placeholder .mud-icon-root {
  font-size: 96px;
  color: color-mix(in srgb, var(--text-primary) 72%, transparent);
}

/* Скелетон на месте фото — те же пропорции, что у галереи и заглушки. */
.mk-product-placeholder-skeleton {
  aspect-ratio: 4 / 3;
  height: auto;
}

.mk-product-title.mud-typography {
  margin: 4px 0 8px;
  font-size: var(--portal-page-title-size);
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

/* Блок покупки: цена, вариант, наличие и количество — одной группой на мягкой подложке. */
.mk-buy {
  padding: 20px;
  border: 1px solid var(--border-light);
  border-radius: var(--portal-radius-xl);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-card));
}

.mk-product-price {
  margin: 0;
  font-size: 24px;
}

.mk-variants {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.mk-variants legend {
  margin-bottom: 6px;
  padding: 0;
}

.mk-variant-chips .mud-chip {
  margin: 0 8px 8px 0;
}

/* Закончившийся вариант: «нет» уже в тексте чипа, рамка пунктиром; прозрачность роняла бы контраст ниже 4,5:1. */
.mk-variant--out.mud-chip {
  border-style: dashed;
}

.mk-stock {
  margin: 0;
  font-weight: 600;
  color: var(--success);
}

.mk-stock--out {
  color: var(--warning);
}

/* Ряд количества — в рост главной кнопки (--portal-action-height): иначе «−», поле, «+» и «В корзину»
   стоят разной высоты и ряд «пляшет». Ошибка ввода растёт вниз, не двигая соседей (выравнивание по верху). */
.mk-quantity .mud-icon-button {
  width: var(--portal-action-height);
  height: var(--portal-action-height);
}

/* Margin.Dense даёт полю отступ 4 px сверху — без сброса поле стоит ниже кнопок ряда. */
.mk-quantity-field.mud-input-control {
  width: 72px;
  flex: none;
  margin: 0;
}

.mk-quantity-field .mud-input {
  height: var(--portal-action-height);
}

.mk-quantity-field input {
  text-align: center;
}

/* Ссылки в описании товара: общий сброс .mk a выше снял бы с них цвет, как у .cm-rich a и .ev-rich a. */
.mk .article-content a {
  color: var(--link);
  text-decoration: underline;
}

.mk-section-title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 600;
}

.mk-row {
  padding: 12px 0;
}

.mk-row + .mk-row {
  border-top: 1px solid var(--border-color);
}

.mk-row p {
  margin: 0;
}

.mk-strong {
  font-weight: 600;
}

/* Корзина, заказы. */
.mk-page-title.mud-typography {
  margin: 0 0 20px;
  font-size: var(--portal-page-title-size);
  font-weight: 700;
  line-height: 1.2;
}

.mk-cart-title {
  flex: 1 1 200px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.mk-cart-sum {
  min-width: 110px;
  text-align: right;
  font-weight: 600;
}

.mk-warning {
  color: var(--warning);
  font-size: 14px;
  font-weight: 600;
}

/* Нарушение валидатора у поля без собственного ErrorText (теги, фото, варианты) — цветом ошибки, как подписи MudBlazor. */
.mk-field-error {
  color: var(--mud-palette-error);
  font-size: 14px;
  font-weight: 600;
}

.mk-total {
  font-size: 18px;
}

.mk-total strong {
  font-weight: 700;
}

.mk-quote {
  padding-left: 12px;
  border-left: 3px solid var(--accent);
  font-style: italic;
}

.mk-order-main {
  flex: 1 1 320px;
  min-width: 0;
}

.mk-order-main p {
  margin: 4px 0 0;
}

/* История заказа: строки — подсетка общей сетки списка. Чипы статусов разной ширины стоят в первом столбце шириной с
   самый длинный, время и имя у всех строк начинаются ровным столбцом; комментарий шага — под ними. */
.mk-history {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 8px;
}

.mk-history > .mk-row {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: center;
}

.mk-history .mk-status {
  justify-self: start;
}

.mk-history-comment {
  grid-column: 2;
}

/* Инструкция выдачи из настроек — с переносами строк, как её написал администратор. */
.mk-pickup {
  white-space: pre-line;
}

/* Текст заказа рядом с флажком выбора (OrderRow.Leading): занимает остаток строки и сжимается, не переносясь под флажок. */
.mk-order-text {
  flex: 1 1 auto;
  min-width: 0;
}

/* Суммы проводок в «Истории операций». */
.mk-amount {
  font-weight: 700;
  white-space: nowrap;
}

.mk-amount--plus {
  color: var(--success);
}

/* Администрирование: форма товара и настроек, заказы всех. */
.mk-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.mk-narrow-field {
  max-width: 320px;
}

.mk-variant-row .mud-input-control {
  margin-top: 0;
}

.mk-nowrap {
  white-space: nowrap;
}

.mk-orders-table p {
  margin: 2px 0 0;
}

@media (max-width: 599.98px) {
  /* Действие желания — под текстом, с его левого края (миниатюра 64 px и зазор 16 px): иначе кнопка справа
     оставляла названию около 120 px. */
  .mk-wish-action {
    flex-basis: 100%;
    padding-left: 80px;
  }

  .mk-cart-sum {
    min-width: 0;
    text-align: left;
  }

  /* Количество, сумма и «Убрать» в одну строку не помещаются: «Убрать» встаёт справа от названия, количество
     с суммой — отдельной строкой во всю ширину. */
  .mk-cart-title {
    flex-basis: 0;
  }

  .mk-cart-amount {
    flex-basis: 100%;
    order: 1;
  }

  .mk-panel {
    padding: 20px;
  }

  .mk-empty {
    padding: 36px 20px;
  }

  .mk-results-heading h2 {
    font-size: 15px;
  }

  .mk-hero-actions {
    width: 100%;
  }

  /* Две плашки столбиком и зазор между ними (Spacing="3" ряда): место держится, пока балансы читаются. */
  .mk-hero-balances {
    min-height: calc(2 * var(--mk-balance-h) + 12px);
  }

  /* Герой управления на телефоне кончается одной текстовой кнопкой «Каталог»: её невидимый отступ ложился и на зазор
     ряда «заголовок — кнопки» (Spacing="6", 24 px — на компьютере промежуток по горизонтали, при переносе —
     вертикальный), и на поля героя и контейнера: над кнопкой около 40 px, до вкладок около 80. Здесь они меньше;
     у витрины (залитая «Корзина» во всю ширину) — общие. */
  .mk-hero--manage .mk-hero-heading {
    row-gap: 12px;
  }

  .catalog-hero.mk-hero--manage {
    padding-bottom: 16px;
  }

  /* Первыми под героем управления всегда идут вкладки со своим верхним отступом (PortalLinkTabs, my-5 — 20 px):
     поле контейнера сверх него и давало лишнее. */
  .container.catalog-wrap.mk-manage-wrap {
    padding-top: 0;
  }

}

/* На телефоне вкладки равной ширины (общий portal-tabs.css) и подпись в одну строку: «Хочу в подарок» шире четверти
   экрана — обрезалась на 390 px и наезжала на соседей на 320 px. Длинная подпись переносится на вторую строку. */
@media (max-width: 599.98px) {
  .mk-tabs .mud-tab {
    padding: 8px 2px;
    white-space: normal;
    text-align: center;
  }
}