/* Marazul public website: hotel-first home page, shared top bar and footer.
   Loaded after the vendor theme. Everything new is prefixed mzs- so it cannot collide
   with the vendor's classes; the only global rules are the fonts and scroll padding. */

:root {
  --mzs-ink: #0F1B24;
  --mzs-muted: #5B6B77;
  --mzs-line: #DCE3E8;
  --mzs-soft: #F4F7F8;
  --mzs-deep: #083344;
  --mzs-deep-2: #0B4658;
  --mzs-sea: #0E7490;
  --mzs-sea-l: #E6F4F6;
  --mzs-sun: #E8930C;
  --mzs-sun-2: #F29E1C;
  --mzs-sand: #F6F1E9;
  --mzs-sand-line: #DCCFBC;
  --mzs-top-h: 68px;
  --mzs-display: "Bricolage Grotesque", "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mzs-body: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

html { scroll-padding-top: calc(var(--mzs-top-h) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html.mzs-noscroll { overflow: hidden; }
/* The vendor sets body to Inter with !important; win on specificity as well. */
body.mzs-site { font-family: var(--mzs-body) !important; }
.mzs-site h1, .mzs-site h2, .mzs-site h3, .mzs-site h4, .mzs-site h5, .mzs-site h6 { font-family: var(--mzs-body); }

.mzs-wrap { max-width: 1200px; margin: 0 auto; padding-inline: 24px; }
.mzs-skip { position: fixed; left: -9999px; top: 10px; z-index: 1200; background: #fff; color: var(--mzs-deep) !important; padding: 8px 14px; border-radius: 8px; font: 600 14px var(--mzs-body); }
.mzs-skip:focus { left: 10px; }

/* ------------------------------------------------------------------ buttons */
.mzs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 10px; border: 1px solid transparent; font: 600 14.5px/1 var(--mzs-body); text-decoration: none !important; cursor: pointer; white-space: nowrap; transition: background-color .15s, border-color .15s, box-shadow .15s; }
.mzs-btn svg { width: 17px; height: 17px; flex: 0 0 auto; }
.mzs-btn-pri { background: var(--mzs-sun); color: #1C1204 !important; }
.mzs-btn-pri:hover { background: var(--mzs-sun-2); }
.mzs-btn-dark { background: var(--mzs-deep); color: #fff !important; }
.mzs-btn-dark:hover { background: var(--mzs-deep-2); }
.mzs-btn-ghost { background: #fff; color: var(--mzs-deep) !important; border-color: var(--mzs-line); }
.mzs-btn-ghost:hover { border-color: #AFC0C9; }
.mzs-icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: 0 0 auto; padding: 0; border-radius: 10px; border: 1px solid var(--mzs-line); background: #fff; color: var(--mzs-deep); cursor: pointer; }
.mzs-icon-btn svg { width: 19px; height: 19px; }
.mzs-btn:focus-visible, .mzs-icon-btn:focus-visible, .mzs-lang-btn:focus-visible,
.mzs-nav a:focus-visible, .mzs-foot a:focus-visible, .mzs-home a:focus-visible, .mzs-drawer a:focus-visible { outline: 2px solid var(--mzs-sea); outline-offset: 2px; }

/* ------------------------------------------------------------------ top bar */
.mzs-top { position: fixed; top: 0; left: 0; right: 0; z-index: 990; height: var(--mzs-top-h); background: #fff; border-bottom: 1px solid var(--mzs-line); font-family: var(--mzs-body); transition: box-shadow .2s; }
.mzs-top.is-scrolled { box-shadow: 0 8px 24px rgba(8, 51, 68, .08); }
.mzs-top-in { height: 100%; display: flex; align-items: center; gap: 12px; }
.mzs-logo { display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto; color: var(--mzs-deep) !important; text-decoration: none !important; font: 800 21px/1 var(--mzs-display); letter-spacing: -.01em; white-space: nowrap; }
.mzs-logo img { display: block; max-height: 42px; width: auto; }
.mzs-logo-mark { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(150deg, var(--mzs-sea), var(--mzs-deep)); }
.mzs-nav { display: flex; align-items: center; gap: 2px; margin-left: 10px; }
.mzs-nav a { padding: 9px 10px; border-radius: 8px; font-size: 14.5px; font-weight: 500; color: #334155 !important; text-decoration: none !important; white-space: nowrap; }
.mzs-nav a:hover { background: var(--mzs-soft); color: var(--mzs-ink) !important; }
.mzs-nav a.is-active { color: var(--mzs-deep) !important; background: var(--mzs-sea-l); }
.mzs-spacer { flex: 1 1 auto; }
.mzs-pop { position: relative; flex: 0 0 auto; }
.mzs-lang-btn { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 10px; border: 1px solid var(--mzs-line); border-radius: 10px; background: #fff; color: #334155; font: 600 13px/1 var(--mzs-body); cursor: pointer; }
.mzs-lang-btn svg { width: 15px; height: 15px; }
/* The count also carries the vendor's cart-item-count class (order.js writes into it),
   whose rule pins it 25px down with an 8px !important font - override on specificity. */
.mzs-top .mzs-count.cart-item-count { position: absolute; top: -6px; right: -6px; width: auto; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--mzs-deep); box-shadow: none; color: #fff !important; font-family: var(--mzs-body); font-size: 11px !important; font-weight: 600 !important; line-height: 19px !important; text-align: center; }
/* The vendor's floating cart button, in the site colours. */
.mzs-site .color-picker .color-picker-toggle { background: var(--mzs-deep); color: #fff; box-shadow: 0 8px 22px rgba(8, 51, 68, .25); }
.mzs-site .color-picker .color-picker-toggle svg { width: 24px; height: 24px; }
.mzs-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 250px; padding: 6px; background: #fff; border: 1px solid var(--mzs-line); border-radius: 12px; box-shadow: 0 16px 36px rgba(8, 51, 68, .18); z-index: 5; font-family: var(--mzs-body); }
.mzs-menu[hidden] { display: none; }
.mzs-menu a { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--mzs-ink) !important; text-decoration: none !important; }
.mzs-menu a:hover, .mzs-menu a:focus-visible { background: var(--mzs-soft); outline: none; }
.mzs-menu .mzs-ic { flex: 0 0 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--mzs-sea-l); color: var(--mzs-sea); }
.mzs-menu .mzs-ic svg { width: 16px; height: 16px; }
.mzs-menu .is-staff .mzs-ic { background: var(--mzs-deep); color: #fff; }
.mzs-menu b { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
.mzs-menu small { display: block; font-size: 12px; line-height: 1.35; color: var(--mzs-muted); }
.mzs-menu hr { margin: 4px 6px; border: 0; border-top: 1px solid var(--mzs-line); opacity: 1; }
.mzs-menu-lang { min-width: 170px; }
.mzs-menu-lang a { font-size: 14px; }
.mzs-menu-lang a.is-active { font-weight: 600; color: var(--mzs-deep) !important; }
.mzs-burger, .mzs-book-short { display: none; }
.mzs-login-label { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 1180px) { .mzs-nav a { padding: 9px 7px; font-size: 14px; } }
@media (max-width: 1080px) { .mzs-nav { display: none; } .mzs-burger { display: inline-flex; } }
@media (max-width: 640px) {
  :root { --mzs-top-h: 60px; }
  .mzs-wrap { padding-inline: 16px; }
  .mzs-top-in { gap: 7px; }
  .mzs-lang, .mzs-login-label, .mzs-book-long { display: none; }
  .mzs-book-short { display: inline; }
  .mzs-logo { font-size: 18px; gap: 7px; }
  .mzs-logo img { max-height: 34px; }
  .mzs-logo-mark { width: 24px; height: 24px; border-radius: 7px; }
  .mzs-top .mzs-icon-btn { width: 36px; height: 36px; }
  .mzs-top .mzs-btn { height: 36px; padding: 0 11px; font-size: 13.5px; }
  .mzs-top .mzs-login > .mzs-btn { width: 36px; padding: 0; }
  .mzs-menu { right: -44px; }
}

/* ------------------------------------------------------------------ phone menu */
.mzs-drawer { position: fixed; inset: 0; z-index: 1001; font-family: var(--mzs-body); }
.mzs-drawer[hidden] { display: none; }
.mzs-drawer-bg { position: absolute; inset: 0; background: rgba(8, 26, 34, .45); opacity: 0; transition: opacity .2s; }
.mzs-drawer-panel { position: absolute; top: 0; bottom: 0; left: 0; width: min(86vw, 340px); overflow-y: auto; padding: 14px; background: #fff; display: flex; flex-direction: column; gap: 2px; transform: translateX(-100%); transition: transform .22s ease; }
.mzs-drawer.is-open .mzs-drawer-bg { opacity: 1; }
.mzs-drawer.is-open .mzs-drawer-panel { transform: none; }
.mzs-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mzs-drawer-panel > .mzs-btn { margin: 4px 0 8px; }
.mzs-dlink { display: flex; align-items: center; gap: 10px; padding: 12px 10px; border-radius: 9px; font-size: 16px; font-weight: 500; color: var(--mzs-ink) !important; text-decoration: none !important; }
.mzs-dlink:hover { background: var(--mzs-soft); }
.mzs-dlink svg { width: 18px; height: 18px; color: var(--mzs-sea); }
.mzs-drawer h2 { margin: 16px 10px 6px; font: 600 12px/1.2 var(--mzs-body); letter-spacing: .07em; text-transform: uppercase; color: var(--mzs-muted); }
.mzs-dlangs { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px; }
.mzs-dlangs a { padding: 7px 12px; border: 1px solid var(--mzs-line); border-radius: 8px; font-size: 14px; color: #334155 !important; text-decoration: none !important; }
.mzs-dlangs a.is-active { border-color: var(--mzs-sea); color: var(--mzs-deep) !important; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .mzs-drawer-bg, .mzs-drawer-panel, .mzs-top { transition: none; } }

/* ------------------------------------------------------------------ home page */
.mzs-home { padding-top: var(--mzs-top-h); background: #fff; color: var(--mzs-ink); font-family: var(--mzs-body); font-size: 16px; line-height: 1.55; }
.mzs-home h1, .mzs-home h2, .mzs-home h3 { margin: 0; font-family: var(--mzs-display); color: inherit; letter-spacing: -.02em; }
.mzs-home p { margin: 0; }
.mzs-sec { padding-block: 76px; }
.mzs-sec.is-sand { background: var(--mzs-sand); }
.mzs-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 28px; }
.mzs-kicker { display: block; margin-bottom: 8px; font: 600 12.5px/1.2 var(--mzs-body); letter-spacing: .08em; text-transform: uppercase; color: var(--mzs-sea); }
.mzs-home .mzs-h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.08; font-weight: 800; text-wrap: balance; }
.mzs-home .mzs-note { max-width: 52ch; color: var(--mzs-muted); }
.mzs-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* hero */
.mzs-hero { position: relative; display: flex; align-items: flex-end; min-height: min(660px, calc(100vh - var(--mzs-top-h))); padding-block: 56px 40px; color: #fff;
  background:
    linear-gradient(180deg, rgba(8, 51, 68, .10) 0%, rgba(8, 51, 68, .55) 55%, rgba(8, 51, 68, .92) 100%),
    radial-gradient(120% 70% at 72% 38%, #F7B955 0%, #E8930C 22%, rgba(14, 116, 144, 0) 55%),
    linear-gradient(180deg, #2B6E86 0%, #0E7490 45%, #0B4F63 62%, #083344 100%); }
.mzs-hero:not(.has-photo)::after { content: ""; position: absolute; left: 0; right: 0; top: 58%; height: 18%; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .10) 0 2px, transparent 2px 9px); pointer-events: none; }
.mzs-hero.has-photo { background: linear-gradient(180deg, rgba(8, 51, 68, .15) 0%, rgba(8, 51, 68, .5) 55%, rgba(8, 51, 68, .92) 100%), var(--mzs-hero-img) center / cover no-repeat; }
.mzs-hero > .mzs-wrap { position: relative; z-index: 1; width: 100%; }
.mzs-home .mzs-hero-kicker { margin-bottom: 12px; font: 600 13px/1.3 var(--mzs-body); letter-spacing: .08em; text-transform: uppercase; color: #FDE7B0; }
.mzs-home .mzs-hero h1 { max-width: 14ch; margin-bottom: 14px; font-size: clamp(40px, 6vw, 66px); line-height: 1.02; font-weight: 800; color: #fff; text-wrap: balance; }
.mzs-home .mzs-hero-text { max-width: 50ch; margin-bottom: 28px; font-size: 18px; line-height: 1.55; color: #E6F1F4; }
.mzs-book { display: grid; grid-template-columns: 1.2fr 1.2fr .8fr .8fr auto; gap: 10px; margin: 0; padding: 12px; border-radius: 16px; background: #fff; color: var(--mzs-ink); box-shadow: 0 16px 36px rgba(0, 0, 0, .25); }
.mzs-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--mzs-soft); cursor: text; }
.mzs-field span { font-size: 12px; font-weight: 500; color: var(--mzs-muted); }
.mzs-field input { width: 100%; min-width: 0; height: auto; padding: 0; border: 0; background: transparent; box-shadow: none; outline: none; font: 600 15.5px/1.3 var(--mzs-body); color: var(--mzs-ink); }
.mzs-field:focus-within { box-shadow: inset 0 0 0 2px var(--mzs-sea); }
.mzs-book .mzs-btn { height: auto; min-height: 52px; padding-inline: 22px; }
.mzs-book-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 14px 16px; border-radius: 16px; background: #fff; color: var(--mzs-ink); box-shadow: 0 16px 36px rgba(0, 0, 0, .25); }
.mzs-home .mzs-book-contact p { flex: 1 1 220px; font-weight: 600; color: var(--mzs-ink); }

/* rooms */
.mzs-rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px; }
.mzs-room { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--mzs-line); border-radius: 16px; background: #fff; }
.mzs-room-ph { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; background: var(--mzs-sea-l); color: var(--mzs-sea); }
.mzs-room:nth-child(3n+2) .mzs-room-ph { background: #F3EADB; color: #9A6B1F; }
.mzs-room:nth-child(3n+3) .mzs-room-ph { background: #E4EEE6; color: #3F7A4E; }
.mzs-room-ph svg { width: 46px; height: 46px; opacity: .85; }
.mzs-room-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mzs-room-b { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 18px; }
.mzs-home .mzs-room h3 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.mzs-home .mzs-room-desc { font-size: 14.5px; color: var(--mzs-muted); }
.mzs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mzs-chip { padding: 3px 10px; border-radius: 999px; background: var(--mzs-sea-l); color: var(--mzs-sea); font-size: 12.5px; font-weight: 500; }
.mzs-price { display: flex; align-items: baseline; gap: 6px; margin-top: auto; padding-top: 4px; }
.mzs-price b { font: 800 26px/1 var(--mzs-display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.mzs-price span { font-size: 14px; color: var(--mzs-muted); }
.mzs-home .mzs-extras { margin-top: 18px; font-size: 14.5px; color: var(--mzs-muted); }

/* restaurant */
.mzs-rest { display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 44px; }
.mzs-rest.is-text-only { grid-template-columns: minmax(0, 760px); }
.mzs-rest-photo { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 18px; background: #E9E2D6; }
.mzs-rest-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mzs-home .mzs-lead { max-width: 58ch; margin: 14px 0 12px; color: var(--mzs-muted); }
.mzs-dishes { margin: 0 0 24px; padding: 0; list-style: none; }
.mzs-dishes li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--mzs-sand-line); }
.mzs-dish-name { flex: 1; min-width: 0; font-weight: 600; }
.mzs-dish-name small { display: block; overflow: hidden; font-size: 13px; font-weight: 400; color: var(--mzs-muted); text-overflow: ellipsis; white-space: nowrap; }
.mzs-dish-price { font-weight: 600; color: var(--mzs-deep); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mzs-add { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px; height: 32px; border-radius: 8px; border: 1px solid var(--mzs-sand-line); background: #fff; color: var(--mzs-deep) !important; }
.mzs-add:hover { border-color: var(--mzs-deep); }
.mzs-add svg { width: 15px; height: 15px; }

/* activities */
.mzs-acts { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.mzs-act { padding: 18px; border: 1px solid var(--mzs-line); border-radius: 16px; background: #fff; }
.mzs-act .mzs-ic { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-bottom: 12px; border-radius: 11px; background: var(--mzs-sea-l); color: var(--mzs-sea); }
.mzs-act .mzs-ic svg { width: 21px; height: 21px; }
.mzs-home .mzs-act h3 { margin-bottom: 8px; font-size: 19px; font-weight: 700; }
.mzs-act-line { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 14.5px; color: var(--mzs-muted); }
.mzs-act-line b { font-weight: 600; color: var(--mzs-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* gallery */
.mzs-gal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mzs-gal a { display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 12px; background: #E9E2D6; cursor: zoom-in; }
.mzs-gal img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.mzs-gal a:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .mzs-gal img { transition: none; } }

/* location and contact */
.mzs-loc { display: grid; grid-template-columns: 1.3fr 1fr; align-items: stretch; gap: 22px; }
.mzs-loc.is-single { grid-template-columns: minmax(0, 560px); }
.mzs-map { position: relative; min-height: 360px; overflow: hidden; border: 1px solid var(--mzs-line); border-radius: 16px; background: #E8EFEE; }
.mzs-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mzs-map .mzs-btn { position: absolute; left: 14px; bottom: 14px; box-shadow: 0 6px 16px rgba(8, 51, 68, .18); }
.mzs-contact { display: flex; flex-direction: column; gap: 16px; padding: 22px; border: 1px solid var(--mzs-line); border-radius: 16px; background: #fff; }
.mzs-row { display: flex; align-items: flex-start; gap: 12px; }
.mzs-row .mzs-ic { display: flex; align-items: center; justify-content: center; flex: 0 0 40px; height: 40px; border-radius: 11px; background: var(--mzs-sea-l); color: var(--mzs-sea); }
.mzs-row .mzs-ic svg { width: 19px; height: 19px; }
.mzs-row span { display: block; font-size: 12.5px; color: var(--mzs-muted); }
.mzs-row b, .mzs-row a { font-weight: 600; color: var(--mzs-ink) !important; text-decoration: none !important; overflow-wrap: anywhere; }
.mzs-row a:hover { color: var(--mzs-sea) !important; }
.mzs-contact .mzs-actions { margin-top: auto; }
.mzs-msg { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0 0; padding: 22px; border: 1px solid var(--mzs-line); border-radius: 16px; background: #fff; }
.mzs-home .mzs-msg h3 { grid-column: 1 / -1; font-size: 21px; font-weight: 700; }
.mzs-msg label { display: flex; flex-direction: column; gap: 5px; margin: 0; font-size: 13px; color: var(--mzs-muted); }
.mzs-msg .is-full { grid-column: 1 / -1; }
.mzs-in { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--mzs-line); border-radius: 10px; background: #fff; font: 15px var(--mzs-body); color: var(--mzs-ink); }
.mzs-in:focus { outline: none; border-color: var(--mzs-sea); box-shadow: 0 0 0 3px var(--mzs-sea-l); }
textarea.mzs-in { height: 112px; padding: 10px 12px; resize: vertical; }
.mzs-msg .mzs-btn { justify-self: start; }

@media (max-width: 1000px) {
  .mzs-book { grid-template-columns: 1fr 1fr; }
  .mzs-book .mzs-btn { grid-column: 1 / -1; }
  .mzs-rest, .mzs-loc { grid-template-columns: 1fr; }
  .mzs-rest-photo { aspect-ratio: 16 / 10; }
  .mzs-gal { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .mzs-sec { padding-block: 52px; }
  .mzs-hero { min-height: 0; padding-block: 72px 18px; }
  .mzs-home .mzs-hero-text { font-size: 16px; margin-bottom: 22px; }
  .mzs-book { padding: 10px; gap: 8px; }
  .mzs-rest { gap: 24px; }
  .mzs-map { min-height: 260px; }
  .mzs-contact, .mzs-msg { padding: 16px; }
  .mzs-msg { grid-template-columns: 1fr; }
  .mzs-book-contact .mzs-btn { flex: 1 1 auto; }
}

/* ------------------------------------------------------------------ footer */
.mzs-foot { padding-block: 52px 22px; background: var(--mzs-deep); color: #CFE3E9; font-family: var(--mzs-body); font-size: 14.5px; line-height: 1.55; }
.mzs-foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 28px; }
.mzs-foot .mzs-logo { color: #fff !important; }
.mzs-foot .mzs-logo-mark { background: linear-gradient(150deg, #22A3C3, var(--mzs-sea)); }
.mzs-foot p { max-width: 38ch; margin: 14px 0 16px; color: #CFE3E9; }
.mzs-foot h2 { margin: 0 0 12px; font: 600 14px/1.3 var(--mzs-body); color: #fff; }
.mzs-foot ul { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mzs-foot a { color: #CFE3E9 !important; text-decoration: none !important; }
.mzs-foot a:hover { color: #fff !important; }
.mzs-social { display: flex; gap: 8px; }
.mzs-social a { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(255, 255, 255, .1); color: #fff !important; }
.mzs-social a:hover { background: rgba(255, 255, 255, .18); }
.mzs-social svg { width: 17px; height: 17px; }
.mzs-copy { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 36px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 13px; color: #9FC1CB; }
.mzs-copy nav { display: flex; gap: 14px; }
.mzs-copy a.is-active { color: #fff !important; font-weight: 600; }
@media (max-width: 1000px) {
  .mzs-foot-grid { grid-template-columns: 1fr 1fr; }
  .mzs-foot-grid > div:first-child { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------ inner pages (reservation, contact, about) */
/* Shared page scaffolding */
.mzs-page { padding-bottom: 0; }
.mzs-page-head,
.mzs-resv-head { background: linear-gradient(180deg, var(--mzs-sand), #fff); border-bottom: 1px solid var(--mzs-sand-line); padding-block: 48px 36px; }
.mzs-page-head h1,
.mzs-resv-head h1 { font-size: clamp(30px, 5vw, 44px); line-height: 1.05; }
.mzs-page-head .mzs-note,
.mzs-resv-head .mzs-note { margin-top: 12px; font-size: 16.5px; }
.mzs-page-body,
.mzs-resv-body { padding-block: 40px 8px; }

.mzs-card,
.mzs-resv-card { background: #fff; border: 1px solid var(--mzs-line); border-radius: 16px; padding: 28px; box-shadow: 0 1px 2px rgba(8, 51, 68, .04); }
.mzs-card h2,
.mzs-resv-card h2 { margin: 0; font-family: var(--mzs-display); font-size: 21px; letter-spacing: -.01em; color: var(--mzs-ink); }
.mzs-resv-sub { margin: 6px 0 22px; color: var(--mzs-muted); font-size: 14px; }

/* Shared form fields */
.mzs-fg { display: flex; flex-direction: column; gap: 7px; }
.mzs-fg-full { grid-column: 1 / -1; }
.mzs-fg label { font-size: 13px; font-weight: 600; color: var(--mzs-ink); }
.mzs-req { color: var(--mzs-sun); }
.mzs-page .mzs-control { height: 46px; width: 100%; padding: 0 14px; border: 1px solid var(--mzs-line); border-radius: 10px; background: #fff; color: var(--mzs-ink); font: 400 15px/1 var(--mzs-body); transition: border-color .15s, box-shadow .15s; }
.mzs-page textarea.mzs-control { height: auto; min-height: 112px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.mzs-page select.mzs-control { appearance: none; -webkit-appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B6B77' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: right 13px center; }
.mzs-page .mzs-control::placeholder { color: #9AA8B2; }
.mzs-page .mzs-control:focus { outline: none; border-color: var(--mzs-sea); box-shadow: 0 0 0 3px rgba(14, 116, 144, .14); }
.mzs-page .mzs-control.is-error { border-color: #D9534F; }
.mzs-err { font-size: 12.5px; color: #B42318; }

.mzs-submit,
.mzs-resv-submit { margin-top: 24px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mzs-submit .mzs-btn-pri,
.mzs-resv-submit .mzs-btn-pri { height: 48px; padding: 0 26px; font-size: 15px; }
.mzs-note-sm,
.mzs-resv-note { font-size: 13px; color: var(--mzs-muted); }

/* Reservation layout */
.mzs-resv-alert { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; padding: 13px 16px; border-radius: 12px; background: var(--mzs-sea-l); border: 1px solid #BFE0E6; color: var(--mzs-deep-2); font-size: 14.5px; }
.mzs-resv-alert svg { width: 19px; height: 19px; flex: 0 0 19px; color: var(--mzs-sea); }
.mzs-resv-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 30px; align-items: start; }
.mzs-resv-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.mzs-resv-info h2 { margin-bottom: 4px; }
.mzs-resv-ln { display: flex; gap: 13px; padding: 15px 0; border-bottom: 1px solid var(--mzs-line); }
.mzs-resv-ic { flex: 0 0 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--mzs-sea-l); color: var(--mzs-sea); }
.mzs-resv-ic svg { width: 19px; height: 19px; }
.mzs-resv-info h3 { margin: 0 0 3px; font-family: var(--mzs-body); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mzs-muted); }
.mzs-resv-v { font-size: 15px; color: var(--mzs-ink); }
.mzs-resv-v a { color: var(--mzs-sea) !important; text-decoration: none !important; }
.mzs-resv-hours { display: grid; grid-template-columns: auto auto; gap: 3px 16px; font-size: 14.5px; }
.mzs-resv-hours .d { color: var(--mzs-muted); }
.mzs-resv-hours .t { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mzs-resv-assure { margin-top: 18px; display: flex; gap: 11px; align-items: flex-start; background: var(--mzs-sand); border: 1px solid var(--mzs-sand-line); border-radius: 14px; padding: 15px 16px; font-size: 14px; color: #5A4A2E; }
.mzs-resv-assure svg { flex: 0 0 18px; width: 18px; height: 18px; color: var(--mzs-sun); margin-top: 1px; }

.mzs-resv-map { margin-top: 44px; line-height: 0; border-top: 1px solid var(--mzs-line); }
.mzs-resv-map iframe { display: block; width: 100%; }

@media (max-width: 860px) { .mzs-resv-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .mzs-resv-fields { grid-template-columns: 1fr; } .mzs-resv-card { padding: 20px; } }

/* Contact layout */
.mzs-contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 30px; align-items: stretch; }
.mzs-contact-left { display: flex; flex-direction: column; }
.mzs-contact-sub { margin: 6px 0 22px; color: var(--mzs-muted); font-size: 15.5px; max-width: 56ch; }
.mzs-contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; }
.mzs-contact-mini { background: #fff; border: 1px solid var(--mzs-line); border-radius: 14px; padding: 18px; }
.mzs-contact-mini .mzs-resv-ic { margin-bottom: 12px; }
.mzs-contact-mini h3 { margin: 0 0 4px; font-family: var(--mzs-body); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mzs-muted); }
.mzs-contact-mini p, .mzs-contact-mini a { margin: 0; font-size: 14.5px; color: var(--mzs-ink); text-decoration: none; word-break: break-word; }
.mzs-contact-mini a:hover { color: var(--mzs-sea); }
.mzs-contact-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mzs-contact-map { min-height: 100%; border-radius: 16px; overflow: hidden; border: 1px solid var(--mzs-line); background: var(--mzs-soft); }
.mzs-contact-map iframe { display: block; width: 100%; height: 100%; min-height: 460px; border: 0; }
@media (max-width: 860px) { .mzs-contact-grid { grid-template-columns: 1fr; } .mzs-contact-map iframe { min-height: 320px; } }
@media (max-width: 520px) { .mzs-contact-cards { grid-template-columns: 1fr; } .mzs-contact-fields { grid-template-columns: 1fr; } }

/* About layout */
.mzs-about-body { padding-block: 64px; }
.mzs-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.mzs-about-grid.is-solo { grid-template-columns: 1fr; max-width: 760px; }
.mzs-about-img { border-radius: 18px; overflow: hidden; border: 1px solid var(--mzs-line); background: var(--mzs-soft); aspect-ratio: 4 / 3; }
.mzs-about-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mzs-about-txt .mzs-kicker { margin-bottom: 10px; }
.mzs-about-txt h2 { font-family: var(--mzs-display); font-size: clamp(26px, 4vw, 38px); line-height: 1.08; letter-spacing: -.02em; color: var(--mzs-ink); margin: 0 0 16px; }
.mzs-about-txt p { color: var(--mzs-muted); font-size: 16.5px; line-height: 1.6; margin: 0 0 26px; max-width: 56ch; }
@media (max-width: 860px) { .mzs-about-grid { grid-template-columns: 1fr; gap: 28px; } .mzs-about-body { padding-block: 44px; } }

/* ------------------------------------------------------------------ online-order page */
/* Restyle of frontend/menu-page.php. The vendor hooks (.menu-filter, .ct-menu-category-item,
   data-filter, .menu-container, .cat-id-<id>, .order-item) are preserved in the markup; these
   rules only reskin them and never touch the slick/isotope behaviour. Scoped to .mzs-order. */
.mzs-order { padding-bottom: 0; }

/* Sticky category chip bar (replaces the slick .menu-category-slider carousel) */
.mzs-order-catbar { position: -webkit-sticky; position: sticky; top: var(--mzs-top-h); z-index: 20; background: #fff; border-bottom: 1px solid var(--mzs-line); box-shadow: 0 6px 16px rgba(8, 51, 68, .04); }
.mzs-order-chips { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding-block: 13px; scrollbar-width: thin; scrollbar-color: var(--mzs-line) transparent; -webkit-overflow-scrolling: touch; }
.mzs-order-chips::-webkit-scrollbar { height: 6px; }
.mzs-order-chips::-webkit-scrollbar-thumb { background: var(--mzs-line); border-radius: 999px; }
.mzs-order-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 15px; border: 1px solid var(--mzs-line); border-radius: 999px; background: #fff; color: var(--mzs-ink) !important; font: 600 14px/1 var(--mzs-body); text-align: left; text-decoration: none !important; white-space: nowrap; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.mzs-order-chip:hover { border-color: #AFC0C9; }
.mzs-order-chip.active { background: var(--mzs-deep); border-color: var(--mzs-deep); color: #fff !important; }
.mzs-order-chip-count { min-width: 20px; padding: 1px 7px; border-radius: 999px; background: var(--mzs-soft); color: var(--mzs-muted); font-size: 12px; font-weight: 600; line-height: 1.5; text-align: center; }
.mzs-order-chip.active .mzs-order-chip-count { background: rgba(255, 255, 255, .18); color: #fff; }

/* Product grid: .menu-container is the isotope target; items keep .cat-id-<id>.
   Flex-wrap is the pre-init / no-JS fallback - once isotope runs it positions items itself. */
.mzs-order-body { padding-block: 26px 64px; }
.mzs-order-grid { display: flex; flex-wrap: wrap; margin-inline: -10px; }
.mzs-order-item { width: 25%; padding: 0 10px 20px; box-sizing: border-box; }
.mzs-order-empty { padding: 48px 0; text-align: center; color: var(--mzs-muted); font-size: 15.5px; }

.mzs-order-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--mzs-line); border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(8, 51, 68, .04); transition: border-color .15s, box-shadow .15s, transform .15s; }
.mzs-order-card:hover { border-color: #C6D3DA; box-shadow: 0 12px 28px rgba(8, 51, 68, .10); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .mzs-order-card { transition: none; } .mzs-order-card:hover { transform: none; } }

.mzs-order-photo { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--mzs-sea-l); }
.mzs-order-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.mzs-order-card:hover .mzs-order-photo img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .mzs-order-photo img { transition: none; } }
/* Soft-tinted placeholder tile (no vendor no_image.png, no external image) */
.mzs-order-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--mzs-sea-l); color: var(--mzs-sea); }
.mzs-order-item:nth-child(3n+2) .mzs-order-ph { background: #F3EADB; color: #9A6B1F; }
.mzs-order-item:nth-child(3n+3) .mzs-order-ph { background: #E4EEE6; color: #3F7A4E; }
.mzs-order-mono { font-family: var(--mzs-display); font-size: 54px; font-weight: 600; line-height: 1; letter-spacing: -.02em; opacity: .9; }
.mzs-order-ph-ic { position: absolute; right: 9px; bottom: 8px; width: 19px; height: 19px; opacity: .4; }

.mzs-order-info { display: flex; flex: 1; flex-direction: column; gap: 7px; padding: 14px 15px 15px; }
.mzs-order-rating { display: flex; align-items: center; gap: 7px; min-height: 16px; }
.mzs-order-rating .rating { display: inline-flex; gap: 2px; }
.mzs-order-rating .full-stars-example-two { line-height: 0; }
.mzs-order-rating i { font-size: 12px; color: var(--mzs-sun); }
.mzs-order-rating .rating-num { font-size: 12px; color: var(--mzs-muted); }
.mzs-order .mzs-order-name { margin: 0; min-height: 2.6em; font-family: var(--mzs-body); font-size: 15.5px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mzs-order-name a { color: var(--mzs-ink) !important; text-decoration: none !important; }
.mzs-order-name a:hover { color: var(--mzs-sea) !important; }
.mzs-order-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 4px; }
.mzs-order-price { margin: 0; padding: 0; border: 0; font-weight: 700; color: var(--mzs-deep); font-variant-numeric: tabular-nums; }
.mzs-order-price span { font-size: 15.5px; }
.mzs-order-controls { margin: 0; padding: 0; border: 0; }
.mzs-order-add { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 10px; border: 1px solid transparent; background: var(--mzs-sun); color: #1C1204 !important; text-decoration: none !important; transition: background-color .15s; }
.mzs-order-add:hover { background: var(--mzs-sun-2); }
.mzs-order-add svg { width: 18px; height: 18px; }

@media (max-width: 1100px) { .mzs-order-item { width: 33.3333%; } }
@media (max-width: 860px) { .mzs-order-item { width: 50%; } }
/* Phones: stay a 2-up grid (never one giant card per row), tighten spacing,
   and shrink the placeholder monogram to suit the narrower tile. */
@media (max-width: 480px) {
  .mzs-order-item { width: 50%; padding: 0 6px 14px; }
  .mzs-order-grid { margin-inline: -6px; }
  .mzs-order-body { padding-block: 18px 48px; }
  .mzs-order-info { gap: 5px; padding: 11px 11px 12px; }
  .mzs-order .mzs-order-name { min-height: 2.4em; font-size: 14.5px; }
  .mzs-order-price span { font-size: 14.5px; }
  .mzs-order-add { width: 34px; height: 34px; }
  .mzs-order-mono { font-size: 40px; }
  .mzs-order-chip { padding: 8px 13px; font-size: 13.5px; }
}

/* Optional food pre-order on the reservation form (wish-list, no payment). */
.mzs-resv-food { margin-top: 22px; border-top: 1px solid var(--mzs-line); padding-top: 18px; }
.mzs-resv-food-h { margin: 0 0 2px; font-family: var(--mzs-body); font-size: 16px; font-weight: 700; color: var(--mzs-ink); }
.mzs-resv-opt { font-weight: 600; font-size: 13px; color: var(--mzs-muted); }
.mzs-resv-food .mzs-resv-sub { margin: 0 0 12px; }
.mzs-food-cat { margin: 14px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mzs-sea); }
.mzs-food-list { display: flex; flex-direction: column; gap: 6px; }
.mzs-food-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--mzs-line); border-radius: 10px; background: #fff; }
.mzs-food-name { flex: 1 1 auto; min-width: 0; font-size: 14.5px; color: var(--mzs-ink); }
.mzs-food-price { flex: 0 0 auto; font-size: 13.5px; font-weight: 700; color: var(--mzs-deep); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mzs-food-qty { flex: 0 0 64px; width: 64px; text-align: center; padding: 6px 4px; }
.mzs-food-total { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--mzs-line); font-size: 15px; }
.mzs-food-total strong { font-size: 17px; color: var(--mzs-deep); font-variant-numeric: tabular-nums; }
@media (max-width: 480px) {
  .mzs-food-name { font-size: 14px; }
  .mzs-food-qty { flex-basis: 56px; width: 56px; }
}