:root,
.pdf-orientation-portrait {
  --q9-menu-canvas-width: 736px;
  --q9-menu-sidebar-width: 340px; /*240px;*/
  --q9-menu-column-gutter: 20px;
  --q9-menu-layout-gap: 24px;
  --q9-pdf-page-guide-height: 976px;
}

.pdf-orientation-landscape {
  --q9-menu-canvas-width: 976px;
  --q9-pdf-page-guide-height: 735px;
  --q9-menu-sidebar-width: 240px;
  --q9-pdf-image-max-height: 560px;
}

.q9-menu-canvas {
  width: var(--q9-menu-canvas-width);
  max-width: 100%;
  box-sizing: border-box;
  border: 0;
  margin: 0;
  padding: 0;
}

.q9-menu-canvas .menutxt {
  display: block;
  width: 100%;
  height: auto;
}

.q9-menu-canvas .menutxt .row {
  display: table !important;
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  flex-wrap: unset !important;
  --bs-gutter-x: 0;
}

.q9-menu-canvas .menutxt .col-md-6,
.q9-menu-canvas .menutxt .col-12.col-md-6 {
  width: 50% !important;
  display: table-cell !important;
  float: none !important;
  flex: none !important;
  max-width: none !important;
}

.q9-menu-canvas .menutxt .col-md-4,
.q9-menu-canvas .menutxt .col-12.col-md-4 {
  width: 33.333% !important;
  display: table-cell !important;
  float: none !important;
  flex: none !important;
  max-width: none !important;
}

.q9-menu-canvas .menutxt .col-12:not(.col-md-6):not(.col-md-4),
.q9-menu-canvas .menutxt .col-md-12 {
  width: 100% !important;
  display: block !important;
  flex: none !important;
  max-width: none !important;
}

.q9-menu-canvas .menutxt .col-12,
.q9-menu-canvas .menutxt .col-md-12,
.q9-menu-canvas .menutxt .col-md-6,
.q9-menu-canvas .menutxt .col-md-4 {
  padding: 0 calc(var(--q9-menu-column-gutter) / 2);
  vertical-align: top;
  box-sizing: border-box;
}

.q9-menu-canvas .menutxt .row.pt-2 > .col-12,
.q9-menu-canvas .menutxt .row.pt-2 > .col-md-12,
.q9-menu-canvas .menutxt .row.pt-2 > .col-md-6,
.q9-menu-canvas .menutxt .row.pt-2 > .col-md-4 {
  padding-top: 0.5rem;
}

.q9-menu-canvas .menutxt .row.pb-3 > .col-12,
.q9-menu-canvas .menutxt .row.pb-3 > .col-md-12,
.q9-menu-canvas .menutxt .row.pb-3 > .col-md-6,
.q9-menu-canvas .menutxt .row.pb-3 > .col-md-4 {
  padding-bottom: 1rem;
}

.q9-menu-canvas .menutxt .row.footer-notes > .col-12,
.q9-menu-canvas .menutxt .row.footer-notes > .col-md-12,
.q9-menu-canvas .menutxt .row.footer-notes > .col-md-6,
.q9-menu-canvas .menutxt .row.footer-notes > .col-md-4 {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

.q9-menu-canvas .menutxt img {
  display: block;
  max-width: 100% !important;
  max-height: var(--q9-pdf-image-max-height, 700px) !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}

.q9-menu-canvas .menutxt .col-12 img,
.q9-menu-canvas .menutxt .col-md-12 img,
.q9-menu-canvas .menutxt .col-md-6 img,
.q9-menu-canvas .menutxt .col-md-4 img {
  display: block;
  max-width: 100% !important;
  height: auto !important;
}

.q9-menu-canvas .one,
.q9-menu-canvas .two,
.q9-menu-canvas .three {
  overflow: visible;
}

body.q9-editor.q9-menu-canvas,
body.q9-editor .q9-menu-canvas {
  max-width: none;
  min-width: 0;
}

@media all and (max-width: 992px) {
  body:not(.pdf-document) .q9-menu-canvas {
    width: 100%;
  }

  body:not(.pdf-document) .q9-menu-canvas .menutxt .row {
    display: block !important;
  }

  body:not(.pdf-document) .q9-menu-canvas .menutxt .col-12.col-md-6,
  body:not(.pdf-document) .q9-menu-canvas .menutxt .col-12.col-md-4 {
    width: 100% !important;
    display: block !important;
  }
}

/* A dish is a name, its markers and sometimes a description, and nothing in the
   stored markup groups them — so the wrapper is added when the sections are
   rendered. Without it a page break in the PDF lands in the middle of a dish:
   "House-made Cornbread, Whipped Honey" at the foot of one page, "Butter G, D,
   V" at the head of the next. */
.q9-menu-canvas .menutxt .q9dish {
  break-inside: avoid;
  page-break-inside: avoid;
}

/* ---- Two-column flow ----------------------------------------------------
   A menu whose packages all fit a page is set as a grid of section rows, two
   packages to a row. One that holds a package taller than a page cannot be:
   the cells are filled by the importer, before there are any pages, so a row
   taller than the space left straddles the break and its columns fall out of
   step. q9_layout_sections() emits those menus as a single full-width section
   carrying the class below, and the columns are drawn here — the renderer then
   fills the left column of a page before the right one of the same page, so a
   course can no longer be continued on the next page's left column.

   The rail is not handled here: a menu with photos keeps the grid, because the
   third column is the rail's and a flow has none to give it. */
.q9-menu-canvas .menutxt .menuflow > .one {
  column-count: 2;
  column-gap: var(--q9-menu-column-gutter, 20px);
}

/* A heading and its first dishes, bound by app_keep_headings(). break-after on
   the heading alone keeps it with one block, which still leaves a course label
   at the foot of a column with a single dish under it. */
.q9-menu-canvas .menutxt .menuflow .q9keep {
  break-inside: avoid;
  page-break-inside: avoid;
}

.q9-menu-canvas .menutxt .menuflow h3,
.q9-menu-canvas .menutxt .menuflow h4 {
  break-after: avoid;
  page-break-after: avoid;
}

/* On a phone the two columns are one, as the grid's already are above. */
@media all and (max-width: 992px) {
  body:not(.pdf-document) .q9-menu-canvas .menutxt .menuflow > .one {
    column-count: 1;
  }
}