/* Brand color tokens — override via Live Edit Style Editor */
:root {
  --primary-color: #ffffff;
  --accent-color: #c0392b;
  --bg-color: #ffffff;
  --text-color: #1f2937;
}


  :root {
    /* Lakeside summer palette — wood + sun + lake + coral */
    --primary:     #5C3A21;    /* deep wood brown (the pavilion) */
    --primary-d:   #3E2614;    /* darker wood */
    --accent:      #E2683C;    /* sunset coral/orange */
    --accent-deep: #C4501E;    /* deeper coral for hover */
    --sun:         #F4B547;    /* warm sun yellow */
    --lake:        #2D7E96;    /* lake teal */
    --lake-deep:   #1F5E73;
    --leaf:        #6B9B4F;    /* summer leaf green */
    --bg:          #FFF8EB;    /* warm sun-bleached cream */
    --bg-warm:     #F5E5C8;    /* sandy */
    --bg-pale:     #FCEFD4;
    --dark:        #1F140A;    /* near-black wood */
    --text:        #2A1F14;
    --muted:       #7A5F4A;
    --line:        rgba(92, 58, 33, 0.14);

    /* Type */
    --font-display: "Anton", "Impact", "Arial Narrow", system-ui, sans-serif;
    --font-body:    "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
    --font-hand:    "Caveat", cursive;

    /* Scale */
    --maxw: 1240px;
    --gutter: clamp(20px, 4vw, 56px);
    --section-y: clamp(72px, 9vw, 128px);

    /* Hero overlay strength (tweakable 0–100 -> 0–0.85) */
    --hero-overlay: 0.55;
  }

  /* Palette: sundown — deeper coral, warmer */
  :root[data-palette="sundown"] {
    --primary:     #6E3318;
    --primary-d:   #4A1E0A;
    --accent:      #D94A1E;
    --accent-deep: #B23715;
    --sun:         #F2A032;
    --lake:        #B45228;
    --leaf:        #8C6A2C;
    --bg:          #FFF2DA;
    --bg-warm:     #F8DCAE;
    --bg-pale:     #FBE7C0;
    --dark:        #1A0D04;
    --text:        #2A1408;
    --muted:       #7F5638;
  }
  /* Palette: cool lake — emphasizes the teal water */
  :root[data-palette="cool"] {
    --primary:     #1F4E5E;
    --primary-d:   #143947;
    --accent:      #F4B547;
    --accent-deep: #D8932B;
    --sun:         #FAD075;
    --lake:        #2D7E96;
    --leaf:        #6B9B4F;
    --bg:          #F4F7F4;
    --bg-warm:     #E0EBE9;
    --bg-pale:     #ECF2F1;
    --dark:        #0E1F26;
    --text:        #19303A;
    --muted:       #4F6975;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    line-height: 1.6;
    font-size: 16px;
  }
  p { font-family: var(--font-body); margin: 0 0 1em; text-wrap: pretty; }
  h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--primary);
    font-weight: 400;
    letter-spacing: 0.005em;
    line-height: 1;
    margin: 0 0 0.4em;
    text-wrap: balance;
    text-transform: uppercase;
  }
  a { color: inherit; text-decoration: none; }
  img { max-width: 100%; display: block; }
  button, input, select, textarea { font: inherit; color: inherit; }

  .container {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--gutter);
  }

  .eyebrow {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--accent) !important;
    margin: 0 0 20px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
  }
  .eyebrow::before {
    content: "";
    width: 36px; height: 1px;
    background: var(--accent);
  }
  .eyebrow.center {
    display: flex;
    justify-content: center;
  }
  .eyebrow.center::after {
    content: "";
    width: 36px; height: 1px;
    background: var(--accent);
  }
  /* Section-aware overrides for eyebrow accents on dark backgrounds */
  .menu .eyebrow,
  .drinks .eyebrow,
  .hero .eyebrow { color: var(--sun) !important; }
  .menu .eyebrow::before,
  .menu .eyebrow.center::after,
  .drinks .eyebrow::before,
  .drinks .eyebrow.center::after,
  .hero .eyebrow::before,
  .hero .eyebrow.center::after { background: var(--sun); }

  .hand {
    font-family: var(--font-hand);
    font-weight: 600;
    color: var(--accent);
  }

  .section-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto clamp(40px, 5vw, 64px);
  }
  .section-head .eyebrow {
    margin-bottom: 28px;
  }
  .section-head h2 {
    font-size: clamp(48px, 7vw, 92px);
    margin-bottom: 16px;
    margin-top: 0;
    letter-spacing: 0.01em;
  }
  .section-head h2 em {
    color: var(--accent);
    font-style: normal;
  }
  .section-head p {
    color: var(--muted);
    font-size: 17px;
    margin: 0;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    text-transform: none;
    font-family: var(--font-body);
  }
  .section-icon {
    display: block;
    width: 56px;
    height: 56px;
    margin: 0 auto 20px;
    color: var(--accent);
  }

  /* ── Buttons ─────────────────────────────────────────────────────── */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 17px 32px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all .22s ease;
    white-space: nowrap;
  }
  .btn-primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 8px 24px rgba(226, 104, 60, 0.35);
  }
  .btn-primary:hover {
    background: var(--accent-deep);
    border-color: var(--accent-deep);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(196, 80, 30, 0.45);
  }
  .btn-sun {
    background: var(--sun);
    color: var(--dark);
    border-color: var(--sun);
  }
  .btn-sun:hover {
    background: #fff;
    border-color: #fff;
    transform: translateY(-2px);
  }
  .btn-ghost {
    background: rgba(255,255,255,0.08);
    color: #fff;
    border-color: rgba(255,255,255,0.4);
    backdrop-filter: blur(8px);
  }
  .btn-ghost:hover {
    background: rgba(255,255,255,0.15);
    border-color: #fff;
    transform: translateY(-2px);
  }
  .btn-outline {
    background: transparent;
    color: var(--primary);
    border-color: var(--primary);
  }
  .btn-outline:hover {
    background: var(--primary);
    color: var(--bg);
  }
  .btn .arrow {
    width: 14px; height: 14px;
    transition: transform .25s ease;
  }
  .btn:hover .arrow { transform: translateX(3px); }

  /* ── Header / Nav ────────────────────────────────────────────────── */
  .site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    padding: 22px 0;
    transition: background .3s ease, padding .3s ease, box-shadow .3s ease;
  }
  .site-header.scrolled {
    background: rgba(31, 20, 10, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 12px 0;
    box-shadow: 0 1px 0 rgba(244, 181, 71, 0.18);
  }
  .nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
  }
  .brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
  }
  .brand-logo {
    height: 56px;
    width: auto;
    display: block;
    transition: opacity .2s ease;
  }
  .brand:hover .brand-logo { opacity: 0.85; }
  .site-header.scrolled .brand-logo { height: 48px; }
  .footer-brand .brand-logo { height: 72px; }
  .nav-menu {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .nav-menu a {
    display: block;
    padding: 10px 14px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.04em;
    position: relative;
    transition: color .2s;
  }
  .nav-menu a:hover { color: var(--sun); }
  .nav-menu a.cta {
    margin-left: 12px;
    background: var(--accent);
    color: #fff;
    padding: 10px 22px;
    border-radius: 999px;
    font-weight: 700;
  }
  .nav-menu a.cta:hover {
    background: var(--sun);
    color: var(--dark);
  }
  .nav-toggle {
    display: none;
    background: none; border: none;
    color: #fff;
    width: 40px; height: 40px;
    cursor: pointer;
  }
  .nav-toggle svg { width: 24px; height: 24px; }

  /* ── Hero ────────────────────────────────────────────────────────── */
  .hero {
    position: relative;
    min-height: 100vh;
    display: block;
    color: #fff;
    background: var(--dark);
    overflow: hidden;
    isolation: isolate;
  }
  .hero-right {
    /* A hero KÉPÉT a MW háttér-modul festi (lásd top.php), ezért itt nincs
       background-image -- ez az elem már csak a fölé kerülő sötétítő
       árnyalatot (::after) hordozza. Ha ide bármilyen hátteret írnánk,
       letakarná az adminban választott képet. */
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
  }
  .hero-right::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(31,20,10,0.25) 0%, rgba(31,20,10,calc(0.2 + var(--hero-overlay) * 0.5)) 50%, rgba(31,20,10,0.78) 100%);
  }
  .hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 100px 6vw 80px;
  }
  .hero-overlay-inner {
    max-width: 640px;
  }
  .hero-overlay h1 {
    font-family: var(--font-display);
    font-size: clamp(56px, 6.5vw, 96px);
    color: #fff;
    margin: 0 0 18px;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 0.95;
    text-transform: uppercase;
  }
  .hero-overlay h1 em {
    font-style: normal;
    color: var(--sun);
    display: inline-block;
  }
  .hero-overlay .sub {
    font-family: var(--font-body);
    font-size: 13px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
    margin: 0 0 34px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 14px;
  }
  .hero-overlay .sub::before,
  .hero-overlay .sub::after {
    content: "";
    width: 28px; height: 1px;
    background: var(--sun);
  }
  .hero-ctas {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .hero-scroll {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.55);
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .hero-scroll .line {
    width: 1px; height: 40px;
    background: linear-gradient(180deg, transparent, var(--sun));
    animation: scrollLine 2.4s ease-in-out infinite;
  }
  @keyframes scrollLine {
    0%, 100% { transform: scaleY(0.3); transform-origin: top; }
    50% { transform: scaleY(1); transform-origin: top; }
  }

  /* ── Deszka (wood plank) decoration ───────────────────── */
  /* SVG plank pattern, tileable. Two rows, knots, grain, end-joints. */
  .deszka-strip {
    height: 56px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='56' viewBox='0 0 240 56' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%237B4F2C'/><stop offset='0.5' stop-color='%235C3A21'/><stop offset='1' stop-color='%23493019'/></linearGradient><linearGradient id='h' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23694325'/><stop offset='0.5' stop-color='%23522E18'/><stop offset='1' stop-color='%233F2412'/></linearGradient></defs><rect x='0' y='0' width='240' height='27' fill='url(%23g)'/><rect x='0' y='29' width='240' height='27' fill='url(%23h)'/><line x1='0' y1='27.5' x2='240' y2='27.5' stroke='%23120A04' stroke-opacity='0.21' stroke-width='1'/><line x1='0' y1='28.5' x2='240' y2='28.5' stroke='%238E6B49' stroke-opacity='0.66' stroke-width='0.6'/><line x1='90' y1='0' x2='90' y2='27' stroke='%23120A04' stroke-opacity='0.15' stroke-width='1'/><line x1='90' y1='0' x2='90' y2='27' stroke='%238E6B49' stroke-opacity='0.54' stroke-width='0.6'/><line x1='168' y1='29' x2='168' y2='56' stroke='%23120A04' stroke-opacity='0.15' stroke-width='1'/><line x1='168' y1='29' x2='168' y2='56' stroke='%238E6B49' stroke-opacity='0.54' stroke-width='0.6'/><path d='M0 7 Q60 8 120 6 T240 7' stroke='%238E6B49' stroke-opacity='0.45' stroke-width='0.6' fill='none'/><path d='M0 14 Q80 13 160 15 T240 14' stroke='%238E6B49' stroke-opacity='0.36' stroke-width='0.5' fill='none'/><path d='M0 20 Q70 21 140 19 T240 20' stroke='%23120A04' stroke-opacity='0.36' stroke-width='0.5' fill='none'/><path d='M0 36 Q90 37 180 35 T240 36' stroke='%238E6B49' stroke-opacity='0.45' stroke-width='0.6' fill='none'/><path d='M0 44 Q60 43 130 45 T240 44' stroke='%238E6B49' stroke-opacity='0.36' stroke-width='0.5' fill='none'/><path d='M0 50 Q90 49 170 51 T240 50' stroke='%23120A04' stroke-opacity='0.36' stroke-width='0.5' fill='none'/><ellipse cx='40' cy='14' rx='4' ry='3' fill='%23120A04' fill-opacity='0.36'/><ellipse cx='40' cy='14' rx='2.5' ry='1.8' fill='%23120A04' fill-opacity='0.56'/><ellipse cx='200' cy='42' rx='5' ry='3.5' fill='%23120A04' fill-opacity='0.32'/><ellipse cx='200' cy='42' rx='3' ry='2' fill='%23120A04' fill-opacity='0.52'/></svg>");
    background-size: 240px 56px;
    background-repeat: repeat-x;
    box-shadow:
      inset 0 4px 8px rgba(0, 0, 0, 0.25),
      inset 0 -4px 8px rgba(0, 0, 0, 0.25),
      0 1px 0 rgba(244, 181, 71, 0.08);
    position: relative;
  }
  .deszka-strip.tall { height: 72px; background-size: 280px 72px; }
  .deszka-strip.thin { height: 36px; background-size: 200px 36px; }

  /* nail dots accent line on the strip */
  .deszka-strip::before,
  .deszka-strip::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 6px;
    background-image:
      radial-gradient(circle, rgba(31, 20, 10, 0.55) 0, rgba(31, 20, 10, 0.55) 1.5px, transparent 2px);
    background-size: 120px 6px;
    background-position: 30px center;
    background-repeat: repeat-x;
  }
  .deszka-strip::before { top: 6px; }
  .deszka-strip::after  { bottom: 6px; background-position: 70px center; }

  /* Subtle wood overlay you can layer onto dark surfaces */
  .wood-overlay {
    position: relative;
  }
  .wood-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='80' viewBox='0 0 300 80' preserveAspectRatio='none'><line x1='0' y1='40' x2='300' y2='40' stroke='%23F4B547' stroke-opacity='0.12' stroke-width='1'/><path d='M0 12 Q80 14 160 11 T300 13' stroke='%23F4B547' stroke-opacity='0.75' stroke-width='0.5' fill='none'/><path d='M0 26 Q100 24 200 27 T300 25' stroke='%23F4B547' stroke-opacity='0.6' stroke-width='0.4' fill='none'/><path d='M0 56 Q90 58 180 55 T300 57' stroke='%23F4B547' stroke-opacity='0.75' stroke-width='0.5' fill='none'/><path d='M0 70 Q120 68 240 71 T300 69' stroke='%23F4B547' stroke-opacity='0.6' stroke-width='0.4' fill='none'/></svg>");
    background-size: 300px 80px;
    background-repeat: repeat;
    pointer-events: none;
    z-index: 0;
  }
  .wood-overlay > * { position: relative; z-index: 1; }

  /* ── Wood grain texture for brown surfaces ──────────────────────── */
  /* Subtle horizontal grain + knots, layered as ::before so children with z-index sit above */
  .wood-grain { position: relative; isolation: isolate; }
  .wood-grain::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 1;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='400' viewBox='0 0 800 400' preserveAspectRatio='none'><g stroke-linecap='round' fill='none'><path d='M 0 12 Q 200 8 400 14 T 800 12' stroke='%23D9A879' stroke-opacity='0.66' stroke-width='1.4'/><path d='M 0 32 Q 150 36 350 30 T 800 34' stroke='%23D9A879' stroke-opacity='0.45' stroke-width='1.1'/><path d='M 0 52 Q 180 50 380 56 T 800 53' stroke='%23000' stroke-opacity='0.42' stroke-width='1.2'/><path d='M 0 72 Q 220 75 420 70 T 800 73' stroke='%23D9A879' stroke-opacity='0.54' stroke-width='1.3'/><path d='M 0 95 Q 160 92 340 98 T 800 95' stroke='%23D9A879' stroke-opacity='0.36' stroke-width='1'/><path d='M 0 118 Q 200 122 400 115 T 800 120' stroke='%23000' stroke-opacity='0.36' stroke-width='1.1'/><path d='M 0 140 Q 150 142 350 138 T 800 142' stroke='%23D9A879' stroke-opacity='0.6' stroke-width='1.4'/><path d='M 0 165 Q 180 168 380 162 T 800 165' stroke='%23D9A879' stroke-opacity='0.36' stroke-width='1'/><path d='M 0 188 Q 220 185 420 192 T 800 188' stroke='%23000' stroke-opacity='0.45' stroke-width='1.2'/><path d='M 0 212 Q 160 215 360 208 T 800 212' stroke='%23D9A879' stroke-opacity='0.48' stroke-width='1.2'/><path d='M 0 235 Q 200 232 400 238 T 800 234' stroke='%23D9A879' stroke-opacity='0.6' stroke-width='1.4'/><path d='M 0 258 Q 150 262 360 256 T 800 260' stroke='%23000' stroke-opacity='0.36' stroke-width='1'/><path d='M 0 282 Q 180 285 400 278 T 800 282' stroke='%23D9A879' stroke-opacity='0.48' stroke-width='1.2'/><path d='M 0 305 Q 220 302 420 308 T 800 305' stroke='%23D9A879' stroke-opacity='0.39' stroke-width='1'/><path d='M 0 328 Q 160 332 360 325 T 800 330' stroke='%23000' stroke-opacity='0.42' stroke-width='1.1'/><path d='M 0 355 Q 200 352 400 360 T 800 356' stroke='%23D9A879' stroke-opacity='0.54' stroke-width='1.3'/><path d='M 0 378 Q 180 380 380 374 T 800 378' stroke='%23D9A879' stroke-opacity='0.42' stroke-width='1.1'/></g><g><ellipse cx='180' cy='95' rx='14' ry='5' fill='%23000' fill-opacity='0.4'/><ellipse cx='180' cy='95' rx='7' ry='2.5' fill='%23000' fill-opacity='0.6'/><ellipse cx='620' cy='245' rx='12' ry='4' fill='%23000' fill-opacity='0.36'/><ellipse cx='620' cy='245' rx='6' ry='2' fill='%23000' fill-opacity='0.56'/><ellipse cx='420' cy='340' rx='10' ry='3.5' fill='%23000' fill-opacity='0.36'/><ellipse cx='420' cy='340' rx='5' ry='1.8' fill='%23000' fill-opacity='0.52'/></g></svg>");
    background-size: 800px 400px;
    background-repeat: repeat;
  }
  .wood-grain > * { position: relative; z-index: 1; }
  /* Smaller-tile variant for cards */
  .wood-grain.tight::before {
    background-size: 400px 200px;
    opacity: 0.85;
  }

  /* ── Intro ───────────────────────────────────────────── */
  .intro {
    padding: clamp(72px, 9vw, 120px) 0;
    background: var(--bg);
    text-align: center;
  }
  .intro .icon {
    width: 72px; height: 72px;
    color: var(--accent);
    margin: 0 auto 28px;
    display: block;
  }
  .intro h2 {
    font-size: clamp(40px, 5.5vw, 72px);
    color: var(--primary);
    margin: 0 0 24px;
    text-transform: uppercase;
  }
  .intro h2 em { color: var(--accent); font-style: normal; }
  .intro p {
    font-family: var(--font-body);
    color: var(--muted);
    font-size: 16px;
    line-height: 1.75;
    max-width: 680px;
    margin: 0 auto;
  }

  /* ── Hero stat strip ─────────────────────────────────── */
  .hero-strip {
    position: relative;
    background: var(--primary);
    color: #fff;
    overflow: hidden;
  }
  .hero-strip::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse at 20% 50%, rgba(244,181,71,0.12), transparent 50%),
      radial-gradient(ellipse at 80% 50%, rgba(226,104,60,0.12), transparent 50%);
  }
  .hero-strip-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    position: relative;
  }
  .strip-cell {
    padding: 38px 28px;
    text-align: center;
    border-right: 1px dashed rgba(244, 181, 71, 0.25);
  }
  .strip-cell:last-child { border-right: none; }
  .strip-cell .num {
    font-family: var(--font-display);
    font-size: 44px;
    color: var(--sun);
    line-height: 1;
    margin-bottom: 8px;
    font-weight: 800;
    letter-spacing: -0.02em;
  }
  .strip-cell .lbl {
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    font-weight: 600;
  }

  /* ── About ───────────────────────────────────────────────────────── */
  .about {
    background: var(--bg-warm);
    padding: var(--section-y) 0;
    position: relative;
    overflow: hidden;
  }
  .about::before {
    content: "";
    position: absolute;
    top: -100px; right: -100px;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(244,181,71,0.22), transparent 65%);
    pointer-events: none;
  }
  .about-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(40px, 6vw, 96px);
    align-items: center;
    position: relative;
  }
  .about-copy h2 {
    font-size: clamp(40px, 5.4vw, 68px);
    margin-bottom: 24px;
  }
  .about-copy h2 em { color: var(--accent); font-style: normal; }
  .about-copy .hand-overlay {
    font-family: var(--font-hand);
    color: var(--accent);
    font-size: 0.7em;
    font-weight: 700;
    display: inline-block;
    transform: rotate(-4deg) translateY(-6px);
    margin-left: 6px;
  }
  .about-copy p {
    color: var(--text);
    font-size: 17px;
    line-height: 1.75;
    margin-bottom: 18px;
    opacity: 0.88;
  }
  .signature {
    margin-top: 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .signature .pill {
    background: var(--bg);
    border: 2px solid var(--primary);
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .signature .ic {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--sun);
    display: grid; place-items: center;
    color: var(--dark);
    flex-shrink: 0;
  }
  .signature .ic svg { width: 18px; height: 18px; }
  .signature .ttl { font-weight: 700; color: var(--primary); font-size: 14px; line-height: 1.2; }
  .signature .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
  .signature-name {
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--primary);
  }
  .signature-role {
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 4px;
  }
  .about-img {
    position: relative;
    aspect-ratio: 4/5;
    overflow: hidden;
    border-radius: 24px;
  }
  /* A kép MINDIG kitölti a 4/5-ös keretet. Mindhárom deklaráció `!important`,
     mert a MW Live Edit kép-eszköze INLINE stílust ír az <img>-re (megfigyelt
     értékek: `object-fit: contain`, valamint méret-attribútumok átméretezéskor),
     és azt a content_fields-be menti. Inline stílust csak `!important` ver.
     Enélkül a kép levelezőlap-méretűre zsugorodik a magas keretben, és fölötte-
     alatta kilátszik a narancs dekor-vonal -- pontosan ezt jelezte az ügyfél. */
  .about-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  /* A konverzió `<div class="edit">`-be csomagolta a képet (a tervben az <img>
     közvetlen gyerek volt). A wrapper magassága `auto`, ezért a kép `height:100%`-a
     NEM a 4/5-ös kerethez mért -- a kép alacsonyabb lett a keretnél, és felül
     kilátszott mögüle a narancs dekor-vonal. A wrapper kitöltése helyreteszi. */
  .about-img > .edit {
    display: block;
    width: 100%; height: 100%;
  }
  .about-img::before {
    content: "";
    position: absolute;
    inset: 18px -22px 38px 22px;
    border: 3px solid var(--accent);
    border-radius: 24px;
    z-index: -1;
  }
  /* A sárga „2024 — óta a tóparton" jelvény (.about-badge) törölve: a szülő
     `overflow: hidden`-je levágta a kilógó sarkát, ezért félbevágott sárga
     foltként látszott. Ügyfél-kérés 2026-08-11: teljesen kivenni. */

  /* ── Menu ────────────────────────────────────────────────────────── */
  .menu {
    padding: var(--section-y) 0;
    background: var(--primary);
    color: #fff;
    position: relative;
  }
  .menu .section-head h2 { color: #fff; }
  .menu .section-head h2 em { color: var(--sun); }
  .menu .section-head p { color: rgba(255,255,255,0.65); }
  .menu .eyebrow { color: var(--sun); }
  .menu .eyebrow::before { background: var(--sun); }
  .menu .eyebrow.center::after { background: var(--sun); }
  .menu-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin-bottom: 64px;
    border-bottom: 1px solid rgba(244,181,71,0.18);
  }
  .menu-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 14px 18px 16px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    cursor: pointer;
    transition: color .2s, border-color .2s;
    white-space: nowrap;
  }
  .menu-tab:hover { color: #fff; }
  .menu-tab.active {
    color: var(--sun);
    border-bottom-color: var(--sun);
  }
  .menu-panel {
    display: none;
    animation: fadeUp .4s ease;
  }
  .menu-panel.active { display: block; }
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .menu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(36px, 4.5vw, 60px) clamp(32px, 5vw, 64px);
    margin-bottom: 56px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
  }
  .menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 0;
    border: none;
  }
  .menu-item > div:first-child {
    display: contents;
  }
  .menu-item:hover .menu-item-name { color: var(--sun); }
  .menu-item-name {
    order: 1;
    font-family: var(--font-display);
    font-size: 20px;
    color: #fff;
    font-weight: 400;
    transition: color .2s;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.15;
  }
  .menu-item-desc {
    order: 3;
    font-family: var(--font-body);
    font-size: 13px;
    color: rgba(255,255,255,0.55);
    margin: 0;
    line-height: 1.55;
    max-width: 280px;
    text-transform: none;
  }
  .menu-item-price {
    order: 2;
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--sun);
    font-weight: 400;
    white-space: nowrap;
    letter-spacing: 0.04em;
  }
  .menu-item-price .alt {
    display: block;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    margin-top: 2px;
    text-align: center;
  }
  .menu-item-tag {
    display: inline-block;
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--dark);
    background: var(--sun);
    padding: 3px 8px;
    margin-left: 6px;
    border-radius: 999px;
    font-weight: 700;
    vertical-align: middle;
  }
  /* Category subtitle paragraph inside dark menu panels */
  .menu-panel > p,
  .menu-panel > p[style*="muted"] {
    color: rgba(255,255,255,0.45) !important;
  }
  .menu-foot {
    text-align: center;
  }
  .menu-foot p {
    color: rgba(255,255,255,0.55);
    font-size: 14px;
    font-style: italic;
    margin-bottom: 24px;
  }
  .menu .btn-outline {
    color: #fff;
    border-color: rgba(255,255,255,0.4);
  }
  .menu .btn-outline:hover {
    background: var(--sun);
    color: var(--dark);
    border-color: var(--sun);
  }

  /* ── Drinks ──────────────────────────────────────────────────────── */
  .drinks {
    background: var(--dark);
    color: #fff;
    padding: var(--section-y) 0;
    position: relative;
    overflow: hidden;
  }
  .drinks::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse at 20% 30%, rgba(201, 166, 113, 0.08), transparent 50%),
      radial-gradient(ellipse at 80% 70%, rgba(201, 166, 113, 0.05), transparent 50%);
    pointer-events: none;
  }
  .drinks .container { position: relative; }
  .drinks .section-head h2 { color: #fff; }
  .drinks .section-head h2 em { color: var(--sun); }
  .drinks .section-head p { color: rgba(255,255,255,0.72); }
  .drinks .eyebrow { color: var(--sun); }
  .drinks .eyebrow::before { background: var(--sun); }

  .drink-price-pair {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    line-height: 1.2;
    /* A tipográfia EGYEZZEN a `.drink-price`-szal. Korábban itt csak elrendezés
       volt, betű-szabály nem — így a két-áras sor a törzs-betűvel, FEHÉREN és
       kicsiben jelent meg, az egy-áras sor viszont nagy narancs cégbetűvel.
       Ugyanabban a listában kétféle ár-formátum. (2026-08-12 ügyfél-jelzés) */
    font-family: var(--font-display);
    color: var(--sun);
    font-size: 18px;
    font-weight: 700;
  }
  .drink-price-pair .vol {
    font-size: 11px;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.4);
    font-family: var(--font-body);
    text-transform: uppercase;
  }
  .drink-block .head-prices {
    font-family: var(--font-display);
    color: var(--accent);
    font-size: 14px;
    letter-spacing: 0.02em;
    text-transform: none;
    font-weight: 400;
  }
  .drink-list.cols-3 li {
    grid-template-columns: 1fr 70px 70px;
    gap: 12px;
  }
  .drink-list.cols-3 .col-price {
    font-family: var(--font-display);
    color: var(--sun);
    font-size: 16px;
    text-align: right;
    font-weight: 700;
  }
  .drink-list.cols-3 .col-head {
    color: rgba(255,255,255,0.4);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-family: var(--font-body);
    text-align: right;
  }
  .drink-list.cols-3 li.head {
    border-bottom: 1px solid rgba(201, 166, 113, 0.25);
    padding-bottom: 8px;
    margin-bottom: 6px;
  }

  .drinks-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(40px, 5vw, 72px);
    margin-top: 16px;
  }
  .drink-block h3 {
    color: var(--sun);
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(244, 181, 71, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    letter-spacing: -0.01em;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(201, 166, 113, 0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .drink-block h3 span {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.2em;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    font-weight: 400;
  }
  .drink-list {
    list-style: none;
    margin: 0; padding: 0;
  }
  .drink-list li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px dotted rgba(255,255,255,0.08);
    align-items: baseline;
    font-size: 15px;
  }
  .drink-list li:last-child { border-bottom: none; }
  .drink-name { color: rgba(255,255,255,0.92); }
  .drink-detail {
    color: rgba(255,255,255,0.5);
    font-size: 13px;
    margin-top: 2px;
  }
  .drink-price {
    font-family: var(--font-display);
    color: var(--sun);
    font-size: 18px;
    font-weight: 700;
  }

  /* ── Gallery ─────────────────────────────────────────────────────── */
  .events {
    padding: var(--section-y) 0;
    background: var(--bg);
    position: relative;
    overflow: hidden;
  }
  .events::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse at 10% 100%, rgba(244,181,71,0.16), transparent 50%),
      radial-gradient(ellipse at 90% 0%, rgba(45,126,150,0.12), transparent 50%);
    pointer-events: none;
  }
  .events .container { position: relative; }
  .events-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
  .event-card {
    position: relative;
    background: var(--primary);
    color: #fff;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 3/4;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px;
    box-shadow: 0 14px 36px rgba(31, 20, 10, 0.18);
    transition: transform .3s, box-shadow .3s;
  }
  .event-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 50px rgba(31, 20, 10, 0.28);
  }
  .event-card .ec-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .event-card .ec-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(31,20,10,0.1) 0%, rgba(31,20,10,0.5) 50%, rgba(31,20,10,0.92) 100%);
  }
  .event-card.bg-sun .ec-bg {
    background: radial-gradient(ellipse at 50% 30%, var(--sun) 0%, var(--accent) 55%, var(--accent-deep) 100%);
  }
  .event-card.bg-lake .ec-bg {
    background: radial-gradient(ellipse at 50% 30%, var(--lake) 0%, var(--lake-deep) 100%);
  }
  .event-card.bg-night .ec-bg {
    background: linear-gradient(135deg, #2A1F14 0%, #5C3A21 100%);
  }
  .event-card.bg-leaf .ec-bg {
    background: radial-gradient(ellipse at 50% 30%, var(--leaf) 0%, #3D6B30 100%);
  }
  .event-card .ec-content {
    position: relative;
    z-index: 1;
  }
  .event-card .ec-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--dark);
    background: var(--sun);
    padding: 6px 12px;
    border-radius: 999px;
    margin-bottom: 16px;
  }
  .event-card .ec-title {
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
  }
  .event-card .ec-title .hand {
    font-family: var(--font-hand);
    font-weight: 700;
    font-size: 0.9em;
    color: var(--sun);
    display: block;
    transform: rotate(-3deg);
    margin-bottom: -8px;
    line-height: 1.1;
  }
  .event-card .ec-detail {
    font-size: 14px;
    color: rgba(255,255,255,0.85);
    line-height: 1.5;
    margin-top: 14px;
  }
  .event-card .ec-when {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px dashed rgba(255,255,255,0.2);
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    font-weight: 600;
  }
  .event-card .ec-when svg { width: 14px; height: 14px; color: var(--sun); flex-shrink: 0; }
  .events-foot {
    margin-top: 36px;
    text-align: center;
    padding: 28px 32px;
    background: var(--primary);
    color: #fff;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
  }
  .events-foot .ef-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--sun);
    margin: 0;
    text-align: left;
  }
  .events-foot .ef-sub {
    font-size: 14px;
    color: rgba(255,255,255,0.7);
    margin: 4px 0 0;
  }

  .gallery {
    padding: var(--section-y) 0;
    background: var(--bg-pale);
  }
  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: clamp(380px, 36vw, 520px);
    /* Ügyfél-kérés 2026-08-12: a galéria-képek kapják meg ugyanazt a
       lekerekítést, mint az „A Deszkabárról" szekció képe (.about-img, 24px).
       Ehhez rés is kell: rés nélkül (a terv `gap: 0`-t adott, él-az-élhez
       mozaik) a szomszédos lekerekített sarkok között hézag-foltok
       keletkeznének a szekció hátterének színében. */
    gap: 16px;
  }
  .gallery-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: var(--bg-warm);
    border-radius: 24px;   /* = .about-img */
  }
  .gallery-item:nth-child(n+4) { display: none; }
  .gallery-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
  }
  .gallery-item:hover img { transform: scale(1.06); }
  .gallery-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(26,20,16,0.5));
    opacity: 0;
    transition: opacity .3s;
  }
  .gallery-item:hover::after { opacity: 1; }
  .gallery-item.tall { grid-row: span 1; }
  .gallery-item.wide { grid-column: span 1; }

  /* ── Reservation ─────────────────────────────────────────────────── */
  .reserve {
    padding: var(--section-y) 0;
    background: var(--bg-warm);
    position: relative;
    overflow: hidden;
  }
  .reserve .container { position: relative; }
  .reserve-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(40px, 6vw, 88px);
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
  }
  .reserve-copy h2 {
    font-size: clamp(36px, 4.4vw, 52px);
    margin-bottom: 20px;
  }
  .reserve-copy h2 em { color: var(--accent); font-style: normal; }
  .reserve-copy p {
    color: var(--text);
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 28px;
    opacity: 0.88;
  }
  .reserve-perks {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .reserve-perks li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 15px;
    color: var(--primary);
  }
  .reserve-perks .tick {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--sun);
    color: var(--dark);
    display: grid;
    place-items: center;
    font-size: 14px;
    flex-shrink: 0;
    margin-top: -1px;
    font-weight: 800;
  }

  .reserve-call {
    margin-top: 36px;
    padding: 22px 24px;
    background: var(--primary);
    border-radius: 18px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 18px;
  }
  .reserve-call .ic {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--sun);
    color: var(--dark);
    display: grid; place-items: center;
    flex-shrink: 0;
  }
  .reserve-call .ic svg { width: 22px; height: 22px; }
  .reserve-call .lbl {
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sun);
    font-weight: 700;
  }
  .reserve-call .num {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    letter-spacing: -0.01em;
  }
  .reserve-call .num:hover { color: var(--sun); }

  /* ── Schedule cards (Hétköznap / Hétvége) ─────────────── */
  .schedule-cards {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
  }
  .schedule-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 22px 24px;
    transition: border-color .25s, box-shadow .25s;
  }
  .schedule-card.today {
    border-color: var(--accent);
    box-shadow: 0 10px 28px rgba(226, 104, 60, 0.14);
  }
  .sc-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--line);
    margin-bottom: 14px;
  }
  .sc-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }
  .sc-title svg {
    width: 20px; height: 20px;
    color: var(--accent);
    flex-shrink: 0;
  }
  .sc-meta {
    flex: 1;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
  }
  .sc-badge {
    display: none !important;
  }
  .sc-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    padding: 8px 0;
    font-size: 15px;
    gap: 16px;
  }
  .sc-row + .sc-row { border-top: 1px dotted var(--line); }
  .sc-row .day {
    color: var(--primary);
    font-weight: 600;
  }
  .sc-row .hrs {
    font-family: var(--font-display);
    color: var(--text);
    font-size: 19px;
    letter-spacing: 0.02em;
  }
  .sc-row .hrs.phone {
    color: var(--accent);
    text-decoration: none;
    transition: color .2s;
  }
  .sc-row .hrs.phone:hover { color: var(--accent-deep); }
  .sc-phone-row .day {
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 700;
  }

  /* Standalone phone-order band */
  .phone-order {
    margin-top: 40px;
    padding: clamp(26px, 3.5vw, 40px) clamp(26px, 4vw, 52px);
    background: var(--primary);
    border-radius: 24px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: clamp(20px, 3vw, 36px);
    text-decoration: none;
    transition: transform .25s, box-shadow .25s;
    box-shadow: 0 18px 44px rgba(31, 20, 10, 0.20);
    position: relative;
    overflow: hidden;
    flex-wrap: wrap;
  }
  .phone-order::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top right, rgba(244,181,71,0.22), transparent 62%);
    pointer-events: none;
  }
  .phone-order:hover {
    transform: translateY(-4px);
    box-shadow: 0 26px 56px rgba(31, 20, 10, 0.28);
  }
  .phone-order .po-ic {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--sun);
    color: var(--dark);
    display: grid; place-items: center;
    flex-shrink: 0;
    position: relative;
  }
  .phone-order .po-ic svg { width: 28px; height: 28px; }
  .phone-order .po-text { position: relative; flex: 1; min-width: 220px; }
  .phone-order .po-lbl {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(26px, 3vw, 34px);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1;
    margin-bottom: 8px;
  }
  .phone-order .po-sub {
    display: block;
    font-size: 14px;
    color: rgba(255,255,255,0.72);
  }
  .phone-order .po-cta {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-shrink: 0;
  }
  .phone-order .po-num {
    font-family: var(--font-display);
    font-size: clamp(26px, 3vw, 34px);
    color: var(--sun);
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
  .phone-order .po-arrow {
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(244, 181, 71, 0.45);
    display: grid; place-items: center;
    color: var(--sun);
    flex-shrink: 0;
    transition: transform .25s, background .25s, color .25s;
  }
  .phone-order .po-arrow svg { width: 18px; height: 18px; }
  .phone-order:hover .po-arrow {
    background: var(--sun);
    color: var(--dark);
    transform: translateX(5px);
  }
  @media (max-width: 560px) {
    .phone-order .po-cta { width: 100%; justify-content: space-between; }
  }

  .reserve-form {
    background: #fff;
    padding: clamp(28px, 4vw, 48px);
    border: none;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(31, 20, 10, 0.10);
  }
  .form-title {
    font-family: var(--font-display);
    font-size: 26px;
    color: var(--primary);
    margin-bottom: 4px;
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  .form-sub {
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 28px;
  }
  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
  }
  .form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
  }
  .form-field label {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
  }
  .form-field input,
  .form-field select,
  .form-field textarea {
    background: var(--bg-pale);
    border: 2px solid transparent;
    padding: 13px 16px;
    border-radius: 12px;
    font-size: 15px;
    color: var(--text);
    font-family: var(--font-body);
    transition: border-color .2s, background .2s;
  }
  .form-field input:focus,
  .form-field select:focus,
  .form-field textarea:focus {
    outline: none;
    border-color: var(--accent);
    background: #fff;
  }
  .form-field.error input,
  .form-field.error select {
    border-color: #C0392B;
    background: rgba(192, 57, 43, 0.04);
  }
  .form-field .err-msg {
    font-size: 12px;
    color: #C0392B;
    min-height: 0;
    display: none;
  }
  .form-field.error .err-msg { display: block; }
  .form-actions {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
  }
  .form-actions .btn { width: 100%; justify-content: center; }
  .form-success {
    display: none;
    background: rgba(244, 181, 71, 0.18);
    border: 2px solid var(--sun);
    color: var(--primary);
    padding: 16px 20px;
    margin-top: 20px;
    font-size: 14px;
    text-align: center;
    border-radius: 12px;
    font-weight: 600;
  }
  .form-success.show { display: block; animation: fadeUp .4s ease; }

  /* ── Hours & contact ─────────────────────────────────────────────── */
  .hours {
    padding: var(--section-y) 0;
    background: var(--bg);
  }
  .hours-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 80px);
  }
  .hours-col h2 {
    font-size: clamp(36px, 5vw, 52px);
    margin-bottom: 12px;
  }
  .hours-col h2 em { color: var(--accent); font-style: normal; }
  .hours-col > p {
    color: var(--muted);
    margin-bottom: 32px;
  }
  .season-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--leaf);
    color: #fff;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 18px;
  }
  .season-badge .dot {
    width: 8px; height: 8px;
    background: var(--sun);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(244,181,71,0.3);
  }
  .season-badge.closed {
    background: var(--muted);
  }
  .hours-list {
    list-style: none;
    margin: 0; padding: 0;
  }
  .hours-list li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    align-items: center;
    font-size: 16px;
    gap: 14px;
  }
  .hours-list li.today {
    color: var(--accent);
    font-weight: 700;
  }
  .hours-list li.today .day-badge {
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    letter-spacing: 0.14em;
    padding: 4px 9px;
    border-radius: 999px;
    font-weight: 800;
    text-transform: uppercase;
  }
  .hours-list li:not(.today) .day-badge { display: none; }
  .hours-list .day { color: var(--primary); font-weight: 600; }
  .hours-list .hrs {
    font-family: var(--font-display);
    color: var(--text);
    font-weight: 600;
  }
  .hours-list li.today .day,
  .hours-list li.today .hrs { color: var(--accent); }
  .hours-list li.closed .hrs { color: var(--muted); font-style: italic; font-family: var(--font-body); font-weight: 400; }
  .hours-list li.party {
    background: linear-gradient(90deg, transparent, rgba(244,181,71,0.08), transparent);
  }
  .hours-list .party-tag {
    grid-column: 1 / -1;
    margin-top: 4px;
    font-family: var(--font-hand);
    font-size: 18px;
    color: var(--accent);
    font-weight: 700;
  }

  .contact-card {
    background: var(--primary);
    color: #fff;
    padding: 32px;
    margin-top: 28px;
    border-radius: 20px;
    box-shadow: 0 14px 40px rgba(31, 20, 10, 0.15);
  }
  .contact-card h3 {
    color: var(--sun);
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
  }
  .contact-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 10px 0;
    font-size: 15px;
  }
  .contact-row .ic {
    width: 22px; height: 22px;
    color: var(--sun);
    flex-shrink: 0;
    margin-top: 1px;
  }
  .contact-row a { color: rgba(255,255,255,0.92); transition: color .2s; }
  .contact-row a:hover { color: var(--sun); }
  .contact-row span { color: rgba(255,255,255,0.92); }

  .google-maps {
    width: 100%;
    aspect-ratio: 4/3;
    background:
      linear-gradient(135deg, rgba(45,126,150,0.12), rgba(107,155,79,0.08)),
      #DDEDE9;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    box-shadow: 0 10px 30px rgba(31, 20, 10, 0.08);
  }
  .google-maps::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(45,126,150,0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(45,126,150,0.06) 1px, transparent 1px);
    background-size: 40px 40px;
  }
  .gm-lake {
    position: absolute;
    left: 8%; bottom: 12%;
    width: 52%; height: 38%;
    background: radial-gradient(ellipse at center, rgba(45,126,150,0.5), rgba(45,126,150,0.3));
    border-radius: 60% 40% 50% 50% / 60% 50% 50% 40%;
    border: 2px dashed rgba(45,126,150,0.4);
  }
  .gm-lake-label {
    position: absolute;
    left: 18%; bottom: 28%;
    font-family: var(--font-hand);
    font-size: 20px;
    color: var(--lake-deep);
    font-weight: 700;
    transform: rotate(-8deg);
  }
  .gm-roads {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .gm-pin {
    position: absolute;
    right: 24%; top: 32%;
    z-index: 2;
    background: var(--accent);
    color: #fff;
    padding: 12px 18px 12px 14px;
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(226, 104, 60, 0.35);
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.01em;
  }
  .gm-pin::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 22px;
    border: 8px solid transparent;
    border-top-color: var(--accent);
    border-bottom: 0;
  }
  .gm-attrib {
    position: absolute;
    bottom: 10px;
    right: 12px;
    font-size: 10px;
    color: var(--muted);
    background: rgba(255,255,255,0.8);
    padding: 3px 7px;
    border-radius: 6px;
  }

  /* ── Footer ──────────────────────────────────────────────────────── */
  .site-footer {
    background: var(--dark);
    color: rgba(255,255,255,0.7);
    padding: 80px 0 28px;
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 56px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .footer-brand .brand { color: #fff; }
  .footer-brand p {
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255,255,255,0.55);
    margin-top: 20px;
    max-width: 320px;
  }
  .footer-col h4 {
    color: var(--sun);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: 22px;
  }
  .footer-col ul {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .footer-col a {
    font-size: 14px;
    color: rgba(255,255,255,0.65);
    transition: color .2s;
  }
  .footer-col a:hover { color: var(--sun); }
  .footer-socials {
    display: flex;
    gap: 10px;
    margin-top: 8px;
  }
  .footer-socials a {
    width: 38px; height: 38px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: rgba(255,255,255,0.6);
    transition: all .2s;
  }
  .footer-socials a:hover {
    border-color: var(--sun);
    color: var(--sun);
    background: rgba(244, 181, 71, 0.1);
  }
  .footer-socials svg { width: 16px; height: 16px; }

  .footer-bottom {
    padding-top: 28px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 12px;
    color: rgba(255,255,255,0.4);
  }

  /* ── Tweaks panel ────────────────────────────────────────────────── */
  .tweaks-panel {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 280px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 20px 60px rgba(0,0,0,0.18);
    border-radius: 4px;
    z-index: 200;
    display: none;
    overflow: hidden;
    font-family: var(--font-body);
  }
  .tweaks-panel.open { display: block; }
  .tweaks-head {
    background: var(--primary);
    color: #fff;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .tweaks-head h4 {
    color: var(--sun);
    font-family: var(--font-display);
    font-size: 16px;
    margin: 0;
  }
  .tweaks-head button {
    background: none; border: none;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    width: 24px; height: 24px;
    font-size: 18px;
    line-height: 1;
  }
  .tweaks-body { padding: 16px 18px 20px; }
  .tweak-group { margin-bottom: 18px; }
  .tweak-group:last-child { margin-bottom: 0; }
  .tweak-group label {
    display: block;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
    font-weight: 600;
  }
  .palette-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .palette-row button {
    aspect-ratio: 1;
    border: 2px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    padding: 4px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
    background: #fff;
    transition: border-color .2s, transform .15s;
  }
  .palette-row button:hover { transform: translateY(-2px); }
  .palette-row button.active { border-color: var(--accent); }
  .palette-row button span { border-radius: 2px; }
  .seg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    background: var(--bg-warm);
    padding: 3px;
    border-radius: 4px;
  }
  .seg button {
    background: none; border: none;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 3px;
    cursor: pointer;
    color: var(--muted);
    transition: all .2s;
    font-family: var(--font-body);
  }
  .seg button.active {
    background: #fff;
    color: var(--primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  }
  .slider-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .slider-wrap input[type=range] {
    flex: 1;
    accent-color: var(--accent-deep);
  }
  .slider-wrap .val {
    font-size: 12px;
    color: var(--muted);
    min-width: 32px;
    text-align: right;
  }

  /* ── Reveal-on-scroll ────────────────────────────────────────────── */
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .8s ease, transform .8s ease;
  }
  .reveal.in {
    opacity: 1;
    transform: none;
  }

  /* ── Responsive ──────────────────────────────────────────────────── */
  @media (max-width: 960px) {
    .hero-overlay { padding: 120px 6vw 80px; }
    .nav-menu { display: none; }
    .nav-toggle { display: grid; place-items: center; }
    .about-grid, .reserve-grid, .hours-grid, .drinks-grid { grid-template-columns: 1fr; }
    .events-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .hero-strip-inner { grid-template-columns: repeat(2, 1fr); }
    .strip-cell:nth-child(2) { border-right: none; }
    .strip-cell:nth-child(1), .strip-cell:nth-child(2) { border-bottom: 1px dashed rgba(244, 181, 71, 0.18); }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .menu-grid { grid-template-columns: 1fr; gap: 24px; }
    .form-row { grid-template-columns: 1fr; }
    .signature { grid-template-columns: 1fr; }
    .tweaks-panel { right: 12px; bottom: 12px; width: calc(100vw - 24px); max-width: 280px; }
  }
  @media (max-width: 560px) {
    .footer-grid { grid-template-columns: 1fr; gap: 36px; }
    .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 180px; }
    .gallery-item.wide, .gallery-item.tall { grid-row: span 1; grid-column: span 1; }
    .hero-strip-inner { grid-template-columns: 1fr; }
    .strip-cell { border-right: none !important; border-bottom: 1px dashed rgba(244, 181, 71, 0.18); }
    .strip-cell:last-child { border-bottom: none; }
    .events-grid { grid-template-columns: 1fr; }
    .event-card { aspect-ratio: 4/3; }
  }

  /* ── Material Design Icons sizing ───────────────────────────────── */
  .mdi { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
  .nav-toggle .mdi { font-size: 26px; }
  .btn .mdi { font-size: 18px; }
  .intro .mdi.icon { font-size: 60px; color: var(--accent); width: auto; height: auto; display: block; margin: 0 auto 24px; }
  .signature .ic { display: grid; place-items: center; }
  .signature .ic .mdi { font-size: 18px; }
  .phone-order .po-ic .mdi { font-size: 28px; }
  .phone-order .po-arrow .mdi { font-size: 18px; }
  .sc-title .mdi { font-size: 22px; color: var(--accent); }
  .contact-row .ic { font-size: 22px; width: auto; height: auto; }
  .footer-socials .mdi { font-size: 18px; }

  /* ── Text logo ──────────────────────────────────────────────────── */
  .logo-text { font-family: var(--font-display); font-size: 30px; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; line-height: 1; }
  .site-header.scrolled .logo-text { font-size: 26px; }
  .footer-brand .logo-text { font-size: 44px; color: #fff; }

  /* ── Map embed + contact form ───────────────────────────────────── */
  .map-embed { width: 100%; height: 320px; border: 0; border-radius: 20px; margin-bottom: 24px; box-shadow: 0 16px 40px rgba(31,20,10,0.12); display: block; }
  .contact-form-wrap { margin-top: clamp(40px, 6vw, 72px); max-width: 760px; margin-left: auto; margin-right: auto; }


/* === MW Live Edit overrides (auto-generated) === */

.mw-admin-live-edit-page [data-layout-container] { min-height: 0 !important; }

.brand img, .nav-logo img, .logo img { max-width: 48px; max-height: 48px; width: auto; height: auto; object-fit: contain; }
.f-brand .logo img, footer .logo img { max-width: 40px; max-height: 40px; }

.image-slot-canonicalized { width: 100%; height: auto; display: block; }
.image-slot-shape-circle { border-radius: 50%; }

/* === Nav <ul><li> bullet suppression (auto-generated) === */
nav.nav ul, .nav ul, header nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 2px; align-items: center;
}
nav.nav ul li, .nav ul li, header nav ul li {
  list-style: none; margin: 0; padding: 0;
}
nav.nav ul li::marker, header nav ul li::marker { content: none; }

/* === Multilanguage MW module — link-list clean skin (auto-generated) === */
.lang-mw, .mw-lang-switch { display: inline-block; position: relative; font-size: 12.5px; letter-spacing: .08em; }
.mw-lang-current {
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent; border: 1px solid rgba(255,255,255,0.25);
  color: var(--light, #fff); border-radius: 6px;
  padding: 6px 10px 6px 12px; font: inherit; cursor: pointer;
  text-transform: uppercase; line-height: 1;
}
.mw-lang-current:hover { border-color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.06); }
.mw-lang-current .mdi { font-size: 16px; opacity: 0.75; }
.mw-lang-menu {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 80px;
  list-style: none; margin: 0; padding: 6px 0;
  background: rgba(8, 32, 62, 0.96);
  border: 1px solid var(--line-dark, rgba(255,255,255,0.15));
  border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  display: none; z-index: 50;
}
.mw-lang-menu.is-open { display: block; }
.mw-lang-menu li { list-style: none; padding: 0; margin: 0; }
.mw-lang-link {
  display: block; padding: 8px 14px;
  color: var(--light, #fff); text-decoration: none;
  text-transform: uppercase; white-space: nowrap;
}
.mw-lang-link:hover { background: rgba(255,255,255,0.08); }
.mw-lang-fullname { display: none; }

.mw-admin-live-edit-page .reveal {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

.mw-live-edit .reveal,
body.live-edit-frame-loaded .reveal {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

.mw-admin-live-edit-page .hero-ctas {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}


/* add-generator-hardening: hero full-viewport rules (override of upstream defaults) */
.hero { min-height: 100vh; padding: 0; display: flex; }
.hero .mw-layout-container { flex: 1; padding: 40px 0; }


/* add-generator-hardening: Posts module wrapper transparency.
   The `<div class="module module-posts">` wrapper MW injects between the
   section container and the skin output breaks `parent > child` selectors
   from the source design. Two-part fix: (a) `display:contents` so the box
   model is transparent, and (b) class-level selectors so flex/grid layout
   matches regardless of wrapper depth. */
.module-posts { display: contents; }

/* hardening-v3 ⑦: in the Live Edit frame the module needs a real box —
   display:contents has no clickable/anchorable area, so the gear-toolbar
   cannot attach to the posts module inside the editor. */
.mw-admin-live-edit-page .module-posts { display: block; }

/* Class-level flex/grid layouts — match regardless of `.module-posts` depth. */
.carousel-track { display: flex; }
.carousel-track > article.carousel-slide,
.carousel-track > .carousel-slide { flex: 0 0 100%; width: 100%; }


/* ===== MDI-SVG-INFLATE-FIX ===== */
/* MW Live Edit inflates `<i class="mdi …">` to inline <svg viewBox="0 0 24 24">
   without width/height — without these rules the SVG fills its parent. */
.mdi svg { width: 1em; height: 1em; fill: currentColor; display: inline-block; vertical-align: -0.125em; }
i.mdi svg, .mdi > svg { width: 1em; height: 1em; }


/* ===== STATIC-PAGE-CLEARANCE-BLOCK ===== */
/* Static pages (subtype=static) bypass inner.php and inject content
   directly into the body. Without padding the fixed header overlaps. */
body.page-impresszum > .main-content { padding-top: 80px; }
body.page-adatvedelmi > .main-content { padding-top: 80px; }


/* ===== FONT-COLOR-RUNTIME-OVERRIDE ===== */
/* Live Edit inserts inline <font color="…">; override to brand color
   non-destructively. !important is required (inline attribute beats rules). */
font[color] { color: var(--brand) !important; }

/* ===== MW LAYOUT WRAPPER TRANSPARENCY ===== */
section > .mw-layout-container { display: contents; }
.edit.allow-drop { display: none !important; }

/* ===== MW MENU MODULE STYLING + DROPDOWN ===== */
/* MW renders <ul class="menu-root"> + <li><a class="menu_element_link">.
   Nested <ul> = dropdown (have-submenu li). Claude-emit `.menu a:hover`
   NEM matchel az MW renderre. */
.site-header .module-menu { display: flex; }
.site-header .module-menu > ul {
  display: flex; gap: 32px; list-style: none; margin: 0; padding: 0; align-items: center;
}
.site-header .module-menu > ul > li { position: relative; list-style: none; }
.site-header .module-menu li::marker { content: none; }
.site-header .module-menu .menu_element_link {
  text-decoration: none;
  white-space: nowrap;
  /* color / padding / font az `nav.primary a` Claude-emit szabálytól örökölt */
}
.site-header .module-menu .have-submenu-link::after {
  content: " \25BE"; font-size: 11px; opacity: 0.7; margin-left: 4px;
}
/* Dropdown (nested ul) */
.site-header .module-menu ul ul {
  position: absolute; top: 100%; left: 0; min-width: 260px;
  display: none; flex-direction: column;
  background: #fff; color: #1a1a2e;
  box-shadow: 0 12px 32px rgba(0,0,0,0.14);
  border-radius: 12px; padding: 8px; margin: 6px 0 0 0;
  z-index: 100; gap: 2px; list-style: none;
}
.site-header .module-menu > ul > li:hover > ul,
.site-header .module-menu > ul > li:focus-within > ul { display: flex; }
.site-header .module-menu ul ul li { width: 100%; list-style: none; }
.site-header .module-menu ul ul .menu_element_link {
  display: block; border-radius: 8px; padding: 8px 14px;
  font-size: 14px; font-weight: 400; white-space: normal; color: inherit;
}

/* ===== MW .element CLASS HEADING-FONT FIX (2026-06-11) ===== */
h1.element, h2.element, h3.element, h4.element,
.edit h1, .edit h2, .edit h3, .edit h4,
.main-content h1, .main-content h2, .main-content h3, .main-content h4 {
  font-family: var(--display) !important;
}


/* ===== LEGAL-PAGES-DEFAULT-STYLES ===== */
/* Impresszum + Adatvédelmi page styling (add-default-legal-pages-v2 — rk-teto pattern). */
.impresszum-wrap, .adatvedelmi-wrap { max-width: 980px; margin: 0 auto; padding: 32px 20px 80px; line-height: 1.65; color: #4a4a4a; }

/* Intro box — left brand-border, soft gray bg. */
.impresszum-intro-box, .adatvedelmi-intro-box {
  background: #f5f5f5;
  border-left: 4px solid var(--primary, currentColor);
  padding: 24px 28px;
  border-radius: 8px;
  margin: 0 0 48px;
  line-height: 1.75;
}
.impresszum-intro-box p, .adatvedelmi-intro-box p { margin: 0; }

/* Section heading — UPPERCASE + MDI-icon + thin divider. */
.impresszum-section, .adatvedelmi-section { margin: 48px 0; }
.impresszum-h2, .adatvedelmi-h2 {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eaeaea;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #1a1a1a;
}
.impresszum-h2 > i, .adatvedelmi-h2 > i { color: var(--primary, currentColor); font-size: 1.4em; line-height: 1; }

/* Card grid for identity data (Üzemeltető / Adatkezelő). */
.impresszum-grid, .adatvedelmi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.impresszum-card, .adatvedelmi-card {
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  padding: 18px 20px;
}
.impresszum-label, .adatvedelmi-label {
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: #888;
  font-weight: 600;
  margin-bottom: 8px;
}
.impresszum-value, .adatvedelmi-value { color: #1a1a1a; font-weight: 500; }
.adatvedelmi-value a { color: inherit; text-decoration: none; }
.adatvedelmi-value a:hover { text-decoration: underline; }

/* TODO placeholders — italic + brand color. */
.impresszum-todo, .adatvedelmi-todo {
  color: var(--primary, currentColor) !important;
  font-style: italic;
  font-weight: 500;
}

/* Pill-style contact links. */
.impresszum-contact-row, .adatvedelmi-contact-row { display: flex; flex-wrap: wrap; gap: 12px; }
.impresszum-pill, .adatvedelmi-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  padding: 14px 22px;
  color: #1a1a1a;
  text-decoration: none;
  font-weight: 500;
}
.impresszum-pill > i, .adatvedelmi-pill > i { color: var(--primary, currentColor); font-size: 1.15em; }
.impresszum-pill:hover, .adatvedelmi-pill:hover { background: #fafafa; }

/* Lists (Adatvédelmi célok + Érintetti jogok). */
.adatvedelmi-list { padding-left: 22px; margin: 0; }
.adatvedelmi-list li { margin: 6px 0; }

/* Body paragraphs in legal sections. */
.impresszum-section > p, .adatvedelmi-section > p { margin: 0; }

/* Footer legal-link visibility (B4 + hardening-v3 B8) — default color fits
   dark/neutral footers; appendLegalCss() swaps to muted on light footers. */
.footer .footer-bottom-links, .footer-bottom-links {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; letter-spacing: .06em;
  color: var(--light, #ffffff);
}
.footer .footer-bottom-links a, .footer-bottom-links a,
.footer .footer-bottom-links .footer-legal-link, .footer-bottom-links .footer-legal-link {
  color: inherit; text-decoration: none;
}
.footer .footer-bottom-links .footer-legal-link:hover,
.footer-bottom-links .footer-legal-link:hover { text-decoration: underline; }
.footer-legal-sep { opacity: 0.5; margin: 0 4px; user-select: none; }

@media (max-width: 640px) {
  .impresszum-wrap, .adatvedelmi-wrap { padding: 24px 16px 60px; }
  .impresszum-grid, .adatvedelmi-grid { grid-template-columns: 1fr; }
  .impresszum-section, .adatvedelmi-section { margin: 36px 0; }
}


/* mw-contact-form-css */
#contact-form .vc-fields { display:flex; flex-direction:column; gap:1.1rem; width:100%; }
#contact-form .vc-fields > *, #contact-form .mw-ui-field-holder { width:100%; box-sizing:border-box; }
#contact-form label, #contact-form .mw-ui-label { display:block; margin-bottom:.4rem; font-size:.92rem; font-weight:600; }
#contact-form input:not([type=hidden]):not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]),
#contact-form select, #contact-form textarea {
  width:100%; box-sizing:border-box; padding:.8rem .95rem;
  border:1px solid rgba(0,0,0,.2); border-radius:8px;
  font-family:inherit; font-size:1rem; color:inherit; background:#fff; line-height:1.4; }
#contact-form textarea { min-height:130px; resize:vertical; }
#contact-form input:focus, #contact-form select:focus, #contact-form textarea:focus { outline:none; border-color:currentColor; }
#contact-form .form-captcha, #contact-form .mw-captcha, #contact-form .captcha-holder { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin:1.1rem 0; }
#contact-form .mw-captcha-img { flex:0 0 auto; border:1px solid rgba(0,0,0,.12); border-radius:6px; height:48px; width:auto; }
/* Egyenlő mező-szélesség. A MW a `field_size` szerint `.mw-flex-col-md-6`-ot ad
   egyes mezőkre -- egyhasábos űrlapon ettől a "Név" fele olyan széles lett, mint
   a többi, ami rendezetlennek látszott. Szándékosan NEM kéthasábos elrendezést
   csinálunk: a `.mw-flex-col-md-6` mezők mobilon NEM esnek egymás alá (ismert
   MW-hiba), így a fix szélesség ott kicsordulna. */
#contact-form .mw-flex-row { display:block; }
#contact-form .mw-flex-col-md-6, #contact-form .mw-flex-col-md-12 { width:100%; max-width:100%; flex:none; }
#contact-form .mw-captcha-input { flex:0 1 200px; width:auto; }
#contact-form button[type="submit"] { cursor:pointer; margin-top:.6rem; }


/* ===== hardening-v3 (5): inline-grid mobile fallback (always-on) ===== */
@media (max-width: 900px) {
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns"] > div:has(img):not(:has(h1,h2,h3,p)) { order: -1; }
}


/* === BODY WOOD-GRAIN HOT-PATCH (deszkabar) === */
body {
  background-color: var(--primary-d, #3E2614) !important;
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.85;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='56' viewBox='0 0 240 56' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%237B4F2C'/><stop offset='0.5' stop-color='%235C3A21'/><stop offset='1' stop-color='%23493019'/></linearGradient><linearGradient id='h' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23694325'/><stop offset='0.5' stop-color='%23522E18'/><stop offset='1' stop-color='%233F2412'/></linearGradient></defs><rect x='0' y='0' width='240' height='27' fill='url(%23g)'/><rect x='0' y='29' width='240' height='27' fill='url(%23h)'/><line x1='0' y1='27.5' x2='240' y2='27.5' stroke='%23120A04' stroke-opacity='0.42' stroke-width='1'/><line x1='0' y1='28.5' x2='240' y2='28.5' stroke='%238E6B49' stroke-opacity='0.9' stroke-width='0.6'/><line x1='90' y1='0' x2='90' y2='27' stroke='%23120A04' stroke-opacity='0.45' stroke-width='1'/><line x1='168' y1='29' x2='168' y2='56' stroke='%23120A04' stroke-opacity='0.45' stroke-width='1'/><path d='M0 7 Q60 8 120 6 T240 7' stroke='%238E6B49' stroke-opacity='0.6' stroke-width='0.6' fill='none'/><path d='M0 14 Q80 13 160 15 T240 14' stroke='%238E6B49' stroke-opacity='0.5' stroke-width='0.5' fill='none'/><path d='M0 20 Q70 21 140 19 T240 20' stroke='%23120A04' stroke-opacity='0.5' stroke-width='0.5' fill='none'/><path d='M0 36 Q90 37 180 35 T240 36' stroke='%238E6B49' stroke-opacity='0.6' stroke-width='0.6' fill='none'/><path d='M0 44 Q60 43 130 45 T240 44' stroke='%238E6B49' stroke-opacity='0.5' stroke-width='0.5' fill='none'/><path d='M0 50 Q90 49 170 51 T240 50' stroke='%23120A04' stroke-opacity='0.5' stroke-width='0.5' fill='none'/><ellipse cx='40' cy='14' rx='4' ry='3' fill='%23120A04' fill-opacity='0.6'/><ellipse cx='40' cy='14' rx='2.5' ry='1.8' fill='%23120A04' fill-opacity='0.85'/><ellipse cx='200' cy='42' rx='5' ry='3.5' fill='%23120A04' fill-opacity='0.55'/><ellipse cx='200' cy='42' rx='3' ry='2' fill='%23120A04' fill-opacity='0.78'/></svg>");
  background-size: 240px 56px;
  background-repeat: repeat;
}
/* ===== VILÁGOS SZEKCIÓK — OLVASHATÓSÁG =====
   Itt korábban `.intro, .about, .contact { background: transparent !important }`
   állt, hogy a body deszka-textúrája átüssön. Ez azonban a SZÖVEGET tette
   olvashatatlanná: a terv ezekben a szekciókban sötétbarna betűt (--primary-d
   #5C3A21) használ, mert világos krém háttérre szánta. A sötét fán a cím és a
   bekezdés is beleolvad a háttérbe -- 2026-08-11-én élesben pontosan ez történt.
   Ezért mindhárom szekció visszakapja a TERV szerinti hátterét:
     .intro  -> --bg       (#FFF8EB)
     .about  -> --bg-warm  (#F5E5C8)
     .gallery-> --bg-pale  (#FCEFD4)
   A deszka-hangulatot az étlap és az itallap hordozza: azok eredetileg is sötét
   szekciók, világos betűvel. */
.intro   { background: var(--bg) !important; }
.about   { background: var(--bg-warm) !important; }
.gallery { background: var(--bg-pale) !important; }

/* ===== Posts gallery grid =====
   The source design shipped `.gallery-item:nth-child(n+4) { display: none }`,
   so only the first row was ever visible. Now that every image is a post the
   owner adds and removes them in the admin, so all of them must show. Scoped by
   id, which keeps the design rule intact for any other .gallery-item markup. */
#galeria-list .gallery-item:nth-child(n+4) { display: block; }

/* ===== „Megnyitás a Google Térképen" hivatkozás a beágyazott térkép alatt ===== */
.map-open-wrap { margin: 10px 0 18px; }
.map-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--accent, #E2683C);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.map-open-btn:hover { color: var(--primary-d, #3E2614); }

/* ===== Mobil fejléc: a desktop menü NE látszódjon =====
   A fenti `.site-header .module-menu > ul { display: flex }` szabály média-
   lekérdezés NÉLKÜL él, ezért legyőzte a terv `@media(max-width:960px){
   .nav-menu{display:none} }`-ját (0,2,1 vs 0,1,0). Következmény: 390px-en a
   teljes desktop menü kicsordult a fejlécből, a logó és a hamburger leesett a
   képernyőről -- desktopon viszont semmi nem látszott a hibából.
   `!important` SZÁNDÉKOSAN nincs: a hamburger INLINE `display:flex`-szel nyitja
   a menüt, azt egy `!important` véglegesen elnyomná, és a mobil menü sosem
   nyílna ki. Ez a szabály (0,3,1) elég pontos ahhoz, hogy csendben nyerjen. */
@media (max-width: 960px) {
  .site-header .module-menu > ul.nav-menu { display: none; }
  .site-header .nav-toggle { display: grid; place-items: center; }
}

/* ===== Étlap-szerkesztő belépő (CSAK bejelentkezett adminnak renderel) =====
   Az étlap tételei a menu-data.json-ból jönnek, ezért a Live Edit ceruzája nem
   nyúl hozzájuk -- ez a gomb vezet a szerkesztő-felületre. Látogató soha nem
   látja: a szekció `is_admin()` mögé teszi. */
.menu-admin-edit { text-align: center; margin-top: 28px; }
.menu-admin-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 24px;
  border: 1px dashed var(--sun, #F4B547);
  border-radius: 26px;
  color: var(--sun, #F4B547);
  background: rgba(0, 0, 0, 0.25);
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.menu-admin-edit-btn:hover {
  background: var(--sun, #F4B547);
  color: var(--primary-d, #3E2614);
}

/* ── Header CTA (Foglalás / tel) — A3 fix 2026-07-28 ─────────────── */
.nav-cta-wrap { display: inline-flex; }
.nav-cta-btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background .2s, color .2s;
  white-space: nowrap;
}
.nav-cta-btn:hover { background: var(--sun); color: var(--dark); }
@media (max-width: 960px) {
  .nav-cta-wrap { display: none; }
}

/* ── Subpage sticky-header state (impresszum/adatvédelmi) — A7 fix ── */
body.subpage .site-header {
  position: sticky;
  top: 0;
  background: rgba(31, 20, 10, 0.96);
  padding: 12px 0;
  box-shadow: 0 1px 0 rgba(244, 181, 71, 0.18);
}
body.subpage .section-inner { padding-top: 40px; }

/* ── Subpage readability: cream canvas a fa-textúra helyett ───────── */
body.subpage::before { display: none; }
html body.subpage { background: var(--primary-d, #3E2614); }
body.subpage .section-inner {
  position: relative;
  z-index: 1;
  max-width: 1020px;
  margin: 40px auto 72px;
  padding: 48px 40px 64px;
  background: var(--bg, #FFF8EB);
  border-radius: 16px;
  color: var(--primary-d, #3E2614);
}
body.subpage .section-inner h1,
body.subpage .section-inner h2,
body.subpage .section-inner h3,
body.subpage .section-inner p,
body.subpage .section-inner li {
  color: var(--primary-d, #3E2614);
}
/* ===== Background-module layer order (assertion C19) =====
   `<module type="background">` renders `.mw-layout-background-block` as
   position:absolute; z-index:0 -- it paints OVER the section's in-flow content
   because the `display:contents` wrapper cannot carry a z-index. Making each
   section an isolation context and pushing the block behind keeps an
   admin-chosen section background underneath the text. */
section:has(> .mw-layout-container) { isolation: isolate; }
section .mw-layout-background-block { z-index: -1; }

/* ===== Logo size cap release on the header (assertion E6) =====
   The admin logo-size slider writes an inline `height` on the <img>. The
   auto-generated `.logo img { max-height: 48px }` cap silently overrode it, so
   the slider did nothing. The footer keeps its own 40px cap. */
header .logo img { max-width: none; max-height: none; }

@media (max-width: 960px) {
  body.subpage .section-inner { margin: 16px 12px 40px; padding: 28px 18px 40px; }
}

/* DSP compliance footer-block — deszkabar-fresh */
:root { --dsp-logo-height: 141px; }
.deszkabar-fresh-dsp { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px 10px; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 44px; }
.dsp-compliance-wrap { background: var(--footer-bg, #161616); }
.deszkabar-fresh-dsp .dsp-logos { display: flex; align-items: center; gap: 50px; }
.deszkabar-fresh-dsp .dsp-logo { height: var(--dsp-logo-height); width: auto; padding: 10px; display: block; }
.deszkabar-fresh-dsp .dsp-logo-link { display: inline-block; line-height: 0; }
.deszkabar-fresh-dsp .dsp-statement { max-width: 720px; text-align: center; font-size: 0.875rem; line-height: 1.5; margin: 0; color: #fff; }
@media (max-width: 1024px) {
  .deszkabar-fresh-dsp .dsp-logos { gap: 32px; }
}
@media (max-width: 768px) {
  .deszkabar-fresh-dsp .dsp-logos { gap: 20px; flex-wrap: wrap; justify-content: center; }
}

/* deszkabar: a generator csak a 141px-es asztali magassagot emittalja — a NEUM-logo
   500x176-os, tehat 141px-en ~400px szeles es kicsordul a telefonon. */
.deszkabar-fresh-dsp .dsp-logo { max-width: 100%; }
@media (max-width: 1024px) {
  .deszkabar-fresh-dsp .dsp-logo { height: 100px; }
}
@media (max-width: 768px) {
  .deszkabar-fresh-dsp .dsp-logo { height: 64px; }
}

/* ===== JOGI ALOLDALAK: EGYSZÍNŰ VILÁGOS HÁTTÉR (2026-08-12 ügyfél-kérés) =====
   A `body` a deszka-textúrát hordozza (BODY WOOD-GRAIN HOT-PATCH fentebb). Az
   impresszum és az adatvédelmi tájékoztató viszont NEM szekciókból áll, hanem
   egy világos kártyás elrendezés (`.impresszum-*` / `.adatvedelmi-*`), amit
   világos háttérre terveztek: a címsor #1a1a1a, a törzsszöveg #4a4a4a, a
   kártyák fehérek. A sötét fán ezek beleolvadtak a háttérbe -- a „Szerzői
   jogok" és a „Felelősségkorlátozás" bekezdése élesben OLVASHATATLAN volt.
   Ez tehát nem csak stílus-kérés: ugyanaz az olvashatósági hibaminta, mint
   2026-08-11-én az intro/about szekcióban (SOLUTIONS #48 / őr C26).
   A textúra-réteg (`body::before`) kikapcsolása KELL: a háttérszín önmagában
   nem takarja el, mert a réteg `position: fixed` és a body FÖLÖTT fest. */
body.page-impresszum,
body.page-adatvedelmi {
  background-color: var(--bg, #FFF8EB) !important;
}
body.page-impresszum::before,
body.page-adatvedelmi::before {
  display: none !important;
}

/* =====================================================
   FELUGRÓ ABLAK (heti akció / parti / nyitvatartás)
   Az adatok: popup-data.json — szerkesztő: /tools/_edit-popup-deszkabar.php
   Kontraszt mérve (2026-09-15): szöveg 15,24 · cím 9,55 · gomb 4,65
===================================================== */
.zpop-overlay{
  --zpop-bg:      #FFF8EB;              /* doboz háttere  (--bg) */
  --zpop-line:    rgba(92,58,33,.18);   /* keret          (--line) */
  --zpop-title:   #5C3A21;              /* cím            (--primary) */
  --zpop-text:    #2A1F14;              /* szöveg         (--text) */
  --zpop-btn-bg:  #C4501E;              /* gomb háttere   (--accent-deep) — 4,65 kontraszt */
  --zpop-btn-fg:  #ffffff;              /* gomb felirata */
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  padding:1.2rem;
  background:rgba(31,20,10,.62);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  animation:zpop-fade .25s ease both;
}
.zpop-overlay[hidden]{display:none}
@keyframes zpop-fade{from{opacity:0}to{opacity:1}}
@keyframes zpop-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.zpop-box{
  position:relative;
  width:100%; max-width:480px; max-height:calc(100vh - 2.4rem);
  overflow-y:auto;
  background:var(--zpop-bg);
  border:1px solid var(--zpop-line);
  border-radius:14px;
  box-shadow:0 24px 60px rgba(31,20,10,.35);
  animation:zpop-rise .3s .05s ease both;
}
.zpop-close{
  position:absolute; top:.6rem; right:.6rem; z-index:2;
  width:38px; height:38px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  font-size:1.9rem; cursor:pointer;
  color:var(--zpop-text);
  background:rgba(255,248,235,.9);
  border:1px solid var(--zpop-line); border-radius:50%;
  transition:background .2s, color .2s;
}
.zpop-close:hover{background:var(--zpop-btn-bg); color:var(--zpop-btn-fg)}
.zpop-media img{display:block; width:100%; height:auto}
.zpop-body{padding:1.7rem}
.zpop-title{
  margin:0 0 .6rem;
  font-family:"Anton","Impact","Arial Narrow",system-ui,sans-serif;
  font-size:clamp(1.55rem,5vw,2rem); line-height:1.12;
  letter-spacing:.01em; color:var(--zpop-title);
}
.zpop-text{
  color:var(--zpop-text); font-size:1rem; line-height:1.6;
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
}
.zpop-btn{
  display:inline-block; margin-top:1.3rem;
  padding:.8rem 1.7rem;
  background:var(--zpop-btn-bg); color:var(--zpop-btn-fg);
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;
  font-weight:700; font-size:1rem;
  letter-spacing:.01em;
  text-decoration:none; border-radius:999px;
  transition:filter .2s;
}
.zpop-btn:hover{filter:brightness(1.08)}
@media (max-width:480px){ .zpop-body{padding:1.3rem} }
@media (prefers-reduced-motion:reduce){
  .zpop-overlay,.zpop-box{animation:none}
}
/* Ha nincs kép, a cím közvetlenül a bezáró gomb mellé kerül -> helyet hagyunk neki */
.zpop-close + .zpop-body .zpop-title{padding-right:2.9rem}