/* ============================================================================
   Публичная часть — витрина кафе. Направление «Золото на угле».
   Использует только токены из tokens.css; локальные производные — через color-mix.
   ========================================================================= */

.site {
  --head-h: 74px;
  --veil-warm: color-mix(in srgb, var(--accent) 13%, transparent);
  --veil-deep: color-mix(in srgb, var(--accent-deep) 11%, transparent);
  --glass: color-mix(in srgb, var(--bg-base) 84%, transparent);
  --glass-soft: color-mix(in srgb, var(--bg-base) 60%, transparent);
  --line-soft: color-mix(in srgb, var(--accent) 18%, transparent);
  background: var(--bg-base);
}

/* Атмосферная глубина: тёплые подсветки под всем документом. */
.site::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(72% 46% at 50% -8%, var(--veil-warm), transparent 68%),
    radial-gradient(46% 38% at 96% 22%, var(--veil-deep), transparent 70%),
    radial-gradient(56% 42% at 2% 78%, var(--veil-deep), transparent 72%);
}

/* Лёгкое зерно поверх фона. */
.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ── Шапка ─────────────────────────────────────────────────────────────── */
.site-head {
  position: sticky;
  top: 0;
  z-index: 60;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg-base) 92%, transparent), transparent);
  transition: background var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out),
              backdrop-filter var(--d-base) var(--e-out);
  border-bottom: 1px solid transparent;
}
.site-head.is-stuck {
  background: var(--glass);
  backdrop-filter: blur(16px) saturate(1.15);
  border-bottom-color: var(--border);
}
.site-head__in {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: var(--head-h);
  padding-block: var(--s-2);
}

.site-logo {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: none;
  min-height: 44px;
}
.site-logo img { flex: none; }
.site-logo__txt { display: grid; line-height: 1.15; }
.site-logo__txt b {
  font-family: var(--f-display);
  font-size: 1.42rem;
  font-weight: 600;
  letter-spacing: .16em;
  background: var(--grad-gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.site-logo__txt em {
  font-style: normal;
  font-size: .62rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.site-nav {
  display: none;
  align-items: center;
  gap: var(--s-2);
  margin-inline: auto;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--s-3);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--fg-secondary);
  border-radius: var(--r-sm);
  position: relative;
  transition: color var(--d-fast) var(--e-out);
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: var(--s-3);
  right: var(--s-3);
  bottom: 10px;
  height: 1px;
  background: var(--grad-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-base) var(--e-out);
}
.site-nav a:hover { color: var(--fg-primary); }
.site-nav a:hover::after,
.site-nav a[aria-current]::after { transform: scaleX(1); }
.site-nav a[aria-current] { color: var(--accent-strong); }

.site-head__cta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-left: auto;
  flex: none;
}
.site-tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  min-width: 44px;
  padding-inline: var(--s-2);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--fg-secondary);
  white-space: nowrap;
  transition: color var(--d-fast) var(--e-out);
}
.site-tel:hover { color: var(--accent-strong); }
.site-tel svg { flex: none; }
.site-tel__num { display: none; }
.site-head__btn { min-height: 44px; }

/* ── Герой ─────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  display: grid;
  align-content: center;
  min-height: min(92svh, 880px);
  padding-block: var(--s-11) var(--s-10);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.hero__glow {
  position: absolute;
  inset: -25% -10% auto;
  height: 120%;
  z-index: -1;
  background:
    radial-gradient(42% 46% at 50% 34%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%),
    radial-gradient(70% 55% at 50% 0%, color-mix(in srgb, var(--accent-deep) 16%, transparent), transparent 75%);
}
.hero__in { display: grid; justify-items: center; gap: var(--s-4); }

.hero__logo {
  width: clamp(84px, 12vw, 128px);
  height: auto;
  filter: drop-shadow(0 18px 40px color-mix(in srgb, var(--accent) 26%, transparent));
}
.hero__eyebrow { margin: var(--s-2) 0 0; }

.hero__title {
  display: grid;
  gap: var(--s-3);
  font-size: var(--t-hero);
  font-weight: 600;
  line-height: .96;
  margin: 0;
}
.hero__word {
  display: inline-block;
  letter-spacing: .1em;
  padding-inline: .06em;
}
.hero__ru {
  font-family: var(--f-ui);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: .52em;
  text-transform: uppercase;
  color: var(--fg-muted);
  padding-left: .52em;
}

.hero__sub {
  max-width: 46ch;
  margin: 0;
  font-size: var(--t-lead);
  color: var(--fg-secondary);
  text-wrap: balance;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-3);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2) var(--s-5);
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.hero__meta li { position: relative; }
.hero__meta li + li::before {
  content: "";
  position: absolute;
  left: calc(var(--s-5) / -2);
  top: 50%;
  width: 3px;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .7;
}

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: var(--s-6);
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
}
.hero__scroll span {
  display: block;
  width: 1px;
  height: 34px;
  background: linear-gradient(to bottom, transparent, var(--accent));
  animation: scroll-pulse 2.4s var(--e-in-out) infinite;
}
@keyframes scroll-pulse {
  0%, 100% { opacity: .3; transform: scaleY(.6); transform-origin: top; }
  50%      { opacity: 1;  transform: scaleY(1);   transform-origin: top; }
}

/* Cormorant по умолчанию рисует старостильные цифры — в заголовках нужны прямые. */
.hero__title, .sec__title, .pagehead__title, .dishview__title, .about__lead,
.svc__title, .note__title, .contacts__lead, .site-foot__name, .empty__title {
  font-variant-numeric: lining-nums;
}

/* ── Секции ────────────────────────────────────────────────────────────── */
.sec { padding-block: clamp(48px, 7vw, 104px); }
.sec--menu { position: relative; }
.sec--menu::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--bg-sunken) 70%, transparent), transparent);
}
.sec__in { display: grid; gap: var(--s-8); }
.sec__head { display: grid; gap: var(--s-3); max-width: 62ch; }
.sec__head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-5);
  max-width: none;
  flex-wrap: wrap;
}
.sec__head--row > div { display: grid; gap: var(--s-3); }
.sec__title { font-size: var(--t-h2); font-weight: 500; text-wrap: balance; }
.sec__lead { margin: 0; color: var(--fg-secondary); font-size: var(--t-lead); }
.sec__more { margin: var(--s-2) 0 0; text-align: center; }

/* ── О заведении ───────────────────────────────────────────────────────── */
.about {
  display: grid;
  gap: var(--s-8);
}
.about__text { display: grid; gap: var(--s-4); color: var(--fg-secondary); max-width: 68ch; }
.about__text p { margin: 0; }
.about__lead {
  font-family: var(--f-display);
  font-size: var(--t-h3);
  line-height: 1.4;
  color: var(--fg-primary);
}

.facts {
  display: grid;
  gap: var(--s-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.fact {
  display: grid;
  gap: 6px;
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, var(--bg-raised), var(--bg-panel));
  position: relative;
  overflow: hidden;
}
.fact::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-soft) 40%, transparent);
}
.fact__val {
  font-size: 1.9rem; font-weight: 600; color: var(--accent-strong); line-height: 1.1;
  font-variant-numeric: lining-nums;
}
.fact__label { font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); }

/* ── Услуги ────────────────────────────────────────────────────────────── */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: var(--s-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.svc {
  display: grid;
  gap: var(--s-3);
  align-content: start;
  padding: var(--s-6);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
  transition: border-color var(--d-base) var(--e-out), transform var(--d-base) var(--e-out),
              background var(--d-base) var(--e-out);
}
.svc:hover {
  border-color: var(--accent-line);
  transform: translateY(-3px);
  background: var(--bg-panel);
}
.svc__icon { width: 30px; height: 30px; color: var(--accent); }
.svc__title { font-family: var(--f-display); font-size: var(--t-h3); font-weight: 600; }
.svc p { margin: 0; color: var(--fg-secondary); font-size: var(--t-sm); }

/* ── Сетка блюд ────────────────────────────────────────────────────────── */
.dishes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--s-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.dishes--preview { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }


.dish {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
  overflow: hidden;
  transition: transform var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out),
              box-shadow var(--d-base) var(--e-out);
}
.dish:hover { transform: translateY(-4px); border-color: var(--accent-line); box-shadow: var(--shadow-lg); }
.dish:focus-within { outline: 2px solid var(--accent-strong); outline-offset: 3px; }

.dish__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bg-sunken);
  overflow: hidden;
}
.dish__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--d-slow) var(--e-out);
}
.dish:hover .dish__img { transform: scale(1.045); }
.dish__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 45%;
  background: linear-gradient(to top, color-mix(in srgb, var(--bg-sunken) 78%, transparent), transparent);
  pointer-events: none;
}

.dish__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  flex: 1;
  padding: var(--s-5);
}
.dish__name {
  margin: 0;
  font-variant-numeric: lining-nums;
  font-family: var(--f-display);
  font-size: 1.28rem;
  font-weight: 600;
  line-height: 1.22;
  color: var(--fg-primary);
}
.dish__link { transition: color var(--d-fast) var(--e-out); }
.dish__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.dish:hover .dish__link { color: var(--accent-strong); }
.dish__link:focus-visible { outline: none; }

.dish__desc {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--fg-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dish__ings {
  margin: 0;
  font-size: var(--t-xs);
  color: var(--fg-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dish__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin: auto 0 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
}
.dish__weight {
  font-size: var(--t-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.dish__price { font-size: 1.06rem; font-weight: 700; color: var(--accent-strong); white-space: nowrap; }
.dish__ask { font-size: var(--t-xs); font-weight: 500; color: var(--fg-muted); text-transform: none; letter-spacing: 0; }

/* Заглушка вместо фотографии: монограмма на золотом градиенте. */
.ph {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 100%;
  background:
    radial-gradient(110% 90% at 50% 6%, color-mix(in srgb, var(--accent) 17%, transparent), transparent 68%),
    linear-gradient(152deg, var(--c-coal-700) 0%, var(--c-coal-850) 58%, var(--c-coal-800) 100%);
}
.ph::after {
  content: "";
  position: absolute;
  inset: var(--s-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  pointer-events: none;
}
.ph__mark { width: 34%; max-width: 104px; height: auto; opacity: .45; }
.ph--lg { aspect-ratio: 4 / 3; border-radius: var(--r-xl); position: relative; }
.ph--lg .ph__mark { width: 26%; }

/* ── Лояльность ────────────────────────────────────────────────────────── */
.loyal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: var(--s-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.loyal__item {
  display: grid;
  gap: var(--s-2);
  align-content: start;
  padding: var(--s-6) var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-panel);
  text-align: center;
}
.loyal__val {
  display: block; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem); font-weight: 600; line-height: 1;
  font-variant-numeric: lining-nums;
}
.loyal__txt { font-size: var(--t-sm); color: var(--fg-secondary); }

.notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--s-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.note {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-6);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-lg);
  background: var(--accent-soft);
}
.note__title { font-family: var(--f-display); font-size: var(--t-h3); font-weight: 600; color: var(--accent-strong); }
.note p { margin: 0; color: var(--fg-secondary); font-size: var(--t-sm); }

/* ── Контакты ──────────────────────────────────────────────────────────── */
.contacts { display: grid; gap: var(--s-6); }
.contacts__card {
  display: grid;
  gap: var(--s-5);
  padding: var(--s-7);
  font-style: normal;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: linear-gradient(160deg, var(--bg-raised), var(--bg-panel));
}
.contact { display: grid; gap: 4px; margin: 0; }
.contact__label {
  font-size: var(--t-eyebrow);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 600;
}
.contact__val { color: var(--fg-primary); }
a.contact__val {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  transition: color var(--d-fast) var(--e-out);
}
a.contact__val:hover { color: var(--accent-strong); }
.contact__val--big { font-family: var(--f-display); font-size: var(--t-h3); font-weight: 600; font-variant-numeric: lining-nums; }

.contacts__cta {
  display: grid;
  gap: var(--s-5);
  align-content: center;
  padding: var(--s-7);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-xl);
  background:
    radial-gradient(90% 110% at 100% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 65%),
    var(--bg-raised);
}
.contacts__lead { margin: 0; font-size: var(--t-h3); line-height: 1.35; }
.contacts__btns { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.contacts__hint { margin: 0; font-size: var(--t-xs); color: var(--fg-muted); letter-spacing: .06em; }

/* ── Подвал ────────────────────────────────────────────────────────────── */
.site-foot { margin-top: var(--s-9); background: var(--bg-sunken); }
.site-foot__in {
  display: grid;
  gap: var(--s-7);
  padding-block: var(--s-9) var(--s-7);
}
.site-foot__brand { display: grid; gap: var(--s-2); justify-items: start; }
.site-foot__name { margin: 0; font-size: 1.6rem; font-weight: 600; letter-spacing: .14em; display: inline-block; }
.site-foot__tag { margin: 0; font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-muted); }
.site-foot__col { display: grid; gap: 6px; align-content: start; }
.site-foot__col p { margin: 0; font-size: var(--t-sm); color: var(--fg-secondary); }
.site-foot__col .site-foot__h {
  margin: 0 0 var(--s-2);
  font-size: var(--t-eyebrow);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}
.site-foot__col a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  transition: color var(--d-fast) var(--e-out);
}
.site-foot__col a:hover { color: var(--accent-strong); }

.site-foot__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-block: var(--s-5) var(--s-7);
  border-top: 1px solid var(--border);
}
.site-foot__legal { margin: 0; font-size: var(--t-xs); color: var(--fg-muted); }
.site-foot__portal {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-muted);
  transition: color var(--d-fast) var(--e-out);
}
.site-foot__portal:hover { color: var(--accent); }

/* ── Шапка внутренних страниц ──────────────────────────────────────────── */
.pagehead {
  position: relative;
  padding-block: clamp(48px, 7vw, 96px) var(--s-7);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.pagehead__glow {
  position: absolute;
  inset: -60% 0 auto;
  height: 180%;
  z-index: -1;
  background: radial-gradient(46% 42% at 50% 46%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 70%);
}
.pagehead__in { display: grid; justify-items: center; gap: var(--s-3); }
.pagehead__title { font-size: var(--t-h1); font-weight: 500; letter-spacing: .02em; }
.pagehead__lead { margin: 0; max-width: 52ch; color: var(--fg-secondary); font-size: var(--t-lead); text-wrap: balance; }

/* ── Липкая полоса разделов меню ───────────────────────────────────────── */
.catbar {
  position: sticky;
  top: var(--head-h);
  z-index: 40;
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(1.1);
  border-block: 1px solid var(--border);
}
.chips {
  display: flex;
  gap: var(--s-2);
  list-style: none;
  margin: 0;
  padding: var(--s-3) 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 var(--s-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-full);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--fg-secondary);
  white-space: nowrap;
  transition: color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out),
              background var(--d-fast) var(--e-out);
}
.chip:hover { color: var(--fg-primary); border-color: var(--accent-line); background: var(--bg-hover); }
.chip.is-on {
  color: var(--fg-ongold);
  background: var(--grad-gold);
  border-color: transparent;
}
.chip__n { font-size: var(--t-xs); opacity: .8; font-variant-numeric: tabular-nums; }

/* ── Группы меню ───────────────────────────────────────────────────────── */
.menu-body { display: grid; gap: var(--s-9); padding-block: var(--s-8) var(--s-10); }
.menu-group { display: grid; gap: var(--s-5); scroll-margin-top: calc(var(--head-h) + 78px); }
.menu-group__head { display: flex; align-items: center; gap: var(--s-4); }
.menu-group__title { font-size: var(--t-h2); font-weight: 500; font-variant-numeric: lining-nums; }
.menu-group__title--sub { font-size: var(--t-h3); color: var(--fg-secondary); }
.menu-group__rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-soft), transparent); }
.menu-group__n {
  font-size: var(--t-xs);
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.menu-group__desc { margin: calc(var(--s-3) * -1) 0 0; color: var(--fg-secondary); max-width: 70ch; }
.menu-body__back { margin: 0; }
.menu-body__note {
  margin: 0;
  padding-top: var(--s-6);
  border-top: 1px solid var(--border);
  font-size: var(--t-sm);
  color: var(--fg-muted);
  max-width: 76ch;
}

/* ── Карточка блюда (страница) ─────────────────────────────────────────── */
.dish-page { display: grid; gap: var(--s-8); padding-block: var(--s-6) var(--s-10); }

.crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: var(--t-xs);
  color: var(--fg-muted);
}
.crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  color: var(--fg-secondary);
  transition: color var(--d-fast) var(--e-out);
}
.crumbs a:hover { color: var(--accent-strong); }
.crumbs span[aria-hidden] { opacity: .45; }
.crumbs__here { color: var(--fg-primary); }

.dishview { display: grid; gap: var(--s-7); align-items: start; }
.dishview__media {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-sunken);
  box-shadow: var(--shadow-lg);
}
.dishview__img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.dishview__media .ph { aspect-ratio: 4 / 3; }

.dishview__info { display: grid; gap: var(--s-4); align-content: start; }
.dishview__title { font-size: var(--t-h1); font-weight: 500; margin: 0; text-wrap: balance; }
.dishview__desc { margin: 0; font-size: var(--t-lead); color: var(--fg-secondary); }
.dishview__price {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin: 0;
  padding-block: var(--s-4);
  border-block: 1px solid var(--border);
}
.dishview__money {
  font-family: var(--f-display); font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem);
  font-weight: 600; line-height: 1; display: inline-block;
  font-variant-numeric: lining-nums tabular-nums;
}
.dishview__money--ask { font-size: var(--t-h3); color: var(--fg-secondary); }
.dishview__weight { font-size: var(--t-sm); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); }

.dishview__block { display: grid; gap: 6px; }
.dishview__label {
  margin: 0;
  font-size: var(--t-eyebrow);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}
.dishview__text { margin: 0; color: var(--fg-secondary); }
.dishview__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }
.dishview__note { margin: 0; font-size: var(--t-xs); color: var(--fg-muted); max-width: 60ch; }

.sec--similar { padding-block: var(--s-8) 0; display: grid; gap: var(--s-6); }

/* ── Пустые состояния и ошибки ─────────────────────────────────────────── */
.empty p { margin: 0; max-width: 52ch; }
.empty--err { border-color: color-mix(in srgb, var(--c-danger) 38%, transparent); }
.empty--err .empty__icon { color: var(--c-danger); opacity: .8; }

/* ── Появление секций по скроллу ───────────────────────────────────────── */
.has-reveal .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-out);
}
.has-reveal .reveal.is-in { opacity: 1; transform: none; }

/* ── Адаптив ───────────────────────────────────────────────────────────── */
@media (min-width: 700px) {
  .hero__meta { flex-direction: row; }
  .hero__meta li + li::before { content: ""; }
}

@media (max-width: 699.98px) {
  .hero__meta { flex-direction: column; gap: var(--s-1); }
  .hero__meta li + li::before { display: none; }
}

@media (min-width: 560px) {
  .site-tel__num { display: inline; }
  .facts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
}

@media (min-width: 900px) {
  .site-nav { display: flex; }
  .about { grid-template-columns: 1.15fr .85fr; align-items: start; gap: var(--s-10); }
  .facts { grid-template-columns: 1fr; }
  .contacts { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .dishview { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: var(--s-9); }
  .site-foot__in { grid-template-columns: 1.2fr 1fr 1fr 1fr; }
}

@media (min-width: 1120px) {
  .dishes--preview { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 899.98px) {
  .site-foot__in { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
}

@media (max-width: 559.98px) {
  .site { --head-h: 64px; }
  .site-logo img { width: 36px; height: 36px; }
  .site-logo__txt b { font-size: 1.2rem; }
  .hero { min-height: auto; padding-block: var(--s-9) var(--s-10); }
  .hero__scroll { display: none; }
  .dishes { grid-template-columns: 1fr; }
  .contacts__card, .contacts__cta { padding: var(--s-5); }
  .menu-group__head { gap: var(--s-3); }
}

/* ── Уважение к prefers-reduced-motion (сверх глобального правила) ─────── */
@media (prefers-reduced-motion: reduce) {
  .has-reveal .reveal { opacity: 1 !important; transform: none !important; }
  .hero__scroll span { animation: none; opacity: .6; }
  .dish:hover { transform: none; }
  .dish:hover .dish__img { transform: none; }
  .svc:hover { transform: none; }
}

@media print {
  .site-head, .catbar, .hero__scroll, .grain, .site-foot__portal { display: none !important; }
  .has-reveal .reveal { opacity: 1 !important; transform: none !important; }
}

/* Якоря не должны прятаться под липкой шапкой. */
.sec[id], .hero[id], .pagehead[id] { scroll-margin-top: calc(var(--head-h) + var(--s-4)); }