/* =========================================================================
   KATRIN BAYER — DESIGN SYSTEM
   Направление: «Минимал-люкс» (Quiet Luxury), финально зафиксировано 09.08.2026
   Источник спецификации: PROJECT_STATE.md, раздел 3 «САЙТ»
   Использование: подключить этот файл к любому экрану Mini App (стадия 4);
   классы префиксованы "kb-", чтобы не конфликтовать с чужими стилями.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. ТОКЕНЫ (CSS-переменные)
   Цвета сюда не по теме Telegram (ThemeParams не используем — решение
   зафиксировано в PROJECT_STATE.md), а фиксированные, брендовые.
   ------------------------------------------------------------------------- */
:root{
  /* Цвета */
  --kb-bg:            #F5F1EA; /* кремовый фон */
  --kb-ink:           #1C1A17; /* текст / чернила, тёплый почти чёрный */
  --kb-accent:        #C9BFA9; /* приглушённый бежево-серый — обводки, линии */
  --kb-accent-2:      #8B6F47; /* бронза/таупе — вторичный акцент */
  --kb-card-a:        #F3EEE3; /* фото-плейсхолдер, светлый край градиента */
  --kb-card-b:        #D9CBAE; /* фото-плейсхолдер, тёмный край градиента */
  --kb-muted:         #8B8478; /* приглушённый серый — второстепенный текст */
  --kb-border:        #E4DCC9; /* тонкие разделители */
  --kb-danger:        #B3423A; /* только для статуса "Скасовано", больше нигде */
  --kb-surface:       #FFFFFF; /* редкие "чистые" поверхности (инпуты и т.п.) */

  /* Типографика */
  --kb-font-serif:    'Playfair Display', Georgia, serif;   /* заголовки, 500–700 */
  --kb-font-sans:     'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* всё остальное, 400–800 */

  /* Радиусы */
  --kb-radius-s:      8px;
  --kb-radius-m:      12px;
  --kb-radius-l:      16px;
  --kb-radius-full:   999px;

  /* Тени (сдержанные, без ярких/цветных теней) */
  --kb-shadow-soft:   0 8px 16px -8px rgba(28,26,23,.18);
  --kb-shadow-card:   inset 0 0 0 1px rgba(139,111,71,.12);

  /* Отступы — единая шкала, не придумывать произвольные значения в компонентах */
  --kb-space-1: 4px;
  --kb-space-2: 8px;
  --kb-space-3: 12px;
  --kb-space-4: 16px;
  --kb-space-5: 24px;
  --kb-space-6: 32px;

  /* Safe area — обязательно для Telegram fullscreen (см. технические рамки) */
  --kb-safe-top:    env(safe-area-inset-top, 0px);
  --kb-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* -------------------------------------------------------------------------
   2. БАЗА
   ------------------------------------------------------------------------- */
.kb-root{
  background: var(--kb-bg);
  color: var(--kb-ink);
  font-family: var(--kb-font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.kb-root *{ box-sizing: border-box; }
.kb-root img, .kb-root svg{ display:block; max-width:100%; }

/* -------------------------------------------------------------------------
   3. ТИПОГРАФИКА
   Не смешивать больше двух гарнитур: Playfair Display (заголовки) + Inter (всё остальное).
   ------------------------------------------------------------------------- */
.kb-h1{ font-family: var(--kb-font-serif); font-weight:600; font-size:24px; line-height:1.2; margin:0; }
.kb-h2{ font-family: var(--kb-font-serif); font-weight:600; font-size:19px; line-height:1.25; margin:0; }
.kb-h3{ font-family: var(--kb-font-serif); font-weight:600; font-size:16px; line-height:1.3; margin:0; }
.kb-kicker{
  font-family: var(--kb-font-sans); font-weight:700; font-size:10px;
  text-transform: uppercase; letter-spacing:.12em; color: var(--kb-accent-2); margin:0;
}
.kb-body{ font-family: var(--kb-font-sans); font-weight:400; font-size:13px; line-height:1.6; color: var(--kb-ink); margin:0; }
.kb-caption{ font-family: var(--kb-font-sans); font-weight:500; font-size:11px; line-height:1.5; color: var(--kb-muted); margin:0; }
.kb-price{ font-family: var(--kb-font-sans); font-weight:800; font-size:14px; color: var(--kb-ink); }
.kb-price--accent{ display:inline-block; border-bottom:1px solid var(--kb-accent-2); padding-bottom:1px; }

/* -------------------------------------------------------------------------
   4. КНОПКИ
   MainButton/SecondaryButton — визуальная оболочка. В реальной сборке
   (стадия 4) физическое поведение должно идти через Telegram WebApp SDK
   (Telegram.WebApp.MainButton), это здесь только внешний вид на случай,
   если понадобится HTML-фоллбэк или превью вне Telegram.
   ------------------------------------------------------------------------- */
.kb-btn-main{
  width:100%; height:48px; border:none; border-radius: var(--kb-radius-m);
  background: var(--kb-ink); color: var(--kb-bg);
  font-family: var(--kb-font-sans); font-weight:700; font-size:13.5px; letter-spacing:.02em;
  display:flex; align-items:center; justify-content:center; gap:6px;
  cursor:pointer;
}
.kb-btn-main:disabled{ background: var(--kb-accent); color: var(--kb-surface); cursor:not-allowed; }

.kb-btn-secondary{
  width:100%; height:46px; border-radius: var(--kb-radius-m);
  background: transparent; color: var(--kb-ink); border:1px solid var(--kb-ink);
  font-family: var(--kb-font-sans); font-weight:700; font-size:13.5px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}

/* -------------------------------------------------------------------------
   5. ЧИПЫ-ФИЛЬТРЫ (по «розділу»: Одяг / Взуття / Аксесуари / Сумки)
   ------------------------------------------------------------------------- */
.kb-chip{
  display:inline-flex; align-items:center; padding:7px 14px; border-radius: var(--kb-radius-full);
  font-family: var(--kb-font-sans); font-weight:600; font-size:11.5px; white-space:nowrap;
  border:1px solid var(--kb-accent); color: var(--kb-ink); background:transparent;
  cursor:pointer;
}
.kb-chip.is-active{ background: var(--kb-ink); color: var(--kb-bg); border-color: var(--kb-ink); }

/* -------------------------------------------------------------------------
   6. НИЖНЯЯ НАВИГАЦИЯ (5 пунктов: Головна / Пошук / Обране / Кошик / Профіль)
   ------------------------------------------------------------------------- */
.kb-nav{
  display:flex; justify-content:space-around; align-items:center;
  padding: var(--kb-space-3) var(--kb-space-2) calc(var(--kb-space-4) + var(--kb-safe-bottom));
  background: var(--kb-bg); border-top:1px solid var(--kb-border);
}
.kb-nav-item{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  font-family: var(--kb-font-sans); font-size:9px; font-weight:600; color: var(--kb-muted);
  position:relative; background:none; border:none; cursor:pointer;
}
.kb-nav-item svg{ width:19px; height:19px; }
.kb-nav-item.is-active{ color: var(--kb-ink); }
.kb-nav-item.is-active::before{
  content:""; position:absolute; top:-8px; width:3px; height:3px; border-radius:50%;
  background: var(--kb-accent-2);
}

/* -------------------------------------------------------------------------
   7. КАРТОЧКА ТОВАРА В СЕТКЕ КАТАЛОГА (2 колонки, фото 3:4)
   ------------------------------------------------------------------------- */
.kb-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.kb-card{ display:flex; flex-direction:column; cursor:pointer; }
.kb-card__img{
  aspect-ratio:3/4; border-radius: var(--kb-radius-m); overflow:hidden;
  display:flex; align-items:center; justify-content:center; position:relative;
  background: radial-gradient(120% 120% at 28% 18%, var(--kb-card-a) 0%, var(--kb-card-b) 100%);
  box-shadow: var(--kb-shadow-card);
}
.kb-card__img img{ width:100%; height:100%; object-fit:cover; } /* когда появится реальное фото */
.kb-card__img svg{ width:60%; height:60%; } /* пока фото нет — line-art плейсхолдер; без этого правила голый inline-svg рендерится в дефолтном размере браузера (300×150) и ломает сетку */
.kb-card__info{ padding:9px 2px 0; }
.kb-card__name{ font-family: var(--kb-font-serif); font-weight:600; font-size:12px; margin:0 0 4px; }

/* Бейджи — использовать МИНИМАЛЬНО, спецификация требует минимум визуального шума */
.kb-badge{
  position:absolute; top:8px; left:8px; font-size:9px; font-weight:800;
  padding:3px 7px; border-radius:6px; letter-spacing:.03em;
  background: var(--kb-ink); color: var(--kb-bg);
}

/* -------------------------------------------------------------------------
   8. КАРТОЧКА ТОВАРА — ДЕТАЛЬНЫЙ ЭКРАН
   ------------------------------------------------------------------------- */
.kb-pd-img{
  width:100%; aspect-ratio:1/1.05; position:relative;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(120% 120% at 30% 16%, var(--kb-card-a) 0%, var(--kb-card-b) 100%);
}
.kb-pd-img img{ width:100%; height:100%; object-fit:cover; }
.kb-pd-img svg{ width:44%; height:44%; } /* плейсхолдер, см. пояснение у .kb-card__img svg */
.kb-pd-img::after{ /* тонкая рамка-паспарту — редакционный акцент из v2 */
  content:""; position:absolute; inset:10px; border:1px solid rgba(139,111,71,.22); pointer-events:none;
}

.kb-size{
  min-width:36px; height:36px; padding:0 10px; border-radius: var(--kb-radius-s);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--kb-font-sans); font-size:11.5px; font-weight:700;
  border:1px solid var(--kb-accent); color: var(--kb-ink); background:transparent; cursor:pointer;
}
.kb-size.is-active{ background: var(--kb-ink); color: var(--kb-bg); border-color: var(--kb-ink); }
.kb-size.is-disabled{ color: var(--kb-accent); border-color: var(--kb-border); cursor:not-allowed; text-decoration:line-through; }

.kb-color{
  width:24px; height:24px; border-radius:50%; cursor:pointer;
  box-shadow:0 0 0 2px var(--kb-bg), 0 0 0 3px rgba(0,0,0,.15);
}
.kb-color.is-active{ box-shadow:0 0 0 2px var(--kb-bg), 0 0 0 3px var(--kb-ink); }

/* -------------------------------------------------------------------------
   9. ПОИСК И ПОЛЯ ВВОДА (используется на экране «Пошук» и «Оформлення замовлення»)
   ------------------------------------------------------------------------- */
.kb-search{
  height:38px; border-radius: var(--kb-radius-s); background:#EAE3D6; color:#7d766a;
  display:flex; align-items:center; padding:0 var(--kb-space-3); gap:8px; font-size:12px;
}
.kb-search input{ border:none; background:none; outline:none; font-family:var(--kb-font-sans); font-size:12px; color:var(--kb-ink); width:100%; }

.kb-field{ display:flex; flex-direction:column; gap:6px; }
.kb-field label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color:var(--kb-muted); }
.kb-field input, .kb-field textarea{
  border:1px solid var(--kb-border); border-radius: var(--kb-radius-s); background: var(--kb-surface);
  padding:11px 12px; font-family: var(--kb-font-sans); font-size:13px; color: var(--kb-ink); outline:none;
}
.kb-field input:focus, .kb-field textarea:focus{ border-color: var(--kb-accent-2); }
.kb-field.is-error input{ border-color: var(--kb-danger); }
.kb-field__error{ font-size:10.5px; color: var(--kb-danger); }

/* -------------------------------------------------------------------------
   10. РЕДАКЦИОННЫЕ АКЦЕНТЫ (из превью v2) — НЕОБЯЗАТЕЛЬНЫЕ элементы
   ------------------------------------------------------------------------- */
.kb-section-label{ display:flex; align-items:center; gap:8px; }
.kb-section-label i{ flex:1; height:1px; background: var(--kb-accent); opacity:.6; display:block; }

.kb-hero{
  border-radius: var(--kb-radius-l); padding:16px 16px 14px; position:relative; overflow:hidden;
  background: linear-gradient(155deg,#EFE6D3 0%,#E1D2AE 60%,#CDB98D 100%);
  box-shadow: inset 0 0 0 1px rgba(139,111,71,.18);
}
.kb-hero__seal{
  position:absolute; top:14px; right:14px; width:38px; height:38px; border-radius:50%;
  border:1px solid #5b4a30; display:flex; align-items:center; justify-content:center;
  font-family: var(--kb-font-serif); font-size:11px; font-weight:600; color:#5b4a30; opacity:.75;
}

/* -------------------------------------------------------------------------
   11. СТАТУС ЗАКАЗА (профиль/мои замовлення) — 5 финальных статусов CRM
   Цвет используется по минимуму, красный — единственное исключение,
   только для «Скасовано».
   ------------------------------------------------------------------------- */
.kb-status{
  display:inline-flex; align-items:center; padding:4px 10px; border-radius: var(--kb-radius-full);
  font-family: var(--kb-font-sans); font-size:10.5px; font-weight:700; border:1px solid transparent;
}
.kb-status--new         { border-color: var(--kb-ink); color: var(--kb-ink); }
.kb-status--confirmed    { border-color: var(--kb-accent-2); color: var(--kb-accent-2); }
.kb-status--shipped      { background: rgba(139,111,71,.12); border-color: var(--kb-accent-2); color: var(--kb-accent-2); }
.kb-status--done          { background: var(--kb-ink); color: var(--kb-bg); }
.kb-status--cancelled    { border-color: var(--kb-danger); color: var(--kb-danger); }

/* -------------------------------------------------------------------------
   12. ШАПКА ЭКРАНА (topbar)
   Добавлено на стадии 4 при сборке реальных экранов — не было нужно для
   статичного превью дизайн-системы, но нужно для навигации между экранами.
   ------------------------------------------------------------------------- */
.kb-topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: calc(var(--kb-space-4) + var(--kb-safe-top)) var(--kb-space-4) var(--kb-space-2);
}
.kb-topbar__brand{ font-family: var(--kb-font-serif); font-weight:600; font-size:16px; position:relative; }
.kb-topbar__brand::after{ content:""; position:absolute; left:8%; right:8%; bottom:-5px; height:1px; background: var(--kb-accent-2); opacity:.55; }
.kb-topbar__icon-btn{
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer; color: var(--kb-ink); position:relative;
}
.kb-topbar__icon-btn svg{ width:20px; height:20px; }
.kb-badge-dot{
  position:absolute; top:0; right:0; min-width:14px; height:14px; padding:0 3px;
  border-radius:999px; background: var(--kb-accent-2); color: var(--kb-bg);
  font-size:9px; font-weight:800; display:flex; align-items:center; justify-content:center;
}

/* -------------------------------------------------------------------------
   13. СЕРДЕЧКО «В ОБРАНЕ» (на карточке товара в сетке)
   ------------------------------------------------------------------------- */
.kb-heart{
  position:absolute; top:8px; right:8px; width:26px; height:26px; border-radius:50%;
  background: rgba(245,241,234,.85); border:none; display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.kb-heart svg{ width:14px; height:14px; stroke: var(--kb-ink); fill:none; stroke-width:1.8; }
.kb-heart.is-active svg{ fill: var(--kb-accent-2); stroke: var(--kb-accent-2); }

/* -------------------------------------------------------------------------
   14. СТЕППЕР КОЛИЧЕСТВА (кошик)
   ------------------------------------------------------------------------- */
.kb-qty{ display:inline-flex; align-items:center; border:1px solid var(--kb-accent); border-radius: var(--kb-radius-s); }
.kb-qty button{ width:28px; height:28px; border:none; background:none; font-size:14px; color: var(--kb-ink); cursor:pointer; }
.kb-qty span{ min-width:22px; text-align:center; font-size:12px; font-weight:700; }

/* -------------------------------------------------------------------------
   15. СТРОКА ТОВАРА В КОШИКУ
   ------------------------------------------------------------------------- */
.kb-cart-item{ display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--kb-border); }
.kb-cart-item__img{
  width:64px; height:80px; border-radius: var(--kb-radius-s); flex-shrink:0; overflow:hidden;
  background: radial-gradient(120% 120% at 28% 18%, var(--kb-card-a) 0%, var(--kb-card-b) 100%);
  display:flex; align-items:center; justify-content:center;
}
.kb-cart-item__img img{ width:100%; height:100%; object-fit:cover; } /* когда есть реальное фото (з CRM) */
.kb-cart-item__img svg{ width:60%; height:60%; }
.kb-cart-item__body{ flex:1; display:flex; flex-direction:column; gap:4px; }
.kb-cart-item__remove{ background:none; border:none; color: var(--kb-muted); font-size:11px; text-decoration:underline; cursor:pointer; padding:0; align-self:flex-start; }

/* -------------------------------------------------------------------------
   16. ПУСТОЕ СОСТОЯНИЕ (пустой кошик/обране/список замовлень)
   ------------------------------------------------------------------------- */
.kb-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px; padding:60px 24px; color: var(--kb-muted); }
.kb-empty svg{ width:36px; height:36px; opacity:.5; margin-bottom:6px; }

/* -------------------------------------------------------------------------
   17. СТРОКА ЗАКАЗА (профіль → мої замовлення)
   ------------------------------------------------------------------------- */
.kb-order-item{ display:flex; flex-direction:column; gap:6px; padding:14px 0; border-bottom:1px solid var(--kb-border); }
.kb-order-item__top{ display:flex; align-items:center; justify-content:space-between; }

/* -------------------------------------------------------------------------
   18. АВАТАР (профіль)
   ------------------------------------------------------------------------- */
.kb-avatar{
  width:52px; height:52px; border-radius:50%; background: var(--kb-card-a);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--kb-font-serif); font-weight:600; font-size:18px; color: var(--kb-accent-2); overflow:hidden;
}
.kb-avatar img{ width:100%; height:100%; object-fit:cover; }

/* -------------------------------------------------------------------------
   19. СКЕЛЕТОН-ЗАГРУЗКА (infinite scroll)
   Только CSS-анимация opacity — без сторонних движков, дёшево для WebView.
   ------------------------------------------------------------------------- */
.kb-skeleton{ background: var(--kb-card-a); border-radius: var(--kb-radius-m); animation: kb-pulse 1.2s ease-in-out infinite; }
@keyframes kb-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }