/* WESTO /menu — catalogue v3 ("plate" catalogue).
   Loaded after classic-menu-catalogue-v2.css, which ends with a cascade lock
   of !important rules. Overrides here therefore carry the same or higher
   specificity plus !important on the same property, and only affect /menu
   (body.classic-menu). */

html[data-theme='dark'] body.classic-menu {
  --v3-paper: #0a0d0f;
  --v3-card: #12181c;
  --v3-card-hover: #182227;
  --v3-plate: #0e1417;
  --v3-plate-glow: rgba(127, 216, 223, 0.10);
  --v3-surface: rgba(255, 255, 255, 0.05);
  --v3-surface-strong: rgba(255, 255, 255, 0.09);
  --v3-ink: #f2f5f5;
  --v3-muted: #9cabb0;
  --v3-subtle: #6f7f84;
  --v3-line: rgba(255, 255, 255, 0.09);
  --v3-line-strong: rgba(255, 255, 255, 0.16);
  --v3-accent: #7fd8df;
  --v3-accent-strong: #9be6ec;
  --v3-on-accent: #06282c;
  --v3-gold: #e7c690;
  --v3-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

html[data-theme='light'] body.classic-menu {
  --v3-paper: #f5f2ea;
  --v3-card: #ffffff;
  --v3-card-hover: #fffdf8;
  --v3-plate: #efe9dc;
  --v3-plate-glow: rgba(17, 127, 139, 0.08);
  --v3-surface: rgba(23, 21, 17, 0.045);
  --v3-surface-strong: rgba(23, 21, 17, 0.08);
  --v3-ink: #171512;
  --v3-muted: #6b665d;
  --v3-subtle: #8b857a;
  --v3-line: rgba(23, 21, 17, 0.09);
  --v3-line-strong: rgba(23, 21, 17, 0.16);
  --v3-accent: #0f7f8b;
  --v3-accent-strong: #0b6a75;
  --v3-on-accent: #ffffff;
  --v3-gold: #8a6524;
  --v3-shadow: 0 18px 40px rgba(43, 36, 25, 0.16);
}

/* ---------- Page + shell ---------- */

html[data-theme] body.classic-menu {
  color: var(--v3-ink) !important;
  background:
    radial-gradient(120% 55% at 50% -2rem, var(--v3-plate-glow), transparent 32rem),
    var(--v3-paper) !important;
  -webkit-font-smoothing: antialiased;
}

html[data-theme] body.classic-menu .cm-shell {
  padding: clamp(1.1rem, 3vw, 2.1rem) 0 6.5rem !important;
}

/* ---------- Header ---------- */

html[data-theme] body.classic-menu .cm-header,
html[data-theme] body.classic-menu .cm-header::before,
html[data-theme] body.classic-menu .cm-header::after {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html[data-theme] body.classic-menu .cm-header::before,
html[data-theme] body.classic-menu .cm-header::after { content: none !important; display: none !important; }

html[data-theme] body.classic-menu .cm-header {
  padding: max(0.4rem, var(--cm-safe-top)) 0.75rem 0.35rem !important;
  background: var(--v3-paper) !important;
}

html[data-theme] body.classic-menu .cm-header__bar {
  width: var(--cm-shell) !important;
  max-width: 100% !important;
  min-height: 3.5rem !important;
  height: 3.5rem !important;
  padding: 0 0.25rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  gap: 0.35rem !important;
}

html[data-theme] body.classic-menu .cm-header__start { justify-self: start !important; }
html[data-theme] body.classic-menu .cm-header__actions { justify-self: end !important; gap: 0.15rem !important; }

/* classic-menu.css paints a masked 1px "glass edge" ring on the pseudo
   element; in the flat v3 header the icons sit bare. */
html[data-theme] body.classic-menu :is(.cm-icon-btn, .cm-lang-btn, .cm-table-btn)::before,
html[data-theme] body.classic-menu :is(.cm-icon-btn, .cm-lang-btn, .cm-table-btn)::after {
  content: none !important;
  display: none !important;
}

html[data-theme] body.classic-menu .cm-logo {
  justify-self: center !important;
  width: 7.4rem !important;
  height: 2.1rem !important;
}

html[data-theme] body.classic-menu .cm-icon-btn,
html[data-theme] body.classic-menu .cm-lang-btn,
html[data-theme] body.classic-menu .cm-table-btn {
  min-width: 2.75rem !important;
  min-height: 2.75rem !important;
  width: 2.75rem !important;
  height: 2.75rem !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  color: var(--v3-ink) !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: background 160ms ease, color 160ms ease;
}

html[data-theme] body.classic-menu :is(.cm-icon-btn, .cm-table-btn):hover {
  background: var(--v3-surface) !important;
}

html[data-theme] body.classic-menu :is(.cm-icon-btn, .cm-table-btn):focus-visible {
  outline: 2px solid var(--v3-accent) !important;
  outline-offset: 2px !important;
}

html[data-theme] body.classic-menu .cm-table-btn__label { display: none !important; }

html[data-theme] body.classic-menu .cm-table-btn .table-badge {
  color: var(--v3-on-accent) !important;
  background: var(--v3-accent) !important;
  border: 0 !important;
  font-weight: 800 !important;
  min-width: 1.25rem !important;
  height: 1.25rem !important;
  line-height: 1.25rem !important;
  box-shadow: none !important;
}

@media (max-width: 699px) {
  html[data-theme] body.classic-menu #cm-login { display: none !important; }
}

/* ---------- Category rail ---------- */

html[data-theme] body.classic-menu .cm-cats-wrap {
  width: var(--cm-shell) !important;
  max-width: 100% !important;
  margin: 0.55rem auto 0 !important;
  padding: 0 !important;
}

html[data-theme] body.classic-menu .cm-cats {
  min-height: 0 !important;
  gap: 0.3rem !important;
  padding: 0.35rem !important;
  border: 1px solid var(--v3-line) !important;
  border-radius: 999px !important;
  background: var(--v3-card) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-theme] body.classic-menu .cm-cat {
  width: auto !important;
  min-width: max-content !important;
  min-height: 2.75rem !important;
  flex-direction: row !important;
  gap: 0.45rem !important;
  padding: 0.22rem 0.65rem 0.22rem 0.22rem !important;
  color: var(--v3-muted) !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}

html[data-theme] body.classic-menu .cm-cat:hover { background: var(--v3-surface) !important; }

html[data-theme] body.classic-menu .cm-cat.is-active {
  color: var(--v3-on-accent) !important;
  border-color: transparent !important;
  background: var(--v3-accent) !important;
  box-shadow: none !important;
}

html[data-theme] body.classic-menu :is(.cm-cat__thumb, .cm-cat__thumb--empty) {
  width: 2.2rem !important;
  height: 2.2rem !important;
  flex-basis: 2.2rem !important;
  border-radius: 999px !important;
  object-fit: cover !important;
  filter: none !important;
  background: var(--v3-surface-strong) !important;
}

html[data-theme] body.classic-menu .cm-cat__label {
  color: inherit !important;
  font-size: 0.8rem !important;
  font-weight: inherit !important;
}

html[data-theme] body.classic-menu .cm-cat.is-active .cm-cat__label { color: var(--v3-on-accent) !important; }

/* ---------- Section head + meta ---------- */

html[data-theme] body.classic-menu .cm-section-head {
  max-width: none !important;
  margin: 0 0 0.85rem !important;
  text-align: start !important;
}

html[data-theme] body.classic-menu .cm-section-head > p:last-child {
  display: -webkit-box !important;
  margin: 0.55rem 0 0 !important;
  overflow: hidden !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

html[data-theme] body.classic-menu .cm-section-kicker {
  color: var(--v3-accent) !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase;
}

html[lang='en'] body.classic-menu .cm-section-kicker { letter-spacing: 0.14em !important; }

html[data-theme] body.classic-menu .cm-section-head h2 {
  margin: 0.2rem 0 0.35rem !important;
  color: var(--v3-ink) !important;
  font-size: clamp(1.7rem, 1.1rem + 2.4vw, 2.35rem) !important;
  font-weight: 850 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.25 !important;
}

html[data-theme] body.classic-menu .cm-section-head > p:last-child,
html[data-theme] body.classic-menu .cm-meta {
  color: var(--v3-muted) !important;
  font-size: 0.86rem !important;
  line-height: 1.7 !important;
  max-width: 62ch;
}

html[data-theme] body.classic-menu .cm-meta {
  width: auto !important;
  margin: 0 0 0.9rem !important;
  padding: 0 !important;
  text-align: start !important;
  color: var(--v3-muted) !important;
  font-size: 0.78rem !important;
  font-weight: 650 !important;
}

/* ---------- Order context (QR table banner) ---------- */

html[data-theme] body.classic-menu .cm-order-context {
  color: var(--v3-ink) !important;
  border: 1px solid var(--v3-line) !important;
  background: var(--v3-card) !important;
  box-shadow: none !important;
}

html[data-theme] body.classic-menu .cm-order-context > span {
  color: var(--v3-on-accent) !important;
  background: var(--v3-accent) !important;
}

html[data-theme] body.classic-menu .cm-order-context > strong { color: var(--v3-ink) !important; }

html[data-theme] body.classic-menu .cm-order-context > small { color: var(--v3-muted) !important; }

/* ---------- Search row ---------- */

html[data-theme] body.classic-menu .cm-search-panel__bar {
  border: 1px solid var(--v3-line) !important;
  border-radius: 1.15rem !important;
  background: var(--v3-card) !important;
  box-shadow: var(--v3-shadow) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-theme] body.classic-menu .cm-search-panel input {
  color: var(--v3-ink) !important;
  border: 1px solid var(--v3-line) !important;
  background-color: var(--v3-surface) !important;
}

html[data-theme] body.classic-menu .cm-search-panel input::placeholder { color: var(--v3-subtle) !important; }

html[data-theme] body.classic-menu .cm-search-panel__close {
  color: var(--v3-ink) !important;
  border: 1px solid var(--v3-line) !important;
  border-radius: 0.8rem !important;
  background: var(--v3-surface) !important;
}

html[data-theme] body.classic-menu .cm-search-panel__close:hover { background: var(--v3-surface-strong) !important; }

/* ---------- Grid ---------- */

/* Row cards need width for the photo tile plus readable copy: one column on
   phones (matches the reference's 341px card), then two and three. */
html[data-theme] body.classic-menu .cm-grid,
html[data-theme] body.classic-menu .cm-group__grid {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0.7rem !important;
  align-items: stretch;
}

@media (min-width: 640px) {
  html[data-theme] body.classic-menu .cm-grid,
  html[data-theme] body.classic-menu .cm-group__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.85rem !important;
  }
}

@media (min-width: 1080px) {
  html[data-theme] body.classic-menu .cm-grid,
  html[data-theme] body.classic-menu .cm-group__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }
}

html[data-theme] body.classic-menu .cm-group + .cm-group { margin-top: 2rem !important; }

/* A chip tap jumps to its section; land it below the sticky header (which
   also carries the chip rail) instead of underneath it. Keep the 8px gap in
   sync with CAT_LAND_GAP in classic-menu.js. */
html[data-theme] body.classic-menu .cm-group {
  scroll-margin-top: calc(var(--cm-header-h, 0px) + 8px) !important;
}

html[data-theme] body.classic-menu .cm-group__title {
  position: sticky !important;
  top: calc(var(--cm-header-h, 0px) + 0.25rem) !important;
  z-index: 6 !important;
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  margin: 0 0 0.85rem !important;
  padding: 0.55rem 0.15rem !important;
  border: 0 !important;
  border-bottom: 1px solid var(--v3-line) !important;
  border-radius: 0 !important;
  background: var(--v3-paper) !important;
  box-shadow: none !important;
}

html[data-theme] body.classic-menu .cm-group__name {
  color: var(--v3-ink) !important;
  font-size: 1.08rem !important;
  font-weight: 850 !important;
  letter-spacing: -0.01em !important;
}

html[data-theme] body.classic-menu .cm-group__count {
  color: var(--v3-subtle) !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
}

/* A single-group category already names itself in the section head; the
   sticky bar would only repeat that title. */
html[data-theme] body.classic-menu .cm-grid:has(> .cm-group:only-child) .cm-group__title {
  display: none !important;
}

/* ---------- Card cell ---------- */

html[data-theme] body.classic-menu .cm-cell {
  position: relative;
  display: flex;
  min-width: 0;
}

html[data-theme] body.classic-menu .cm-cell.is-spotlight { grid-column: span 1; }

/* Compact horizontal row, mirroring the reference catalogue: an uncropped
   photo tile at the inline start, then title, label pill, two-line copy and
   the price with its round one-tap add. */
html[data-theme] body.classic-menu .cm-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 0.7rem !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 8.2rem !important;
  padding: 0.55rem !important;
  color: var(--v3-ink) !important;
  border: 1px solid var(--v3-line) !important;
  border-radius: 1.25rem !important;
  background: var(--v3-card) !important;
  box-shadow: none !important;
  overflow: hidden !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  direction: rtl !important;
  text-align: right !important;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease !important;
}

html[lang='en'] body.classic-menu .cm-item {
  direction: ltr !important;
  text-align: left !important;
}

html[data-theme] body.classic-menu .cm-item::after {
  content: none !important;
  display: none !important;
}

html[data-theme] body.classic-menu .cm-item:hover,
html[data-theme] body.classic-menu .cm-item:focus-visible {
  border-color: var(--v3-line-strong) !important;
  background: var(--v3-card-hover) !important;
  box-shadow: var(--v3-shadow) !important;
  transform: translateY(-2px) !important;
}

html[data-theme] body.classic-menu .cm-item:focus-visible {
  outline: 2px solid var(--v3-accent) !important;
  outline-offset: 3px !important;
}

html[data-theme] body.classic-menu .cm-item.is-unavailable { opacity: 0.55 !important; }

html[data-theme] body.classic-menu .cm-item.is-unavailable .cm-item__media img {
  filter: grayscale(0.55) saturate(0.55) opacity(0.75) !important;
}

html[data-theme] body.classic-menu .cm-item.is-featured {
  border-color: color-mix(in srgb, var(--v3-gold) 36%, var(--v3-line)) !important;
}

/* The dish photo is never cropped: it sits complete on a plate surface. */
html[data-theme] body.classic-menu .cm-item__media {
  position: relative !important;
  grid-area: auto !important;
  flex: 0 0 6.9rem !important;
  width: 6.9rem !important;
  height: 7.4rem !important;
  aspect-ratio: auto !important;
  min-height: 0 !important;
  padding: 0.3rem !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 0.95rem !important;
  background:
    radial-gradient(95% 80% at 50% 18%, var(--v3-plate-glow), transparent 72%),
    var(--v3-plate) !important;
  box-shadow: inset 0 0 0 1px var(--v3-line) !important;
  overflow: hidden !important;
}

html[data-theme] body.classic-menu .cm-item__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 0.72rem !important;
  filter: none !important;
  transform: none !important;
}

html[data-theme] body.classic-menu .cm-item:hover .cm-item__media img { transform: none !important; }

html[data-theme] body.classic-menu .cm-item__body {
  grid-area: auto !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0.3rem !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0.12rem 0.1rem 0.12rem 0 !important;
  color: var(--v3-ink) !important;
  direction: rtl !important;
  text-align: right !important;
}

html[lang='en'] body.classic-menu .cm-item__body {
  direction: ltr !important;
  text-align: left !important;
  padding: 0.12rem 0 0.12rem 0.1rem !important;
}

html[data-theme] body.classic-menu .cm-item__name {
  display: -webkit-box !important;
  margin: 0 !important;
  color: var(--v3-ink) !important;
  font-size: 0.98rem !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
  letter-spacing: -0.01em !important;
  overflow: hidden !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
}

html[data-theme] body.classic-menu .cm-item__en { display: none !important; }

/* The reference's «لیبل‌ها» tag: a pill with allergen icons under the title. */
html[data-theme] body.classic-menu .cm-item__labels {
  align-self: flex-start !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.3rem !important;
  max-width: 100% !important;
  min-height: 1.5rem !important;
  padding: 0.1rem 0.55rem !important;
  color: var(--v3-muted) !important;
  border: 1px solid var(--v3-line-strong) !important;
  border-radius: 999px !important;
  background: var(--v3-surface) !important;
  font-size: 0.64rem !important;
  font-weight: 750 !important;
  line-height: 1.2 !important;
  overflow: hidden !important;
}

html[data-theme] body.classic-menu .cm-item__labels-title { white-space: nowrap; }

html[data-theme] body.classic-menu .cm-item__labels-rule {
  flex: 0 0 auto;
  width: 1px;
  height: 0.8rem;
  background: var(--v3-line-strong);
}

html[data-theme] body.classic-menu .cm-item__labels svg {
  flex: 0 0 auto;
  width: 0.95rem;
  height: 0.95rem;
  color: var(--v3-accent);
}

html[data-theme] body.classic-menu .cm-item__labels-more {
  color: var(--v3-subtle);
  font-size: 0.6rem;
  white-space: nowrap;
}

html[data-theme] body.classic-menu .cm-item__summary {
  display: -webkit-box !important;
  margin: 0 !important;
  color: var(--v3-muted) !important;
  font-size: 0.76rem !important;
  line-height: 1.6 !important;
  overflow: hidden !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

html[data-theme] body.classic-menu .cm-item__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.05rem;
}

html[data-theme] body.classic-menu .cm-item__badge {
  position: absolute !important;
  z-index: 2;
  inset-block-end: 0.38rem !important;
  inset-inline-start: 0.38rem !important;
  max-width: calc(100% - 0.8rem) !important;
  padding: 0.12rem 0.45rem !important;
  color: var(--v3-ink) !important;
  border: 1px solid var(--v3-line-strong) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--v3-card) 82%, transparent) !important;
  font-size: 0.6rem !important;
  font-weight: 750 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html[data-theme] body.classic-menu .cm-item__flag {
  position: absolute !important;
  z-index: 2;
  inset-block-start: 0.38rem !important;
  inset-inline-start: 0.38rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  max-width: calc(100% - 0.8rem) !important;
  margin: 0 !important;
  padding: 0.12rem 0.45rem !important;
  color: var(--v3-gold) !important;
  border: 1px solid color-mix(in srgb, var(--v3-gold) 40%, transparent) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--v3-gold) 22%, var(--v3-card)) !important;
  font-size: 0.58rem !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html[data-theme] body.classic-menu .cm-item__price {
  display: flex !important;
  align-items: baseline !important;
  gap: 0.28rem !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--v3-ink) !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

html[data-theme] body.classic-menu .cm-item__price strong {
  color: var(--v3-ink) !important;
  font-size: 1.02rem !important;
  font-weight: 850 !important;
}

html[data-theme] body.classic-menu .cm-item__price span {
  color: var(--v3-muted) !important;
  font-size: 0.68rem !important;
  font-weight: 650 !important;
}

html[data-theme] body.classic-menu .cm-item__price small {
  color: var(--v3-muted) !important;
  font-size: 0.66rem !important;
  font-weight: 750 !important;
}

html[data-theme] body.classic-menu .cm-item__price-unknown {
  color: var(--v3-muted) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  white-space: normal !important;
}

/* One-tap add, only for items that need no modifier choices. */
html[data-theme] body.classic-menu .cm-item__quick {
  position: static;
  inset: auto;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  color: var(--v3-on-accent);
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--v3-accent);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--v3-accent) 26%, transparent);
  cursor: pointer;
  transition: background 160ms ease, transform 120ms ease;
}

html[data-theme] body.classic-menu .cm-item__quick:hover { background: var(--v3-accent-strong); }
html[data-theme] body.classic-menu .cm-item__quick:active { transform: scale(0.92); }
html[data-theme] body.classic-menu .cm-item__quick:focus-visible {
  outline: 2px solid var(--v3-accent) !important;
  outline-offset: 3px !important;
}
html[data-theme] body.classic-menu .cm-item__quick svg { width: 1.05rem; height: 1.05rem; }

/* ---------- Spotlight (chef's pick) ---------- */

@media (min-width: 1080px) {
  html[data-theme] body.classic-menu .cm-cell.is-spotlight { grid-column: span 2; }

  html[data-theme] body.classic-menu .cm-cell.is-spotlight .cm-item__media {
    flex-basis: 9.2rem !important;
    width: 9.2rem !important;
    height: 9.6rem !important;
  }

  html[data-theme] body.classic-menu .cm-cell.is-spotlight .cm-item__name {
    font-size: 1.14rem !important;
  }

  html[data-theme] body.classic-menu .cm-cell.is-spotlight .cm-item__summary {
    font-size: 0.82rem !important;
    -webkit-line-clamp: 3 !important;
  }

  html[data-theme] body.classic-menu .cm-cell.is-spotlight .cm-item__price strong { font-size: 1.16rem !important; }
}

/* ---------- Empty state ---------- */

html[data-theme] body.classic-menu .cm-empty {
  color: var(--v3-muted) !important;
  border: 1px dashed var(--v3-line-strong) !important;
  border-radius: 1.2rem !important;
  background: var(--v3-card) !important;
}

html[data-theme] body.classic-menu .cm-empty__title { color: var(--v3-ink) !important; }
html[data-theme] body.classic-menu .cm-empty__action {
  color: var(--v3-on-accent) !important;
  background: var(--v3-accent) !important;
  border-radius: 999px !important;
}

/* ---------- Detail sheet (reference product modal) ---------- */

.cm-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

html[data-theme] body.classic-menu .cm-detail__backdrop {
  background: rgba(4, 8, 10, 0.55) !important;
  -webkit-backdrop-filter: blur(18px) saturate(0.85) !important;
  backdrop-filter: blur(18px) saturate(0.85) !important;
}

html[data-theme] body.classic-menu .cm-detail__card {
  display: flex !important;
  flex-direction: column !important;
  width: min(25.5rem, calc(100vw - 1.5rem)) !important;
  height: auto !important;
  max-height: min(46rem, calc(100dvh - 1.5rem)) !important;
  color: var(--v3-ink) !important;
  border: 1px solid var(--v3-line) !important;
  border-radius: 1.6rem !important;
  background: var(--v3-paper) !important;
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.45) !important;
  overflow: hidden !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-theme] body.classic-menu .cm-detail__media {
  position: relative !important;
  flex: 0 0 auto !important;
  height: clamp(13rem, 46vh, 21rem) !important;
  margin: 0.55rem 0.55rem 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) !important;
  place-items: center !important;
  border-radius: 1.35rem !important;
  background:
    radial-gradient(95% 80% at 50% 20%, var(--v3-plate-glow), transparent 72%),
    var(--v3-plate) !important;
  box-shadow: inset 0 0 0 1px var(--v3-line) !important;
  overflow: hidden !important;
  touch-action: pan-y;
}

html[data-theme] body.classic-menu .cm-detail__track {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  animation: cm-detail-track-in 220ms ease both;
}

@keyframes cm-detail-track-in {
  from { opacity: 0.35; transform: scale(0.985); }
  to { opacity: 1; transform: none; }
}

html[data-theme] body.classic-menu .cm-detail__media img {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  border-radius: 1.2rem !important;
}

/* Expanded only reveals the full description and the options; the plate keeps
   its hero size and stays at full brightness. */
html[data-theme] body.classic-menu .cm-detail.is-expanded .cm-detail__media img {
  filter: none !important;
  transform: none !important;
}

html[data-theme] body.classic-menu .cm-detail.is-expanded .cm-detail__more {
  display: inline-flex !important;
}

html[data-theme] body.classic-menu .cm-detail__body {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-height: 0 !important;
  margin: 0.55rem !important;
  padding: 0.95rem 1rem 0.6rem !important;
  border: 1px solid var(--v3-line) !important;
  border-radius: 1.35rem !important;
  background: var(--v3-card) !important;
  overflow: hidden !important;
}

html[data-theme] body.classic-menu .cm-detail__scroll {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

html[data-theme] body.classic-menu .cm-detail__headline {
  align-items: center !important;
  gap: 0.6rem !important;
}

html[data-theme] body.classic-menu .cm-detail__headline h3 {
  color: var(--v3-ink) !important;
  font-size: 1.12rem !important;
  font-weight: 850 !important;
  line-height: 1.4 !important;
}

/* The reference modal carries a single localized title; the secondary
   language name only repeated it in a lighter line. */
html[data-theme] body.classic-menu #cm-detail-sub { display: none !important; }

html[data-theme] body.classic-menu .cm-detail__more {
  flex: 0 0 auto !important;
  min-height: 2rem !important;
  padding: 0.26rem 0.72rem !important;
  color: var(--v3-accent-strong) !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--v3-accent) 14%, transparent) !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
}

html[data-theme] body.classic-menu .cm-detail__sub {
  color: var(--v3-muted) !important;
  font-size: 0.7rem !important;
}

html[data-theme] body.classic-menu .cm-detail__desc {
  margin-top: 0.35rem !important;
  color: var(--v3-muted) !important;
  font-size: 0.8rem !important;
  line-height: 1.75 !important;
  -webkit-line-clamp: 2 !important;
  -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%) !important;
  mask-image: linear-gradient(180deg, #000 58%, transparent 100%) !important;
}

html[data-theme] body.classic-menu .cm-detail.is-expanded .cm-detail__desc {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

html[data-theme] body.classic-menu .cm-detail__tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.4rem !important;
  margin-top: 0.8rem !important;
}

html[data-theme] body.classic-menu .cm-detail__tags:empty { display: none !important; }

html[data-theme] body.classic-menu .cm-detail__allergen {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0.42rem !important;
  padding: 0.32rem 0.68rem !important;
  color: var(--v3-accent-strong) !important;
  border-radius: 0.95rem !important;
  background: color-mix(in srgb, var(--v3-accent) 13%, transparent) !important;
  font-size: 0.72rem !important;
  font-weight: 750 !important;
  line-height: 1.4 !important;
}

html[data-theme] body.classic-menu .cm-detail__allergen > strong {
  color: inherit !important;
  font-weight: 850 !important;
}

html[data-theme] body.classic-menu .cm-detail__allergen-rule {
  width: 1px;
  height: 1.1rem;
  background: color-mix(in srgb, var(--v3-accent) 38%, transparent);
}

html[data-theme] body.classic-menu .cm-detail__allergen-item {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
}

html[data-theme] body.classic-menu .cm-detail__allergen-item svg {
  width: 1rem;
  height: 1rem;
}

html[data-theme] body.classic-menu .cm-detail__allergen-item em {
  font-style: normal;
  color: inherit;
  font-weight: 700;
}

html[data-theme] body.classic-menu .cm-detail__price {
  color: var(--v3-ink) !important;
}

html[data-theme] body.classic-menu .cm-detail__footer {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.5rem !important;
  margin-top: auto !important;
  padding: 0.3rem 0.35rem 0.3rem 0.95rem !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--v3-surface-strong) !important;
  box-shadow: inset 0 0 0 1px var(--v3-line) !important;
  direction: rtl !important;
}

html[lang='en'] body.classic-menu .cm-detail__footer { direction: ltr !important; }
html[lang='en'] body.classic-menu .cm-detail__price { order: 1; }
html[lang='en'] body.classic-menu .cm-detail__actions { order: 2; flex-direction: row !important; }

html[data-theme] body.classic-menu .cm-detail__price {
  order: 2;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.08rem !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: start !important;
  white-space: normal !important;
  font-size: 0.82rem !important;
  font-weight: 750 !important;
}

html[data-theme] body.classic-menu .cm-detail__total-label {
  color: var(--v3-ink) !important;
  font-size: 1.02rem !important;
  font-weight: 900 !important;
  line-height: 1.3 !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}

html[data-theme] body.classic-menu .cm-detail__unit-label {
  color: var(--v3-muted) !important;
  font-size: 0.64rem !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
}

html[data-theme] body.classic-menu .cm-detail__actions {
  order: 1;
  display: flex !important;
  flex-direction: row-reverse !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.4rem !important;
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 !important;
}

html[data-theme] body.classic-menu .cm-qty {
  height: 2.5rem !important;
  border: 1px solid var(--v3-line) !important;
  border-radius: 999px !important;
  background: var(--v3-card) !important;
}

html[data-theme] body.classic-menu .cm-qty button {
  min-width: 2rem !important;
  color: var(--v3-ink) !important;
}

html[data-theme] body.classic-menu .cm-qty span {
  min-width: 1.4rem;
  color: var(--v3-ink) !important;
  font-weight: 800 !important;
  text-align: center;
}

html[data-theme] body.classic-menu .cm-detail-add {
  position: relative;
  display: inline-flex !important;
  flex: 0 0 2.75rem !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4rem !important;
  width: 2.75rem !important;
  min-width: 2.75rem !important;
  min-height: 2.75rem !important;
  padding: 0 !important;
  color: var(--v3-on-accent) !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--v3-accent) !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

/* The circle shows only the plus, as in the reference; the label stays in the
   accessibility tree for screen readers. */
html[data-theme] body.classic-menu .cm-detail-add__label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

html[data-theme] body.classic-menu .cm-detail-add svg { width: 1.05rem; height: 1.05rem; }
html[data-theme] body.classic-menu .cm-detail-add:hover:not(:disabled) { background: var(--v3-accent-strong) !important; }
html[data-theme] body.classic-menu .cm-detail-add:disabled { opacity: 0.45 !important; }

/* Glass action circles over the photo, like the reference modal. */
html[data-theme] body.classic-menu :is(.cm-detail__x, .cm-detail__share, .cm-detail__fav) {
  position: absolute;
  z-index: 7;
  display: grid !important;
  place-items: center !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  padding: 0 !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 999px !important;
  background: rgba(10, 14, 16, 0.5) !important;
  box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.25) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  font-size: 1.35rem !important;
  line-height: 1 !important;
  cursor: pointer;
}

html[data-theme] body.classic-menu .cm-detail__x { top: 1.05rem !important; right: 1.05rem !important; left: auto !important; }
html[data-theme] body.classic-menu .cm-detail__share { top: 1.05rem !important; left: 1.05rem !important; right: auto !important; }
html[data-theme] body.classic-menu .cm-detail__fav { top: 1.05rem !important; left: 3.75rem !important; right: auto !important; }

html[data-theme] body.classic-menu :is(.cm-detail__x, .cm-detail__share, .cm-detail__fav):hover {
  background: rgba(10, 14, 16, 0.68) !important;
}

html[data-theme] body.classic-menu .cm-detail__fav.is-active {
  color: #ff8ba2 !important;
  background: rgba(24, 10, 14, 0.62) !important;
}

html[data-theme] body.classic-menu .cm-detail__fav.is-active svg { fill: currentColor !important; }

html[data-theme] body.classic-menu :is(.cm-detail__x, .cm-detail__share, .cm-detail__fav, .cm-detail__media-expand, .cm-detail__navbtn):focus-visible {
  outline: 2px solid var(--v3-accent) !important;
  outline-offset: 2px !important;
}

html[data-theme] body.classic-menu .cm-detail__media-expand {
  position: absolute !important;
  z-index: 5;
  left: 0.7rem !important;
  right: auto !important;
  bottom: 0.7rem !important;
  top: auto !important;
  display: grid !important;
  place-items: center !important;
  width: 2.35rem !important;
  height: 2.35rem !important;
  min-width: 2.35rem !important;
  min-height: 2.35rem !important;
  padding: 0 !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 999px !important;
  background: rgba(10, 14, 16, 0.55) !important;
  box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.25) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  cursor: pointer;
}

html[data-theme] body.classic-menu .cm-detail__media-expand svg {
  width: 1.1rem;
  height: 1.1rem;
  transition: transform 180ms ease;
}

html[data-theme] body.classic-menu .cm-detail.is-photo-full .cm-detail__media-expand svg {
  transform: rotate(180deg);
}

/* Swipe / arrow browsing between the dishes of the current list. */
html[data-theme] body.classic-menu .cm-detail__nav {
  position: absolute;
  z-index: 4;
  inset-inline: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

html[data-theme] body.classic-menu .cm-detail__navbtn {
  pointer-events: auto;
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(10, 14, 16, 0.42);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: background 160ms ease, transform 120ms ease;
}

html[data-theme] body.classic-menu .cm-detail__navbtn:hover { background: rgba(10, 14, 16, 0.64); }
html[data-theme] body.classic-menu .cm-detail__navbtn:active { transform: scale(0.92); }
html[data-theme] body.classic-menu .cm-detail__navbtn svg { width: 1rem; height: 1rem; }

/* Full-screen photo mode escapes the sheet and pins its controls to the
   viewport edges so the whole plate is inspectable. */
html[data-theme] body.classic-menu .cm-detail.is-photo-full .cm-detail__media {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-height: none !important;
  z-index: 6 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: #05080a !important;
  box-shadow: none !important;
}

html[data-theme] body.classic-menu .cm-detail.is-photo-full .cm-detail__media img {
  border-radius: 0 !important;
}

html[data-theme] body.classic-menu .cm-detail.is-photo-full :is(.cm-detail__x, .cm-detail__share, .cm-detail__fav) {
  position: fixed !important;
  z-index: 8 !important;
  top: max(0.85rem, env(safe-area-inset-top, 0px)) !important;
}

html[data-theme] body.classic-menu .cm-detail.is-photo-full .cm-detail__x { right: 1rem !important; left: auto !important; }
html[data-theme] body.classic-menu .cm-detail.is-photo-full .cm-detail__share { left: 1rem !important; right: auto !important; }
html[data-theme] body.classic-menu .cm-detail.is-photo-full .cm-detail__fav { left: 4.5rem !important; right: auto !important; }

html[data-theme] body.classic-menu .cm-detail.is-photo-full .cm-detail__media-expand {
  position: fixed !important;
  top: auto !important;
  bottom: max(1rem, env(safe-area-inset-bottom, 0px)) !important;
  left: 1rem !important;
  z-index: 8 !important;
}

html[data-theme] body.classic-menu .cm-detail.is-photo-full .cm-detail__nav {
  position: fixed !important;
  inset-inline: 1rem !important;
  top: 50% !important;
  z-index: 8;
}

/* ---------- Drawers, cart, modal ---------- */

html[data-theme] body.classic-menu :is(.cm-drawer__panel, .table-drawer__panel, .qty-modal__card) {
  color: var(--v3-ink) !important;
  border-color: var(--v3-line) !important;
  background: var(--v3-paper) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-theme] body.classic-menu :is(.cm-drawer__head h2, .table-drawer__head h2, .qty-modal__card h3) {
  color: var(--v3-ink) !important;
}

html[data-theme] body.classic-menu .table-drawer__head { border-color: var(--v3-line) !important; }

html[data-theme] body.classic-menu .table-drawer__close {
  color: var(--v3-ink) !important;
  border: 1px solid var(--v3-line) !important;
  border-radius: 999px !important;
  background: var(--v3-surface) !important;
}

html[data-theme] body.classic-menu .table-drawer .btn {
  border-radius: 0.9rem !important;
}

html[data-theme] body.classic-menu .table-drawer .btn:not(.btn-ghost) {
  color: var(--v3-on-accent) !important;
  border-color: transparent !important;
  background: var(--v3-accent) !important;
  font-weight: 800 !important;
}

html[data-theme] body.classic-menu .qty-confirm-wrap .glass-button {
  border-radius: 0.9rem !important;
}

html[data-theme] body.classic-menu .table-total-row strong { color: var(--v3-ink) !important; }

html[data-theme] body.classic-menu .table-drawer .field input {
  color: var(--v3-ink) !important;
  border-color: var(--v3-line-strong) !important;
  border-radius: 0.8rem !important;
  background: var(--v3-card) !important;
}

/* Cart line: the price column and stepper cannot share a 229px row, so the
   footer is a deliberate stack — price at the start edge, stepper at the end. */
html[data-theme] body.classic-menu .table-line__foot {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 0.5rem !important;
  margin-top: 0.3rem !important;
}

html[data-theme] body.classic-menu .table-line__prices { align-items: flex-start !important; }

html[data-theme] body.classic-menu .table-line__qty {
  align-self: flex-end !important;
  border-color: var(--v3-line) !important;
  background: var(--v3-surface) !important;
}

html[data-theme] body.classic-menu .table-line__qty button {
  color: var(--v3-ink) !important;
  border-color: var(--v3-line) !important;
  background: var(--v3-card) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-theme] body.classic-menu .toast-add {
  bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px)) !important;
  padding: 0.55rem 1rem !important;
  color: var(--v3-ink) !important;
  border: 1px solid var(--v3-line-strong) !important;
  border-radius: 999px !important;
  background: var(--v3-card) !important;
  box-shadow: var(--v3-shadow) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
}

html[data-theme] body.classic-menu :is(.cm-drawer__backdrop, .table-drawer__backdrop, .qty-modal__backdrop) {
  background: rgba(4, 8, 10, 0.5) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* ---------- Floating cart ---------- */

html[data-theme] body.classic-menu .cm-mini-cart {
  position: fixed;
  z-index: 55;
  inset-inline: 0;
  bottom: calc(0.9rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: fit-content;
  max-width: calc(100vw - 1.5rem);
  margin-inline: auto;
  padding: 0.4rem 0.4rem 0.4rem 0.95rem;
  color: var(--v3-ink);
  border: 1px solid var(--v3-line-strong);
  border-radius: 999px;
  background: var(--v3-card);
  box-shadow: var(--v3-shadow);
  font: inherit;
  cursor: pointer;
  transition: transform 200ms ease, opacity 200ms ease;
}

html[data-theme] body.classic-menu .cm-mini-cart[hidden] { display: none !important; }

html[data-theme] body.classic-menu .cm-mini-cart:active { transform: scale(0.98); }

html[data-theme] body.classic-menu .cm-mini-cart:focus-visible {
  outline: 2px solid var(--v3-accent) !important;
  outline-offset: 3px !important;
}

html[data-theme] body.classic-menu .cm-mini-cart__icon {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
  color: var(--v3-on-accent);
  background: var(--v3-accent);
  flex: 0 0 auto;
}

html[data-theme] body.classic-menu .cm-mini-cart__count {
  font-size: 0.82rem;
  font-weight: 750;
  color: var(--v3-muted);
  white-space: nowrap;
}

html[data-theme] body.classic-menu .cm-mini-cart__total {
  font-size: 0.92rem;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

html[data-theme] body.classic-menu .cm-mini-cart__cta {
  display: inline-flex;
  align-items: center;
  min-height: 2.6rem;
  padding: 0 1rem;
  border-radius: 999px;
  color: var(--v3-on-accent);
  background: var(--v3-accent);
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
}

/* Keep the tray out of the way of open surfaces. */
body.classic-menu:has(#cm-detail:not([hidden])) .cm-mini-cart,
body.classic-menu:has(#table-drawer:not([hidden])) .cm-mini-cart,
body.classic-menu:has(#cm-drawer:not([hidden])) .cm-mini-cart,
body.classic-menu:has(#qty-modal:not([hidden])) .cm-mini-cart {
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.6rem);
}

/* ---------- Call-waiter FAB (table mode) ---------- */

html[data-theme] body.classic-menu .westo-call-fab-wrap {
  bottom: calc(5.4rem + env(safe-area-inset-bottom, 0px)) !important;
  left: 0.75rem !important;
}

html[data-theme] body.classic-menu .westo-call-fab {
  padding: 0.5rem 0.8rem !important;
  gap: 0.4rem !important;
  color: var(--v3-ink) !important;
  border: 1px solid color-mix(in srgb, var(--v3-gold) 42%, transparent) !important;
  border-radius: 999px !important;
  background: var(--v3-card) !important;
  box-shadow: var(--v3-shadow) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-theme] body.classic-menu .westo-call-fab .fab-icon {
  flex: 0 0 auto;
  width: 1rem !important;
  height: 1rem !important;
  overflow: hidden;
  font-size: 0 !important;
  line-height: 0;
  color: transparent !important;
  background: var(--v3-gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E") center / contain no-repeat;
}

html[data-theme] body.classic-menu .westo-call-fab .fab-text {
  font-size: 0.74rem !important;
  color: var(--v3-ink) !important;
}

html[data-theme] body.classic-menu .westo-call-fab .fab-table-badge {
  padding: 1px 6px !important;
  font-size: 10px !important;
  color: var(--v3-gold) !important;
  background: color-mix(in srgb, var(--v3-gold) 14%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--v3-gold) 38%, transparent) !important;
}

html[data-theme] body.classic-menu .westo-call-fab.is-calling {
  color: var(--v3-ink) !important;
  border-color: color-mix(in srgb, #10b981 46%, transparent) !important;
  background: var(--v3-card) !important;
}

/* ---------- Toast ---------- */

html[data-theme] body.classic-menu .cm-toast {
  z-index: 70;
  color: var(--v3-on-accent);
  border-radius: 999px;
  background: var(--v3-accent);
  font-weight: 750;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--v3-accent) 30%, transparent);
}

/* ---------- Responsive tuning ---------- */

@media (max-width: 767px) {
  /* Floating product modal docked to the bottom edge with a safe-area gap. */
  html[data-theme] body.classic-menu .cm-detail {
    align-items: flex-end !important;
    padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom, 0px)) !important;
  }
  html[data-theme] body.classic-menu .cm-detail__media {
    height: clamp(9rem, 40dvh, 22rem) !important;
  }
}

@media (max-height: 560px) and (orientation: landscape) {
  /* Short landscape screens cannot afford a tall plate; keep the CTA on screen. */
  html[data-theme] body.classic-menu .cm-detail {
    align-items: center !important;
    padding: 0.5rem !important;
  }
  html[data-theme] body.classic-menu .cm-detail__media {
    height: clamp(6.5rem, 34dvh, 11rem) !important;
  }
}

@media (max-width: 559px) {
  html[data-theme] body.classic-menu .cm-header { padding-inline: 0.5rem !important; }
  html[data-theme] body.classic-menu .cm-logo { width: 6rem !important; height: 1.8rem !important; }
  html[data-theme] body.classic-menu .cm-cats { border-radius: 1.35rem !important; }
  html[data-theme] body.classic-menu .cm-section-head h2 { font-size: 1.55rem !important; }
  html[data-theme] body.classic-menu .cm-item__media {
    flex-basis: 6.5rem !important;
    width: 6.5rem !important;
    height: 7rem !important;
  }
  html[data-theme] body.classic-menu .cm-item__name { font-size: 0.95rem !important; }
  html[data-theme] body.classic-menu .cm-item__summary { font-size: 0.74rem !important; }
  html[data-theme] body.classic-menu .cm-item__price strong { font-size: 0.98rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme] body.classic-menu .cm-item,
  html[data-theme] body.classic-menu .cm-item__media img,
  html[data-theme] body.classic-menu .cm-item__quick,
  html[data-theme] body.classic-menu .cm-detail__track,
  html[data-theme] body.classic-menu .cm-detail__navbtn,
  html[data-theme] body.classic-menu .cm-detail__media-expand svg,
  html[data-theme] body.classic-menu .cm-mini-cart { transition: none !important; animation: none !important; }
}

/* ---------- Menu identity: editorial masthead + filter sheet ---------- */
/* The masthead is the page's title voice; the section bar underneath is an
   index ribbon, not a second title. Both share the gold hairline language of
   the category rail without touching the product cards. */

html[data-theme] body.classic-menu .cm-section-head {
  position: relative;
  margin: 0.15rem 0 1.5rem !important;
  padding: 0 0 1.1rem !important;
  border-bottom: 1px solid var(--v3-line) !important;
}

html[data-theme] body.classic-menu .cm-section-head::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  /* The accent starts at the reading edge and dissolves into the hairline;
     a fixed stub looked like a stray mark once the description wrapped. */
  background: linear-gradient(to left, var(--v3-gold), transparent 11rem);
}

html[dir='ltr'] body.classic-menu .cm-section-head::after {
  background: linear-gradient(to right, var(--v3-gold), transparent 11rem);
}

html[data-theme] body.classic-menu .cm-section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.5rem !important;
  color: var(--v3-gold) !important;
  font-family: Geist, Vazirmatn, sans-serif;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.3em !important;
  line-height: 1;
  text-transform: uppercase;
}

html[data-theme] body.classic-menu .cm-section-kicker::before {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

html[data-theme] body.classic-menu .cm-section-kicker.is-native {
  font-family: inherit;
  font-size: 0.78rem !important;
  letter-spacing: 0.01em !important;
}

html[data-theme] body.classic-menu .cm-section-head__line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem 0.85rem;
}

html[data-theme] body.classic-menu .cm-section-head h2 {
  margin: 0 !important;
  color: var(--v3-ink) !important;
  font-size: clamp(1.75rem, 1.1rem + 2.35vw, 2.9rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

html[data-theme] body.classic-menu .cm-section-count {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.22rem 0.65rem;
  border: 1px solid var(--v3-line-strong);
  border-radius: 999px;
  color: var(--v3-muted);
  font-size: 0.7rem;
  font-weight: 650;
  line-height: 1.4;
  white-space: nowrap;
}

html[data-theme] body.classic-menu .cm-section-count::before {
  content: '';
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: var(--v3-gold);
}

html[data-theme] body.classic-menu .cm-section-count[hidden] { display: none !important; }

html[data-theme] body.classic-menu .cm-section-head > p:last-child {
  margin: 0.55rem 0 0 !important;
  max-width: 56ch !important;
  color: var(--v3-muted) !important;
  font-size: 0.86rem !important;
  line-height: 1.85 !important;
  -webkit-line-clamp: 2 !important;
}

/* The live count moved into the masthead chip; keep the status region for
   assistive tech without rendering a duplicate line. */
html[data-theme] body.classic-menu .cm-meta {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

html[data-theme] body.classic-menu .cm-group__title {
  align-items: center !important;
  margin: 0 0 0.9rem !important;
  padding: 0.5rem 0.1rem 0.55rem !important;
  background: color-mix(in srgb, var(--v3-paper) 86%, transparent) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid var(--v3-line) !important;
}

html[data-theme] body.classic-menu .cm-group__name {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--v3-ink) !important;
  font-size: 0.84rem !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
}

html[data-theme] body.classic-menu .cm-group__name::before {
  content: '';
  width: 0.36rem;
  height: 0.36rem;
  border-radius: 1px;
  background: var(--v3-gold);
  transform: rotate(45deg);
}

html[data-theme] body.classic-menu .cm-group__count {
  padding: 0.14rem 0.55rem;
  border-radius: 999px;
  background: var(--v3-surface);
  color: var(--v3-subtle) !important;
  font-size: 0.66rem !important;
  font-weight: 650 !important;
}

/* ---------- Filter sheet ---------- */

html[data-theme] body.classic-menu .cm-drawer__panel {
  width: min(23.5rem, 100%);
  border-radius: 1.65rem;
}

html[data-theme='light'] body.classic-menu .cm-drawer__panel {
  border-color: rgba(23, 21, 17, 0.14) !important;
  background: linear-gradient(180deg, #fffdf8 0%, #f4eee3 100%) !important;
}

html[data-theme='dark'] body.classic-menu .cm-drawer__panel {
  border-color: rgba(231, 198, 144, 0.16) !important;
  background: linear-gradient(180deg, #19231f 0%, #0d1311 100%) !important;
}

html body.classic-menu .cm-drawer .cm-drawer__head,
html[data-theme='light'] body.classic-menu .cm-drawer .cm-drawer__head,
html[data-theme='dark'] body.classic-menu .cm-drawer .cm-drawer__head {
  position: relative;
  align-items: flex-start;
  padding: 1.2rem 1.25rem 1.1rem !important;
  color: #f6efe2 !important;
  border-bottom: 1px solid rgba(231, 198, 144, 0.22) !important;
  background:
    radial-gradient(130% 150% at 88% -30%, rgba(231, 198, 144, 0.26), transparent 62%),
    linear-gradient(150deg, #1a2b24 0%, #0c1613 100%) !important;
  overflow: hidden;
}

html body.classic-menu .cm-drawer .cm-drawer__head::after {
  content: '';
  position: absolute;
  inset-inline-end: -2.4rem;
  bottom: -3.2rem;
  width: 7.5rem;
  height: 7.5rem;
  border: 1px solid rgba(231, 198, 144, 0.18);
  border-radius: 50%;
  pointer-events: none;
}

html body.classic-menu .cm-drawer .cm-drawer__heading {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.15rem;
  justify-items: start;
}

html body.classic-menu .cm-drawer .cm-drawer__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #e7c690 !important;
  font-family: Geist, Vazirmatn, sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  line-height: 1;
  text-transform: uppercase;
}

html body.classic-menu .cm-drawer .cm-drawer__kicker::before {
  content: '';
  width: 1.25rem;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

html body.classic-menu .cm-drawer .cm-drawer__kicker.is-native {
  font-family: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.01em;
}

html body.classic-menu .cm-drawer .cm-drawer__head h2 {
  margin: 0.15rem 0 0 !important;
  color: #f8f2e7 !important;
  font-size: 1.32rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  line-height: 1.35 !important;
}

html body.classic-menu .cm-drawer .cm-drawer__summary {
  margin-top: 0.45rem;
  padding: 0.18rem 0.6rem;
  border: 1px solid rgba(231, 198, 144, 0.4);
  border-radius: 999px;
  background: rgba(231, 198, 144, 0.1);
  color: #edd6ac;
  font-size: 0.68rem;
  font-weight: 650;
  line-height: 1.5;
}

html body.classic-menu .cm-drawer .cm-drawer__summary[hidden] { display: none !important; }

html body.classic-menu .cm-drawer .cm-drawer__close {
  position: relative;
  z-index: 1;
  width: 2.75rem !important;
  height: 2.75rem !important;
  color: #f6efe2 !important;
  border: 1px solid rgba(246, 239, 226, 0.22) !important;
  border-radius: 999px !important;
  background: rgba(246, 239, 226, 0.08) !important;
  font-size: 1.2rem;
  box-shadow: none !important;
}

html body.classic-menu .cm-drawer .cm-drawer__close:hover {
  color: #10201d !important;
  border-color: #e7c690 !important;
  background: #e7c690 !important;
}

html body.classic-menu .cm-drawer .cm-drawer__close:focus-visible {
  outline: 2px solid #e7c690;
  outline-offset: 2px;
}

html body.classic-menu .cm-drawer .cm-drawer__body {
  gap: 1rem !important;
  padding: 1.1rem 1.25rem 1.2rem !important;
}

html body.classic-menu .cm-drawer .cm-drawer__card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}

html body.classic-menu .cm-drawer .cm-drawer__card + .cm-drawer__card {
  margin-top: 0.15rem;
  padding-top: 1rem;
  border-top: 1px solid var(--v3-line);
}

html body.classic-menu .cm-drawer .cm-drawer__card h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.65rem !important;
  color: var(--v3-muted) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html body.classic-menu .cm-drawer .cm-drawer__card h3::before {
  content: '';
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 1px;
  background: var(--v3-gold);
  transform: rotate(45deg);
}

html body.classic-menu .cm-drawer .cm-drawer__card-head {
  align-items: center;
  margin-bottom: 0.65rem;
}

html body.classic-menu .cm-drawer .cm-drawer__card-head h3 { margin: 0 !important; }

html body.classic-menu .cm-drawer .cm-drawer__reset {
  min-height: 2.25rem;
  padding: 0.1rem 0.75rem;
  border: 1px solid var(--v3-line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--v3-gold);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
}

html body.classic-menu .cm-drawer .cm-drawer__reset:hover { background: var(--v3-surface); }

html body.classic-menu .cm-drawer .cm-drawer__reset[hidden] { display: none !important; }

html body.classic-menu .cm-drawer .cm-chips {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.45rem !important;
}

html[data-theme='light'] body.classic-menu .cm-drawer .cm-chip,
html[data-theme='dark'] body.classic-menu .cm-drawer .cm-chip,
html body.classic-menu .cm-drawer .cm-chip {
  width: auto;
  min-height: 2.75rem;
  justify-content: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0.8rem;
  color: var(--v3-ink) !important;
  border: 1px solid var(--v3-line-strong) !important;
  border-radius: 999px !important;
  background: transparent !important;
  font-size: 0.79rem !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html body.classic-menu .cm-drawer .cm-chip::after { display: none !important; }

html body.classic-menu .cm-drawer .cm-chip::before {
  content: '';
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--v3-line-strong);
  border-radius: 50%;
  background: transparent;
  color: transparent;
  font-size: 0.6rem;
  font-weight: 800;
  line-height: 1;
}

html body.classic-menu .cm-drawer .cm-chip:hover { border-color: var(--v3-gold) !important; }

html body.classic-menu .cm-drawer .cm-chip.is-on {
  color: var(--v3-paper) !important;
  border-color: var(--v3-ink) !important;
  background: var(--v3-ink) !important;
}

html body.classic-menu .cm-drawer .cm-chip.is-on::before {
  content: '✓';
  color: #10201d;
  border-color: var(--v3-gold);
  background: var(--v3-gold);
}

html body.classic-menu .cm-drawer .cm-lang {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  overflow: visible;
}

html[data-theme='light'] body.classic-menu .cm-drawer .cm-lang button,
html[data-theme='dark'] body.classic-menu .cm-drawer .cm-lang button,
html body.classic-menu .cm-drawer .cm-lang button {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.12rem;
  min-height: 3.5rem;
  padding: 0.5rem 0.3rem;
  color: var(--v3-muted) !important;
  border: 1px solid var(--v3-line-strong) !important;
  border-radius: 0.95rem !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.classic-menu .cm-drawer .cm-lang button:hover { border-color: var(--v3-gold) !important; }

.cm-lang__code {
  font-family: Geist, Vazirmatn, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--v3-gold);
  line-height: 1;
}

.cm-lang__name { font-size: 0.8rem; font-weight: 650; line-height: 1.4; }

html[data-theme='light'] body.classic-menu .cm-drawer .cm-lang button.is-active,
html[data-theme='dark'] body.classic-menu .cm-drawer .cm-lang button.is-active,
html body.classic-menu .cm-drawer .cm-lang button.is-active {
  color: var(--v3-paper) !important;
  border-color: var(--v3-ink) !important;
  background: var(--v3-ink) !important;
  box-shadow: none !important;
}

html body.classic-menu .cm-drawer .cm-lang button.is-active .cm-lang__code {
  color: inherit;
  opacity: 0.72;
}

html body.classic-menu .cm-drawer .cm-lang button:focus-visible {
  outline: 2px solid var(--v3-accent);
  outline-offset: 2px;
}

html body.classic-menu .cm-drawer .cm-drawer__footer {
  gap: 0.1rem !important;
  padding: 0.7rem 1.25rem calc(0.95rem + var(--cm-safe-bottom)) !important;
  border-top: 1px solid var(--v3-line) !important;
  background: transparent !important;
}

html body.classic-menu .cm-drawer .cm-drawer__link {
  min-height: 2.9rem;
  padding: 0.4rem 0.15rem;
  color: var(--v3-ink) !important;
  border: 0 !important;
  border-radius: 0.55rem;
  background: transparent !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
}

html body.classic-menu .cm-drawer .cm-drawer__link + .cm-drawer__link {
  border-top: 1px solid var(--v3-line) !important;
}

html body.classic-menu .cm-drawer .cm-drawer__link:hover {
  color: var(--v3-accent) !important;
  background: transparent !important;
}

html body.classic-menu .cm-drawer .cm-drawer__link-icon {
  flex: 0 0 1.9rem;
  width: 1.9rem;
  height: 1.9rem;
  color: var(--v3-gold) !important;
  background: transparent !important;
}

html body.classic-menu .cm-drawer .cm-drawer__link-chevron { color: var(--v3-subtle) !important; }

@media (max-width: 559px) {
  html[data-theme] body.classic-menu .cm-section-head h2 {
    font-size: clamp(1.65rem, 7.2vw, 2.15rem) !important;
  }
  html[data-theme] body.classic-menu .cm-section-kicker { font-size: 0.62rem !important; }
  html body.classic-menu .cm-drawer .cm-drawer__head { padding: 1.05rem 1.05rem 0.95rem !important; }
  html body.classic-menu .cm-drawer .cm-drawer__body { padding: 1rem 1.05rem 1.05rem !important; }
  html body.classic-menu .cm-drawer .cm-drawer__footer {
    padding: 0.65rem 1.05rem calc(0.8rem + var(--cm-safe-bottom)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.classic-menu .cm-drawer .cm-chip,
  html body.classic-menu .cm-drawer .cm-lang button { transition: none !important; }
}