@font-face { font-family: 'Golos Text'; font-weight: 400 700; font-display: swap;
  src: url(../fonts/GolosText-cyr.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Golos Text'; font-weight: 400 700; font-display: swap;
  src: url(../fonts/GolosText-lat.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Unbounded'; font-weight: 400 800; font-display: swap;
  src: url(../fonts/Unbounded-cyr.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Unbounded'; font-weight: 400 800; font-display: swap;
  src: url(../fonts/Unbounded-lat.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212; }

:root {
  --bg: #faf5ee;
  --card: #fffdf9;
  --ink: #2b1a12;
  --sub: #7a6457;
  --line: #eadfd2;
  --accent: #a2461f;
  --accent-soft: #f6e3d5;
  --new: #2f6f4e;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 64px; scroll-behavior: smooth; }
body { font-family: 'Golos Text', system-ui, sans-serif; background: var(--bg); color: var(--ink); line-height: 1.45; -webkit-font-smoothing: antialiased; padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
button, input { font: inherit; color: inherit; }
.wrap { max-width: 720px; margin: 0 auto; padding: 0 16px; }
.sub { color: var(--sub); }
h1, h2 { font-family: 'Unbounded', 'Golos Text', sans-serif; letter-spacing: -.02em; line-height: 1.15; }

.demo-bar { background: var(--ink); color: #f1e6dc; font-size: 12px; text-align: center; padding: 7px 16px; }
.demo-bar b { color: #fff; }

.top { padding: 22px 0 10px; }
.top .wrap { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.top h1 { font-size: 24px; margin-bottom: 4px; }
.top .sub { font-size: 14px; }
.lang { display: inline-flex; border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; flex: none; }
.lang button { border: 0; background: none; min-width: 44px; height: 38px; font-weight: 600; font-size: 13px; cursor: pointer; }
.lang button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.table-badge { max-width: 720px; margin: 10px auto 0; padding: 0 16px; font-weight: 700; color: var(--accent); }

.tabs { position: sticky; top: 0; z-index: 5; background: rgba(250, 245, 238, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.tabs .wrap { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-top: 10px; padding-bottom: 10px; }
.tabs .wrap::-webkit-scrollbar { display: none; }
.tabs a { flex: none; text-decoration: none; padding: 8px 14px; border-radius: 99px; font-size: 14px; font-weight: 600; color: var(--sub); }
.tabs a.on { background: var(--accent); color: #fff; }

.tools { padding-top: 14px; }
input[type=search] { width: 100%; height: 46px; border: 1.5px solid var(--line); border-radius: 14px; padding: 0 16px; background: var(--card); }
input[type=search]:focus { outline: none; border-color: var(--accent); }
.filters { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 10px 0 4px; }
.filters::-webkit-scrollbar { display: none; }
.chip { flex: none; border: 1.5px solid var(--line); background: var(--card); border-radius: 99px; padding: 7px 12px; font-size: 13px; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }

.cat { padding-top: 22px; }
.cat h2 { font-size: 18px; margin-bottom: 6px; }
.item { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.item h3 { font-size: 16px; font-weight: 600; line-height: 1.3; }
.item .sub { font-size: 14px; margin-top: 2px; }
.item .meta { font-size: 13px; color: var(--sub); margin-top: 4px; }
.price { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.badge { display: inline-block; vertical-align: 2px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-radius: 6px; padding: 2px 6px; margin-left: 4px; background: var(--accent-soft); color: var(--accent); }
.badge.new { background: #e2f1e8; color: var(--new); }
.empty { padding: 30px 16px; color: var(--sub); }

.foot { padding-top: 28px; padding-bottom: 20px; display: grid; gap: 18px; }
.legend { font-size: 13px; color: var(--sub); }
.credit { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--sub); font-size: 13px; background: var(--ink); padding: 10px 14px; border-radius: 14px; justify-self: start; }
.credit span { color: #e9ddd3; }
.credit img { width: 150px; height: auto; display: block; }

.call { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 6; border: 0; border-radius: 16px; min-height: 54px; padding: 0 26px; background: var(--accent); color: #fff; font-weight: 700; box-shadow: 0 14px 30px -12px rgba(162, 70, 31, .7); cursor: pointer; white-space: nowrap; }
.call:active { transform: translateX(-50%) scale(.97); }

dialog { border: 0; border-radius: 22px; padding: 24px; width: calc(100% - 32px); max-width: 420px; background: var(--card); color: var(--ink); }
dialog::backdrop { background: rgba(43, 26, 18, .45); }
dialog h2 { font-size: 19px; margin-bottom: 8px; }
.tg { background: #eef3f6; border-radius: 14px; padding: 12px 14px; font-size: 14px; margin: 14px 0 16px; }
.btn { width: 100%; min-height: 48px; border: 0; border-radius: 14px; background: var(--ink); color: #fff; font-weight: 600; cursor: pointer; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }