/* lbl-page.css
 * Версия: 1.7
 * Подсистема: ЭТК. Стили страниц готовых макетов: /labels/{слаг}/ (блок lblp)
 * и хаба /labels/ (блок lblh). Кладётся на сервер в /css2/lbl-page.css
 * (оба домена); подключается напрямую из стр_этикетка.html и
 * стр_этикетки_хаб.html.
 *
 * Изменения v1.7:
 *   - тёмный фон перенесён с #main/.page-layout на body: контейнер
 *     страницы центрирован (max-width 1500px), поэтому по бокам от него
 *     светил прозрачный body (белый по умолчанию). Теперь тёмный тянется
 *     во всю ширину, как на каталоге. Цвет текста оставлен на .page-layout.
 *
 * Изменения v1.6:
 *   - тёмная тема страниц /labels/: базовый CSS прочих страниц сюда не
 *     подключается, поэтому тело зоны (main) не получало тёмный фон —
 *     каркас (шапка/подвал) темнел, контент оставался светлым. Добавлена
 *     ветка [data-theme="dark"] на переменных сайта (--bg/--surface/
 *     --text/--text2/--border): фон и текст main, карточки, таблица,
 *     плашки, крошки. Жёстких цветов нет — цвет берётся из темы сайта.
 *
 * Изменения v1.5:
 *   - истинная натуральная величина: этикетка, контейнер и линейка
 *     считаются от CSS-переменной --lbl-mm (по умолчанию 1mm; калибровка
 *     по банковской карте ставит px-значение — lbl-render.js v1.2);
 *     секция не сжимается на узких экранах (горизонтальная прокрутка);
 *     в печати --lbl-mm жёстко 1mm. Панель калибровки .lblp__cal*.
 *
 * Изменения v1.4:
 *   - canvas мини-рендера (режим thumb, lbl-render.js v1.1) в карточках
 *     хаба и перелинковки: центрирование в слоте превью.
 *
 * Изменения v1.3:
 *   - стили canvas живого рендера (lbl-render.js v1.0): .lblp__canvas_fit
 *     заполняет превью по ширине, .lblp__canvas_real держит размеры в mm
 *     (заданы скриптом инлайн) — 1:1 на экране и при печати.
 *
 * Изменения v1.2:
 *   - стили хлебных крошек (.breadcrumbs) для страниц /labels/: на этих
 *     страницах общий набор CSS прочих страниц не подключается, крошки
 *     выходили нестилизованными. Мелкий приглушённый ряд, hover-акцент,
 *     на мобильных — одна строка с горизонтальной прокруткой.
 *
 * Изменения v1.1:
 *   - мини-превью этикетки в карточках хаба (lblh__thumb) и перелинковки
 *     (lblp__rel-*): SVG вписывается с сохранением пропорций;
 *   - секция «Натуральная величина» (lblp__real): этикетка в мм-единицах —
 *     1:1 на экране и при печати; контрольная линейка 5 см; блок печати
 *     @media print (печатается только этикетка и линейка);
 *   - адаптив пересобран: типографика clamp(), тач-цели от 44px,
 *     скролл-обёртка таблицы, focus-visible, prefers-reduced-motion;
 *   - сетки карточек auto-fill — сами перестраиваются от 4 колонок до 1.
 *
 * Принципы (доктрина UI): содержимое главное — фонов почти нет, иерархия
 * границами и воздухом; заливка только у первичной кнопки. Цвет акцента —
 * #2a7af0 (синий сайта). Нейтральные rgba-границы работают в обеих темах.
 */

/* ── Страница макета (lblp) ────────────────────────────── */

.lblp {
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 16px 48px;
}

.lblp__hero {
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: clamp(20px, 3vw, 32px);
  align-items: start;
  margin-bottom: 40px;
}

/* Превью-схема (масштабируемая, наглядная) */
.lblp__preview {
  margin: 0;
  padding: clamp(12px, 2vw, 20px);
  border: 1px solid rgba(128, 128, 128, 0.25);
  border-radius: 12px;
  text-align: center;
}

.lblp__svg {
  width: 100%;
  height: auto;
  max-height: 420px;
  display: block;
  margin: 0 auto;
}

.lblp__preview-caption {
  margin-top: 12px;
  font-size: 13px;
  opacity: 0.65;
}

/* Сводка и действия */
.lblp__title {
  margin: 0 0 10px;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.2;
  font-weight: 700;
}

.lblp__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  margin: 0 0 14px;
  font-size: 14px;
  opacity: 0.75;
}

.lblp__meta-item + .lblp__meta-item::before {
  content: "·";
  margin: 0 8px;
  opacity: 0.5;
}

.lblp__lead {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.55;
  max-width: 640px;
}

.lblp__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
}

.lblp__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;               /* тач-цель */
  padding: 10px 22px;
  border: 0;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

.lblp__btn--primary {
  background: #2a7af0;
  color: #fff;
}

.lblp__btn--primary:hover {
  background: #1e63cc;
}

.lblp__btn--secondary {
  background: transparent;
  border: 1.5px solid #2a7af0;
  color: #2a7af0;
}

.lblp__btn--secondary:hover {
  opacity: 0.75;
}

.lblp__btn:focus-visible,
.lblp__rel-card:focus-visible,
.lblh__card:focus-visible {
  outline: 2px solid #2a7af0;
  outline-offset: 2px;
}

.lblp__note {
  margin: 0;
  font-size: 13px;
  opacity: 0.65;
}

/* Секции */
.lblp__section {
  margin-bottom: clamp(28px, 4vw, 40px);
}

.lblp__section-title {
  margin: 0 0 14px;
  font-size: clamp(18px, 2vw, 21px);
  font-weight: 700;
}

/* ── Натуральная величина (1:1 экран и печать) ─────────── */

.lblp__real-hint {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.75;
  max-width: 640px;
}

.lblp__section--real {
  overflow-x: auto;                 /* этикетка шире экрана — прокрутка, не сжатие */
  -webkit-overflow-scrolling: touch;
}

.lblp__real {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 16px;
}

/* Размеры контейнера задаются инлайн из XML: width/height в mm.
   SVG внутри заполняет контейнер, viewBox совпадает с мм — масштаб 1:1. */
.lblp__real-label {
  flex: none;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.18));
}

.lblp__real-label .lblp__svg {
  width: 100%;
  height: 100%;
  max-height: none;
}

/* Контрольная линейка 5 см: деления каждые 10 мм */
.lblp__ruler {
  flex: none;
}

.lblp__ruler-bar {
  width: calc(50 * var(--lbl-mm, 1mm));
  height: calc(5 * var(--lbl-mm, 1mm));
  border: 1px solid rgba(128, 128, 128, 0.7);
  border-top: 0;
  background-image: repeating-linear-gradient(
    to right,
    rgba(128, 128, 128, 0.7) 0,
    rgba(128, 128, 128, 0.7) calc(0.35 * var(--lbl-mm, 1mm)),
    transparent calc(0.35 * var(--lbl-mm, 1mm)),
    transparent calc(10 * var(--lbl-mm, 1mm))
  );
}

.lblp__ruler-caption {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  opacity: 0.6;
}

/* Поля макета — плашки */
.lblp__fields {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lblp__field {
  padding: 6px 12px;
  border: 1px solid rgba(128, 128, 128, 0.3);
  border-radius: 999px;
  font-size: 13px;
  white-space: nowrap;
}

/* Таблица лент */
.lblp__table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.lblp__ribbons {
  width: 100%;
  min-width: 520px;               /* на узких экранах — скролл, не каша */
  border-collapse: collapse;
  font-size: 14px;
}

.lblp__ribbons th,
.lblp__ribbons td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}

.lblp__ribbons th {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
}

.lblp__ribbon-link {
  color: #2a7af0;
  text-decoration: none;
}

.lblp__ribbon-link:hover {
  text-decoration: underline;
}

.lblp__ribbon-per {
  font-weight: 600;
  white-space: nowrap;
}

/* ── Перелинковка карточками с мини-превью ─────────────── */

.lblp__rel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lblp__rel-cell {
  display: flex;
}

.lblp__rel-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(128, 128, 128, 0.25);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lblp__rel-card:hover {
  border-color: #2a7af0;
  box-shadow: 0 2px 10px rgba(42, 122, 240, 0.12);
}

.lblp__rel-thumb,
.lblh__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 92px;
  padding: 6px;
  border-radius: 6px;
  background: rgba(128, 128, 128, 0.07);
}

.lblp__rel-thumb svg,
.lblh__thumb svg {
  width: 100%;
  height: 100%;
}

.lblp__rel-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.lblp__rel-size {
  font-size: 13px;
  opacity: 0.6;
}

/* Прочие ссылки */
.lblp__link {
  color: #2a7af0;
  text-decoration: none;
  font-size: 14px;
}

.lblp__link:hover {
  text-decoration: underline;
}

.lblp__all-link {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid rgba(128, 128, 128, 0.2);
}

/* ── Хаб макетов (lblh) ────────────────────────────────── */

.lblh {
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 16px 48px;
}

.lblh__head {
  margin-bottom: 32px;
}

.lblh__title {
  margin: 0 0 10px;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.2;
  font-weight: 700;
}

.lblh__lead {
  max-width: 760px;
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.55;
}

.lblh__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.lblh__count {
  font-size: 14px;
  opacity: 0.65;
}

.lblh__cat {
  margin-bottom: clamp(26px, 4vw, 38px);
}

.lblh__cat-title {
  margin: 0 0 14px;
  font-size: clamp(18px, 2vw, 21px);
  font-weight: 700;
}

.lblh__cat-count {
  margin-left: 6px;
  font-size: 14px;
  font-weight: 400;
  opacity: 0.55;
}

.lblh__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lblh__cell {
  display: flex;
}

.lblh__card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(128, 128, 128, 0.25);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lblh__card:hover {
  border-color: #2a7af0;
  box-shadow: 0 2px 10px rgba(42, 122, 240, 0.12);
}

.lblh__card-name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.lblh__card-meta {
  font-size: 13px;
  opacity: 0.65;
}

/* ── Движение: уважение reduce-motion ──────────────────── */

@media (prefers-reduced-motion: reduce) {
  .lblp__btn,
  .lblp__rel-card,
  .lblh__card {
    transition: none;
  }
}

/* ── Адаптив ───────────────────────────────────────────── */

@media (max-width: 860px) {
  .lblp__hero {
    grid-template-columns: 1fr;
  }

  .lblp__svg {
    max-height: 320px;
  }
}

@media (max-width: 640px) {
  .lblp,
  .lblh {
    padding-left: 12px;
    padding-right: 12px;
  }

  .lblp__rel-thumb,
  .lblh__thumb {
    height: 76px;
  }
}

@media (max-width: 480px) {
  .lblp__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .lblp__real {
    gap: 16px;
  }

  .lblp__ribbons {
    font-size: 13px;
  }

  .lblp__ribbons th,
  .lblp__ribbons td {
    padding: 8px 6px;
  }
}

/* ── Печать: только этикетка 1:1 и контрольная линейка ─── */

@media print {
  .header,
  .catalog-sidebar,
  .catalog-sidebar-overlay,
  .breadcrumbs,
  .aa-foot,
  .region-modal,
  .up-button,
  .lblp__hero,
  .lblp__all-link,
  .lblp__section:not(.lblp__section--real),
  .lblp__section--real .lblp__section-title,
  .lblp__real-hint,
  .lblp__cal-toggle,
  .lblp__cal,
  .lblp__print-btn {
    display: none !important;
  }

  .page-layout {
    display: block !important;
  }

  .lblp {
    max-width: none;
    padding: 0;
  }

  .lblp__real {
    margin: 0;
    gap: 10mm;
  }

  .lblp__real-label {
    filter: none;               /* чистый вектор без тени */
  }

  .lblp__section--real {
    --lbl-mm: 1mm !important;   /* печать всегда в точных миллиметрах */
    overflow: visible;
  }
}

/* ── Хлебные крошки страниц этикеток (v1.2) ────────────── */

.breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 16px 2px;
  font-size: 13px;
  line-height: 1.4;
}

.breadcrumbs__link {
  color: inherit;
  opacity: 0.6;
  text-decoration: none;
  transition: color 0.15s ease, opacity 0.15s ease;
}

.breadcrumbs__link:hover {
  opacity: 1;
  color: #2a7af0;
}

.breadcrumbs__link:focus-visible {
  outline: 2px solid #2a7af0;
  outline-offset: 2px;
  border-radius: 4px;
}

.breadcrumbs__sep {
  opacity: 0.35;
  user-select: none;
}

.breadcrumbs__current {
  opacity: 0.85;
  font-weight: 500;
}

@media (max-width: 640px) {
  .breadcrumbs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-left: 12px;
    padding-right: 12px;
  }

  .breadcrumbs::-webkit-scrollbar {
    display: none;
  }

  .breadcrumbs__link,
  .breadcrumbs__current {
    white-space: nowrap;
  }
}

/* ── Canvas живого рендера макета (v1.3, lbl-render.js) ── */

.lblp__canvas {
  display: block;
  margin: 0 auto;
}

.lblp__canvas_fit {
  max-width: 100%;
  height: auto;
}

/* ── Canvas мини-рендера в карточках (v1.4) ────────────── */

.lblp__canvas_thumb {
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}

/* ── Калибровка натуральной величины (v1.5) ────────────── */

.lblp__cal-toggle {
  display: inline-block;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  background: none;
  color: #2a7af0;
  font-size: 13px;
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.lblp__cal {
  margin: 0 0 18px;
  padding: 16px;
  border: 1px dashed rgba(42, 122, 240, 0.5);
  border-radius: 10px;
  max-width: 560px;
}

.lblp__cal-hint {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.8;
}

.lblp__cal-card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(85.6 * var(--lbl-mm, 1mm));
  height: calc(53.98 * var(--lbl-mm, 1mm));
  margin-bottom: 12px;
  border: 2px solid #2a7af0;
  border-radius: calc(3.18 * var(--lbl-mm, 1mm));
  background: rgba(42, 122, 240, 0.06);
  color: #2a7af0;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  line-height: 1.35;
}

.lblp__cal-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
}

.lblp__cal-range {
  flex: 1 1 180px;
  accent-color: #2a7af0;
  min-height: 24px;
}

.lblp__cal-val {
  min-width: 44px;
  font-size: 13px;
  font-weight: 600;
  text-align: right;
}

.lblp__cal-save,
.lblp__cal-reset {
  min-height: 34px;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.lblp__cal-save {
  border: 0;
  background: #2a7af0;
  color: #fff;
}

.lblp__cal-reset {
  border: 1px solid rgba(128, 128, 128, 0.4);
  background: none;
  color: inherit;
}

/* ══════════════════════════════════════════════════════════
   Тёмная тема страниц /labels/ (v1.6)
   Переменные сайта в тёмной теме: --bg #0d0f13, --surface #16191f,
   --text #edeff2, --text2 #a7adb8, --text3 #71767f, --border #282d35.
   Селектор [data-theme="dark"] на html — тот же, что красит шапку/подвал.
   ══════════════════════════════════════════════════════════ */

/* Тело контентной зоны получает фон и цвет темы (на /labels/ его никто
   не задаёт — базовый CSS прочих страниц не подключён) */
/* Фон — на body (тянется во всю ширину: .page-layout центрирован
   с max-width, за его краями body просвечивал белым). Цвет текста —
   на контейнере зоны. */
[data-theme="dark"] body {
  background: var(--bg, #0d0f13);
}

[data-theme="dark"] #main,
[data-theme="dark"] .page-layout {
  background: var(--bg, #0d0f13);
  color: var(--text, #edeff2);
}

[data-theme="dark"] .lblp,
[data-theme="dark"] .lblh {
  color: var(--text, #edeff2);
}

/* Превью-схема и слоты карточек — на поверхности темы */
[data-theme="dark"] .lblp__preview {
  border-color: var(--border, #282d35);
  background: var(--surface, #16191f);
}

/* Плашки полей */
[data-theme="dark"] .lblp__field {
  border-color: var(--border2, #353b45);
}

/* Таблица лент */
[data-theme="dark"] .lblp__ribbons th,
[data-theme="dark"] .lblp__ribbons td {
  border-bottom-color: var(--border, #282d35);
}

/* Карточки перелинковки и хаба — фон поверхности, граница темы */
[data-theme="dark"] .lblp__rel-card,
[data-theme="dark"] .lblh__card {
  border-color: var(--border, #282d35);
  background: var(--surface, #16191f);
}

[data-theme="dark"] .lblp__rel-thumb,
[data-theme="dark"] .lblh__thumb {
  background: rgba(255, 255, 255, 0.04);
}

/* Крошки */
[data-theme="dark"] .breadcrumbs__sep {
  opacity: 0.4;
}

/* Разделители-линии, завязанные на серый rgba, читаемы и в тёмной —
   но границу «Все макеты» и итоговой ссылки подтянем к теме */
[data-theme="dark"] .lblp__all-link {
  border-top-color: var(--border, #282d35);
}