/* Витрина KUZNETSOVA CREATES. Палитра и шрифты строго по брендбуку v4:
   тёмные только нейтральные (R=G=B), золото только на тёмном, светлый текст #D9D7D1,
   подложки и рамки = белый с прозрачностью 0.03-0.10. Songer только в родном весе. */

@font-face { font-family: 'Songer'; src: url(fonts/Songer.woff) format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Artegra'; src: url(fonts/Artegra-800.woff) format('woff'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'RobotoCond'; src: url(fonts/RobotoCond-400.woff) format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'RobotoCond'; src: url(fonts/RobotoCond-700.woff) format('woff'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url(fonts/Roboto-italic.woff) format('woff'); font-style: italic; font-display: swap; }

:root {
  --ink: #1A1A1A;
  --ink2: #242424;
  --paper: #D9D7D1;
  --gold: #C79763;
  --text: #D9D7D1;
  --text-mute: rgba(217, 215, 209, 0.6);
  --text-faint: rgba(217, 215, 209, 0.38);
  --glass: rgba(255, 255, 255, 0.03);
  --glass-hi: rgba(255, 255, 255, 0.06);
  --line: rgba(255, 255, 255, 0.08);
  --gold-line: rgba(199, 151, 99, 0.55);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--ink);
  color: var(--text);
  font-family: 'Roboto', sans-serif;
  /* правило ветки «Кузнецова» 19.09: браузер не дорисовывает жирный и курсив сам.
     Songer есть только в обычном весе, синтетический жирный рвёт в нём «Ы» и «?» */
  font-synthesis: none;
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.page { max-width: 560px; margin: 0 auto; padding: 28px 16px calc(32px + env(safe-area-inset-bottom)); }

/* Шапка */
.eyebrow {
  font-family: 'RobotoCond', sans-serif; font-weight: 700; font-size: 12px;
  letter-spacing: 4px; text-transform: uppercase; color: var(--gold);
}
.title {
  font-family: 'Songer', sans-serif; font-weight: 400; /* родной вес: синтетический жирный рвёт «Ы» */
  font-size: 40px; line-height: 1; letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold); margin: 14px 0 12px;
}
.lead {
  font-style: italic; font-size: 15px; line-height: 1.5; color: var(--text-mute); max-width: 420px;
}
.divider { height: 1px; margin: 24px 0 0; background: linear-gradient(90deg, transparent, rgba(199,151,99,0.25), transparent); }

/* Переключатель разделов */
.tabs-wrap { position: sticky; top: 0; z-index: 5; background: var(--ink); padding: 16px 0 14px; }
.tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px;
  background: var(--glass); border: 1px solid var(--line); border-radius: 14px;
}
.tab {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; border-radius: 10px; border: 1px solid transparent;
  font-family: 'RobotoCond', sans-serif; font-weight: 700; font-size: 14px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--text-faint);
  transition: color .2s, background .2s, border-color .2s;
}
.tab .count { font-weight: 400; letter-spacing: 0; opacity: .8; }
.tab[aria-selected="true"] { color: var(--gold); background: var(--glass-hi); border-color: var(--gold-line); }

/* Карточки */
.list { display: grid; gap: 12px; }
.card {
  background: var(--glass); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 18px 16px;
  animation: rise .28s ease-out both;
}
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .card { animation: none; } }

.card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.tag {
  font-family: 'RobotoCond', sans-serif; font-weight: 700; font-size: 11px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--gold);
}
.chip {
  font-family: 'RobotoCond', sans-serif; font-weight: 400; font-size: 11px; letter-spacing: .5px;
  color: var(--text-mute); padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px;
}
.card-title {
  font-family: 'Artegra', sans-serif; font-weight: 800; font-size: 17px; line-height: 1.2;
  letter-spacing: .5px; text-transform: uppercase; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-desc { font-style: italic; font-size: 14px; line-height: 1.5; color: var(--text-mute); margin-top: 8px; }

.card-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 16px; }
.price { font-family: 'Songer', sans-serif; font-weight: 400; font-size: 24px; letter-spacing: 1px; color: var(--gold); line-height: 1; }
.price-note { font-family: 'RobotoCond', sans-serif; font-size: 12px; color: var(--text-faint); margin-top: 6px; }
.more {
  font-family: 'RobotoCond', sans-serif; font-weight: 400; font-size: 13px; letter-spacing: .5px;
  color: var(--text-mute); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--line); padding: 6px 0;
}
.cta {
  flex: none; min-width: 120px; height: 44px; padding: 0 20px; border-radius: 12px;
  background: var(--glass-hi); border: 1px solid var(--gold-line);
  font-family: 'RobotoCond', sans-serif; font-weight: 700; font-size: 14px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--gold);
  transition: background .15s, transform .1s;
}
.cta:active { background: rgba(255, 255, 255, 0.10); transform: scale(.98); }

/* Подвал */
.foot { margin-top: 28px; text-align: center; }
.foot button {
  font-family: 'RobotoCond', sans-serif; font-size: 13px; letter-spacing: .5px; color: var(--text-faint);
  padding: 10px;
}
.foot b { font-weight: 700; color: var(--text-mute); }
.foot .admin-entry {
  display: block; margin: 14px auto 0; padding: 10px 16px; border: 1px dashed var(--line); border-radius: 10px;
  font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; font-size: 11px; color: var(--text-faint);
}
.foot .admin-entry[hidden] { display: none; }

.state { text-align: center; padding: 40px 0; font-style: italic; color: var(--text-faint); }

@media (max-width: 360px) {
  .title { font-size: 34px; }
  .cta { min-width: 104px; padding: 0 14px; }
}