/* Дизайн-код «Плитки» — lifebook-shop.ru (новый десктопный шаблон).
   Источник: prototypes/home-redesign/three/b.css, выбран заказчиком 14.11.2026.
   Подключать в шаблоне ПЕРВЫМ файлом; компоненты берут значения только отсюда.
   Все токены с префиксом --lb- , чтобы не пересекаться с --lbh-*, --cmm-*, --lb-* блога
   (у блога свои токены внутри .lb — их не переопределяем). */

@font-face{font-family:'LB Geologica';font-weight:100 900;font-display:swap;src:url(fonts/geologica-cyrillic.woff2) format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'LB Geologica';font-weight:100 900;font-display:swap;src:url(fonts/geologica-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20BD,U+2032-2033}
@font-face{font-family:'LB Golos';font-weight:400 700;font-display:swap;src:url(fonts/golos-text-cyrillic.woff2) format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'LB Golos';font-weight:400 700;font-display:swap;src:url(fonts/golos-text-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20BD,U+2032-2033}

:root{
  /* --- текст и линии --- */
  --lb-ink:#15191e;        /* основной текст, графитовые кнопки, тёмные плитки */
  --lb-ink-hover:#2a3038;  /* наведение на графитовую кнопку */
  --lb-ink-2:#3b434d;      /* второстепенный текст, подписи к блокам */
  --lb-ink-3:#5b6470;      /* третичный: мелкие пометки, счётчики (≥4,8:1 на всех фонах) */
  --lb-line:#e2e6eb;       /* разделители на белом, рамки логотипов брендов */
  --lb-rule:rgba(21,25,30,.1); /* разделители строк списков на цветных плитках */

  /* --- графитовая панель (конфигуратор, «Для бизнеса») --- */
  --lb-on-ink:#ffffff;     /* заголовки и кнопки на графите */
  --lb-on-ink-2:#d4d9df;   /* основной текст на графите (12,4:1) */
  --lb-on-ink-3:#b9c1cb;   /* пометки на графите (9,7:1) */
  --lb-ink-chip:#262c33;   /* пилюли внутри графитовой панели */
  --lb-ink-rule:#333a43;   /* разделители на графите */
  --lb-ink-dot:#8fa3b8;    /* маркеры списков на графите */

  /* --- поверхности --- */
  --lb-page:#ffffff;       /* фон страницы */
  --lb-tray:#f2f4f6;       /* подложка полки товаров */
  --lb-tray-sage:#eaf0eb;  /* подложка второй полки подряд (чтобы полки не сливались) */
  --lb-mist:#eef1f4;       /* поиск, вкладки, пилюли разделов, нейтральные плитки */
  --lb-blue:#e3eaf1;       /* плитка-оттенок 1 (главная: ноутбуки) */
  --lb-sage:#e2ebe4;       /* плитка-оттенок 2 (ПК, указатели) */
  --lb-lav:#e7e5f0;        /* плитка-оттенок 3 (мониторы) */
  --lb-veil:rgba(255,255,255,.75); /* пилюли поверх цветной плитки */
  --lb-photo:#dfe4e9;      /* заглушка под фото, пока картинка не загрузилась */
  --lb-hdr-bg:rgba(255,255,255,.97); /* фон закреплённой шапки */

  /* --- сигналы --- */
  --lb-ok:#1d7a46;         /* «в наличии», подтверждения (4,3:1 на самой тёмной плитке) */
  --lb-focus:#2a6fdb;      /* обводка фокуса клавиатуры, только она */
  --lb-brand:#df5812;      /* ТОЛЬКО знак логотипа и счётчик корзины/избранного */

  /* --- шрифты --- */
  --lb-display:'LB Geologica',system-ui,sans-serif; /* заголовки, цены, телефон, кнопка «Каталог» */
  --lb-text:'LB Golos',system-ui,sans-serif;        /* всё остальное */

  /* --- шкала текста (десктоп) --- */
  --lb-fs-h1:52px;   /* H1 страницы */
  --lb-fs-hero:46px; /* заголовок главной плитки */
  --lb-fs-h2:38px;   /* заголовок секции */
  --lb-fs-tile:34px; /* заголовок обычной плитки */
  --lb-fs-h3:26px;   --lb-fs-h4:18px; /* подзаголовки, названия плиток разделов и пунктов */
  --lb-fs-big:64px;  /* одно крупное число в плитке */
  --lb-fs-price:23px;
  --lb-fs-body:17px; --lb-fs-ui:15px;    --lb-fs-small:14px; --lb-fs-micro:13px;
  --lb-lh-head:1.12; --lb-lh-body:1.55;
  --lb-track-head:-.02em;

  /* --- радиусы --- */
  --lb-r:28px;       /* плитки, полки, панели */
  --lb-rc:20px;      /* карточки товаров, вложенные блоки */
  --lb-ri:16px;      /* фото внутри карточки или плитки */
  --lb-r-pill:999px; /* кнопки, поиск, вкладки, пилюли */

  /* --- размеры управляющих элементов --- */
  --lb-ctl:48px;     /* основная кнопка, кнопка «купить» */
  --lb-ctl-s:44px;   /* поиск, «Каталог», вкладки, иконки шапки, «Ещё» */
  --lb-ctl-c:38px;   /* то же в компактной шапке */

  /* --- сетка и ритм --- */
  --lb-wrap:1440px;  /* максимальная ширина контента */
  --lb-gut:40px;     /* боковые поля */
  --lb-gap:112px;    /* между секциями */
  --lb-grid-gap:20px;/* между плитками */
  --lb-pad:36px;     /* внутренний отступ плитки */
  --lb-pad-tray:24px;/* внутренний отступ полки */

  /* --- шапка --- */
  --lb-hdr-h:76px;   /* строка шапки */
  --lb-hdr-hc:56px;  /* строка компактной шапки (после 140 px прокрутки) */
  --lb-topbar-h:40px;
  --lb-logo-w:184px; --lb-logo-wc:150px;

  /* --- движение --- */
  --lb-ease:cubic-bezier(.16,1,.3,1);
  --lb-t:.25s;
  --lb-t-fast:.2s;
}

@media (max-width:760px){
  :root{
    --lb-gut:16px; --lb-gap:72px; --lb-r:24px; --lb-pad:24px; --lb-pad-tray:16px;
    --lb-fs-h1:34px; --lb-fs-hero:30px; --lb-fs-h2:28px; --lb-fs-tile:26px; --lb-fs-h3:22px; --lb-fs-big:48px;
    --lb-fs-body:16px; --lb-grid-gap:12px;
    --lb-hdr-h:60px; --lb-hdr-hc:52px; --lb-logo-w:164px; --lb-logo-wc:132px;
  }
}