/* Εύγευστο — interactive μενού (overlay & πλήρης σελίδα) */
.mn { display: flex; flex-direction: column; height: 100%; background: var(--coal); color: var(--bone); overflow: hidden; }

/* ---------- Header ---------- */
.mn-head { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 22px; padding: 16px 28px; background: var(--deep); border-bottom: 1px solid var(--line); }
.mn-brand { display: flex; align-items: center; gap: 16px; }
.mn-logo { width: 104px; color: var(--bone); }
.mn-title { font-size: 2.3rem; line-height: 1; }
.mn-mode { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(241,232,218,.05); box-shadow: inset 0 0 0 1px var(--line); }
.mn-mode button { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; cursor: pointer; padding: .55em 1.2em; border-radius: 999px; font-family: var(--display); font-weight: 800; font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; color: var(--bone-dim); transition: background .25s, color .25s; white-space: nowrap; }
.mn-mode button svg { width: 17px; height: 17px; }
.mn-mode button[aria-selected="true"] { background: var(--ember); color: #fff; box-shadow: 0 8px 24px -10px rgba(var(--ember-a),.9); }
.mn-search { display: flex; align-items: center; gap: 10px; justify-self: end; width: min(320px, 100%); border-radius: 999px; padding: 0 16px; background: rgba(241,232,218,.05); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s; }
.mn-search:focus-within { box-shadow: inset 0 0 0 1px var(--ember); }
.mn-search svg { width: 17px; height: 17px; color: var(--ember-2); flex: none; }
.mn-search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--bone); font: inherit; font-size: 16px; padding: 10px 0; }
.mn-search input::placeholder { color: var(--bone-faint); }
.mn-tools { display: flex; align-items: center; gap: 12px; }
.mn-close { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--ember); color: #fff; cursor: pointer; display: grid; place-items: center; transition: transform .3s var(--ease), background .2s; }
.mn-close:hover { transform: rotate(90deg); background: var(--ember-2); }
.mn-close svg { width: 18px; height: 18px; }

/* ---------- Σώμα ---------- */
.mn-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 290px 1fr; }
.mn-nav { overflow-y: auto; padding: 22px 0 40px; background: var(--deep); border-right: 1px solid var(--line); scrollbar-width: thin; scrollbar-color: var(--coal-4) transparent; }
.mn-nav a { position: relative; display: grid; grid-template-columns: 34px 1fr auto; align-items: baseline; gap: 6px; padding: 10px 26px; text-decoration: none; font-family: var(--display); font-weight: 800; font-size: 1.32rem; letter-spacing: .03em; text-transform: uppercase; color: var(--bone-dim); transition: color .2s, background .2s; }
.mn-nav a:hover { color: var(--bone); }
.mn-nav a .n { font-size: .82rem; color: var(--ember-2); letter-spacing: .1em; }
.mn-nav a .c { font-size: .8rem; color: var(--bone-faint); }
.mn-nav a.active { color: var(--bone); background: linear-gradient(90deg, rgba(var(--ember-a),.2), transparent 85%); }
.mn-nav a.active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ember); }

.mn-scroll { position: relative; overflow-y: auto; padding: 0 clamp(18px, 4vw, 52px) 70px; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--coal-4) transparent; overscroll-behavior: contain; }
.mn-note { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 18px 0; border-bottom: 1px solid var(--line); font-family: var(--display); font-weight: 700; font-size: 1.02rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ember-2); }
.mn-note svg { width: 18px; height: 18px; }
.mn-note a { margin-left: auto; color: var(--bone); text-decoration: none; border-bottom: 1px solid var(--ember); }

.mn-cat { padding-top: 44px; }
.mn-cat-head { position: relative; padding-bottom: 8px; }
.mn-cat-head.has-img { min-height: 220px; display: flex; flex-direction: column; justify-content: flex-end; padding: 26px 30px; border-radius: 18px; overflow: hidden; margin-bottom: 10px;
  background: linear-gradient(0deg, rgba(12,12,11,.96) 8%, rgba(12,12,11,.35) 70%, rgba(12,12,11,.55)), var(--img) center 55% / cover; box-shadow: inset 0 0 0 1px var(--line); }
/* μενού-overlay που δεν έχει ανοίξει ακόμα: χωρίς φωτογραφίες (να μην κατεβαίνουν με το φόρτωμα της αρχικής) */
.mn-overlay:not(.seen) .mn-cat-head.has-img { background: none; }
.mn-num { font-family: var(--display); font-weight: 800; font-size: 1rem; letter-spacing: .14em; color: var(--ember-2); }
.mn-cat-head h2 { font-size: clamp(2.6rem, 5vw, 4.6rem); margin-top: 4px; }
.mn-cat-head p { margin: 8px 0 0; color: var(--bone-dim); font-size: .92rem; }
.mn-cat-head small { position: absolute; top: 14px; right: 16px; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-faint); }

.mn-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 52px; }
.mn-item { padding: 18px 0; border-bottom: 1px dashed var(--line); }
.mn-item-top { display: flex; align-items: baseline; gap: 10px; }
.mn-item h3 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.38rem; line-height: 1.08; letter-spacing: .02em; text-transform: uppercase; }
.mn-dots { flex: 1; min-width: 18px; border-bottom: 2px dotted rgba(var(--ember-a),.45); transform: translateY(-5px); }
.mn-price { font-family: var(--display); font-weight: 900; font-size: 1.5rem; line-height: 1; color: var(--ember-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mn-item p { margin: 6px 0 0; color: var(--bone-dim); font-size: .9rem; line-height: 1.5; }
.mn-vars { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mn-vars span { display: inline-flex; align-items: baseline; gap: 8px; padding: .3em .9em; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); background: rgba(241,232,218,.03); }
.mn-vars em { font-style: normal; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-dim); }
.mn-vars b { font-family: var(--display); font-weight: 900; font-size: 1.18rem; color: var(--ember-2); }
.mn-veg { display: inline-block; vertical-align: 4px; margin-left: 8px; font-family: var(--sans); font-size: .58rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #b7c486; box-shadow: inset 0 0 0 1px rgba(183,196,134,.5); padding: 2px 7px; border-radius: 999px; }
.mn mark { background: rgba(var(--ember-a),.45); color: #fff; border-radius: 3px; padding: 0 2px; }

.mn-empty { display: none; padding: 80px 0; text-align: center; font-family: var(--display); font-weight: 800; font-size: 1.6rem; text-transform: uppercase; color: var(--bone-dim); }
.mn-empty.show { display: block; }
.mn-legal { margin-top: 50px; padding-top: 24px; border-top: 1px solid var(--line); font-size: .74rem; color: var(--bone-faint); display: grid; gap: 6px; }
.mn-legal p { margin: 0; }
.mn-credit { margin-top: 14px !important; text-align: right; }
.mn-credit a { font-family: var(--display); font-weight: 900; font-size: .95rem; letter-spacing: .04em; color: var(--bone); text-decoration: none; }
.mn-credit a i { font-style: normal; color: var(--ember-2); }
.mn-credit a:hover { color: var(--ember-2); }

/* ---------- Overlay (landing) ---------- */
.mn-overlay { position: fixed; inset: var(--in); z-index: 150; border-radius: calc(var(--frame-r) - var(--bw)); opacity: 0; visibility: hidden; transform: translateY(24px) scale(.985); transition: opacity .45s var(--ease), transform .55s var(--ease), visibility 0s .55s; box-shadow: 0 0 0 100vmax rgba(0,0,0,.6); }
.mn-overlay.open { opacity: 1; visibility: visible; transform: none; transition: opacity .45s var(--ease), transform .55s var(--ease), visibility 0s; }

/* ---------- Tablet / κινητό ---------- */
@media (max-width: 1180px) {
  .mn-items { grid-template-columns: 1fr; }
}
/* Σελίδα /qr-menu: ένας τιμοκατάλογος, χωρίς διακόπτη */
.mn-locked .mn-mode, .mn-locked .mn-title { display: none; }
/* Κεφαλίδα σαν app: η αναζήτηση ξεκινάει στη γραμμή του περιεχομένου (δεξιά από τη στήλη 290px) */
.mn-locked .mn-head { grid-template-columns: calc(290px - 28px) minmax(0, 1fr) auto; gap: 0 22px; }
.mn-locked .mn-search { justify-self: stretch; width: auto; margin-left: calc(clamp(18px, 4vw, 52px) - 22px); }
/* Εισαγωγή στην κορυφή του μενού */
.mn-locked .mn-note { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; padding: 34px 0 26px; color: inherit; font: inherit; letter-spacing: 0; text-transform: none; }
/* Κάρτα κριτικής: βαθμολογία Google + «Αφήστε μας μια κριτική» */
.mn-review { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 14px; padding: 16px 22px 16px 16px; border-radius: 20px; background: rgba(var(--ember-a),.12); box-shadow: inset 0 0 0 1px rgba(var(--ember-a),.45); text-decoration: none; color: var(--bone); transition: background .25s, transform .25s var(--ease); }
.mn-review:hover { background: rgba(var(--ember-a),.22); transform: translateY(-2px); }
.mn-note a.mn-review { margin-left: 0; border-bottom: 0; }
.mn-review b { grid-row: span 2; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--ember); color: #fff; font-family: var(--display); font-weight: 900; font-size: 1.45rem; }
.mn-review span { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--bone-dim); }
.mn-review .st { display: block; color: var(--ember-2); letter-spacing: 3px; font-size: .9rem; margin-bottom: 2px; }
.mn-review em { font-style: normal; font-family: var(--display); font-weight: 800; font-size: 1.02rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ember-2); }
.mn-intro-kick { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: .95rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ember-2); }
.mn-intro-kick svg { width: 18px; height: 18px; }
.mn-intro-title { font-size: clamp(3rem, 5.5vw, 5rem); margin-top: 10px; }
.mn-intro-title .ember { color: var(--ember-2); }
.mn-intro-sub { margin: 12px 0 0; color: var(--bone-dim); font-size: 1rem; }
/* Στοιχεία που υπάρχουν μόνο στο κινητό */
.mn-bar { display: contents; }
.mn-sbtn, .mn-sclose, .mn-mode .sh { display: none; }

@media (max-width: 900px) {
  /* Σειρά 1: λογότυπο · Τραπέζι/Πακέτο · γλώσσα (· κλείσιμο) — κρύβεται στο scroll προς τα κάτω */
  .mn-head { grid-template-columns: auto 1fr auto; grid-template-areas: "brand mode tools"; gap: 10px; padding: 10px 12px; position: relative; z-index: 2; }
  /* η κεφαλίδα και η μπάρα κατηγοριών μπαίνουν (με JS) μέσα στο .mn-scroll: η κεφαλίδα κυλάει, η μπάρα κολλάει πάνω */
  .mn-scroll > .mn-head { margin: 0 -14px; }
  .mn-scroll > .mn-bar { position: sticky; top: 0; z-index: 5; margin: 0 -14px; }
  .mn-brand { grid-area: brand; }
  .mn-title { display: none; }
  .mn-logo { width: 74px; }
  .mn-mode { grid-area: mode; justify-self: center; }
  .mn-mode svg, .mn-mode .lg { display: none; }
  .mn-mode .sh { display: inline; }
  .mn-locked .mn-head { grid-template-columns: auto 1fr auto; gap: 10px; }
  .mn-locked .mn-search { justify-self: stretch; width: 100%; margin-left: 0; }
  .mn-locked .mn-note { grid-template-columns: 1fr; gap: 16px; padding: 22px 0 16px; }
  .mn-review { justify-self: stretch; padding: 12px 16px 12px 12px; border-radius: 16px; }
  .mn-review b { width: 44px; height: 44px; font-size: 1.2rem; }
  .mn-review em { font-size: .9rem; }
  .mn-locked .mn-intro-title { font-size: 2.8rem; }
  .mn-locked .mn-intro-kick { font-size: .8rem; }
  .mn-locked .mn-intro-sub { font-size: .88rem; }
  .mn-mode button { padding: .5em .9em; font-size: .9rem; letter-spacing: .08em; }
  .mn-tools { grid-area: tools; gap: 6px; }
  .mn-tools .lang { padding: 3px; border-radius: 999px; }
  .mn-tools .lang button { min-width: 38px; height: 32px; padding: 0 .8em; border-radius: 999px; font-size: .85rem; }
  /* overlay της landing: έχει και ✕, οπότε όλα λίγο πιο σφιχτά για να χωράνε σε 360px */
  .mn-overlay .mn-head { grid-template-columns: 1fr auto; grid-template-areas: "mode tools" "search search"; gap: 8px; padding: 10px 12px; }
  .mn-overlay .mn-brand { display: none; }   /* το λογότυπο φαίνεται ήδη στη σελίδα από πίσω */
  .mn-overlay .mn-mode { justify-self: start; }
  .mn-overlay .mn-tools { gap: 6px; }
  .mn-close { width: 36px; height: 36px; }
  .mn-close svg { width: 15px; height: 15px; }

  /* Αναζήτηση: ανοίγει με το 🔍 και πιάνει όλη τη σειρά */
  .mn-search { display: none; grid-column: 1 / -1; width: 100%; justify-self: stretch; }
  .mn.searching .mn-brand, .mn.searching .mn-mode, .mn.searching .mn-tools, .mn.searching .mn-sbtn { display: none; }
  .mn.searching .mn-search { display: flex; }
  .mn-sclose { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(241,232,218,.08); color: var(--bone); cursor: pointer; }
  .mn-sclose svg { width: 13px; height: 13px; }

  /* Σειρά 2: 🔍 + κατηγορίες */
  .mn-body { display: flex; flex-direction: column; }
  .mn-bar { display: flex; align-items: center; gap: 8px; padding: 8px 0 8px 12px; border-bottom: 1px solid var(--line); background: var(--coal); flex: none; position: relative; z-index: 1; }
  .mn-sbtn { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(241,232,218,.06); box-shadow: inset 0 0 0 1px var(--line); color: var(--ember-2); cursor: pointer; }
  .mn-sbtn svg { width: 16px; height: 16px; }
  .mn-nav { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 0 12px 0 0; border: 0; background: none; scrollbar-width: none; }
  .mn-nav::-webkit-scrollbar { display: none; }
  .mn-nav a { display: block; flex: none; padding: .4em .95em; font-size: .98rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
  .mn-nav a .n, .mn-nav a .c { display: none; }
  .mn-nav a.active { background: var(--ember); color: #fff; box-shadow: none; }
  .mn-nav a.active::before { display: none; }

  /* Περιεχόμενο: πιο σφιχτό */
  .mn-scroll { flex: 1; min-height: 0; padding: 0 14px 60px; }
  .mn-note { padding: 10px 0; font-size: .78rem; gap: 8px; }
  .mn-note svg { width: 15px; height: 15px; }
  .mn-cat { padding-top: 24px; }
  .mn-cat-head.has-img { min-height: 104px; padding: 14px 16px; border-radius: 14px; margin-bottom: 4px; }
  .mn-cat-head h2 { font-size: 2.2rem; }
  .mn-num { font-size: .8rem; }
  .mn-cat-head small { top: 10px; right: 12px; font-size: .55rem; }
  .mn-item { padding: 13px 0; }
  .mn-item h3 { font-size: 1.15rem; }
  .mn-price { font-size: 1.25rem; }
  .mn-item p { font-size: .84rem; margin-top: 4px; }
}