/* Digital menu flipbook — full DOM width; natural page height (scroll to read) */
.mh-flipbook-section {
  --mh-book-cream: #f5f5ed;
  --mh-book-shadow: color-mix(in srgb, var(--brand-green, #3b573f), transparent 70%);
  background-color: transparent;
}

.mh-flipbook-section .section-title h2,
.mh-flipbook-section .section-title p {
  color: #fff;
}

.mh-flipbook-intro {
  max-width: 40rem;
  margin: 0 auto 0.75rem;
  text-align: center;
  color: #fff;
  line-height: 1.65;
}

.mh-flipbook-container {
  max-width: none;
  width: 100%;
}

@media (min-width: 992px) {
  .mh-flipbook-container {
    max-width: 780px;
    margin-inline: auto;
  }
}

.mh-flipbook-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.mh-flipbook-stage {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  perspective: 2200px;
  padding: 0;
  min-height: 0;
  overflow: visible;
}

.mh-flipbook-zoom-viewport {
  position: relative;
  width: 100%;
  /* Document scrolls — do not trap touch in a nested scroller */
  overflow: visible;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  touch-action: pan-y;
}

.mh-flipbook-zoom-viewport.is-zoomed {
  max-height: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.mh-flipbook-zoom-inner {
  position: relative;
  flex-shrink: 0;
  touch-action: pan-y;
  pointer-events: none; /* scroll passes through; buttons are outside */
}

.mh-flipbook-book {
  position: relative;
  margin: 0 auto;
  border-radius: 2px 6px 6px 2px;
  box-shadow:
    0 18px 40px var(--mh-book-shadow),
    0 4px 12px color-mix(in srgb, var(--brand-green, #3b573f), transparent 82%),
    inset 0 0 0 1px color-mix(in srgb, var(--brand-accent, #88794f), transparent 70%);
  background: var(--mh-book-cream);
  /* No translateZ/will-change — GPU layer + scale blanks canvas on iOS */
  overflow: hidden;
  flex-shrink: 0;
  max-width: none;
  touch-action: pan-y;
  pointer-events: none;
}

.mh-flipbook-book.--preview {
  max-width: 100%;
}

.mh-flipbook-book .stf__parent,
.mh-flipbook-book .stf__wrapper {
  margin: 0 auto !important;
  width: 100% !important;
  height: 100% !important;
}

.mh-flipbook-book .stf__parent canvas,
.mh-flipbook-book .stf__canvas {
  width: 100% !important;
  height: 100% !important;
}

.mh-flipbook-book .stf__item {
  background: var(--mh-book-cream);
  box-shadow: inset 0 0 24px color-mix(in srgb, #000, transparent 92%);
}

.mh-flipbook-book .stf__item img,
.mh-flipbook-page-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
  background: var(--mh-book-cream);
  user-select: none;
  -webkit-user-drag: none;
}

.mh-flipbook-book .stf__outerShadow,
.mh-flipbook-book .stf__innerShadow,
.mh-flipbook-book .stf__hardShadow,
.mh-flipbook-book .stf__hardInnerShadow {
  opacity: 0.85;
}

.mh-flipbook-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.45rem 0.55rem;
  width: auto;
  flex-shrink: 0;
  position: sticky;
  bottom: 0.75rem;
  z-index: 5;
  padding: 0.45rem 0.65rem;
  background: color-mix(in srgb, var(--brand-green, #3b573f), transparent 18%);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  max-width: calc(100% - 1rem);
  margin-inline: auto;
}

.mh-flipbook-controls-sep {
  display: inline-block;
  width: 1px;
  height: 1.4rem;
  background: color-mix(in srgb, #fff, transparent 65%);
  margin: 0 0.15rem;
}

.mh-flipbook-zoom-label {
  min-width: 3.25rem;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.02em;
}

.mh-flipbook-btn {
  appearance: none;
  border: 1px solid color-mix(in srgb, #fff, transparent 55%);
  background: var(--brand-accent, #88794f);
  color: #fff;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.9rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-size: 0.95rem;
  line-height: 1;
  transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, transform 0.15s ease;
}

.mh-flipbook-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--brand-accent, #88794f), #fff 12%);
  border-color: #fff;
  color: #fff;
}

.mh-flipbook-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.mh-flipbook-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.mh-flipbook-btn.is-busy {
  opacity: 0.75;
}

.mh-flipbook-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.mh-flipbook-indicator {
  min-width: 7.5rem;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
}

.mh-flipbook-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.mh-flipbook-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: #fff;
}

.mh-flipbook-allergen {
  max-width: 52rem;
  margin: 1rem auto 0;
  font-size: 0.95rem;
  color: #fff;
}

.mh-flipbook-allergen summary {
  cursor: pointer;
  text-align: center;
  list-style-position: inside;
  color: #fff;
}

.mh-flipbook-allergen-legend {
  padding: 1rem 1.25rem;
  border-radius: 8px;
  background-color: color-mix(in srgb, #000, transparent 55%);
  color: #fff;
  line-height: 1.55;
}

.mh-flipbook-cta {
  text-align: center;
  margin-top: 0.75rem;
}

.mh-flipbook-cta .download-menu {
  background-color: var(--accent-color, var(--brand-accent, #88794f)) !important;
  color: #fff !important;
}

/* Fullscreen still allows scroll if page is taller than screen */
.mh-flipbook-wrap.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1080;
  max-width: none;
  margin: 0;
  padding: 0.75rem 0.5rem 1rem;
  background: color-mix(in srgb, var(--brand-deep, #1f1f1f), transparent 4%);
  justify-content: flex-start;
  overflow: auto;
}

.mh-flipbook-wrap.is-fullscreen .mh-flipbook-stage {
  min-height: 0;
  align-items: flex-start;
}

.mh-flipbook-wrap.is-fullscreen .mh-flipbook-indicator {
  color: #fff;
}

.mh-flipbook-wrap.is-fullscreen .mh-flipbook-btn {
  background: var(--brand-accent, #88794f);
  border-color: var(--brand-accent, #88794f);
}

body.mh-flipbook-no-scroll {
  overflow: hidden;
}

body.mh-flipbook-no-scroll .mh-flipbook-wrap.is-fullscreen {
  overflow: auto;
}

@media (max-width: 767.98px) {
  .mh-flipbook-book {
    border-radius: 4px;
  }

  .mh-flipbook-container {
    padding-left: 0.35rem !important;
    padding-right: 0.35rem !important;
  }

  .mh-flipbook-stage,
  .mh-flipbook-zoom-viewport,
  .mh-flipbook-zoom-inner,
  .mh-flipbook-book {
    touch-action: pan-y !important;
  }

  .mh-flipbook-controls {
    gap: 0.35rem;
    padding: 0.4rem 0.5rem;
    bottom: 0.5rem;
    /* Controls must stay tappable above the non-interactive book */
    pointer-events: auto;
    z-index: 20;
  }

  .mh-flipbook-btn {
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.55rem;
    pointer-events: auto;
  }

  .mh-flipbook-indicator {
    min-width: 5.5rem;
    font-size: 0.8rem;
  }

  .mh-flipbook-zoom-label {
    min-width: 2.75rem;
    font-size: 0.75rem;
  }

  /* Kill PageFlip hit-testing so thumb-scroll moves the page, not the book */
  .mh-flipbook-book,
  .mh-flipbook-book .stf__parent,
  .mh-flipbook-book .stf__wrapper,
  .mh-flipbook-book .stf__block,
  .mh-flipbook-book .stf__canvas,
  .mh-flipbook-book canvas {
    pointer-events: none !important;
    touch-action: pan-y !important;
    -ms-touch-action: pan-y !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mh-flipbook-btn {
    transition: none;
  }
}