/* Caterman — Menu page. Dark editorial, builds on .cm-os. Tilt-card dishes (reuses
   the Reviews cursor-tilt pattern) + search / dietary filters / section tabs +
   sticky "dream menu" tray + details form. No prices — the system holds those. */

.cm-menu { position: relative; width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; background: #000; color: #fff; }

/* neutralise the theme content wrapper + subheader (same as reviews) */
.cm-menu-page #content.site-content { padding-top: 0 !important; padding-bottom: 0 !important; }
.cm-menu-page .kl-blog-page-content,
.cm-menu-page .kl-blog-page-body,
.cm-menu-page #th-content-page { padding: 0 !important; margin: 0 !important; }
.cm-menu-page #content.site-content .container,
.cm-menu-page #content.site-content .row,
.cm-menu-page #content.site-content [class*="col-"] { width: 100% !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }
.cm-menu-page .entry-title, .cm-menu-page .page-title, .cm-menu-page .page-header,
.cm-menu-page .kl-slideshow, .cm-menu-page #zn_slideshow, .cm-menu-page .hero-subheader { display: none !important; }

/* hero */
.cm-menu-hero { padding-top: clamp(46px, 6vw, 80px); padding-bottom: clamp(20px, 3vw, 40px); }
.cm-menu-hero__inner { max-width: 1180px; }  /* full content width, aligned with the grid below (was 860) */
.cm-menu-hero .cm-os-intro { max-width: 640px; }
.cm-menu-empty { color: #bdbdbd; font-size: 17px; }
.cm-menu-empty a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* toolbar: search + dietary chips + section tabs */
.cm-menu-tools-sec { padding-top: 0; padding-bottom: clamp(14px, 2vw, 26px); position: sticky; top: 0; z-index: 6; background: rgba(0,0,0,.86); backdrop-filter: blur(10px); }
.cm-menu-tools { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; padding-top: clamp(16px, 2vw, 26px); }
.cm-menu-search {
  flex: 1; min-width: 220px; max-width: 420px; padding: 12px 18px; border-radius: 999px;
  background: #0c0c0c; border: 1px solid rgba(255,255,255,.16); color: #fff;
  font-family: 'Manrope', system-ui, sans-serif; font-size: 15px;
}
.cm-menu-search::placeholder { color: #7f7f7f; }
.cm-menu-search:focus { outline: none; border-color: rgba(255,255,255,.5); }
.cm-menu-diets { display: flex; flex-wrap: wrap; gap: 8px; }
.cm-menu-chip {
  padding: 8px 15px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid rgba(255,255,255,.2); color: #cfcfcf;
  font-family: 'Manrope', system-ui, sans-serif; font-weight: 600; font-size: 13px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.cm-menu-chip:hover { border-color: rgba(255,255,255,.45); color: #fff; }
.cm-menu-chip.is-on { background: #fff; color: #000; border-color: #fff; }

.cm-menu-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.cm-menu-tab {
  padding: 7px 15px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid transparent; color: #8f8f8f;
  font-family: 'Roboto Condensed', 'Manrope', sans-serif; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; font-size: 13.5px; transition: color .2s ease, background .2s ease;
}
.cm-menu-tab:hover { color: #fff; }
.cm-menu-tab.is-on { background: #161616; color: #fff; }

/* sections + grid */
.cm-menu-grid-sec { padding-top: clamp(14px, 2vw, 28px); padding-bottom: clamp(60px, 8vw, 120px); }
.cm-menu-section { margin-bottom: clamp(40px, 5vw, 72px); }
.cm-menu-section[hidden] { display: none; }
.cm-menu-section__head {
  font-family: 'Roboto Condensed', 'Manrope', sans-serif; font-weight: 700; text-transform: uppercase;
  letter-spacing: .02em; font-size: clamp(20px, 2.4vw, 30px); color: #fff; margin: 0 0 clamp(18px, 2vw, 26px);
  padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.1);
}
.cm-menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.8vw, 24px); }
@media (max-width: 980px) { .cm-menu-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cm-menu-grid { grid-template-columns: 1fr; } }

/* tilt cards (reuses the reviews tilt motif). Since 1.1.0 the card is a DIV with
   explicit buttons inside (+ Add on both faces, View Dish flips to the photo) —
   tilt transforms __inner, the flip rotates __flip, so they never fight. */
.cm-menu-card { position: relative; display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; color: #fff; perspective: 1000px; -webkit-appearance: none; appearance: none; }
.cm-menu-card[hidden] { display: none; }
.cm-menu-card__inner {
  position: relative; display: flex; flex-direction: column; height: 100%;
  padding: clamp(20px, 2vw, 28px);
  background: #0c0c0c; border: 1px solid rgba(255,255,255,.1); border-radius: 16px;
  transform-style: preserve-3d; will-change: transform;
  transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .4s ease, background .3s ease;
}
.cm-menu-card:hover .cm-menu-card__inner { border-color: rgba(255,255,255,.24); box-shadow: 0 24px 48px -22px rgba(0,0,0,.85); }
.cm-menu-card.is-tilting .cm-menu-card__inner { transition: box-shadow .4s ease, border-color .4s ease, background .3s ease; }
.cm-menu-card.is-picked .cm-menu-card__inner { border-color: #fff; background: #141414; box-shadow: 0 0 0 1px #fff inset; }

.cm-menu-card__name { font-family: 'Roboto Condensed', 'Manrope', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(16px, 1.5vw, 19px); transform: translateZ(34px); }
.cm-menu-card__desc { margin-top: 10px; flex: 1 0 auto; font-family: 'Manrope', system-ui, sans-serif; font-size: 14px; line-height: 1.55; color: #b9b9b9; transform: translateZ(26px); }
.cm-menu-card__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 14px; transform: translateZ(20px); }
.cm-menu-card__tag { font-family: 'Manrope', system-ui, sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .03em; padding: 2px 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); color: #d6d6d6; }
.cm-menu-card__al { margin-top: 10px; font-size: 11px; letter-spacing: .03em; text-transform: uppercase; color: #7d7d7d; transform: translateZ(16px); }
.cm-menu-card__actions { margin-top: 16px; display: flex; align-items: center; gap: 8px; transform: translateZ(30px); }
.cm-menu-card__pick { display: inline-flex; align-items: center; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; -webkit-appearance: none; appearance: none; }
.cm-menu-card__pick > span {
  font-family: 'Roboto Condensed', 'Manrope', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  font-size: 13px; padding: 7px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3);
  transition: background .2s ease, border-color .2s ease;
}
.cm-menu-card__pick:hover .cm-menu-card__add { background: rgba(255,255,255,.12); border-color: #fff; }
.cm-menu-card__added { display: none; background: #fff; color: #000; border-color: #fff; }
.cm-menu-card.is-picked .cm-menu-card__add { display: none; }
.cm-menu-card.is-picked .cm-menu-card__added { display: inline-block; }

/* ---- flip-to-photo (1.2.0: the WHOLE card flips) -------------------------------
   __spin is the one rotating element; the entire chrome card (__inner) is its
   front face and the photo card (__back) its back face. While turning (or resting
   flipped) every 3D side-effect inside the card is flattened — the tilt pops, the
   glow plane at translateZ(50) — because any non-coplanar child gets geometrically
   SLICED by the photo plane mid-rotation (the "renders in halves" jank). JS also
   waits for the photo to finish loading before starting the turn. */
.cm-menu-card__spin {
  display: flex; flex-direction: column; height: 100%; position: relative;
  transform-style: preserve-3d; will-change: transform;
  transition: transform .6s cubic-bezier(.3, .9, .3, 1);
}
.cm-menu-card.is-flipped .cm-menu-card__spin { transform: rotateY(180deg); }
.cm-menu-card__inner { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cm-menu-card.is-flipping .cm-menu-card__inner,
.cm-menu-card.is-flipped .cm-menu-card__inner { transform-style: flat; transform: none !important; }
.cm-menu-card.is-flipping .cm-menu-card__glow,
.cm-menu-card.is-flipped .cm-menu-card__glow { display: none; }
.cm-menu-card__back {
  position: absolute; inset: 0;     /* __spin spans the full chrome card, so this is the exact same plane */
  display: block; transform: rotateY(180deg);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 16px; overflow: hidden; background: #111;
  border: 1px solid rgba(255,255,255,.18);
}
.cm-menu-card__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cm-menu-card__backbar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 44px clamp(14px, 1.6vw, 20px) 14px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.85) 58%);
}
.cm-menu-card__viewbtn, .cm-menu-card__flipback {
  font-family: 'Roboto Condensed', 'Manrope', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  font-size: 13px; padding: 7px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3);
  background: none; color: #fff; cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: background .2s ease, border-color .2s ease;
}
.cm-menu-card__viewbtn:hover, .cm-menu-card__flipback:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.cm-menu-card__viewbtn.is-loading { opacity: .55; cursor: progress; }
@media (prefers-reduced-motion: reduce) { .cm-menu-card__flip { transition: none; } }
.cm-menu-card__glow {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit; transform: translateZ(50px);
  background: radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.08), transparent 46%);
  opacity: 0; transition: opacity .3s ease;
}
.cm-menu-card:hover .cm-menu-card__glow { opacity: 1; }

.cm-menu-noresults { color: #8f8f8f; font-size: 15px; padding: 20px 0; }

/* sticky tray */
.cm-menu-tray { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: rgba(8,8,8,.94); backdrop-filter: blur(12px); border-top: 1px solid rgba(255,255,255,.12); transform: translateY(100%); transition: transform .45s cubic-bezier(.16,1,.3,1); }
.cm-menu-tray.is-up { transform: none; }
.cm-menu-tray[hidden] { display: none; }
.cm-menu-tray__inner { display: flex; align-items: center; gap: 18px; padding: 16px clamp(20px, 5vw, 64px); }
.cm-menu-tray__count { font-family: 'Roboto Condensed', 'Manrope', sans-serif; text-transform: uppercase; letter-spacing: .04em; font-size: 15px; color: #cfcfcf; white-space: nowrap; }
.cm-menu-tray__n { color: #fff; font-size: 20px; }
.cm-menu-tray__chips { display: flex; gap: 6px; overflow-x: auto; flex: 1; scrollbar-width: none; }
.cm-menu-tray__chips::-webkit-scrollbar { display: none; }
.cm-menu-tray__chip { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; padding: 6px 8px 6px 13px; border-radius: 999px; background: #161616; border: 1px solid rgba(255,255,255,.14); font-family: 'Manrope', sans-serif; font-size: 12.5px; color: #e2e2e2; }
.cm-menu-tray__chip button { background: none; border: 0; color: #8f8f8f; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
.cm-menu-tray__chip button:hover { color: #fff; }
.cm-menu-tray__go { margin: 0 !important; white-space: nowrap; }

/* shared editorial button (reviews' cm-rev-btn isn't loaded here — define scoped) */
.cm-menu .cm-rev-btn {
  display: inline-block; padding: 11px 30px; border: 1px solid rgba(255,255,255,.4); border-radius: 999px;
  background: #fff; color: #000; text-decoration: none; cursor: pointer;
  font-family: 'Roboto Condensed', 'Manrope', sans-serif; font-weight: 700;
  font-size: clamp(15px, 1.4vw, 20px); text-transform: uppercase; line-height: 1.15;
  transition: background .25s cubic-bezier(.16,1,.3,1);
}
.cm-menu .cm-rev-btn:hover { background: rgba(255,255,255,.85); }

/* details form */
.cm-menu-form-sec { border-top: 1px solid rgba(255,255,255,.08); padding-bottom: clamp(80px, 10vw, 160px); scroll-margin-top: 90px; }
.cm-menu-form-sec[hidden] { display: none; }
.cm-menu-form__inner { max-width: 760px; }
.cm-menu-form { margin-top: 28px; }
.cm-menu-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) { .cm-menu-form__grid { grid-template-columns: 1fr; } }
.cm-menu-form label { display: flex; flex-direction: column; gap: 7px; font-family: 'Roboto Condensed', 'Manrope', sans-serif; text-transform: uppercase; letter-spacing: .05em; font-size: 12px; color: #9a9a9a; }
.cm-menu-form__note { margin-top: 18px; }
.cm-menu-form input, .cm-menu-form select, .cm-menu-form textarea {
  padding: 12px 15px; border-radius: 12px; background: #0c0c0c; border: 1px solid rgba(255,255,255,.16); color: #fff;
  font-family: 'Manrope', system-ui, sans-serif; font-size: 15px; text-transform: none; letter-spacing: 0;
}
.cm-menu-form input:focus, .cm-menu-form select:focus, .cm-menu-form textarea:focus { outline: none; border-color: rgba(255,255,255,.5); }
.cm-menu-form__actions { display: flex; align-items: center; gap: 18px; margin-top: 26px; flex-wrap: wrap; }
.cm-menu-form__back { background: none; border: 0; color: #9a9a9a; cursor: pointer; font-family: 'Manrope', sans-serif; font-size: 14px; }
.cm-menu-form__back:hover { color: #fff; }
.cm-menu-form__status { margin-top: 18px; font-size: 14.5px; color: #b9b9b9; min-height: 1.2em; }
.cm-menu-form__status.is-err { color: #ff9a9a; }
.cm-menu-form__status.is-ok { color: #9affb0; }
.cm-menu-form.is-sent .cm-menu-form__grid, .cm-menu-form.is-sent .cm-menu-form__note, .cm-menu-form.is-sent .cm-menu-form__actions { display: none; }