.menu-modal {
      position: fixed;
      inset: 0;
      z-index: 120;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0.75);
      opacity: 0;
      visibility: hidden;
      transition: opacity 240ms ease, visibility 240ms ease;
      padding: 20px;
    }

.menu-modal.menu-modal--visible {
      opacity: 1;
      visibility: visible;
    }

.menu-modal__overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.72);
      cursor: pointer;
    }

.menu-modal__content {
      position: relative;
      width: min(100%, 920px);
      max-width: 94vw;
      max-height: 88vh;
      background: #ffffff;
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 32px 90px rgba(0, 0, 0, 0.36);
      display: flex;
      flex-direction: column;
    }

.menu-modal__close {
      position: absolute;
      top: 14px;
      right: 14px;
      width: 36px;
      height: 36px;
      border: none;
      border-radius: 8px;
      background: rgba(0, 0, 0, 0.82);
      color: #f4efe6;
      font-size: 20px;
      line-height: 1;
      cursor: pointer;
      display: grid;
      place-items: center;
      z-index: 2;
      transition: transform 180ms ease, background 180ms ease;
    }

.menu-modal__close:hover,
    .menu-modal__close:focus-visible {
      transform: scale(1.05);
      background: #9b6b3d;
      outline: none;
    }

.menu-modal__frame {
      width: 100%;
      height: 100%;
      min-height: 480px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      padding: 20px;
      background: #faf5ed;
    }

.menu-modal__book {
      position: relative;
      width: 100%;
      max-width: 780px;
      height: min(66vh, 560px);
      min-height: 360px;
      perspective: 1400px;
      background: #ffffff;
      border-radius: 8px;
      box-shadow: 0 18px 46px rgba(23, 27, 30, 0.18);
      overflow: hidden;
    }

.menu-modal__page {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
      background: #ffffff;
      opacity: 0;
      transform: rotateY(-84deg);
      transform-origin: left center;
      transition: opacity 220ms ease, transform 420ms ease;
      backface-visibility: hidden;
      pointer-events: none;
    }

.menu-modal__page.is-active {
      opacity: 1;
      transform: rotateY(0deg);
      pointer-events: auto;
      z-index: 1;
    }

.menu-modal__page.is-exiting {
      opacity: 0;
      transform: rotateY(-84deg);
      z-index: 2;
    }

.menu-modal__controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
    }

.menu-modal__nav {
      width: 40px;
      height: 40px;
      border: none;
      border-radius: 8px;
      background: #171b1e;
      color: #f4efe6;
      font-size: 30px;
      line-height: 1;
      cursor: pointer;
      display: grid;
      place-items: center;
      transition: background 180ms ease, transform 180ms ease, opacity 180ms ease;
    }

.menu-modal__nav:hover,
    .menu-modal__nav:focus-visible {
      background: #9b6b3d;
      transform: translateY(-1px);
      outline: none;
    }

.menu-modal__nav:disabled {
      cursor: not-allowed;
      opacity: 0.42;
      transform: none;
    }

.menu-modal__counter {
      min-width: 54px;
      color: #171b1e;
      font-size: 14px;
      font-weight: 700;
      text-align: center;
    }