:root {
  --menu-header-height: 68px;
}

.menu-page {
  min-height: 100vh;
  background: var(--color-bg-soft);
}

.menu-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  min-height: var(--menu-header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) 5%;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.logo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  color: #b85757;
  font-family: var(--font-logo);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  letter-spacing: .5px;
  line-height: 1;
  text-decoration: none;
}

.logo-line {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.logo-en {
  font-family: var(--font-logo);
  font-weight: var(--fw-medium);
  letter-spacing: .04em;
  color: #b85757;
}

.logo-accent {
  color: #b85757;
}

.logo-subtitle {
  display: block;
  font-size: 0.48rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  color: rgba(20, 20, 20, 0.6);
  text-transform: uppercase;
  line-height: 1.2;
  font-family: var(--font-logo);
}

.menu-back-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem .8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  font-family: var(--font-fa);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-smooth), border-color var(--duration-fast) var(--ease-smooth), background-color var(--duration-fast) var(--ease-smooth);
}

.menu-back-link:hover {
  color: var(--color-black);
  border-color: var(--color-gold);
  background-color: var(--color-gold-soft);
}

.menu-main {
  width: min(100% - 2rem, var(--container-max));
  margin-inline: auto;
}

.menu-intro {
  padding: clamp(2.5rem, 8vw, 5rem) 1rem clamp(2rem, 6vw, 3.5rem);
  text-align: center;
}

.menu-intro .section-title {
  margin-bottom: var(--space-sm);
}

.menu-intro-subtitle {
  color: var(--color-text-muted);
  font-family: var(--font-fa);
  font-size: var(--fs-md);
}

.menu-filter-tabs {
  position: sticky;
  top: var(--menu-header-height);
  z-index: calc(var(--z-header) - 1);
  display: flex;
  gap: var(--space-xs);
  overflow-x: auto;
  padding: .75rem 1rem;
  margin-inline: -1rem;
  background: color-mix(in srgb, var(--color-bg) 96%, transparent);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
  scrollbar-width: none;
}

.menu-filter-tabs::-webkit-scrollbar { display: none; }

.menu-filter-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .65rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-bg);
  color: var(--color-text-muted);
  cursor: pointer;
  font: inherit;
  font-family: var(--font-fa);
  font-size: var(--fs-sm);
  scroll-snap-align: center;
  transition: color var(--duration-base) var(--ease-smooth), background-color var(--duration-base) var(--ease-smooth), border-color var(--duration-base) var(--ease-smooth), transform var(--duration-base) var(--ease-smooth);
}

.menu-filter-tab:hover { border-color: var(--color-gold); color: var(--color-black); }
.menu-filter-tab.active { background-color: var(--color-black); border-color: var(--color-black); color: var(--color-text-inverse); }
.menu-filter-tab i { color: var(--color-gold); font-size: 1.1rem; }

.menu-sections {
  padding: var(--space-xl) 0 var(--space-2xl);
}

.menu-section { display: none; padding-block: var(--space-md); }
.menu-section.active { display: block; animation: menuSectionIn .45s var(--ease-smooth) both; }
.menu-section .section-title { margin-bottom: var(--space-md); }

.menu-items-grid {
  display: grid;
  gap: .75rem;
}

.menu-item-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .9rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-base) var(--ease-smooth), transform var(--duration-base) var(--ease-smooth), border-color var(--duration-base) var(--ease-smooth);
}

.menu-item-card:not(.has-image) { grid-template-columns: minmax(0, 1fr) auto; }
.menu-item-card:hover { border-color: var(--color-gold-soft); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.menu-item-visual {
  width: 78px;
  height: 78px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(201, 162, 75, 0.22);
  box-shadow: var(--shadow-sm);
  background: var(--color-bg-soft);
}

.menu-item-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s var(--ease-smooth), filter .35s var(--ease-smooth);
}

.menu-item-card:hover .menu-item-visual img { transform: scale(1.04); filter: saturate(1.07); }
.menu-item-main { min-width: 0; }
.menu-item-heading { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.menu-item-name { margin: 0; color: var(--color-text); font-family: var(--font-fa); font-size: var(--fs-base); font-weight: var(--fw-medium); line-height: var(--lh-tight); }
.menu-item-note { display: block; margin-top: .4rem; color: var(--color-text-muted); font-family: var(--font-fa); font-size: var(--fs-xs); }
.menu-item-price { flex: 0 0 auto; color: var(--color-gold-deep); font-family: var(--font-fa); font-size: var(--fs-sm); font-weight: var(--fw-bold); text-align: left; direction: rtl; }
.menu-price-value, .menu-price-call { white-space: nowrap; }
.menu-price-table { display: grid; gap: .3rem; font-size: var(--fs-xs); text-align: left; }
.menu-price-table span { white-space: nowrap; }

@media (max-width: 640px) {
  .menu-item-card {
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: start;
  }

  .menu-item-card:not(.has-image) {
    grid-template-columns: minmax(0, 1fr);
  }

  .menu-item-price {
    grid-column: 2;
    justify-self: end;
  }

  .menu-item-visual {
    width: 72px;
    height: 72px;
  }
}

.badge-popular {
  display: inline-flex;
  align-items: center;
  padding: .2rem .5rem;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-gold), var(--color-gold-deep));
  color: var(--color-text-inverse);
  font-family: var(--font-fa);
  font-size: .68rem;
  font-weight: var(--fw-regular);
  white-space: nowrap;
}

.menu-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .7rem 1.2rem;
  padding: var(--space-md) 1rem;
  background: var(--color-black);
  color: var(--color-text-inverse);
  font-family: var(--font-fa);
  text-align: center;
}

.menu-footer-label { flex-basis: 100%; color: var(--color-gold-soft); font-size: var(--fs-sm); }
.menu-footer a { display: inline-flex; align-items: center; gap: .35rem; color: var(--color-text-inverse); font-size: var(--fs-sm); text-decoration: none; }
.menu-footer a:hover { color: var(--color-gold); }

@keyframes menuSectionIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (min-width: 768px) {
  .menu-intro { padding-inline: 0; }
  .menu-intro .section-title { font-size: var(--fs-2xl); }
  .menu-filter-tabs { justify-content: center; overflow-x: visible; margin-inline: 0; }
  .menu-sections { padding-inline: 0; }
  .menu-items-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
}

@media (min-width: 1100px) {
  .menu-items-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}