/* ============================================================
   DEMO COMPONENT: SHELL / CONTAINER
   ------------------------------------------------------------
   Обёртка контента demo-лайва. Лестница = живой .container
   gildedbox.com, снятый прибором (harvest public-home 2026-08-17,
   7 ширин + свип; HARVEST-QUEUE.md "Живые факты 17.08"):

     base          width 100%, padding 0 16px, потолка нет
     >=1280        padding 0 24px
     1600..1919    max-width 1600 (первый клэмп), поля остаются 24
     >=1920        max-width 1920 (второй клэмп), padding 0 48px

   На 2258 живой сайт оставляет по 169px мёртвого поля с каждой
   стороны, на 2560 по 320px; обе цифры воспроизводятся этой
   лестницей (проверено demo-header прогоном).
   Числа приходят из токенов (--container-*); пороги в @media
   стоят литералами: CSS не умеет var() внутри media query,
   токены --bp-* задокументированы в tokens.css.
   ============================================================ */

/* Базовая коробочная модель, как в прототипе (site\index.html,
   * { box-sizing: border-box }): без неё контейнер разъезжается
   на ширину полей (замер 18.08: 392 вместо 360 на базе), а
   min-height кнопок считается по content-box (52 вместо 36).
   Demo-страницы владеют своим CSS-скоупом, правило глобальное. */
*, *::before, *::after { box-sizing: border-box; }

.gb-container {
  width: 100%;
  margin: 0 auto;
  padding-left: var(--container-pad-narrow);   /* 16px, base */
  padding-right: var(--container-pad-narrow);
}
/* gbppl-container-2 (Ton 27.08: «наш wrapper шире живого»): the 24px gutter
   starts at 768 on live, not 1280. The 1280 step was read off the 17.08 home
   harvest; the 26.08 home-recheck sweep and a nine-width probe of live home,
   category and product on 27.08 all put it at 768. Below 768 the gutter is 16. */
@media (min-width: 768px) {
  .gb-container {
    padding-left: var(--container-pad);        /* 24px, >=768 (LIVE 27.08) */
    padding-right: var(--container-pad);
  }
}
@media (min-width: 1600px) {
  .gb-container { max-width: var(--container-max-lg); }   /* 1600px */
}
@media (min-width: 1920px) {
  .gb-container {
    max-width: var(--container-max-xl);        /* 1920px */
    padding-left: var(--container-pad-wide);   /* 48px */
    padding-right: var(--container-pad-wide);
  }
}

/* Кастом-элемент <gb-container> (см. shell.js) рендерится блоком
   и носит тот же класс; блочность задана и здесь на случай, когда
   CSS пришёл раньше апгрейда элемента. */
gb-container { display: block; }

/* Базовый грунт страницы demo-лайва: body портала #fcfdfd
   (SYSTEM.md portal chrome, live 2026-08-12, токен --live-body). */
html.gb-demo { background: var(--live-body); }
body.gb-demo {
  background: var(--live-body);
  color: var(--zinc-900);
  font-family: var(--font-sans);
  font-size: var(--font-size-root);
  -webkit-font-smoothing: antialiased;
  margin: 0;
}
body.gb-demo a { color: inherit; text-decoration: none; }
body.gb-demo button { font-family: inherit; cursor: pointer; }

/* ============================================================
   EYEBROW — роль типографики 44, ЕДИНСТВЕННАЯ капс-подпись
   ------------------------------------------------------------
   Тон, 2026-08-19: «нужен небольшой ненасыщенный all-caps — это
   Eyebrow, других капс-подписей не заводим». Числа роли лежат в
   tokens.css (блок EYEBROW, --eyebrow-*), но КЛАССА у роли до
   25.08 не было нигде в system\components\ — и каждый потребитель
   писал его себе сам: system\oro\oro.css, live\checkout.html, и
   в третий раз это чуть не случилось на live\portal.html.
   Роль базовая, как и сам этот файл (его линкуют все), поэтому
   класс живёт здесь.

   Ровно пять свойств, те самые, что перечисляет usage-комментарий
   в tokens.css. line-height НЕ задаётся намеренно: копия в oro.css
   ставит себе 1, копия чекаута не ставит ничего, и если бы это
   правило принесло свою высоту строки, оно поменяло бы чекаут в
   тот же миг. Высоту строки держит место применения.

   Обе копии остаются на своих страницах безвредными дублями:
   значения совпадают буква в букву, а сами страницы линкуют этот
   файл раньше своего <style>, так что каскад не меняется.
   ============================================================ */
.gb-eyebrow {
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--eyebrow-color);
}