/* Канон мобильной v1 (§5а координационного плана + design/miniapp-lk-mockups.html).
   Шрифты — self-hosted файлы сайта (frontend/www/fonts мобильной v1). */

@font-face {
  font-family: "FuturaFuturisC";
  src: url("/static/fonts/FuturaFuturisC.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "FuturaFuturisC";
  src: url("/static/fonts/FuturaFuturisC-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("/static/fonts/Lora-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("/static/fonts/Lora-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --c-accent: #ca0f09;        /* кнопки/акценты (b-button) */
  --c-logo: #e3000b;          /* логотип */
  --c-hairline: #cdcdcd;      /* линии шапки/карточек */
  --c-border: #c8c8c8;        /* обводки инпутов и вторичных кнопок */
  --c-text: #000;
  --c-text-secondary: #898989;/* лиды карточек */
  --c-ok: #2c7a3f;
  --font-futura: "FuturaFuturisC", "Futura", "Arial Narrow", sans-serif;
  --font-lora: "Lora", Georgia, serif;
  --font-opensans: "Open Sans", -apple-system, "Segoe UI", Arial, sans-serif;
  --page-width: 640px;        /* дизайн-ширина канона */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* атрибут hidden обязан побеждать display у классов (иначе .b-button его перебивает) */
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  display: flex;
  flex-direction: column;
  background: #fff;
  color: var(--c-text);
  font-family: var(--font-opensans);
  -webkit-font-smoothing: antialiased;
}

/* Шапка b-site-header: под неубираемой панелью Telegram — своя шапка сайта */
.b-site-header {
  display: flex;
  align-items: center;
  min-height: 59px;
  padding: 6px 18px;
  background: #fff;
  border-bottom: 1px solid var(--c-hairline);
  width: 100%;
  max-width: var(--page-width);
  margin: 0 auto;
  flex: none;
}
.b-burger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 18px;
  background: none;
  border: none;
  cursor: pointer;
}
.b-burger span { display: block; height: 2px; background: #000; }
.b-logo { flex: 1; display: flex; justify-content: center; }
.logo-dog { width: 49px; display: block; }
.b-header-spacer { width: 26px; }

.b-page {
  flex: 1;
  overflow-y: auto;
  width: 100%;
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 16px 18px 22px;
}

/* Заголовок b-page-title: Futura uppercase, красная плашка слева */
.b-page-title { margin: 0 0 10px; }
.b-page-title span {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 47px;
  padding: 10px 0 10px 35px;
  font: 400 23px/1.2 var(--font-futura);
  text-transform: uppercase;
}
.b-page-title span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 100%;
  background: var(--c-accent);
}

/* Заголовок секции b-section-title */
.b-section-title {
  display: flex;
  align-items: center;
  margin: 22px 0 6px;
  font: 400 19px/1.2 var(--font-futura);
  text-transform: uppercase;
}
.b-section-title::before {
  content: "";
  width: 18px;
  height: 26px;
  margin-right: 17px;
  background: var(--c-accent);
  flex: none;
}

.b-lead { font-family: var(--font-lora); font-size: 15px; line-height: 1.5; }
.body-t { font: 400 14.5px/1.5 var(--font-opensans); margin: 0 0 10px; }
.mut { color: var(--c-text-secondary); font-size: 12.5px; }

/* Карточки-строки cardln: заголовок Lora, лид Open Sans, hairline-разделители */
.cardln { padding: 14px 0; border-bottom: 1px solid var(--c-hairline); }
.cardln:last-child { border-bottom: 0; }
.cardln .t { margin: 0 0 4px; font: 400 19px/1.32 var(--font-lora); color: #000; }
.cardln .lead { margin: 0 0 6px; font: 400 13px/1.45 var(--font-opensans); color: var(--c-text-secondary); }
.cardln .meta { display: flex; align-items: baseline; gap: 10px; }
.cardln .meta .price { margin-left: auto; font: 400 16px/1 var(--font-futura); white-space: nowrap; }

.thumb {
  width: 100%;
  height: 118px;
  background: #dadada center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8b8b8b;
  font-size: 11px;
  margin: 0 0 10px;
}

.price-big { font: 400 26px/1 var(--font-futura); margin: 10px 0 0; }

.chip {
  display: inline-block;
  border: 1px solid var(--c-accent);
  color: var(--c-accent);
  font: 700 12.5px/1.2 var(--font-opensans);
  padding: 2px 8px 3px;
  white-space: nowrap;
}
.chip.ok { border-color: var(--c-ok); color: var(--c-ok); }
.chip.gray { border-color: var(--c-text-secondary); color: var(--c-text-secondary); font-weight: 400; }

/* Простая карточка (экран привязки) */
.b-card { border: 1px solid var(--c-border); padding: 16px; margin-bottom: 8px; }
.b-card-title { font-family: var(--font-lora); font-size: 18px; font-weight: 400; margin-bottom: 8px; }
.b-card-lead { font-size: 14px; line-height: 1.45; color: var(--c-text-secondary); }

/* Кнопки b-button: Futura uppercase; accent — красная, вторичная — обводка */
.b-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 41px;
  margin-top: 12px;
  padding: 0 16px;
  font: 400 14px/1.15 var(--font-futura);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #000;
  background: none;
  border: 1px solid var(--c-border);
  cursor: pointer;
  text-decoration: none;
}
.b-button.accent { color: #fff; background: var(--c-accent); border-color: var(--c-accent); }
.b-button:active { opacity: 0.85; }

/* b-link-button: красный uppercase с треугольником */
.b-link {
  display: inline-flex;
  align-items: center;
  margin-top: 12px;
  font: 400 14px/1.15 var(--font-futura);
  text-transform: uppercase;
  color: var(--c-accent);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.b-link::after {
  content: "";
  width: 0; height: 0;
  margin-left: 6px;
  border: 6px solid transparent;
  border-left-color: var(--c-accent);
}

/* Экраны */
.scr { display: none; }
.scr.on { display: block; }

/* Нижние табы: Futura uppercase, активный — красный */
.tabbar {
  display: flex;
  border-top: 1px solid var(--c-hairline);
  background: #fff;
  width: 100%;
  max-width: var(--page-width);
  margin: 0 auto;
  flex: none;
  /* safe-area: табы не прячутся за жестовой панелью */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tabbar button {
  flex: 1;
  background: none;
  border: 0;
  padding: 8px 4px 10px;
  cursor: pointer;
  font: 400 10px/1.25 var(--font-futura);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #000;
}
.tabbar button svg {
  display: block;
  margin: 0 auto 3px;
  width: 20px; height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
}
.tabbar button.on { color: var(--c-accent); }

/* Меню b-site-menu: панель слева, активный пункт красный с полосой */
.menu-back {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.35);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s;
  z-index: 30;
}
.menu-panel {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 82%; max-width: 420px;
  background: #fff;
  transform: translateX(-100%);
  transition: transform 0.25s ease-in-out;
  z-index: 31;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--c-hairline);
}
body.menu-open .menu-back { opacity: 1; pointer-events: auto; }
body.menu-open .menu-panel { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { .menu-panel, .menu-back { transition: none; } }
.menu-top {
  padding: 16px 18px;
  border-bottom: 1px solid var(--c-hairline);
  font: 400 15px/1.2 var(--font-futura);
  text-transform: uppercase;
}
.menu-items { flex: 1; overflow-y: auto; padding: 6px 18px 6px 26px; }
.m-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 13px 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--c-hairline);
  font: 400 14px/1.35 var(--font-futura);
  text-transform: uppercase;
  color: #000;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}
.m-item.on { color: var(--c-accent); }
.m-item.on::before {
  content: "";
  position: absolute;
  left: -18px; top: 8px;
  width: 8px; height: calc(100% - 16px);
  background: var(--c-accent);
}
.m-item .tri {
  width: 0; height: 0;
  border: 6px solid transparent;
  border-top-color: var(--c-accent);
  margin-top: 5px;
}
.menu-city {
  padding: 14px 18px;
  /* safe-area: не даём жестовой панели/индикатору «съесть» низ меню */
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--c-hairline);
  font: 400 12.5px/1.3 var(--font-futura);
  text-transform: uppercase;
}
.menu-city b { color: #000; font-weight: 400; }

/* ==========================================================================
   Списки статей — компонент .b-post 1:1 с мобильной v1 (themes/mobile/_post.php
   + mobile.entry css). Масштаб канона: rem сайта = 100vw/64 (10px на 640) —
   воспроизводим локальной переменной --r, чтобы не трогать корневой font-size.
   ========================================================================== */
.b-post-list { margin: 0; }
.b-post-list > :not(:first-child) { margin-top: calc(var(--r) * 6); }
.b-post {
  --r: max(calc(100vw / 64), 6px);
  cursor: pointer;
}
@media (min-width: 640px) { .b-post { --r: 10px; } }
.b-post a { color: inherit; text-decoration: none; }
.b-post__img-box { max-width: 100%; position: relative; width: 100%; background: #dadada; }
.b-post__img-box::before { content: ""; display: block; padding: 81.25% 0 0; width: 100%; }
.b-post__img { object-fit: cover; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
.b-post__content { padding: 0 calc(var(--r) * 3); }
.b-post__label {
  background: var(--c-accent); color: #fff; display: inline-block;
  font: 400 calc(var(--r) * 1.8) / calc(var(--r) * 2.2) var(--font-futura);
  margin: calc(var(--r) * 2) 0 0; padding: calc(var(--r) * 1) calc(var(--r) * 1.8);
  text-transform: uppercase;
}
.b-post__date {
  color: var(--c-text-secondary);
  font: 400 calc(var(--r) * 2.4) / calc(var(--r) * 2.8) var(--font-opensans);
}
/* служебный ряд карточки (рубрика/цена/дата покупки) — под заголовком и лидом */
.b-post__meta {
  align-items: center; display: flex; flex-wrap: wrap;
  gap: calc(var(--r) * 1.5);
  margin: calc(var(--r) * 2) 0 0;
}
.b-post__meta .b-post__label { margin: 0; }
.b-post__title { font: 700 calc(var(--r) * 3.2) / calc(var(--r) * 4) var(--font-lora); margin: calc(var(--r) * 2) 0 0; }
.b-post__lead {
  font: 400 calc(var(--r) * 2.4) / calc(var(--r) * 2.8) var(--font-opensans);
  margin: calc(var(--r) * 2) 0 0;
}

/* Поиск по спискам: инпут в канон-обводке (#c8c8c8, как .b-button канона) */
.b-list-search {
  width: 100%; box-sizing: border-box; margin: 0 0 16px;
  border: 1px solid var(--c-border); background: #fff; color: var(--c-text);
  font: 400 14.5px/1.4 var(--font-opensans); padding: 12px 14px; outline: none;
  -webkit-appearance: none; border-radius: 0;
}
.b-list-search::placeholder { color: var(--c-text-secondary); }
.b-list-search:focus { border-color: var(--c-accent); }

/* «Показать ещё» — .b-button канона на всю ширину, отступ как между карточками */
.b-load-more { margin-top: calc(max(calc(100vw / 64), 6px) * 6); }
.cardln.tap { cursor: pointer; }

/* Карточка статьи: шапка без клика + доступная часть (превью до гейта, как на сайте) */
.b-post.no-tap { cursor: default; }
.b-article-preview {
  --r: max(calc(100vw / 64), 6px);
  padding: 0 calc(var(--r) * 3);
  margin-top: calc(var(--r) * 3);
}
@media (min-width: 640px) { .b-article-preview { --r: 10px; } }
.b-article-preview p, .b-article-preview li {
  font: 400 calc(var(--r) * 2.8) / calc(var(--r) * 3.6) var(--font-lora);
  margin: calc(var(--r) * 3) 0 0;
}
.b-article-preview p:first-child { margin-top: 0; }
.b-article-preview img { max-width: 100%; height: auto; }
.fade-note { margin-top: 10px; }

/* Э7: строки настроек уведомлений в профиле */
.notif-row { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.notif-row input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--c-accent); flex: none; }