/* ============================================================================
   VPN-HUB · v3/css/market-bridge.css: маркет в палитре нового каркаса.

   Маркет рисует разметку из JS и красится переменными .mk-embed (см.
   static/v2/site.css). Переписывать приложение ради цвета незачем: здесь мы
   только переопределяем эти переменные токенами v3. Тема (включая светлую)
   приезжает сама, потому что токены объявлены через light-dark() и слушают
   общий html[data-theme].

   Правило одно: не объявлять переменную через саму себя. Совпадающие имена
   (--bg, --r-xl) наследуем от :root, иначе ссылка на себя гасит значение и
   поверхность становится прозрачной.
   ========================================================================== */

.mk-embed{
  /* поверхности */
  --bg: inherit;                                             /* полотно = фон страницы каркаса */
  --s1: var(--surface);                                      /* карточка */
  --s2: var(--raised);                                       /* карточка над карточкой, поля */
  --s3: color-mix(in oklab, var(--raised) 82%, var(--text) 6%); /* чипы, подложки иконок */
  --glass: color-mix(in oklab, var(--surface) 86%, transparent);

  /* текст */
  --t1: var(--text);
  --t2: var(--text-2);
  --t3: var(--text-muted);

  /* линии */
  --line: var(--border);
  --line2: var(--border-strong);

  /* акцент */
  --acc: var(--accent);
  --acc-hi: color-mix(in oklab, var(--accent) 78%, #fff 22%);
  --acc-ink: var(--accent-contrast);
  --acc-lo: var(--accent-bg);
  --acc-line: color-mix(in oklab, var(--accent) 42%, transparent);
  --gold: var(--accent);
  --grad: linear-gradient(150deg,
            color-mix(in oklab, var(--accent) 76%, #fff 24%),
            var(--accent) 55%,
            color-mix(in oklab, var(--accent) 82%, #000 18%));

  /* состояния */
  --ok: var(--success);   --ok-lo: color-mix(in oklab, var(--success) 14%, transparent);
  --warn: var(--warning); --warn-lo: color-mix(in oklab, var(--warning) 14%, transparent);
  --bad: var(--error);    --bad-lo: color-mix(in oklab, var(--error) 14%, transparent);
  --bad-2: color-mix(in oklab, var(--error) 78%, #000 22%);

  /* геометрия: шкала каркаса. --r-xl совпадает по имени с токеном, наследуем */
  --r-s: var(--r-sm);
  --r-m: var(--r);
  --r-l: var(--r-lg);
  --r-xl: inherit;

  /* тени каркаса вместо собственных */
  --sh-1: var(--shadow-1);
  --sh-2: var(--shadow-2);
  --sh-3: var(--shadow-2);

  /* типографика: маркет жил на своём стеке, теперь на общем */
  font-family: var(--font-sans);
  color: var(--text);
}

/* Заголовки маркета — тем же дисплейным шрифтом, что и на остальном сайте. */
.mk-embed h1, .mk-embed h2, .mk-embed h3,
.mk-embed .sheet__t, .mk-embed .hd__t{ font-family: var(--font-display); letter-spacing: -.01em; }
.mk-embed .mono, .mk-embed code, .mk-embed pre{ font-family: var(--font-mono); }

/* Виджет уже стоит внутри контентной колонки каркаса: собственные поля и
   фон-подложка ему больше не нужны, иначе получается рамка в рамке. */
.mk-wrap{ max-width: var(--content-max); margin-inline: auto; }
.mk-embed--site{ padding: 0; background: none; }
.mk-embed--site .bg{ display: none; }


/* ---- крошки с возвратом в корень маркета ---------------------------------- */
.mk-crumb{display:flex;align-items:center;gap:10px;margin-bottom:var(--sp-3);font-size:var(--fs-body)}
.mk-crumb__back{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:var(--r-pill);
  border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-weight:600;
  cursor:pointer;transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.mk-crumb__back:hover{color:var(--accent-ink);border-color:var(--accent)}
.mk-crumb__sep{color:var(--text-muted)}
.mk-crumb__now{color:var(--text-2);font-weight:600}

/* ---- карточки товаров ------------------------------------------------------
   На сайте слева стоит сайдбар, и в ряд помещалось четыре узкие карточки:
   название обрывалось на первом слове. Делаем колонки шире и разрешаем
   заголовку вторую строку — обрезка остаётся только как крайний случай. */
.mk-embed--site .grid--3,
.mk-embed--site .grid--cards{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
.mk-embed--site .card__t{white-space:normal;overflow:hidden;text-overflow:clip;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3}
.mk-embed--site .card__row{align-items:flex-start;gap:13px}
.mk-embed--site .card__ic{margin-top:1px}
/* Цена и бейдж не должны прилипать к названию. */
.mk-embed--site .card__price,
.mk-embed--site .card__row > .chip{margin-left:auto;flex:0 0 auto}