/* ============================================================
   BurgerPoint Óbuda — POS-style customer site
   Two color worlds, one structure. Both live in CSS variables:
   :root            → "brand" (BurgerPoint red / ink / cream)
   [data-theme=pos] → "pos"   (charcoal / deep orange reference)
   Structure (layout, radii, spacing) never changes with theme.
   ============================================================ */

/* A betűkészletek stíluslapját az index.html tölti be külön <link>-kel, mert
   az `@import` csak ennek a fájlnak a letöltése után derülne ki, és így egy
   fölösleges soros hálózati fordulót tenne az első renderelés elé. */

/* A `hidden` attribútum a böngésző alap-stíluslapjában `display: none`, amit
   viszont MINDEN saját `display` szabályunk felülír — a rácsok `grid`, a
   kártyák `flex` értéke miatt egy elrejtett étlappanel vagy tétel egyszerűen
   látható maradna. Ezért itt egyszer, globálisan kikényszerítjük. */
[hidden] { display: none !important; }

:root {
  /* Surfaces: canvas → panel → card, each one step lighter */
  --bg:      #151311;
  --panel:   #211e1b;
  --card:    #2a2622;
  --card-hi: #332e29;

  /* One accent: prices, active states, the primary action */
  --accent:      #f04046;
  --accent-fill: #e3262e;
  --accent-hi:   #f4585e;
  /* A kitöltött gomb HOVER háttere. Korábban ez `--accent-hi` volt: a
     világosabb piroson a fehér felirat 3,3:1-re esett, az AA 4,5:1 alatt.
     Sötétebb piros felé mozdulunk (fehérrel 5,4:1); a POS-téma marad a
     világosabbnál, mert ott a gomb felirata sötét. */
  --accent-fill-hover: #cf1f27;
  --accent-soft: rgba(227, 38, 46, 0.10);
  /* --accent at normal text sizes measures 3.95:1 on --card, under the 4.5:1
     AA floor. Small red text uses this brighter step instead; large display
     type (h1/h2 em) keeps --accent, which clears the 3:1 large-text floor. */
  --accent-text: #f4585e;
  /* Text drawn on top of --accent-fill. White clears AA on this deep red
     (5.9:1); the POS theme's brighter orange needs dark text instead. */
  --on-accent: #ffffff;

  --text:   #f4ecde;
  --text-2: #c8beb2;
  --text-3: #a2988c;

  --line:        rgba(244, 236, 222, 0.10);
  --line-dashed: rgba(244, 236, 222, 0.22);

  --ok: #55d167;

  --shadow-accent: 0 10px 24px rgba(227, 38, 46, 0.28);

  /* Type: brand world = condensed poster type */
  --display: "Anton", Impact, sans-serif;
  --display-weight: 400;
  --display-case: uppercase;
  --display-spacing: -0.01em;
  --em-font: "Barlow Condensed", "Arial Narrow", sans-serif;
  --em-style: italic;
  --em-weight: 800;
  --condensed: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body-font: "Inter", Arial, sans-serif;
  --h1-size: clamp(3.2rem, 6vw, 6.4rem);
  --h2-size: clamp(2.1rem, 3.6vw, 3.4rem);

  --grain-opacity: 0.16;

  --radius-lg: 24px;
  --radius:    18px;
  --radius-sm: 14px;

  --rail-w: 96px;
  --gap: 20px;
}

:root[data-theme="pos"] {
  --bg:      #141419;
  --panel:   #1d1d24;
  --card:    #26262f;
  --card-hi: #2d2d38;

  --accent:      #ff6e40;
  --accent-fill: #ff5722;
  --accent-hi:   #ff7d55;
  --accent-fill-hover: #ff7d55;
  --accent-soft: rgba(255, 110, 64, 0.10);
  --accent-text: #ff8a63;
  /* White on this orange is only 3.16:1. Near-black reads 5.8:1 and keeps the
     vivid POS orange, rather than muddying the fill to make white work. */
  --on-accent: #141419;

  --text:   #f4f4f7;
  --text-2: #a6a6b4;
  --text-3: #9494a4;

  --line:        rgba(255, 255, 255, 0.08);
  --line-dashed: rgba(255, 255, 255, 0.18);

  --shadow-accent: 0 10px 24px rgba(255, 87, 34, 0.30);

  --display: "Inter", Arial, sans-serif;
  --display-weight: 800;
  --display-case: none;
  --display-spacing: -0.02em;
  --em-font: "Inter", Arial, sans-serif;
  --em-style: normal;
  --em-weight: 800;

  --h1-size: clamp(2.4rem, 4.4vw, 4.4rem);
  --h2-size: clamp(1.7rem, 2.8vw, 2.5rem);

  --grain-opacity: 0;
}

/* ============ Base ============ */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body-font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.no-scroll { overflow: hidden; }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; padding: 0; }
address { font-style: normal; }

:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }

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

.skip-link {
  position: fixed; z-index: 300; top: -5rem; left: 1rem;
  background: var(--text); color: var(--bg);
  padding: 0.8rem 1rem; border-radius: var(--radius-sm);
  font-weight: 700;
}
.skip-link:focus { top: 1rem; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: var(--display-weight);
  text-transform: var(--display-case);
  letter-spacing: var(--display-spacing);
}

h1 { font-size: var(--h1-size); line-height: 0.95; }
h2 { font-size: var(--h2-size); line-height: 1.02; }

h1 em, h2 em {
  color: var(--accent);
  font-family: var(--em-font);
  font-style: var(--em-style);
  font-weight: var(--em-weight);
}

.ic {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  flex: none;
}

.section-number {
  margin: 0 0 0.9rem;
  color: var(--accent-text);
  font: 800 0.85rem var(--condensed);
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

/* ============ Buttons ============ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.9rem 1.4rem;
  border-radius: var(--radius-sm);
  font-size: 0.95rem; font-weight: 700;
  transition: background-color 0.16s ease-out, color 0.16s ease-out, transform 0.16s ease-out;
}
.btn:active { transform: scale(0.98); }

.btn-fill { background: var(--accent-fill); color: var(--on-accent); box-shadow: var(--shadow-accent); }
.btn-fill:hover { background: var(--accent-fill-hover); }

.btn-ghost { background: var(--card); color: var(--text); }
.btn-ghost:hover { background: var(--card-hi); }

.btn-outline { background: none; border: 1.5px solid var(--line-dashed); color: var(--text); }
.btn-outline:hover { border-color: var(--text-3); }

/* ============ Desktop rail ============ */

.rail {
  position: fixed; z-index: 100; top: 0; bottom: 0; left: 0;
  width: var(--rail-w);
  display: flex; flex-direction: column; align-items: center;
  gap: 26px;
  padding: 18px 10px 16px;
  overflow-y: auto;
}

.rail-logo { width: 64px; flex: none; }
.rail-logo img { width: 100%; height: auto; object-fit: contain; }

.rail-nav { display: flex; flex-direction: column; gap: 8px; width: 100%; }

.rail-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 100%; padding: 13px 4px;
  border-radius: var(--radius);
  font-size: 11px; font-weight: 600; text-align: center;
  color: var(--text-3);
  transition: color 0.16s ease-out, background-color 0.16s ease-out;
}
.rail-item:hover { color: var(--text); background: var(--panel); }
.rail-item.is-active,
.rail-item.is-active:hover {
  background: var(--accent-fill); color: var(--on-accent); font-weight: 700;
  box-shadow: var(--shadow-accent);
}

.rail-foot {
  margin-top: auto;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}

.language-toggle {
  min-width: 44px; height: 40px; padding: 0 0.6rem;
  border: 1.5px solid var(--line-dashed); border-radius: 12px;
  font: 700 0.82rem var(--condensed); text-transform: uppercase; letter-spacing: 0.08em;
}
.language-toggle:hover { border-color: var(--text-3); background: var(--panel); }

.theme-toggle {
  display: grid; place-items: center;
  width: 44px; height: 40px;
  border: 1.5px solid var(--line-dashed); border-radius: 12px;
  color: var(--text-2);
}
.theme-toggle:hover { border-color: var(--text-3); background: var(--panel); color: var(--text); }
.theme-toggle .ic { width: 20px; height: 20px; }

/* ============ Mobile / tablet top bar ============ */

.topbar {
  display: none;
  position: fixed; z-index: 100; top: 0; left: 0; right: 0;
  height: 68px;
  padding: 0 clamp(0.9rem, 3vw, 1.5rem);
  align-items: center; justify-content: space-between; gap: 0.75rem;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.topbar .brand { width: 92px; flex: none; }
.topbar .brand img { width: 100%; max-height: 54px; object-fit: contain; }

.topbar-actions { display: flex; align-items: center; gap: 0.5rem; }

.nav-toggle {
  width: 44px; height: 40px; padding: 0 11px;
  border: 1.5px solid var(--line-dashed); border-radius: 12px;
}
.nav-toggle span {
  display: block; width: 100%; height: 2px; margin: 5px 0;
  background: currentColor;
  transition: transform 0.2s;
}

.mobile-nav {
  display: none;
  position: fixed; z-index: 90; inset: 68px 0 auto 0;
  flex-direction: column; gap: 4px;
  margin: 10px;
  padding: 14px;
  background: var(--panel);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
  /* A menü a fejléc alá van rögzítve, a nyitása pedig kikapcsolja az oldal
     görgetését — magasságkorlát nélkül tehát fekvő telefonon az alsó
     hivatkozások (útvonal, rendelés) kicsúsztak a képernyőről, és semmivel
     nem lehetett elérni őket. 68px fejléc + 2 × 10px margó. */
  max-height: calc(100vh - 88px);
  max-height: calc(100dvh - 88px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-nav.open { display: flex; }

.mobile-nav a, .mobile-nav button {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  font-size: 1rem; font-weight: 700;
  text-align: left;
}
.mobile-nav a:hover, .mobile-nav button:hover { background: var(--card); }
.mobile-nav .btn-fill { justify-content: center; margin-top: 8px; }
.mobile-nav .btn-fill:hover { background: var(--accent-fill-hover); }

/* ============ Page frame ============ */

main {
  margin-left: var(--rail-w);
  padding: var(--gap);
  display: flex; flex-direction: column; gap: var(--gap);
}

.panel {
  position: relative;
  background: var(--panel);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 3.5rem);
  overflow: hidden;
}

/* Live status dot */
.live-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--ok);
  box-shadow: 0 0 0 4px rgba(85, 209, 103, 0.13);
}
.live-dot.closed { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }

/* ============ Floating open / closed sign ============ */

/* Claude Design „Open Closed Sign" (2026-10-06): a StatusPill nagyobb
   változata, a viewport jobb felső sarkához rögzítve. A fejléc (100), a mobil
   menü (90), az összetevő-panel (150) és a sütisáv (200) alatta marad. */
.open-sign {
  position: fixed; z-index: 80; top: var(--gap); right: var(--gap);
  display: inline-flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.8rem 1.2rem 0.8rem 1.05rem;
  background: var(--card);
  border-radius: 999px;
  font-size: 0.9rem; font-weight: 600; line-height: 1.3;
  color: var(--text-2);
  transition: background-color 0.16s ease-out;
}
.open-sign[hidden] { display: none; }
.open-sign:hover { background: var(--card-hi); }
.open-sign strong { color: var(--text); font-weight: 700; }
.open-sign-text { display: flex; flex-direction: column; gap: 2px; }
.open-sign-sub { font-size: 0.78rem; font-weight: 500; color: var(--text-3); }
.open-sign .live-dot {
  width: 12px; height: 12px; margin-top: 0.2rem;
  box-shadow: 0 0 0 5px rgba(85, 209, 103, 0.13);
}
.open-sign .live-dot.closed { box-shadow: 0 0 0 5px var(--accent-soft); }
/* A tábla ide visz: a kártya teteje se a tábla, se (mobilon) a fejléc alá ne kerüljön. */
#hours { scroll-margin-top: 100px; }
.open-sign.is-open .live-dot { animation: open-sign-pulse 2.4s ease-out infinite; }

@keyframes open-sign-pulse {
  0%   { box-shadow: 0 0 0 5px rgba(85, 209, 103, 0.13), 0 0 0 5px rgba(85, 209, 103, 0.45); }
  70%  { box-shadow: 0 0 0 5px rgba(85, 209, 103, 0.13), 0 0 0 13px rgba(85, 209, 103, 0); }
  100% { box-shadow: 0 0 0 5px rgba(85, 209, 103, 0.13), 0 0 0 13px rgba(85, 209, 103, 0); }
}

/* ============ Hero ============ */

.hero {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

/* Brand-world grain: fades out entirely in the POS world */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  opacity: var(--grain-opacity);
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
}

.hero > * { position: relative; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.55rem 0.85rem;
  background: var(--card);
  border-radius: 999px;
  font-size: 0.78rem; font-weight: 600;
  color: var(--text-2);
}

.kicker {
  margin: 1.6rem 0 0.8rem;
  color: var(--accent-text);
  font: 800 1rem var(--condensed);
  text-transform: uppercase; letter-spacing: 0.18em;
}

.lede {
  max-width: 32rem;
  margin: 1.4rem 0 1.8rem;
  color: var(--text-2);
  font-size: clamp(0.98rem, 1.2vw, 1.1rem);
  line-height: 1.7;
}

.hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.providers {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  margin-top: 2rem; padding-top: 1.5rem;
  border-top: 1.5px dashed var(--line-dashed);
}

.providers > span { font-size: 0.85rem; color: var(--text-3); font-weight: 600; }

.provider {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.65rem 1.05rem;
  background: var(--card);
  border-radius: var(--radius-sm);
  font-size: 0.9rem; font-weight: 700;
  transition: background-color 0.16s ease-out;
}
.provider:hover { background: var(--card-hi); }
.provider span { color: var(--accent-text); }
/* Az étlap a helyszíni árakat mutatja; a platformokon más ár és rendelési idő
   lehet (tulajdonosi döntés, 2026-10-05). Saját sorba törik a gombok alatt. */
.price-channel-note { flex-basis: 100%; margin: 0; font-size: 0.8rem; line-height: 1.5; color: var(--text-3); }

.hero-card {
  position: relative; margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
}
.hero-card img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }

/* Nyitóvideó (app.js, initHeroVideo): az oldal rögtön ezzel indul. Amíg
   le fog futni (`hero-video-pending`), a HEJJ fotó rejtve van, a kártya
   pedig a videó saját háttérszínét kapja, hogy a betöltés alatt se
   villanjon semmi. Ha a videó nem indul el, az osztály lekerül, a videó
   eltűnik, és a fotó látszik. A címke és az ár a videó végén úszik be.

   Ha a videó elindult (`hero-video-shown`), a fotó a végén is rejtve
   marad: a videó úgyis az utolsó képkockáján áll, és takarja. Ha ilyenkor
   láthatóvá válna, a Chrome új, nagyobb LCP-elemként mérné — a videó
   végén, kb. 10 másodpercnél, holott a látogató semmi újat nem látott. */
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  pointer-events: none;
}
.hero-video-pending .hero-card { background: #0c0c0c; } /* a videó háttere */
/* opacity és nem visibility: így a kép alt szövege a felolvasóknak megmarad */
.hero-video-pending .hero-card picture,
.hero-video-shown .hero-card picture { opacity: 0; }
.hero-card .badge-signature,
.hero-card .price-chip {
  transition: opacity 0.45s ease-out, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hero-card .price-chip { transition-delay: 0.12s; }
.hero-video-pending .hero-card .badge-signature { opacity: 0; transform: translateY(-10px); }
.hero-video-pending .hero-card .price-chip { opacity: 0; transform: translateY(10px); }

.badge-signature {
  position: absolute; top: 14px; left: 14px;
  padding: 0.5rem 0.8rem;
  background: var(--accent-fill); color: var(--on-accent);
  border-radius: 10px;
  font: 800 0.8rem var(--condensed);
  text-transform: uppercase; letter-spacing: 0.12em;
  box-shadow: var(--shadow-accent);
}

.price-chip {
  position: absolute; right: 14px; bottom: 14px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.1rem;
  padding: 0.65rem 0.95rem;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-sm);
}
.price-chip small {
  font-size: 0.7rem; font-weight: 600; color: var(--text-2);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.price-chip strong { font-size: 1.25rem; font-weight: 800; color: var(--accent); }

/* ============ Section headers inside panels ============ */

.pane-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1.5rem; flex-wrap: wrap;
  margin-bottom: 1.6rem;
}

.pane-sub { margin: 0.9rem 0 0; max-width: 34rem; color: var(--text-2); line-height: 1.65; }

/* ============ Menu: search ============ */

.search {
  display: flex; align-items: center; gap: 10px;
  flex: 1; min-width: 230px; max-width: 380px;
  padding: 13px 16px;
  background: var(--card);
  border-radius: var(--radius-sm);
  color: var(--text-3);
  cursor: text;
}
.search .ic { width: 19px; height: 19px; }
.search input {
  flex: 1; min-width: 0;
  border: none; background: none; outline: none;
  font-size: 0.95rem; color: var(--text);
}
/* The input carries no border of its own — the .search pill is the visual
   control — so `outline: none` above would leave keyboard users with no focus
   indicator at all (it outranks the global :focus-visible rule on
   specificity). Draw the ring on the wrapper instead. */
.search:focus-within { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
.search input::placeholder { color: var(--text-3); }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ============ Menu: category tiles ============ */

.cat-row {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 1.4rem;
}

.cat {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 16px;
  background: var(--card);
  border: 1.5px solid transparent;
  border-radius: 16px;
  font-size: 0.92rem; font-weight: 700;
  color: var(--text-2);
  transition: color 0.16s ease-out, background-color 0.16s ease-out, border-color 0.16s ease-out;
}
.cat .ic { width: 24px; height: 24px; }
.cat:hover { color: var(--text); background: var(--card-hi); }
.cat.active,
.cat.active:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.cat.active .ic { color: var(--accent); }

/* ============ Menu: dish grid ============ */

.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}

.dish {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px;
  background: var(--card);
  border-radius: var(--radius);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.16s ease-out, transform 0.16s ease-out;
}
.dish:hover { background: var(--card-hi); transform: translateY(-2px); }
.dish:active { transform: translateY(0) scale(0.98); }

.dish-img {
  position: relative;
  aspect-ratio: 1 / 0.78;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--card-hi);
}
.dish-img img, .dish-img picture { width: 100%; height: 100%; }
.dish-img img { object-fit: cover; }

.dish-img.is-placeholder {
  display: grid; place-items: center;
  border: 1.5px dashed var(--line-dashed);
  color: var(--text-3);
  font: 800 1.3rem var(--condensed);
  letter-spacing: 0.1em;
}

.dish-badge {
  position: absolute; top: 10px; left: 10px;
  padding: 0.3rem 0.55rem;
  background: var(--accent-fill); color: var(--on-accent);
  border-radius: 8px;
  font: 800 0.68rem var(--condensed);
  text-transform: uppercase; letter-spacing: 0.1em;
}

/* A név <h3>, hogy minden étlaptétel címsor legyen (a sorok már azok). A
   közös `h1, h2, h3` display-betűjét, nagybetűsítését és betűközét itt
   visszavesszük az örököltre: pontosan úgy néz ki, mint korábban span-ként. */
.dish-name {
  font-family: inherit; text-transform: inherit; letter-spacing: inherit;
  font-size: 0.98rem; font-weight: 700; line-height: 1.3;
}

/* A tulajdonos kiemelt mondata. Teljes egészében kiírjuk: az összetevősor
   (`.dish-note`) csonkolása listán természetes, egy félbevágott mondat
   viszont elrontott szövegnek látszik. A kártya ettől magasabb lesz — a
   rácsban a sor minden kártyája követi —, és ez szándékos: a kiemelt tétel
   kapjon több helyet. */
.dish-tagline {
  font-size: 0.8rem; line-height: 1.35;
  color: var(--text-2);
}
.dish-row .dish-tagline { margin: 0.35rem 0 0; }

.dish-meta {
  margin-top: auto;
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
}
.dish-price { font-size: 1rem; font-weight: 800; color: var(--accent-text); white-space: nowrap; }
.dish-note {
  font-size: 0.78rem; color: var(--text-3);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

/* Compact rows for sides / extras / drinks (no photography exists) */
.dish-row {
  grid-column: 1 / -1;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 16px 18px;
  background: var(--card);
  border-radius: var(--radius-sm);
}
.dish-row h3 { font-family: var(--body-font); font-size: 0.98rem; font-weight: 700; text-transform: none; letter-spacing: 0; }
.dish-row p { margin: 0.35rem 0 0; font-size: 0.84rem; color: var(--text-3); }
.dish-row .dish-price { font-size: 1rem; }
/* Összetevő-panelt nyitó sor (melegszendvicsek) — ugyanaz a visszajelzés, mint a kártyán. */
.dish-row[role="button"] { cursor: pointer; transition: background-color 0.16s ease-out; }
.dish-row[role="button"]:hover { background: var(--card-hi); }

/* A kiszolgáló mind a hat kategóriát kiadja, hogy JS nélkül — és minden
   szkriptet nem futtató feldolgozónál — a teljes étlap olvasható legyen.
   Böngészőben viszont csak az aktív panel látszik, és ezt már az első
   festés előtt eldöntjük: a `js` osztályt az index.html fejléce adja hozzá,
   nem az app.js, így nem villan fel a teljes étlap. */
.js .menu-panel:not(.is-active) { display: none; }

.no-results {
  padding: 48px 20px;
  text-align: center;
  color: var(--text-2);
  line-height: 1.7;
}
.no-results strong { display: block; margin-bottom: 0.4rem; color: var(--text); }
.no-results-jump { margin: 1.1rem auto 0; }

.menu-note {
  margin-top: 1.1rem;
  color: var(--text-2);
  font-size: 0.86rem;
}
/* Ugyanaz a szabály, mint a kategóriapaneleknél, és ugyanazért. A termékdíj
   ÁRINFORMÁCIÓ: az italoknál 900 Ft-ot olvasni a „+50 Ft" nélkül hiányos.
   Korábban a sablon `hidden` attribútuma rejtette el, amit csak az app.js
   vett le — így JS nélkül (és ha az app.js elakadt) SOHA nem jelent meg.
   Most a `js` osztályhoz kötjük: szkript nélkül a megjegyzés látszik, a
   böngészőben pedig továbbra is csak az Italok kategóriánál. */
.js .menu-note:not(.is-visible) { display: none; }

.load-more { margin: 1.4rem auto 0; display: flex; }
.load-more[hidden] { display: none; }

/* ============ HEJJ / story ============ */

.section-hejj {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

/* A kiemelt burger fotója a szakasz szövege fölött.

   A doboz aránya rögzített, és a képek is 4:3-asak — tehát a `cover` nem vág
   le semmit, a forgás pedig egyetlen képpontot sem mozdít. Ugyanaz a
   megfontolás, mint a szemközti összetevő-listánál: a magasság akkor is
   legyen kész, amikor a következő fotó még tölt.

   A `max-width` azért kell, mert az oszlop szélesebb ennél: 640 képpontos
   kép mellett a cím a szakasz aljára csúszna. */
.story-photo {
  margin: 0 0 1.75rem;
  max-width: 460px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--card-hi);
}
.story-photo picture, .story-photo img { display: block; width: 100%; height: 100%; }
.story-photo img { object-fit: cover; }

/* Fotó nélküli burger: ugyanaz a „BP" helyőrző, mint az étlapkártyákon. */
.story-photo-fallback { display: none; }
.story-photo.is-placeholder picture { display: none; }
.story-photo.is-placeholder .story-photo-fallback {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  border: 1.5px dashed var(--line-dashed);
  border-radius: inherit;
  color: var(--text-3);
  font: 800 2.4rem var(--condensed);
  letter-spacing: 0.1em;
}

.facts {
  display: flex; gap: clamp(1rem, 3vw, 2.5rem); flex-wrap: wrap;
  margin-top: 2rem;
}
.facts > div { display: flex; flex-direction: column; gap: 0.3rem; }
.facts strong { font: 800 1.5rem var(--condensed); text-transform: uppercase; color: var(--accent); }
.facts span { font-size: 0.84rem; color: var(--text-3); }

.build-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.build-head {
  position: relative;
  display: flex; flex-direction: column; gap: 0.3rem;
  padding-bottom: 1rem; margin-bottom: 1rem;
  padding-right: 2.75rem;
  border-bottom: 1.5px dashed var(--line-dashed);
}

/* A kiemelt burger forgásának szüneteltetése.

   Mindig látszik, nem csak egérrel fölé érve: érintőképernyőn nincs hover,
   és egy vezérlő, amit nem lehet megtalálni, nem vezérlő. Halvány
   alapállapotban ül, hogy ne vonja el a figyelmet a tartalomról. */
.build-pause {
  position: absolute; top: -0.2rem; right: 0;
  display: grid; place-items: center;
  width: 34px; height: 34px; padding: 0;
  border: 1.5px solid var(--line); border-radius: 50%;
  background: transparent; color: var(--text-3);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.build-pause:hover { color: var(--text); border-color: var(--line-dashed); background: var(--card-hi); }
.build-pause:focus-visible { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }
.build-pause .ic { width: 15px; height: 15px; }
/* A véleményváltás szüneteltetője a rugalmas fejléc rendes eleme, nem
   ráúsztatott gomb, mint a burgerkártyán: a .pane-head teszi a jobb
   szélre. Abszolút pozícióval a szekción kívülre csúszna. */
.reviews-pause { position: static; align-self: flex-end; flex: none; }
.build-head span {
  font: 800 0.75rem var(--condensed);
  color: var(--accent-text);
  text-transform: uppercase; letter-spacing: 0.2em;
}
.build-head strong { font-size: 1.15rem; font-weight: 800; }

/* A magasságot a JS foglalja le a leghosszabb összetevő-listához
   (app.js → reserveBuildHeight), hogy a 30 másodpercenkénti burgerváltás ne
   mozdítsa el alatta az oldalt. A rövidebb listák ezért ülnek középen: így a
   maradék hely fent és lent oszlik el, nem egy üres sáv lóg az aljára. */
.build-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
}

.build-list li {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px;
  background: var(--panel);
  border-radius: var(--radius-sm);
  font-size: 0.92rem; font-weight: 600;
}

.build-num {
  font: 800 0.78rem var(--condensed);
  color: var(--text-3);
  letter-spacing: 0.08em;
  min-width: 1.5rem;
}

/* Rows re-render every 20 s when the featured burger rotates; reuse the
   pane's entrance so the swap reads as intentional. Stagger comes from the
   inline animation-delay set in app.js. */
.build-list li { animation: ing-row-in 0.22s ease-out backwards; }

.build-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dot-bun      { background: #e8b558; }
.dot-beef     { background: #a05a3c; }
.dot-lettuce  { background: #7fb069; }
.dot-tomato   { background: #e3556a; }
.dot-cucumber { background: #9acd8a; }
.dot-onion    { background: #cbb3de; }
.dot-pickles  { background: #b5c689; }

.build-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 1rem; padding-top: 1rem;
  border-top: 1.5px dashed var(--line-dashed);
  font-size: 0.9rem; color: var(--text-2);
}
.build-total strong { font-size: 1.35rem; font-weight: 800; color: var(--accent); }

/* ============ Gallery strip ============ */

.gallery-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}
.gallery-strip figure {
  position: relative; margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
}
.gallery-strip img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 0.85; }
.gallery-strip figcaption {
  position: absolute; left: 12px; bottom: 12px;
  padding: 0.4rem 0.7rem;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(6px);
  border-radius: 9px;
  font: 800 0.8rem var(--condensed);
  text-transform: uppercase; letter-spacing: 0.1em;
}

/* ============ Reviews ============ */

.reviews-layout {
  display: grid; grid-template-columns: 0.85fr 2.15fr;
  gap: var(--gap);
  align-items: stretch;
}

.rating-panel {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.8rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--card);
  border-radius: var(--radius-lg);
}

.google-label {
  font: 800 0.78rem var(--condensed);
  color: var(--text-3);
  letter-spacing: 0.28em;
}

.rating-number { display: flex; align-items: baseline; gap: 0.4rem; }
.rating-number strong { font: var(--display-weight) 3.4rem var(--display); color: var(--text); }
.rating-number span { color: var(--text-3); font-weight: 600; }

.review-stars { color: var(--accent-text); font-size: 1.05rem; letter-spacing: 0.15em; }

.rating-panel p { margin: 0; color: var(--text-2); font-size: 0.92rem; line-height: 1.6; }
.rating-panel .btn { margin-top: auto; }

.review-cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

.review-card {
  display: flex; flex-direction: column; gap: 0.8rem;
  padding: clamp(1.1rem, 2vw, 1.5rem);
  background: var(--card);
  border-radius: var(--radius-lg);
}
.review-card-featured { border: 1.5px solid var(--accent); background: var(--accent-soft); }

.review-card blockquote {
  margin: 0; flex: 1;
  font-size: 0.95rem; line-height: 1.65; color: var(--text);
}

.review-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; }
.review-meta strong { font-size: 0.9rem; }
.review-meta time { font-size: 0.78rem; color: var(--text-3); }
.review-card small { color: var(--text-3); font-size: 0.74rem; }

/* ============ Location ============ */

.section-location {
  display: grid; grid-template-columns: 1.25fr 0.75fr;
  gap: var(--gap);
}

.map-wrap {
  position: relative;
  min-height: 380px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
}

.location-map {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  filter: grayscale(0.2);
}

.map-consent {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.7rem; padding: 1.5rem; text-align: center;
  background: var(--card);
}
.map-consent[hidden] { display: none; }
.map-consent strong { font-size: 1.05rem; }
.map-consent p { margin: 0; max-width: 26rem; color: var(--text-2); font-size: 0.9rem; line-height: 1.6; }

.location-info { display: flex; flex-direction: column; gap: var(--gap); }

.location-card, .hours-card {
  flex: 1;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--card);
  border-radius: var(--radius-lg);
}

.location-card address {
  margin: 1rem 0 1.4rem;
  font-size: 1.05rem; font-weight: 600; line-height: 1.6;
}

.hours-top {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.5rem 0.8rem; margin-bottom: 1rem;
  background: var(--panel);
  border-radius: 999px;
  font-size: 0.82rem; font-weight: 700;
}

.hours-card h3 { font-size: 1.3rem; margin-bottom: 0.9rem; }

.hours-card dl { margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.hours-card dl > div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1.5px dashed var(--line-dashed);
  font-size: 0.92rem;
}
.hours-card dt { color: var(--text-2); }
.hours-card dd { margin: 0; font-weight: 700; white-space: nowrap; }

.hours-card > p { margin: 1rem 0 0; font-size: 0.8rem; color: var(--text-3); line-height: 1.6; }

/* ============ Footer ============ */

footer {
  margin-left: var(--rail-w);
  padding: 1.5rem var(--gap) 2.5rem;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 2rem;
}

/* A blokk a szöveg szélességére zsugorodik, a logó e fölött áll középen. */
.footer-brand { width: fit-content; max-width: 100%; }
.footer-brand img { display: block; width: 110px; height: auto; margin-inline: auto; object-fit: contain; }
.footer-brand p { margin: 0.9rem 0 0; color: var(--text-2); font-size: 0.9rem; }

.footer-label {
  margin: 0 0 0.8rem;
  font: 800 0.8rem var(--condensed);
  color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.18em;
}

footer a, footer button {
  display: block;
  margin-bottom: 0.55rem;
  font-size: 0.9rem; color: var(--text-2);
  text-align: left;
}
footer a:hover, footer button:hover { color: var(--text); }

.copyright {
  grid-column: 1 / -1;
  margin: 1.5rem 0 0; padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.8rem; color: var(--text-3);
}

/* ============ Ingredients pane (the POS order rail, repurposed) ============ */

.ingredients-pane {
  position: fixed; z-index: 150; top: 12px; right: 12px; bottom: 12px;
  width: min(380px, calc(100vw - 24px));
  display: flex; flex-direction: column;
  padding: 20px;
  background: var(--panel);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  transform: translateX(calc(100% + 24px));
  visibility: hidden;
  transition: transform 0.28s ease-out, visibility 0.28s;
}
/* Nyitáskor a láthatóság AZONNAL vált: egy futó visibility-átmenet a 0.
   pillanatban még hidden-t ad, és az app.js fókuszálása elveszne. Zárásnál
   az alapszabály 0.28s-a érvényes, így a panel látható marad, amíg kicsúszik. */
.ingredients-pane.open { transform: none; visibility: visible; transition: transform 0.28s ease-out, visibility 0s; }

/* ============ Photo zoom from the ingredients pane (desktop) ============ */

/* Claude Design „Ingredients Photo Hover" (2026-10-06); a mozgást az app.js
   photoZoom része animálja. A panel (150) fölött, a sütisáv (200) alatt. */
.pane-thumb[data-photo-zoom] { cursor: zoom-in; }

.photo-zoom {
  position: fixed; inset: 0; z-index: 160;
  pointer-events: none;
  visibility: hidden;
}
.photo-zoom.is-active { visibility: visible; }

.photo-zoom-backdrop {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--bg) 75%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
}
.photo-zoom.is-interactive .photo-zoom-backdrop { pointer-events: auto; }

.photo-zoom-photo {
  position: fixed; margin: 0;
  transform-origin: 0 0;
  visibility: hidden;
  background: var(--card-hi);
  will-change: transform, clip-path;
}
.photo-zoom-photo picture, .photo-zoom-photo img { display: block; width: 100%; height: 100%; }
.photo-zoom-photo img { object-fit: cover; }

.photo-zoom-caption {
  position: fixed;
  display: flex; align-items: center; gap: 12px;
  padding-top: 16px;
  opacity: 0;
}
.photo-zoom.is-interactive .photo-zoom-photo,
.photo-zoom.is-interactive .photo-zoom-caption { pointer-events: auto; }
.photo-zoom-caption strong { font-size: 1.25rem; font-weight: 700; color: var(--text); }
.photo-zoom-caption .dish-price { margin-left: auto; font-size: 1.25rem; }
.photo-zoom-badge { position: static; }

.pane-top {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem;
  padding-bottom: 14px;
}
.pane-top h2 { font-size: 1.45rem; }

.pane-close {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  background: var(--card);
  border-radius: 12px;
  font-size: 1.3rem; line-height: 1;
}
.pane-close:hover { background: var(--card-hi); }

.pane-item {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 12px; align-items: center;
  padding: 12px;
  background: var(--card);
  border-radius: var(--radius);
}

.pane-thumb {
  width: 56px; height: 56px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--card-hi);
}
.pane-thumb img, .pane-thumb picture { width: 100%; height: 100%; }
.pane-thumb img { object-fit: cover; }
.pane-thumb.is-placeholder {
  display: grid; place-items: center;
  border: 1.5px dashed var(--line-dashed);
  color: var(--text-3);
  font: 800 0.95rem var(--condensed); letter-spacing: 0.08em;
}

.pane-item-info { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pane-item-info strong { font-size: 0.95rem; line-height: 1.3; }
.pane-item-info em {
  font: 800 0.68rem var(--condensed);
  font-style: normal;
  color: var(--accent-text);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.pane-item .dish-price { font-size: 0.98rem; }

.pane-tagline {
  margin: 12px 2px 0;
  font-size: 0.86rem; line-height: 1.45;
  color: var(--text-2);
  border-left: 2px solid var(--accent);
  padding-left: 10px;
}

.ingredient-list {
  list-style: none;
  flex: 1; min-height: 0;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
  margin: 14px 0; padding: 2px;
}

.ingredient-list li {
  display: flex; align-items: center; gap: 12px;
  padding: 12px;
  background: var(--card);
  border-radius: var(--radius-sm);
  font-size: 0.92rem; font-weight: 600;
}

@keyframes ing-row-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.ingredient-list li { animation: ing-row-in 0.22s ease-out backwards; }

.ing-num {
  font: 800 0.78rem var(--condensed);
  color: var(--accent-text);
  letter-spacing: 0.08em;
  min-width: 1.5rem;
}

.pane-totals {
  padding: 16px;
  background: var(--card);
  border-radius: var(--radius);
}

.pane-price-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 1.5px dashed var(--line-dashed);
  font-size: 0.9rem; color: var(--text-2);
}
.pane-price-row strong { font-size: 1.35rem; font-weight: 800; color: var(--accent); }

.pane-order { margin-top: 12px; }
.pane-order > span { display: block; font-size: 0.78rem; color: var(--text-3); font-weight: 600; }
.pane-order-actions { display: flex; gap: 8px; margin-top: 10px; }
.pane-order-actions .btn { flex: 1; padding: 0.68rem 0.8rem; font-size: 0.88rem; background: var(--panel); }
.pane-order-actions .btn:hover { background: var(--card-hi); }
.pane-order-actions .btn span { color: var(--accent-text); }
/* Wolton/Foodorán nem rendelhető tétel: a gombok helyett egy mondat. */
.pane-order-off { display: none; margin: 0; font-size: 0.84rem; font-weight: 600; color: var(--text-2); }
.pane-order.is-offline .pane-order-off { display: block; }
.pane-order.is-offline > span,
.pane-order.is-offline .pane-order-actions,
.pane-order.is-offline .pane-price-note { display: none; }
.pane-price-note { margin-top: 8px; font-size: 0.74rem; }

/* Alacsony (jellemzően fekvő) képernyőn a panel belső sávjai nem férnek el:
   a fejléc, a tétel, a mottó és a rendelés-blokk elviszi a teljes magasságot,
   az összetevő-lista pedig — mert ő az egyetlen zsugorodni képes elem — pár
   képpontra lapul, a rendelés-blokk közben kicsúszik a képernyő alá. Ilyenkor
   inkább az EGÉSZ panel görgethető egyben, a lista a saját magasságát kapja. */
@media (max-height: 600px) {
  .ingredients-pane { overflow-y: auto; overscroll-behavior: contain; }
  .ingredient-list { flex: none; overflow-y: visible; }
}

/* ============ Consent banner + dialog ============ */

.consent-banner {
  position: fixed; z-index: 200; left: 16px; right: 16px; bottom: 16px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 1.25rem; flex-wrap: wrap;
  padding: 1.1rem 1.35rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.consent-banner[hidden] { display: none; }
.consent-banner strong { display: block; margin-bottom: 0.3rem; }
.consent-banner p { margin: 0; max-width: 46rem; font-size: 0.85rem; color: var(--text-2); line-height: 1.6; }
.consent-banner a { color: var(--text); text-decoration: underline; }

.consent-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.consent-actions .btn { padding: 0.7rem 1.1rem; font-size: 0.88rem; }

.consent-dialog {
  width: min(560px, 92vw);
  border: none;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--panel); color: var(--text);
  border-radius: var(--radius-lg);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.55);
}
.consent-dialog::backdrop { background: rgba(0, 0, 0, 0.62); }
.consent-dialog h2 { font-size: 1.5rem; margin-bottom: 1.2rem; }

.consent-option {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1.5px dashed var(--line-dashed);
}
.consent-option strong { display: block; margin-bottom: 0.3rem; font-size: 0.95rem; }
.consent-option p { margin: 0; font-size: 0.82rem; color: var(--text-2); line-height: 1.6; }
.consent-option > span { flex: none; font-size: 0.78rem; font-weight: 700; color: var(--text-3); }
.consent-option input { width: 20px; height: 20px; flex: none; accent-color: var(--accent-fill); }
label.consent-option { cursor: pointer; }

.consent-dialog .consent-actions { margin-top: 1.4rem; justify-content: flex-end; }

/* ============ Rendkívüli nyitvatartás, telefon, értékelés-dátum ============

   Mindhárom olyan tényt jelenít meg, ami a strukturált adatban is szerepel.
   A séma nem közölhet olyat, amit a látogató az oldalon nem talál meg. */

.special-hours { margin-top: 1.1rem; }
.special-hours h4 {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.special-hours ul { margin: 0; padding: 0; list-style: none; }
.special-hours li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 0.35rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
}
.special-hours time { color: var(--text-2); }
.special-hours [data-special-hours-value="closed"] { color: var(--accent-text); font-weight: 600; }
.special-hours[hidden], .special-hours li[hidden] { display: none; }
.holiday-hours .holiday-name { color: var(--text-3); }
.holiday-hours summary {
  padding: 0.35rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.85rem; font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
}
.holiday-hours summary:hover { color: var(--text); }

.location-phone {
  display: inline-block;
  margin: 0.2rem 0 1rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
}
.location-phone:hover { color: var(--accent-text); }

.rating-checked {
  margin: 0.6rem 0 0;
  font-size: 0.76rem;
  color: var(--text-3);
}

/* ============ Reveal animation ============

   Alapállapotban MINDEN látszik. A rejtett kiindulóhelyzetet csak a
   `js-reveal` osztály kapcsolja be, amit az index.html fejlécében futó
   szkript ad hozzá — és amit az app.js le is vesz, ha a megfigyelő bármiért
   nem áll fel. Korábban a `.reveal` alapból `opacity: 0` volt, így egyetlen
   JS-hiba véglegesen láthatatlanul hagyta az oldal nagy részét. */

.reveal { transition: opacity 0.5s ease-out, transform 0.5s ease-out; }
.js-reveal .reveal { opacity: 0; transform: translateY(14px); }
.js-reveal .reveal.visible { opacity: 1; transform: none; }

/* ============ Scrollbars ============ */

::-webkit-scrollbar { width: 10px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--card-hi); border-radius: 5px; }
::-webkit-scrollbar-track { background: transparent; }

/* ============ Responsive ============ */

@media (max-width: 1240px) {
  .cat-row { grid-template-columns: none; display: flex; overflow-x: auto; padding-bottom: 4px; }
  .cat { flex: none; }
  .review-cards { grid-template-columns: 1fr 1fr; }
  .reviews-layout { grid-template-columns: 1fr; }
  .rating-panel { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .rating-panel .btn { margin-top: 0; margin-left: auto; }
}

@media (max-width: 1023px) {
  .rail { display: none; }
  .topbar { display: flex; }

  main { margin-left: 0; padding-top: calc(68px + var(--gap)); }

  /* A fejléc alatt, jobbra igazítva — a menügombot nem takarja. */
  .open-sign { top: calc(68px + 12px); right: 12px; }
  #hours { scroll-margin-top: calc(68px + 96px); }
  footer { margin-left: 0; }

  .hero, .section-hejj { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }

  .section-location { grid-template-columns: 1fr; }
  .map-wrap { min-height: 320px; }

  .gallery-strip { grid-template-columns: 1fr 1fr; }

  footer { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  :root { --gap: 12px; }

  .panel { border-radius: var(--radius); }

  .menu-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

  .review-cards { grid-template-columns: 1fr; }
  .rating-panel { flex-direction: column; align-items: flex-start; }
  .rating-panel .btn { margin-left: 0; }

  .gallery-strip { grid-template-columns: 1fr 1fr; gap: 8px; }

  footer { grid-template-columns: 1fr; gap: 1.5rem; }

  .hero-actions .btn { flex: 1; }

  /* Keskeny kártyán a címke a videó tetején lévő logóra csúszna: alulra
     kerül, az árral egy sorba, és mindkettő kisebb. */
  .badge-signature {
    top: auto; left: 10px; bottom: 10px;
    padding: 0.4rem 0.6rem;
    font-size: 0.68rem; letter-spacing: 0.1em;
  }
  .price-chip { right: 10px; bottom: 10px; padding: 0.45rem 0.7rem; }
  .price-chip small { font-size: 0.6rem; }
  .price-chip strong { font-size: 1rem; }
  .hero-video-pending .hero-card .badge-signature { transform: translateY(10px); }

  .consent-banner { left: 8px; right: 8px; bottom: 8px; }
}

/* ============ Motion preferences ============ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js-reveal .reveal { opacity: 1; transform: none; }
  .open-sign .live-dot { animation: none !important; }
}