/* ============================================================
   ДАБЛ ЭЛЬ — ГАСТРОПАБ | ГЛАВНЫЙ СТИЛЬ
   ============================================================ */
/* Кешируется браузером на 7 дней (см. nginx-конфиг) — при правке этого файла
   или любого js/*.js бампните ?v=YYYYMMDD во всех <link href="css/style.css?v=...">
   и <script src="js/*.js?v=..."> во всех *.html в корне проекта. */

/* ---------- Переменные ---------- */
:root {
  --bg-base:      #0A0908;
  --bg-card:      #121008;
  --bg-elevated:  #1A1710;
  --bg-hover:     #221F16;

  --border:       #2A2518;
  --border-light: #3A3226;

  --accent:       #E3A63D;
  --accent-hover: #F2B94E;
  --accent-dim:   rgba(227, 166, 61, 0.14);
  --accent-glow:  rgba(227, 166, 61, 0.35);

  /* Холодный «фрост» — конденсат на бокале, второй именованный акцент.
     Используется ТОЛЬКО для курсорных/интерактивных сигнатурных эффектов,
     никогда для CTA/бренд-элементов (см. DESIGN.md §2). */
  --frost:        #8FE0EF;
  --frost-dim:    rgba(143, 224, 239, 0.12);
  --frost-glow:   rgba(143, 224, 239, 0.4);

  --text:         #EDE6DA;
  --text-sec:     #9A9080;
  --text-muted:   #8C8272;

  --success:      #5A9E5A;
  --error:        #C44A4A;

  --radius:       8px;
  --radius-lg:    16px;
  --radius-xl:    24px;

  --shadow:       0 4px 24px rgba(0,0,0,0.5);
  --shadow-lg:    0 12px 48px rgba(0,0,0,0.7);
  --shadow-glow-accent: 0 8px 32px var(--accent-glow);
  --shadow-glow-frost:  0 8px 32px var(--frost-glow);

  --ease:         0.22s cubic-bezier(0.4,0,0.2,1);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --font-display: 'Bitter', Georgia, serif;
  --font-body:    'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono:    'Space Mono', 'Courier New', monospace;

  --container:    1240px;
  --h-height:     72px;

  --focus-ring:   0 0 0 3px rgba(227,166,61,0.35);
  --tap-min:      44px;
}

/* Нативные переходы между страницами (прогрессивное улучшение,
   не поддерживающие браузеры просто игнорируют правило) */
@view-transition {
  navigation: auto;
}

/* ---------- Сброс ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* ---------- Доступность: фокус и уменьшенное движение ---------- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
a:focus-visible, button:focus-visible, .btn:focus-visible,
.dish-card:focus-visible, .article-card:focus-visible, .banner-card:focus-visible,
.room-tour__dot:focus-visible, .room-tour__arrow:focus-visible, .filter-btn:focus-visible, .menu-cats__item:focus-visible,
.menu-tabs__item:focus-visible {
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: fixed;
  top: -60px; left: 12px;
  z-index: 2000;
  background: var(--accent);
  color: var(--bg-base);
  font-weight: 600;
  font-size: 0.88rem;
  padding: 12px 20px;
  border-radius: var(--radius);
  transition: top var(--ease);
}
.skip-link:focus { top: 12px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
}

body {
  background: var(--bg-base);
  color: var(--text);
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
}
/* Лёгкая атмосферная фактура — фиксированный слой, не перерисовывается при скролле */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; border: none; background: none; }
ul { list-style: none; }
h1,h2,h3,h4,h5 { font-family: 'Bitter', Georgia, serif; line-height: 1.2; }

/* ---------- Типографика ---------- */
.h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
.h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
.h3 { font-size: clamp(1.2rem, 2.5vw, 1.7rem); }

/* ---------- Контейнер ---------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 768px) { .container { padding: 0 32px; } }

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: var(--ease);
  white-space: nowrap;
}
.btn-primary {
  background: var(--accent);
  color: #0A0908;
}
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 6px 20px var(--accent-glow); }
.btn-outline {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
}
.btn-outline:hover { background: var(--accent-dim); transform: translateY(-1px); }
.btn-ghost {
  background: rgba(255,255,255,0.06);
  color: var(--text);
  border: 1px solid var(--border-light);
}
.btn-ghost:hover { background: rgba(255,255,255,0.1); }
.btn:disabled { opacity: 0.4; pointer-events: none; }
.btn-sm { padding: 8px 18px; font-size: 0.8rem; }
@media (max-width: 640px) { .btn-sm { min-height: var(--tap-min); } }
.btn-lg { padding: 15px 36px; font-size: 1rem; }

/* ---------- Секции ---------- */
.section { padding: 80px 0; }
.section-sm { padding: 48px 0; }
.section-header { margin-bottom: 48px; }
.section-title { font-family: 'Bitter', serif; font-size: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: 12px; }
.section-subtitle { color: var(--text-sec); font-size: 1rem; }

/* ---------- Разделитель ---------- */
.divider { width: 60px; height: 2px; background: var(--accent); margin: 16px 0; }

/* ---------- Бейдж ---------- */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.badge-hit    { background: #8B1A1A; color: #FFB3B3; }
.badge-new    { background: #1A5C1A; color: #B3FFB3; }
.badge-hot    { background: #7A3A00; color: #FFD4A0; }
.badge-veg    { background: #1A4A1A; color: #A0FFB3; }
.badge-beer   { background: var(--accent-dim); color: var(--accent); border: 1px solid var(--accent); }
.badge-food   { background: rgba(90,80,60,0.3); color: #C4A87A; border: 1px solid #5A5040; }

/* ============================================================
   ШАПКА
   ============================================================ */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--h-height);
  background: rgba(10,9,8,0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transition: var(--ease);
}
.header.scrolled { background: rgba(10,9,8,0.98); box-shadow: 0 4px 24px rgba(0,0,0,0.5); }

.header__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
@media (min-width: 768px) { .header__inner { padding: 0 32px; } }

.header__left { display: flex; align-items: center; gap: 14px; min-width: 0; }

.header__logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; min-width: 0; }
.header__logo img { height: 42px; }
.header__logo .header__logo-mark { width: 28px; height: 36px; color: var(--accent); flex-shrink: 0; transition: transform var(--ease); }
.header__logo:hover .header__logo-mark { transform: rotate(-8deg) scale(1.08); }
.header__logo-text { display: flex; flex-direction: column; }
.header__logo-name { font-family: 'Bitter', serif; font-size: 1.3rem; font-weight: 800; color: var(--accent); line-height: 1; letter-spacing: -0.01em; }
.header__logo-sub { font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }

.header__right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.header__info { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.header__phone { font-size: 0.9rem; font-weight: 600; color: var(--text); transition: var(--ease); }
.header__phone:hover { color: var(--accent); }
.header__hours { font-size: 0.72rem; color: var(--text-muted); }

.header__socials { display: flex; gap: 8px; }
.header__socials a {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-sec);
  transition: var(--ease);
}
.header__socials a:hover { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }

.header__cart {
  position: relative;
  width: var(--tap-min); height: var(--tap-min);
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text);
  transition: var(--ease);
}
.header__cart:hover { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.header__cart-count {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  background: var(--accent);
  color: #0A0908;
  border-radius: 9px;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  display: none;
}
.header__cart-count.visible { display: flex; }

.burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 6px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  transition: var(--ease);
  flex-shrink: 0;
}
.burger:hover { background: var(--bg-elevated); border-color: var(--border-light); }
.burger span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: var(--ease); }
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Выдвижное меню слева от лого — весь список разделов живёт здесь,
   чтобы шапке не приходилось втискивать 8 пунктов в одну строку. */
.mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10,9,8,0.6);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ease);
}
.mobile-menu-backdrop.open { opacity: 1; pointer-events: auto; }

.mobile-menu {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: min(340px, 86vw);
  background: var(--bg-base);
  border-right: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  z-index: 999;
  display: flex;
  flex-direction: column;
  padding: calc(var(--h-height) + 24px) 24px 32px;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu nav { display: flex; flex-direction: column; gap: 4px; }
.mobile-menu nav a {
  padding: 14px 16px;
  border-radius: var(--radius);
  font-size: 1.1rem;
  color: var(--text-sec);
  border-bottom: 1px solid var(--border);
  transition: var(--ease);
}
.mobile-menu nav a:hover, .mobile-menu nav a.active { color: var(--text); background: var(--bg-elevated); }
.mobile-menu__footer { margin-top: auto; padding-top: 32px; display: flex; flex-direction: column; gap: 12px; }
.mobile-menu__phone { font-size: 1.2rem; font-weight: 600; color: var(--accent); }
.mobile-menu__hours { font-size: 0.85rem; color: var(--text-muted); }
/* Соцсети в мобильном меню переиспользуют .header__socials — на тач-устройстве
   это единственный контекст показа, поэтому тап-таргет должен быть полноразмерным */
.mobile-menu__footer .header__socials a { width: var(--tap-min); height: var(--tap-min); }

/* Адаптив шапки — на узких экранах в правом блоке остаётся только корзина */
@media (max-width: 1024px) {
  .header__info, .header__socials { display: none; }
}
/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: var(--h-height);
}
.hero__bg {
  position: absolute; inset: 0;
  z-index: 0;
  background: var(--bg-base) center/cover;
}
.hero__bg img, .hero__bg video {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.6;
}
.hero__overlay {
  position: absolute; inset: 0;
  z-index: 1;
  /* Тёмный слева (под текстом), видео дышит справа; растворяется в базовый фон внизу */
  background:
    linear-gradient(100deg, rgba(10,9,8,0.94) 0%, rgba(10,9,8,0.66) 42%, rgba(10,9,8,0.3) 68%, rgba(10,9,8,0.55) 100%),
    linear-gradient(180deg, transparent 55%, #0A0908 100%);
  transition: background 0.4s var(--ease-out);
}
/* Сигнатурный момент: «свет проходит сквозь бокал» — курсор приподнимает
   затемнение видео тёплым янтарным + холодным фрост-ободом (см. DESIGN.md §6) */
@media (hover: hover) and (pointer: fine) {
  .hero.spotlight:hover .hero__overlay {
    background:
      radial-gradient(34vw circle at var(--mx, 50%) var(--my, 50%), rgba(10,9,8,0.18), rgba(10,9,8,0.5) 55%, transparent 80%),
      linear-gradient(100deg, rgba(10,9,8,0.9) 0%, rgba(10,9,8,0.6) 42%, rgba(10,9,8,0.28) 68%, rgba(10,9,8,0.5) 100%),
      linear-gradient(180deg, transparent 55%, #0A0908 100%);
  }
}
.hero__content {
  position: relative; z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  padding: 80px 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 700px;
}
@media (min-width: 768px) { .hero__content { padding: 100px 32px; } }
/* Асимметричный split: текст прижат влево, видео дышит справа (variance 8/10, см. DESIGN.md §4) */
@media (min-width: 1200px) {
  .hero__content { margin: 0; margin-left: max(6vw, 32px); max-width: min(620px, 42vw); }
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 7px 16px 7px 12px;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  background: var(--accent-dim);
}
.hero__eyebrow .icon { color: var(--accent); }
.hero__title { font-family: 'Bitter', serif; font-size: clamp(2.6rem, 7vw, 5rem); color: var(--text); font-weight: 700; }
.hero__title span { color: var(--accent); }
.hero__desc { font-size: 1.05rem; color: var(--text-sec); max-width: 520px; }
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; padding-top: 8px; }
.hero__stats { display: flex; gap: 32px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--border); margin-top: 8px; }

/* Оркестрованное появление hero при загрузке страницы: один согласованный
   момент, а не россыпь разных входов (см. DESIGN.md §6) */
.hero__eyebrow, .hero__title, .hero__desc, .hero__actions, .hero__stats {
  animation: heroRise 0.8s var(--ease-out) both;
}
.hero__eyebrow { animation-delay: 0.05s; }
.hero__title   { animation-delay: 0.15s; }
.hero__desc    { animation-delay: 0.32s; }
.hero__actions { animation-delay: 0.46s; }
.hero__stats   { animation-delay: 0.58s; }
@keyframes heroRise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
.hero__stat-num { font-family: var(--font-mono); font-size: 2rem; font-weight: 700; color: var(--accent); line-height: 1; }
.hero__stat-label { font-size: 0.78rem; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 4px; }

.hero__scroll {
  position: absolute;
  bottom: 32px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  animation: scrollBounce 2s infinite;
}
.hero__scroll-line { width: 1px; height: 40px; background: linear-gradient(to bottom, var(--accent), transparent); }
@keyframes scrollBounce { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(6px); } }
/* На мобильном контент hero может быть выше 100svh (перенос кнопок/статов) —
   индикатор скролла убираем, чтобы не рисковать наложением и не грузить экран */
@media (max-width: 640px) { .hero__scroll { display: none; } }

/* ============================================================
   ОСОБЕННОСТИ
   ============================================================ */
.features { background: var(--bg-card); }
.features__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px)  { .features__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .features__grid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 1fr; } }

.feature-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 14px;
  transition: background var(--ease), border-color var(--ease), transform var(--ease);
}
.feature-card:hover { background: var(--bg-hover); border-color: var(--border-light); transform: translateY(-2px); }
@media (min-width: 1024px) {
  .feature-card:nth-child(1) { grid-column: span 3; }
  .feature-card:nth-child(2),
  .feature-card:nth-child(3),
  .feature-card:nth-child(4) { grid-column: span 1; }
  .feature-card:nth-child(5),
  .feature-card:nth-child(6) { grid-column: span 3; }
}

/* Акцентная (крупная) карточка — главное отличие заведения */
.feature-card--hero {
  background: radial-gradient(120% 140% at 15% 0%, var(--accent-dim) 0%, var(--bg-elevated) 62%);
  border-color: var(--border-light);
  justify-content: center;
}
@media (min-width: 1024px) { .feature-card--hero { padding: 32px; } }
.feature-card--hero .feature-card__icon { width: 64px; height: 64px; background: var(--accent); color: var(--bg-base); }
.feature-card--hero .feature-card__title { font-family: 'Bitter', serif; font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 700; }
.feature-card--hero .feature-card__desc { font-size: 0.92rem; max-width: 34ch; }

.feature-card__icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--accent-dim);
  border: 1px solid var(--border-light);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  font-size: 1.3rem;
  transition: var(--ease);
}
.feature-card:hover .feature-card__icon { background: var(--accent); color: var(--bg-base); transform: scale(1.08); }
.feature-card__title { font-size: 0.95rem; font-weight: 600; }
.feature-card__desc { font-size: 0.82rem; color: var(--text-sec); }

/* ============================================================
   НАГРАДА / ДОВЕРИЕ
   ============================================================ */
.trust-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  text-align: center;
  background: radial-gradient(120% 220% at 50% 0%, var(--accent-dim) 0%, var(--bg-card) 65%);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 36px 28px;
  box-shadow: var(--shadow-glow-accent);
}
.trust-strip__icon {
  width: 68px; height: 68px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg-base);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 6px var(--accent-dim), 0 8px 24px var(--accent-glow);
}
.trust-strip__icon .icon-lg { width: 1.8em; height: 1.8em; }
.trust-strip__text { max-width: 520px; }
.trust-strip__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.3rem, 2.2vw, 1.6rem); color: var(--accent); margin-bottom: 6px; letter-spacing: -0.01em; }
.trust-strip__sub { font-size: 0.9rem; color: var(--text-sec); letter-spacing: 0.03em; text-transform: uppercase; }

/* Отзыв (реальный, с 2ГИС) */
.review-card {
  max-width: 760px;
  margin: 0 auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 36px;
  position: relative;
}
.review-card__quote-mark {
  font-family: var(--font-display);
  font-size: 3.5rem;
  color: var(--accent);
  line-height: 1;
  opacity: 0.5;
  margin-bottom: 4px;
}
.review-card__text {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text);
  max-width: 68ch;
}
.review-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.review-card__author { display: flex; flex-direction: column; gap: 2px; }
.review-card__name { font-weight: 600; font-size: 0.95rem; }
.review-card__rank { font-size: 0.78rem; color: var(--text-muted); }
.review-card__source {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--text-sec);
}
.review-card__source-badge {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--accent);
  padding: 4px 10px;
  border: 1px solid var(--border-light);
  border-radius: 6px;
}

/* ============================================================
   БАННЕРЫ (БОНУСЫ / АКЦИИ)
   ============================================================ */
.banners__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) { .banners__grid { grid-template-columns: 1fr 1fr; } }

.banner-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16/9;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px;
  transition: var(--ease);
}
.banner-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.banner-card__bg {
  position: absolute; inset: 0;
  z-index: 0;
}
.banner-card__bg img { width: 100%; height: 100%; object-fit: cover; }
.banner-card__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,9,8,0.92) 0%, rgba(10,9,8,0.4) 60%, transparent 100%);
  z-index: 1;
}
.banner-card__content { position: relative; z-index: 2; }
.banner-card__eyebrow { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: 8px; }
.banner-card__title { font-family: 'Bitter', serif; font-size: clamp(1.2rem, 3vw, 1.8rem); margin-bottom: 10px; }
.banner-card__desc { font-size: 0.88rem; color: var(--text-sec); margin-bottom: 20px; }

/* ============================================================
   ВИТРИНА МЕНЮ (главная)
   ============================================================ */
.menu-showcase__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 32px;
  gap: 16px;
}
.menu-showcase__scroll-wrap { overflow: hidden; }
.menu-showcase__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding-bottom: 16px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--border-light) transparent;
}
.menu-showcase__track::-webkit-scrollbar { height: 4px; }
.menu-showcase__track::-webkit-scrollbar-track { background: transparent; }
.menu-showcase__track::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 2px; }

/* ============================================================
   КАРТОЧКА БЛЮДА
   ============================================================ */
.dish-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--ease);
  flex-shrink: 0;
  scroll-snap-align: start;
}
.dish-card:hover { border-color: var(--border-light); transform: translateY(-4px); box-shadow: var(--shadow); }
.dish-card__img {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--bg-elevated);
}
.dish-card__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.dish-card:hover .dish-card__img img { transform: scale(1.05); }
.dish-card__badges { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.dish-card__body { padding: 18px; }
.dish-card__name { font-weight: 600; font-size: 0.95rem; margin-bottom: 4px; }
.dish-card__details { margin: 8px 0 14px; font-size: 0.8rem; }
.dish-card__details summary { color: var(--accent); cursor: pointer; padding: 4px 0; }
.dish-card__details summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.dish-card__desc { font-size: 0.8rem; color: var(--text-sec); margin: 10px 0; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.dish-card__meta { display: flex; align-items: center; justify-content: space-between; }
.dish-card__weight { font-size: 0.78rem; color: var(--text-muted); }
.dish-card__price { font-family: var(--font-mono); font-size: 1.1rem; font-weight: 700; color: var(--accent); }
.dish-card__footer { padding: 0 18px 18px; display: flex; gap: 8px; }
.dish-card__btn { flex: 1; }

/* Showcase width */
.menu-showcase__track .dish-card { width: 240px; }
@media (min-width: 768px)  { .menu-showcase__track .dish-card { width: 260px; } }
@media (min-width: 1024px) { .menu-showcase__track .dish-card { width: 280px; } }

/* ============================================================
   СТАТЬИ — КАРТОЧКА
   ============================================================ */
.article-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--ease);
}
.article-card:hover { border-color: var(--border-light); transform: translateY(-4px); box-shadow: var(--shadow); }
.article-card__img {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--bg-elevated);
}
.article-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.article-card:hover .article-card__img img { transform: scale(1.04); }
.article-card__body { padding: 20px; }
.article-card__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.article-card__date { font-size: 0.78rem; color: var(--text-muted); }
.article-card__title { font-family: 'Bitter', serif; font-size: 1.05rem; margin-bottom: 8px; line-height: 1.35; }
.article-card__excerpt { font-size: 0.83rem; color: var(--text-sec); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ============================================================
   СЕКЦИЯ «ЧТО НОВОГО»
   ============================================================ */
.news { background: var(--bg-card); }
.news__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 32px;
}
@media (min-width: 640px)  { .news__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .news__grid { grid-template-columns: repeat(4, 1fr); } }
.news__actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* ============================================================
   ПОДВАЛ
   ============================================================ */
.footer {
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  padding: 64px 0 32px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
@media (min-width: 640px)  { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; } }

.footer__brand { display: flex; flex-direction: column; gap: 16px; }
.footer__logo-row { display: flex; align-items: center; gap: 12px; }
.footer__logo-mark { width: 32px; height: 32px; color: var(--accent); flex-shrink: 0; }
.footer__emblem { display: block; width: 132px; height: 132px; margin-bottom: 18px; }
.footer__logo-name { font-family: 'Bitter', serif; font-weight: 800; font-size: 1.6rem; color: var(--accent); letter-spacing: -0.01em; }
.footer__logo-sub { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.footer__desc { font-size: 0.85rem; color: var(--text-sec); line-height: 1.7; }
.footer__socials { display: flex; gap: 10px; }
.footer__socials a {
  width: var(--tap-min); height: var(--tap-min);
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-sec);
  transition: var(--ease);
}
.footer__socials a:hover { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }

.footer__col-title { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; margin-bottom: 20px; }
.footer__nav { display: flex; flex-direction: column; gap: 10px; }
.footer__nav a { font-size: 0.88rem; color: var(--text-sec); transition: var(--ease); }
.footer__nav a:hover { color: var(--accent); }
.footer__contact-item { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.footer__contact-label { font-size: 0.72rem; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; }
.footer__contact-val { font-size: 0.88rem; color: var(--text-sec); }
.footer__contact-val a:hover { color: var(--accent); }
.footer__hours-row { display: flex; justify-content: space-between; font-size: 0.83rem; color: var(--text-sec); padding: 6px 0; border-bottom: 1px solid var(--border); }

.footer__bottom {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.footer__copy { font-size: 0.8rem; color: var(--text-muted); }
.footer__links { display: flex; gap: 20px; }
.footer__links a { font-size: 0.8rem; color: var(--text-muted); transition: var(--ease); }
.footer__links a:hover { color: var(--text-sec); }

/* ============================================================
   СТРАНИЦА МЕНЮ (/menu/)
   ============================================================ */
.page-hero {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: calc(var(--h-height) + 40px) 0 40px;
}
.page-hero__title { font-family: 'Bitter', serif; font-size: clamp(1.8rem, 4vw, 3rem); margin-bottom: 8px; }
.page-hero__sub { color: var(--text-sec); }

.menu-page { padding: 0; }
.menu-page__layout {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) { .menu-page__layout { grid-template-columns: 240px 1fr; } }

/* Категории-сайдбар */
.menu-cats {
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  padding: 32px 0;
  position: sticky;
  top: var(--h-height);
  max-height: calc(100vh - var(--h-height));
  overflow-y: auto;
}
.menu-cats__title { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); padding: 0 20px 16px; font-weight: 600; }
.menu-cats__list { display: flex; flex-direction: column; }
.menu-cats__item {
  padding: 12px 20px;
  min-height: var(--tap-min);
  font-size: 0.88rem;
  color: var(--text-sec);
  cursor: pointer;
  transition: var(--ease);
  border-left: 2px solid transparent;
  display: flex; justify-content: space-between; align-items: center;
}
.menu-cats__item:hover { color: var(--text); background: var(--bg-hover); }
.menu-cats__item.active { color: var(--accent); border-left-color: var(--accent); background: var(--accent-dim); }
.menu-cats__count { font-size: 0.72rem; background: var(--bg-elevated); padding: 2px 7px; border-radius: 10px; }

/* Горизонтальные табы (мобайл) */
.menu-tabs {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: var(--h-height);
  z-index: 10;
  overflow-x: auto;
  scrollbar-width: none;
  display: flex;
}
.menu-tabs::-webkit-scrollbar { display: none; }
.menu-tabs__list { display: flex; padding: 0 16px; gap: 4px; min-width: max-content; }
.menu-tabs__item {
  padding: 14px 16px;
  font-size: 0.85rem;
  color: var(--text-sec);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: var(--ease);
}
.menu-tabs__item:hover { color: var(--text); }
.menu-tabs__item.active { color: var(--accent); border-bottom-color: var(--accent); }

.menu-content { padding: 32px 24px; }
.menu-section { margin-bottom: 56px; }
.menu-section__title { font-family: 'Bitter', serif; font-size: 1.5rem; margin-bottom: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.menu-section__time { font-size: 0.78rem; color: var(--accent); margin-bottom: 24px; }
.menu-section__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px)  { .menu-section__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .menu-section__grid { grid-template-columns: repeat(3, 1fr); } }

.menu-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  gap: 12px;
  flex-wrap: wrap;
}

/* ============================================================
   КОРЗИНА (/cart/)
   ============================================================ */
.cart-page { padding-top: var(--h-height); }
.cart-page__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding: 40px 0;
}
@media (min-width: 1024px) { .cart-page__layout { grid-template-columns: 1fr 380px; } }

.cart-items { display: flex; flex-direction: column; gap: 1px; background: var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.cart-item {
  background: var(--bg-card);
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px;
  transition: var(--ease);
}
.cart-item:hover { background: var(--bg-hover); }
.cart-item__img { width: 80px; height: 80px; border-radius: var(--radius); overflow: hidden; background: var(--bg-elevated); }
.cart-item__img img { width: 100%; height: 100%; object-fit: cover; }
.cart-item__name { font-size: 0.95rem; font-weight: 600; margin-bottom: 4px; }
.cart-item__weight { font-size: 0.78rem; color: var(--text-muted); }
.cart-item__controls { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.cart-item__price { font-family: var(--font-mono); font-size: 1rem; font-weight: 700; color: var(--accent); }
.qty-control { display: flex; align-items: center; gap: 8px; }
.qty-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  color: var(--text);
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  transition: var(--ease);
}
@media (max-width: 640px) { .qty-btn { width: var(--tap-min); height: var(--tap-min); } }
.qty-btn:hover { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.qty-val { font-size: 0.9rem; font-weight: 600; min-width: 20px; text-align: center; }
.cart-item__remove { font-size: 0.78rem; color: var(--text-muted); cursor: pointer; transition: var(--ease); }
.cart-item__remove:hover { color: var(--error); }

/* Узкие экраны: 3-колоночный грид (80px/1fr/auto) слишком тесен для длинных
   названий блюд + счётчика количества — переносим управление на вторую строку */
@media (max-width: 480px) {
  .cart-item {
    grid-template-columns: 64px 1fr;
    row-gap: 12px;
  }
  .cart-item__img { width: 64px; height: 64px; }
  .cart-item__controls {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.cart-summary {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  position: sticky;
  top: calc(var(--h-height) + 20px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cart-summary__title { font-family: 'Bitter', serif; font-size: 1.2rem; }
.cart-summary__row { display: flex; justify-content: space-between; align-items: center; font-size: 0.88rem; color: var(--text-sec); }
.cart-summary__total { display: flex; justify-content: space-between; align-items: center; padding-top: 16px; border-top: 1px solid var(--border); }
.cart-summary__total-label { font-weight: 600; }
.cart-summary__total-val { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 700; color: var(--accent); }
.cart-notice {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  background: var(--accent-dim);
  border: 1px solid rgba(196,146,43,0.3);
  border-radius: var(--radius);
  font-size: 0.83rem;
  color: var(--text-sec);
}
.cart-notice.error { background: rgba(196,74,74,0.1); border-color: rgba(196,74,74,0.3); }
.cart-empty {
  text-align: center;
  padding: 80px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.cart-empty__icon { font-size: 4rem; opacity: 0.3; }
.cart-empty__title { font-family: 'Bitter', serif; font-size: 1.5rem; }
.cart-empty__sub { color: var(--text-sec); }

/* Форма заказа */
.order-form { display: flex; flex-direction: column; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label { font-size: 0.8rem; color: var(--text-sec); font-weight: 500; }
.form-input {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  color: var(--text);
  font-size: 0.9rem;
  transition: var(--ease);
  appearance: none;
}
.form-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.form-input::placeholder { color: var(--text-sec); }
.form-input.error { border-color: var(--error); }
.form-error { font-size: 0.75rem; color: var(--error); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } .form-row-3 { grid-template-columns: 1fr; } }

.radio-group { display: flex; gap: 12px; flex-wrap: wrap; }
.radio-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: var(--ease);
  font-size: 0.88rem;
}
.radio-opt input { display: none; }
.radio-opt:has(input:checked), .radio-opt.selected { border-color: var(--accent); background: var(--accent-dim); color: var(--accent); }

/* ============================================================
   СТРАНИЦА ДОСТАВКИ
   ============================================================ */
.delivery-conditions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 48px;
}
.delivery-cond {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-align: center;
}
.delivery-cond__icon { font-size: 2rem; margin-bottom: 12px; }
.delivery-cond__val { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 700; color: var(--accent); margin-bottom: 4px; }
.delivery-cond__label { font-size: 0.82rem; color: var(--text-sec); }
.map-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  height: 400px;
  background: var(--bg-elevated);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  font-size: 0.88rem;
  text-align: center;
}

/* ============================================================
   QR НА TELEGRAM-БОТА БОНУСНОЙ ПРОГРАММЫ
   ============================================================ */
.qr-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px;
  background: #ffffff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), var(--shadow-glow-accent);
  transition: transform var(--ease);
}
.qr-card:hover { transform: translateY(-3px) scale(1.02); }
.qr-card__img { width: 148px; height: 148px; display: block; }
.qr-card__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--bg-base);
}
.qr-card__label .icon { color: var(--accent); }

/* ============================================================
   БОНУСНАЯ ПРОГРАММА
   ============================================================ */
.bonus-hero {
  background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-elevated) 100%);
  border-bottom: 1px solid var(--border);
  padding: calc(var(--h-height) + 60px) 0 60px;
  text-align: center;
}
.bonus-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 48px;
}
.bonus-point {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  transition: var(--ease);
}
.bonus-point:hover { border-color: var(--accent); background: var(--accent-dim); }
.bonus-point__icon { font-size: 2.2rem; }
.bonus-point__val { font-family: var(--font-mono); font-size: 1.6rem; font-weight: 700; color: var(--accent); }
.bonus-point__label { font-size: 0.85rem; color: var(--text-sec); }

/* Contacts share the same CMS settings on every page. */
[data-site-phones] { display:inline-flex; flex-direction:column; gap:2px; }
.header__info [data-site-phones] { align-items:flex-end; }
.footer__hours { font-size:0.83rem; color:var(--text-sec); line-height:2; }
.loyalty-levels { max-width:720px; margin-inline:auto; overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-lg); }
.loyalty-table { width:100%; border-collapse:collapse; text-align:left; }
.loyalty-table caption { padding:20px; color:var(--text-sec); text-align:left; font-size:0.9rem; }
.loyalty-table th, .loyalty-table td { padding:16px 20px; border-top:1px solid var(--border); }
.loyalty-table th { font-size:0.8rem; color:var(--text-sec); }
.loyalty-table td:last-child { color:var(--accent); font-family:var(--font-mono); font-weight:700; }
.guest-offers { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:20px; }
.guest-offer { padding:28px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--bg-card); }
.guest-offer__value { font-family:var(--font-mono); font-size:2rem; color:var(--accent); margin-bottom:16px; }
.guest-offer h3 { font-size:1rem; margin-bottom:10px; }
.guest-offer p { color:var(--text-sec); font-size:0.9rem; }
.delivery-payment { max-width:560px; margin:28px auto; padding:28px; border:1px solid var(--border-light); border-radius:var(--radius-lg); background:var(--bg-card); text-align:center; }
.delivery-payment h3 { font-family:var(--font-display); font-size:1.3rem; margin-bottom:12px; }
.delivery-payment p { color:var(--text-sec); font-size:0.9rem; margin-bottom:16px; }
.delivery-payment .delivery-payment__total { font-size:1.15rem; color:var(--text); }
.delivery-payment__total strong { color:var(--accent); font-family:var(--font-mono); white-space:nowrap; }

.bonus-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.bonus-table th, .bonus-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); text-align: left; }
.bonus-table th { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.bonus-table tr:hover td { background: var(--bg-hover); }
.bonus-table td.accent { color: var(--accent); font-weight: 700; font-family: var(--font-mono); font-size: 1.05rem; }

/* ============================================================
   АКЦИИ
   ============================================================ */
.sale-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) { .sale-grid { grid-template-columns: repeat(2, 1fr); } }

.promo-card__icon-wrap {
  aspect-ratio: 16/7;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(120% 160% at 20% 0%, var(--accent-dim) 0%, var(--bg-elevated) 72%);
  position: relative;
  overflow: hidden;
}
.promo-card__icon-wrap .icon {
  width: 30%;
  height: 30%;
  color: var(--accent);
  filter: drop-shadow(0 10px 28px var(--accent-glow));
  transition: transform 0.4s var(--ease-out);
}
.promo-card:hover .promo-card__icon-wrap .icon { transform: scale(1.08) rotate(-4deg); }
.promo-card__dates-badge {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 2;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(10,9,8,0.72);
  backdrop-filter: blur(4px);
  color: var(--accent);
  border: 1px solid var(--border-light);
}
.promo-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--ease);
  position: relative;
}
.promo-card:hover { border-color: var(--border-light); box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.promo-card__img { aspect-ratio: 16/7; overflow: hidden; background: var(--bg-elevated); position: relative; }
.promo-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.promo-card:hover .promo-card__img img { transform: scale(1.03); }
.promo-card__body { padding: 24px; }
.promo-card__dates { font-size: 0.75rem; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 8px; }
.promo-card__title { font-family: 'Bitter', serif; font-weight: 700; font-size: 1.4rem; margin-bottom: 10px; }
.promo-card__desc { font-size: 0.88rem; color: var(--text-sec); line-height: 1.6; margin-bottom: 20px; }
.promo-card.expired { opacity: 0.6; }
.promo-card.expired .promo-card__title::after { content: ' — завершена'; font-size: 0.8rem; color: var(--text-muted); font-family: 'Manrope', sans-serif; font-weight: 400; }

/* ============================================================
   ГИДЫ (список статей)
   ============================================================ */
.guide-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.filter-btn {
  padding: 10px 18px;
  min-height: var(--tap-min);
  border-radius: 20px;
  font-size: 0.83rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-sec);
  cursor: pointer;
  transition: var(--ease);
}
.filter-btn:hover { border-color: var(--border-light); color: var(--text); }
.filter-btn.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }

.articles-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 48px;
}
@media (min-width: 640px)  { .articles-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .articles-grid { grid-template-columns: repeat(3, 1fr); } }

/* ============================================================
   СТРАНИЦА СТАТЬИ
   ============================================================ */
.article-page { padding-top: var(--h-height); }
.article-cover {
  width: 100%;
  max-height: 480px;
  overflow: hidden;
}
.article-cover img { width: 100%; height: 100%; object-fit: cover; }
.article-layout {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 20px;
}
.article-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.article-meta__date { font-size: 0.83rem; color: var(--text-muted); }
.article-back { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--text-sec); margin-bottom: 32px; transition: var(--ease); }
.article-back:hover { color: var(--accent); }
.article-title { font-family: 'Bitter', serif; font-size: clamp(1.6rem, 4vw, 2.4rem); margin-bottom: 32px; }

/* Типографика статьи */
.article-body { font-size: 1rem; line-height: 1.8; color: var(--text-sec); }
.article-body h2 { font-family: 'Bitter', serif; font-size: 1.5rem; color: var(--text); margin: 40px 0 16px; }
.article-body h3 { font-family: 'Bitter', serif; font-size: 1.2rem; color: var(--text); margin: 32px 0 12px; }
.article-body p { margin-bottom: 20px; }
.article-body ul, .article-body ol { margin: 0 0 20px 24px; }
.article-body li { margin-bottom: 8px; }
.article-body blockquote {
  border-left: 3px solid var(--accent);
  margin: 32px 0;
  padding: 16px 24px;
  background: var(--accent-dim);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-style: italic;
  color: var(--text);
}
.article-body img { border-radius: var(--radius-lg); margin: 28px 0; }
.article-body figcaption { text-align: center; font-size: 0.82rem; color: var(--text-muted); margin-top: -20px; margin-bottom: 28px; }

.read-also {
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  padding: 64px 0;
}
.read-also__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 32px;
}
@media (min-width: 768px) { .read-also__grid { grid-template-columns: repeat(3, 1fr); } }

/* ============================================================
   КОМАНДА
   ============================================================ */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}
.team-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  transition: var(--ease);
}
.team-card:hover { border-color: var(--border-light); transform: translateY(-3px); }
.team-card__photo {
  width: 120px; height: 120px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-card);
}
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card__photo--empty {
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  border: 1px dashed var(--border-light);
}
.team-card__name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.team-card__role { font-size: 0.85rem; color: var(--text-sec); }
.team-card--placeholder { opacity: 0.7; }

/* ============================================================
   О ПАБЕ
   ============================================================ */
.about-story { padding: 80px 0; }
.about-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
@media (min-width: 1024px) { .about-layout { grid-template-columns: 1fr 1fr; align-items: center; } }

.about-text p { margin-bottom: 16px; color: var(--text-sec); line-height: 1.8; }

/* Вкладки-залы */
.room-tour__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.room-tour__tab {
  padding: 10px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-sec);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--ease);
}
.room-tour__tab:hover { border-color: var(--accent); color: var(--text); }
.room-tour__tab.is-active { background: var(--accent); border-color: var(--accent); color: var(--bg-base); }

/* Сцена: фото выбранного зала (кроссфейд между двумя слоями) */
.room-tour__stage {
  position: relative;
  height: clamp(360px, 60vh, 560px);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--bg-elevated);
}
.room-tour__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.6s ease, transform 1.1s ease;
}
.room-tour__photo.is-active { opacity: 1; transform: scale(1); z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .room-tour__photo { transition: opacity 0.2s linear; transform: none; }
}
.room-tour__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(10,9,8,0.92) 0%, rgba(10,9,8,0.15) 55%, rgba(10,9,8,0) 100%);
}
.room-tour__caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 28px 32px; transition: opacity 0.25s ease; }
.room-tour__caption.is-switching { opacity: 0; }
.room-tour__name { font-family: 'Bitter', serif; font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 6px; }
.room-tour__desc { color: var(--text-sec); max-width: 420px; }

.room-tour__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  background: rgba(10,9,8,0.55);
  backdrop-filter: blur(6px);
  color: var(--text);
  font-size: 1.3rem;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: var(--ease);
  z-index: 3;
}
.room-tour__arrow:hover { background: var(--accent); border-color: var(--accent); color: var(--bg-base); }
.room-tour__arrow--prev { left: 16px; }
.room-tour__arrow--next { right: 16px; }
@media (max-width: 640px) { .room-tour__arrow { display: none; } }

.room-tour__photo-dots { position: absolute; top: 20px; right: 20px; display: flex; gap: 8px; z-index: 3; }
.room-tour__photo-dots .room-tour__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: var(--ease);
}
.room-tour__photo-dots .room-tour__dot.is-active { background: var(--accent); width: 22px; border-radius: 4px; }

.room-tour__stage.has-one-photo .room-tour__arrow,
.room-tour__stage.has-one-photo .room-tour__photo-dots { display: none; }

/* ============================================================
   КОНТАКТЫ
   ============================================================ */
.contacts-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  padding: 64px 0;
}
@media (min-width: 1024px) { .contacts-layout { grid-template-columns: 1fr 1fr; } }

.contact-info-block { display: flex; flex-direction: column; gap: 24px; }
.contact-item { display: flex; gap: 16px; }
.contact-item__icon { width: 44px; height: 44px; border-radius: 50%; background: var(--accent-dim); border: 1px solid var(--border-light); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.contact-item__label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
.contact-item__val { font-size: 0.95rem; color: var(--text); }
.contact-item__val a:hover { color: var(--accent); }

/* ============================================================
   СТРАНИЦА 404
   ============================================================ */
.page-404 {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
}
.page-404__num { font-family: 'Bitter', serif; font-size: clamp(5rem, 20vw, 12rem); font-weight: 700; color: var(--accent); line-height: 1; opacity: 0.3; }
.page-404__title { font-family: 'Bitter', serif; font-size: clamp(1.4rem, 3vw, 2rem); margin: 8px 0 16px; }
.page-404__desc { color: var(--text-sec); max-width: 400px; margin: 0 auto 32px; }
.page-404__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   ПОЛИТИКА КОНФИДЕНЦИАЛЬНОСТИ
   ============================================================ */
.privacy-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 80px 20px;
}
.privacy-content h2 { font-family: 'Bitter', serif; font-size: 1.4rem; margin: 40px 0 12px; }
.privacy-content p, .privacy-content li { color: var(--text-sec); line-height: 1.8; margin-bottom: 12px; }
.privacy-content ul { margin-left: 20px; }

/* ============================================================
   УВЕДОМЛЕНИЯ / TOAST
   ============================================================ */
.toast-wrap {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.88rem;
  box-shadow: var(--shadow);
  pointer-events: all;
  animation: toastIn 0.3s ease;
  max-width: 320px;
}
.toast.success { border-color: var(--success); }
.toast.success .toast-icon { color: var(--success); }
.toast.error { border-color: var(--error); }
.toast.error .toast-icon { color: var(--error); }
.toast-icon { font-size: 1.1rem; flex-shrink: 0; }
.toast.fade-out { animation: toastOut 0.3s ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(20px); } }

/* На мобильном toast снизу-справа пересекался бы с плавающей кнопкой VK
   (обе fixed bottom) — переносим уведомления наверх, под шапку */
@media (max-width: 640px) {
  .toast-wrap { top: calc(var(--h-height) + 12px); bottom: auto; right: 12px; left: 12px; }
  .toast { max-width: none; }
  @keyframes toastIn { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes toastOut { to { opacity: 0; transform: translateY(-16px); } }
}

/* ============================================================
   VK WIDGET КНОПКА
   ============================================================ */
.vk-float {
  position: fixed;
  bottom: 24px; left: 24px;
  z-index: 100;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #0077FF;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,119,255,0.4);
  transition: var(--ease);
  font-size: 1.3rem;
}
.vk-float:hover { transform: scale(1.1); box-shadow: 0 6px 24px rgba(0,119,255,0.6); }

/* ============================================================
   УТИЛИТЫ
   ============================================================ */
.text-accent   { color: var(--accent); }
.text-muted    { color: var(--text-muted); }
.text-sec      { color: var(--text-sec); }
.text-center   { text-align: center; }
.font-serif    { font-family: 'Bitter', serif; }
.mt-auto       { margin-top: auto; }
.w-full        { width: 100%; }
.hidden        { display: none !important; }
.flex          { display: flex; }
.flex-col      { flex-direction: column; }
.items-center  { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-8         { gap: 8px; }
.gap-16        { gap: 16px; }
.gap-24        { gap: 24px; }
.mb-8          { margin-bottom: 8px; }
.mb-16         { margin-bottom: 16px; }
.mb-24         { margin-bottom: 24px; }
.mb-32         { margin-bottom: 32px; }
.mb-48         { margin-bottom: 48px; }
.pt-page       { padding-top: var(--h-height); }

/* ============================================================
   ИКОНКИ (единый SVG-набор вместо эмодзи)
   ============================================================ */
.icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  vertical-align: -0.125em;
}
.icon-lg { width: 1.5em; height: 1.5em; }

/* ============================================================
   PRESS-FEEDBACK (тактильный отклик на клик/тап)
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { filter: brightness(1.02); }
}
.btn:active { transform: scale(0.97); }
.qty-btn:active, .filter-btn:active, .feature-card:active .feature-card__icon,
.header__cart:active, .header__socials a:active, .footer__socials a:active {
  transform: scale(0.93);
}
.dish-card__btn.btn:active { transform: scale(0.95); }

/* ============================================================
   SIGNATURE MOTION — «свет проходит сквозь бокал»
   Курсор-спотлайт (тёплый янтарь + холодный фрост-ободок), управляется
   js/motion.js: элемент с классом .spotlight получает --mx/--my (0-100%)
   через rAF-throttled pointermove. Один язык, три места применения
   (hero, акцентная bento-карточка, карточки меню) — см. DESIGN.md §6.
   ============================================================ */
.spotlight {
  position: relative;
  isolation: isolate;
}
.spotlight::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s var(--ease-out);
  background:
    radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), var(--frost-glow), transparent 45%),
    radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), var(--accent-glow), transparent 60%);
  mix-blend-mode: screen;
}
@media (hover: hover) and (pointer: fine) {
  .spotlight:hover::after,
  .spotlight.spotlight--active::after { opacity: 1; }
}

/* Магнитные CTA — только редкие, «первые впечатления» кнопки (hero), НЕ qty/nav */
.magnetic {
  display: inline-flex;
  transition: transform 0.25s var(--ease-spring);
  will-change: transform;
}

/* 3D-тilt акцентной bento-карточки, следует за курсором */
.tilt {
  transform-style: preserve-3d;
  transition: transform 0.35s var(--ease-out);
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .tilt:hover { transition-duration: 0.05s; }
}

/* Одна marquee-лента — первый scroll-hook сразу после hero. Максимум одна на страницу. */
.marquee {
  overflow: hidden;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 18px 0;
  white-space: nowrap;
}
.marquee__track {
  display: inline-flex;
  gap: 48px;
  animation: marqueeScroll 28s linear infinite;
  will-change: transform;
}
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  font-weight: 700;
  color: var(--text-sec);
  letter-spacing: 0.01em;
}
.marquee__item .icon { color: var(--accent); }
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; }
  .marquee__track { animation: none; }
}

/* ============================================================
   SCROLL-REVEAL (управляется js/reveal.js через IntersectionObserver)
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Варианты направления — «каждое появление соответствует тому, что оно раскрывает»,
   а не один и тот же рефлекс на каждой секции (см. impeccable Motion rules). */
.reveal--left  { transform: translateX(-28px); }
.reveal--right { transform: translateX(28px); }
.reveal--scale { transform: scale(0.94); }
.reveal--left.is-visible, .reveal--right.is-visible, .reveal--scale.is-visible { opacity: 1; transform: none; }

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.reveal-stagger.is-visible > * { opacity: 1; transform: none; }

/* ============================================================
   POP-UP АКЦИЙ (управляется из админки, см. js/popup.js)
   ============================================================ */
.popup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(10,9,8,0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out);
}
.popup-backdrop.is-open { opacity: 1; pointer-events: all; }

.popup-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg), var(--shadow-glow-accent);
  overflow: hidden;
  transform: scale(0.94) translateY(12px);
  transition: transform 0.35s var(--ease-spring);
}
.popup-backdrop.is-open .popup-card { transform: none; }

.popup-close {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  width: var(--tap-min); height: var(--tap-min);
  border-radius: 50%;
  background: rgba(10,9,8,0.55);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  transition: var(--ease);
}
.popup-close:hover { background: var(--accent); color: var(--bg-base); }

.popup-card__img { aspect-ratio: 16/9; overflow: hidden; background: var(--bg-card); }
.popup-card__img img { width: 100%; height: 100%; object-fit: cover; }
.popup-card__body { padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.popup-card__eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-size: 0.78rem; font-weight: 600; align-self: flex-start; }
.popup-card__title { font-family: var(--font-display); font-size: 1.5rem; }
.popup-card__desc { color: var(--text-sec); font-size: 0.92rem; line-height: 1.6; }
.popup-card__btn { align-self: flex-start; margin-top: 6px; }

/* Скелетон */
.skeleton {
  background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-hover) 50%, var(--bg-elevated) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius);
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Экран подтверждения заказа */
.order-success {
  text-align: center;
  padding: 60px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.order-success__icon { font-size: 4rem; color: var(--success); }
.order-success__num { font-size: 0.82rem; color: var(--text-muted); letter-spacing: 0.06em; }
.order-success__title { font-family: 'Bitter', serif; font-size: 1.8rem; }
.order-success__sub { color: var(--text-sec); max-width: 400px; }
.order-success__actions { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }