/*
 * QR Menu Site Core — front-end shell.
 * Every visual value comes from a CSS custom property written by the plugin,
 * so a site administrator can restyle the whole page from the settings screen.
 */

/*
 * The Coca-Cola brand fonts, bundled (assets/fonts/): Better With (display)
 * and TCCC Unity Text (regular + bold). Declaring them costs nothing — a
 * browser only downloads a face once text actually uses it (a heading/body
 * font choice, the combo strip, or a content block's own HTML). Relative
 * URLs keep them on the venue's own domain, so no CORS is needed.
 */
@font-face {
  font-family: "Better With";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/better-with-regular.woff2") format("woff2");
}

@font-face {
  font-family: "TCCC Unity Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/tccc-unitytext-regular.woff2") format("woff2");
}

@font-face {
  font-family: "TCCC Unity Text";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/tccc-unitytext-bold.woff2") format("woff2");
}

.qrm-site {
  box-sizing: border-box;
  min-height: 100vh;
  /* Slide animations start off to the side; never let that scroll the page
     sideways. clip (not hidden) keeps the sticky header working. */
  overflow-x: clip;
  padding: 0 0 calc(var(--qrm-page-padding) * 3);
  color: var(--qrm-text);
  background-color: var(--qrm-background);
  background-image:
    linear-gradient(
      rgba(var(--qrm-background-rgb), var(--qrm-backdrop-overlay)),
      rgba(var(--qrm-background-rgb), calc(var(--qrm-backdrop-overlay) + 0.06))
    ),
    var(--qrm-backdrop-image);
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-position: center, center;
  background-attachment: scroll, var(--qrm-backdrop-attach);
  font-family: var(--qrm-font-body);
  font-size: var(--qrm-font-size);
  line-height: 1.6;
}

.qrm-site *,
.qrm-site *::before,
.qrm-site *::after {
  box-sizing: inherit;
}

.qrm-site img {
  max-width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------- hero --- */

.qrm-hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: var(--qrm-hero-height);
  padding: clamp(1.75rem, 6vw, 3.5rem) var(--qrm-page-padding);
  overflow: hidden;
  background-color: var(--qrm-surface);
}

.qrm-hero--image {
  background-image:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, calc(var(--qrm-hero-overlay) + 0.18)),
      rgba(0, 0, 0, var(--qrm-hero-overlay))
    ),
    var(--qrm-hero-image);
  background-repeat: no-repeat;
  /* Both focal points are independent of the hero's text alignment. */
  background-position: var(--qrm-hero-focal-x) var(--qrm-hero-focal);
  background-size: cover;
}

.qrm-hero__inner {
  width: min(100%, var(--qrm-container));
  margin-inline: auto;
}

/*
 * Vertical position of the hero content. "auto" leaves it to the template
 * (centred here, bottom in Atelier); the extra .qrm-site out-ranks the skins.
 * The fine-tune nudge uses `translate`, so it never fights a transform.
 */
.qrm-site .qrm-hero.qrm-hero--valign-top    { align-items: start; }
.qrm-site .qrm-hero.qrm-hero--valign-center { align-items: center; }
.qrm-site .qrm-hero.qrm-hero--valign-bottom { align-items: end; }

.qrm-hero__inner { translate: 0 calc(var(--qrm-hero-nudge, 0px) * -1); }

.qrm-hero--align-center .qrm-hero__inner { text-align: center; }
.qrm-hero--align-left   .qrm-hero__inner { text-align: left; }
.qrm-hero--align-right  .qrm-hero__inner { text-align: right; }

.qrm-hero__logo {
  display: block;
  width: min(100%, var(--qrm-logo-width));
  margin-bottom: 1.1rem;
  object-fit: contain;
}

.qrm-hero--align-center .qrm-hero__logo { margin-inline: auto; }
.qrm-hero--align-right  .qrm-hero__logo { margin-inline: auto 0; }
.qrm-hero--align-left   .qrm-hero__logo { margin-inline: 0 auto; }

.qrm-hero__title {
  margin: 0;
  color: #fff;
  font-family: var(--qrm-font-heading);
  font-size: calc(var(--qrm-hero-title) * var(--qrm-heading-scale));
  font-weight: 400;
  line-height: 1.1;
  text-transform: var(--qrm-title-transform);
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.qrm-hero__tagline {
  margin: 0.85rem 0 0;
  color: var(--qrm-accent);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--qrm-eyebrow-space);
  text-transform: uppercase;
}

.qrm-hero__subtitle {
  margin: 0.6rem 0 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.95rem;
}

.qrm-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.35rem 0 0;
  padding: 0;
  list-style: none;
}

.qrm-hero--align-center .qrm-hero__chips { justify-content: center; }
.qrm-hero--align-right  .qrm-hero__chips { justify-content: flex-end; }

.qrm-hero__chips li {
  padding: 0.55rem 0.75rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
}

/* -------------------------------------------------------------- topbar --- */

.qrm-topbar {
  position: sticky;
  z-index: 30;
  top: 0;
  background: rgba(var(--qrm-surface-rgb), calc(0.94 * var(--qrm-surface-a, 1)));
  border-bottom: 1px solid rgba(var(--qrm-text-rgb), 0.12);
  backdrop-filter: blur(14px);
}

.qrm-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: min(100%, calc(var(--qrm-container) + var(--qrm-page-padding) * 2));
  margin-inline: auto;
  padding: 0.8rem var(--qrm-page-padding);
}

.qrm-topbar__brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

/* `.qrm-site img { height: auto }` out-ranks a single class, which is why
   the height setting used to do nothing. */
.qrm-site .qrm-topbar__logo {
  flex: none;
  width: auto;
  max-width: none;
  height: var(--qrm-topbar-logo);
  object-fit: contain;
}

/* Logo alignment: the badge keeps to the opposite side. */
.qrm-topbar--align-center .qrm-topbar__inner { position: relative; justify-content: center; }
.qrm-topbar--align-center .qrm-topbar__badge {
  position: absolute;
  top: 50%;
  right: var(--qrm-page-padding);
  transform: translateY(-50%);
}
.qrm-topbar--align-right .qrm-topbar__inner,
.qrm-topbar--align-right .qrm-topbar__brand { flex-direction: row-reverse; }
.qrm-topbar--align-right .qrm-topbar__text { align-items: flex-end; text-align: right; }

.qrm-topbar__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.qrm-topbar__label {
  color: var(--qrm-text);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: var(--qrm-eyebrow-space);
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qrm-topbar__note {
  color: var(--qrm-muted);
  font-size: 0.64rem;
  letter-spacing: 0.04em;
}

.qrm-topbar__badge {
  flex: none;
  padding: 0.45rem 0.7rem;
  color: var(--qrm-accent);
  border: 1px solid rgba(var(--qrm-accent-rgb), 0.4);
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ------------------------------------------- menu tools: search + rail --- */

.qrm-tools {
  position: sticky;
  z-index: 20;
  top: 0;
  display: grid;
  gap: 0.6rem;
  padding: 0.75rem var(--qrm-page-padding);
  background: rgba(var(--qrm-background-rgb), 0.94);
  backdrop-filter: blur(14px);
}

.has-topbar .qrm-tools { top: 3.75rem; }

/* -------------------------------------------------------- location tabs --- */

/*
 * One button per FoodPress location (Drinks, Food, Wines …), each opening a
 * panel with only that location's menu (includes/locations.php). Colours
 * follow the template unless "Use my own colours" is on. Without the script
 * every panel stays visible, so the menu is never hidden.
 */
.qrm-locnav {
  --_bg: var(--qrm-accent);
  --_text: var(--qrm-btn-text);
  --_active-text: var(--qrm-btn-text);
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 0.6rem;
}

.qrm-locnav.has-custom-colors {
  --_bg: var(--qrm-loc-bg);
  --_text: var(--qrm-loc-text);
  --_active-text: var(--qrm-loc-active-text);
}

.qrm-locnav__item {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0.75rem 0.5rem 0.7rem;
  color: var(--_text) !important;
  background: var(--_bg);
  border-radius: var(--qrm-loc-radius);
  font-family: var(--qrm-font-body);
  font-size: var(--qrm-loc-label);
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  text-decoration: none !important;
  transition: filter 220ms ease, box-shadow 220ms ease;
  -webkit-tap-highlight-color: transparent;
}

/* The selected button keeps its colour, brightens and gains a shadow, but
   never moves: a lifted tile put its label out of line with the others. */
.qrm-locnav__item.is-active {
  color: var(--_active-text) !important;
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.6);
  filter: brightness(1.12);
}

.qrm-locnav__item:focus-visible { outline: 2px solid var(--qrm-text); outline-offset: 3px; }

.qrm-locnav__label { overflow-wrap: anywhere; }

.qrm-locnav__icon {
  display: grid;
  place-items: center;
  width: var(--qrm-loc-icon);
  height: var(--qrm-loc-icon);
}

.qrm-site .qrm-locnav__icon :is(img, svg) {
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: contain;
}

/* Pills: icon beside the name, one scrolling row. */
.qrm-locnav--pills {
  grid-auto-columns: max-content;
  overflow-x: auto;
  scrollbar-width: none;
}

.qrm-locnav--pills::-webkit-scrollbar { display: none; }

.qrm-locnav--pills .qrm-locnav__item {
  flex-direction: row;
  padding: 0.55rem 1rem;
  border-radius: max(var(--qrm-loc-radius), 999px);
}

.qrm-locnav--pills .qrm-locnav__icon,
.qrm-locnav--tabs .qrm-locnav__icon {
  width: calc(var(--qrm-loc-icon) * 0.55);
  height: calc(var(--qrm-loc-icon) * 0.55);
}


/* Tabs: names with an underline, no fill. */
.qrm-locnav--tabs {
  gap: 0;
  border-bottom: 1px solid rgba(var(--qrm-text-rgb), 0.15);
}

.qrm-locnav--tabs .qrm-locnav__item {
  flex-direction: row;
  padding: 0.8rem 0.5rem;
  color: var(--qrm-muted) !important;
  background: none;
  border-radius: 0;
  box-shadow: inset 0 -2px 0 transparent;
}

.qrm-locnav--tabs .qrm-locnav__item.is-active {
  color: var(--qrm-text) !important;
  background: none;
  box-shadow: inset 0 -3px 0 var(--_bg);
}

.qrm-loc-ready .qrm-locpanel:not(.is-active) { display: none; }

/* While searching, every location is searched and shown. */
.qrm-loc-searching .qrm-locpanel { display: block !important; }

.qrm-locpanel.is-entering { animation: qrm-loc-in 320ms cubic-bezier(0.2, 0.8, 0.2, 1); }

@keyframes qrm-loc-in {
  from { opacity: 0; transform: translateY(0.75rem); }
}

@media (prefers-reduced-motion: reduce) {
  .qrm-locnav__item { transition: none; }
  .qrm-locpanel.is-entering { animation: none; }
}

.qrm-search {
  position: relative;
  display: block;
}

.qrm-search__icon {
  position: absolute;
  top: 50%;
  left: 0.85rem;
  transform: translateY(-50%);
  color: var(--qrm-accent);
  font-size: 1.3rem;
  line-height: 1;
  pointer-events: none;
}

.qrm-search__input {
  width: 100%;
  min-height: 2.9rem;
  padding: 0.65rem 2.6rem;
  color: var(--qrm-text);
  background: var(--qrm-surface);
  border: 1px solid var(--qrm-border);
  border-radius: 999px;
  outline: none;
  font-family: var(--qrm-font-body);
  font-size: 0.85rem;
  appearance: none;
}

.qrm-search__input::-webkit-search-cancel-button { display: none; }

.qrm-search__input::placeholder {
  color: var(--qrm-muted);
  opacity: 1;
}

.qrm-search__input:focus {
  border-color: var(--qrm-accent);
  box-shadow: 0 0 0 3px rgba(var(--qrm-accent-rgb), 0.16);
}

.qrm-search__clear {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  transform: translateY(-50%);
  color: var(--qrm-muted);
  background: transparent;
  border: 0;
  border-radius: 50%;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.qrm-search__clear:hover { color: var(--qrm-text); }
.qrm-search__clear[hidden] { display: none; }

.qrm-tools__count {
  margin: 0;
  color: var(--qrm-muted);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.qrm-tools__count[hidden] { display: none; }

.qrm-catnav {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.qrm-catnav::-webkit-scrollbar { display: none; }
.qrm-catnav[hidden] { display: none; }

/* The script hides filtered-out items and empty categories with this class. */
.qrm-menu .qrm-is-filtered { display: none !important; }

.qrm-menu__empty {
  margin: 1.25rem 0 0;
  padding: 2.4rem 1.25rem;
  color: var(--qrm-muted);
  text-align: center;
  border: 1px dashed rgba(var(--qrm-accent-rgb), 0.35);
  border-radius: var(--qrm-item-radius);
  font-size: 0.85rem;
  line-height: 1.6;
}

.qrm-menu__empty[hidden] { display: none; }

.qrm-catnav__item {
  flex: none;
  padding: 0.55rem 0.95rem;
  color: var(--qrm-muted);
  background: transparent;
  border: 1px solid rgba(var(--qrm-accent-rgb), 0.28);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease;
}

.qrm-catnav__item.is-active {
  color: var(--qrm-btn-text);
  background: var(--qrm-accent);
  border-color: var(--qrm-accent);
}

/* ---------------------------------------------------------- note card --- */

.qrm-note {
  padding: 1.35rem;
  text-align: center;
  border: 1px dashed rgba(var(--qrm-accent-rgb), 0.35);
  border-radius: var(--qrm-radius);
}

.qrm-note__title {
  margin: 0 0 0.5rem;
  color: var(--qrm-text);
  font-family: var(--qrm-font-heading);
  font-size: calc(var(--qrm-item-title) * var(--qrm-heading-scale) * 1.05);
  font-weight: 400;
  line-height: 1.2;
}

.qrm-note__text {
  margin: 0 auto;
  max-width: 30rem;
  color: var(--qrm-muted);
  font-size: 0.85rem;
  line-height: 1.6;
}

/* ------------------------------------------------------- brand footer --- */

.qrm-brandfoot {
  margin-top: calc(var(--qrm-gap) + 1.5rem);
  padding: 2.6rem var(--qrm-page-padding);
  color: var(--qrm-btn-text);
  background: var(--qrm-accent);
}

.qrm-brandfoot__inner {
  width: min(100%, var(--qrm-container));
  margin-inline: auto;
}

.qrm-brandfoot__logo {
  width: min(100%, calc(var(--qrm-logo-width) * 0.8));
  margin-bottom: 1.5rem;
  object-fit: contain;
}

.qrm-brandfoot__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1.5rem;
}

.qrm-brandfoot__label {
  display: block;
  margin-bottom: 0.4rem;
  opacity: 0.62;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.qrm-brandfoot p {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.6;
}

/* ---------------------------------------------------------------- body --- */

.qrm-site__body {
  display: grid;
  /* minmax(0, …): a long unbreakable line inside a block must never widen
     the column past the screen (1.25.0's one-line descriptions did). */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--qrm-gap);
  width: min(100%, calc(var(--qrm-container) + var(--qrm-page-padding) * 2));
  margin-inline: auto;
  padding: var(--qrm-gap) var(--qrm-page-padding) 0;
}

.qrm-card {
  position: relative;
  padding: var(--qrm-card-padding) clamp(1rem, calc(var(--qrm-card-padding) * 0.8), 6rem);
  background-color: rgba(var(--qrm-surface-rgb), calc(0.96 * var(--qrm-surface-a, 1)));
  border: 0 solid var(--qrm-border);
  border-radius: var(--qrm-radius);
}

.has-card-border .qrm-card {
  border-width: var(--qrm-border-width);
}

/* The template's curved "ribbon" ornament at the top and bottom of the card. */
.has-ornaments .qrm-card {
  background-image:
    radial-gradient(ellipse at 50% 0, transparent 35%, rgba(var(--qrm-background-rgb), 0.5) 36%, transparent 37%),
    radial-gradient(ellipse at 50% 100%, transparent 35%, rgba(var(--qrm-background-rgb), 0.5) 36%, transparent 37%);
  background-repeat: no-repeat;
  background-size: 100% 7.5rem;
  background-position: top center, bottom center;
}

.qrm-card--intro {
  text-align: center;
}

.qrm-card__title {
  margin: 0.55rem 0 0.35rem;
  color: var(--qrm-text);
  font-family: var(--qrm-font-heading);
  font-size: calc(var(--qrm-menu-title) * var(--qrm-heading-scale));
  font-weight: 400;
  line-height: 1.15;
  text-transform: var(--qrm-title-transform);
  text-wrap: balance;
}

.qrm-card__text {
  margin: 0 auto;
  max-width: 34rem;
  color: var(--qrm-text);
  line-height: 1.65;
}

.qrm-card__text a { color: var(--qrm-accent); text-decoration: none; }

.qrm-card__meta {
  margin: 0.6rem 0 0;
  color: var(--qrm-muted);
  font-size: 0.9rem;
}

.qrm-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  margin: 0;
  color: var(--qrm-accent);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: var(--qrm-eyebrow-space);
  text-transform: uppercase;
}

.qrm-diamond {
  width: 0.4rem;
  height: 0.4rem;
  background: var(--qrm-accent);
  transform: rotate(45deg);
}

/* --------------------------------------------------------------- links --- */

.qrm-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-top: 1.6rem;
}

.qrm-links__item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.72rem 1.1rem;
  border: 1px solid var(--qrm-accent);
  border-radius: var(--qrm-item-radius);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.qrm-links--solid .qrm-links__item {
  color: var(--qrm-btn-text);
  background: var(--qrm-accent);
}

.qrm-links--solid .qrm-links__item:hover,
.qrm-links--solid .qrm-links__item:focus-visible {
  color: var(--qrm-accent);
  background: transparent;
}

.qrm-links--outline .qrm-links__item {
  color: var(--qrm-accent);
  background: transparent;
}

.qrm-links--outline .qrm-links__item:hover,
.qrm-links--outline .qrm-links__item:focus-visible {
  color: var(--qrm-btn-text);
  background: var(--qrm-accent);
}

.qrm-links--ghost .qrm-links__item {
  color: var(--qrm-accent);
  background: rgba(var(--qrm-accent-rgb), 0.1);
  border-color: transparent;
}

.qrm-links--ghost .qrm-links__item:hover,
.qrm-links--ghost .qrm-links__item:focus-visible {
  background: rgba(var(--qrm-accent-rgb), 0.22);
}

.qrm-links__icon { font-size: 0.95em; line-height: 1; }

/* ------------------------------------------------------------ schedule --- */

.qrm-schedule { margin: 0.9rem 0 0; }

.qrm-schedule > div {
  display: grid;
  grid-template-columns: minmax(6rem, 1fr) auto;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(var(--qrm-text-rgb), 0.16);
}

.qrm-schedule > div:last-child { border-bottom: 0; }
.qrm-schedule > div.is-today { color: var(--qrm-accent); font-weight: 600; }
.qrm-schedule dt { font-weight: 600; }
.qrm-schedule dd { margin: 0; text-align: right; }

/* --------------------------------------------------- FoodPress overrides --- */

/* Item structure per layout (split, hero, grid, list) lives in items.css. */

.qrm-menu .foodpress_menu,
.qrm-menu .fp_container {
  width: 100%;
  color: var(--qrm-text) !important;
  background: transparent !important;
  font-family: var(--qrm-font-body) !important;
}

.qrm-menu .primary_type,
.qrm-menu .menu_type_title,
.qrm-menu h2.fp_cat_title {
  position: relative;
  display: block;
  margin: 0.75rem 0;
  padding: 0.95rem 2.6rem 0.95rem 0;
  cursor: pointer;
  color: var(--qrm-accent) !important;
  background: transparent !important;
  font-family: var(--qrm-font-heading) !important;
  /* Category size setting, else the section heading size. */
  font-size: calc(var(--qrm-category-title, var(--qrm-menu-title)) * var(--qrm-heading-scale)) !important;
  font-weight: 400 !important;
  line-height: 1.18;
  letter-spacing: 0.02em;
  text-transform: var(--qrm-title-transform);
}

.qrm-site--divider-line .qrm-menu .primary_type,
.qrm-site--divider-line .qrm-menu .menu_type_title {
  border-top: 1px solid rgba(var(--qrm-accent-rgb), 0.45);
  border-bottom: 1px solid rgba(var(--qrm-accent-rgb), 0.45);
}

.qrm-site--divider-dotted .qrm-menu .primary_type,
.qrm-site--divider-dotted .qrm-menu .menu_type_title {
  border-top: 1px dashed rgba(var(--qrm-accent-rgb), 0.5);
  border-bottom: 1px dashed rgba(var(--qrm-accent-rgb), 0.5);
}

.qrm-site--divider-ornament .qrm-menu .primary_type,
.qrm-site--divider-ornament .qrm-menu .menu_type_title {
  border-bottom: 1px solid rgba(var(--qrm-accent-rgb), 0.35);
}

/* The collapse chevron FoodPress injects into each category heading. */
.qrm-menu .fp_menu_expand {
  position: absolute;
  top: 40%;
  right: 0.15rem;
  width: 0.38em;
  height: 0.38em;
  margin: 0 !important;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  /* FoodPress draws its own arrow sprite at 40% opacity; drop it. */
  background: none !important;
  /* A quiet hint, not a second heading. */
  opacity: 0.3 !important;
  /* Expanded: chevron points up. */
  transform: translateY(-25%) rotate(-135deg);
  transition: transform 200ms ease, opacity 200ms ease;
}

/* Collapsed: chevron points down. */
.qrm-menu .primary_type.collapsed .fp_menu_expand {
  transform: translateY(-70%) rotate(45deg);
}

/*
 * The category description FoodPress prints inside the heading. It used to
 * inherit the heading's font, size and tight letter spacing. One quiet line
 * while the category is folded (an ellipsis if longer); the whole text once
 * it is open.
 */
.qrm-menu .fp_term_description {
  margin: 0.2rem 0 0 !important;
  padding: 0 !important;
  overflow: hidden;
  color: rgba(var(--qrm-text-rgb), 0.5) !important;
  font-family: var(--qrm-font-body) !important;
  font-size: 0.9rem !important;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.45;
  text-transform: none;
  /* A line clamp, not a no-wrap line — that makes the whole line the
     block's minimum width, which pushed the menu off the screen. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

/* Open (or never folding): the whole description, wrapped. Every part of
   the clamp is undone — WebKit can keep a clamp it no longer applies. */
.qrm-menu .primary_type:not(.collapsed) .fp_term_description {
  display: block !important;
  max-height: none;
  overflow: visible;
  -webkit-line-clamp: none;
  line-clamp: none;
  text-overflow: clip;
  white-space: normal;
}

/* The name's last word and the count after it, kept on one line. */
.qrm-menu .qrm-name-end { white-space: nowrap; }

/* The dish count after a category name (item-styles.php). */
.qrm-menu .qrm-count {
  display: inline-block;
  margin-left: 0.7rem;
  padding: 0.2rem 0.5rem;
  color: rgba(var(--qrm-text-rgb), 0.5);
  background: rgba(var(--qrm-text-rgb), 0.06);
  border-radius: 999px;
  font-family: var(--qrm-font-body);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1.4;
  text-transform: none;
  vertical-align: 0.36em;
  transition: color 200ms ease, background-color 200ms ease;
}

/*
 * An open category, when categories fold: just a touch more presence — the
 * count takes the accent, the chevron and description firm up a little.
 * FoodPress toggles .collapsed on the heading.
 */
.qrm-menu .primary_type.collapsable:not(.collapsed) .qrm-count {
  color: var(--qrm-accent);
  background: rgba(var(--qrm-accent-rgb), 0.13);
}

.qrm-menu .primary_type.collapsable:not(.collapsed) .fp_menu_expand {
  opacity: 0.55 !important;
}

.qrm-menu .primary_type.collapsable:not(.collapsed) .fp_term_description {
  color: rgba(var(--qrm-text-rgb), 0.62) !important;
}

/* Subcategories sit right after their parent's dishes (subcategories.php)
   and fold away with it. FoodPress toggles .collapsed on the heading
   as it slides the parent's container. */
.qrm-menu .primary_type.collapsed + .fp_container + .qrm-subcats { display: none; }

.qrm-menu .qrm-subcats {
  margin-left: 0.55rem;
  padding-left: 0.85rem;
  border-left: 1px solid rgba(var(--qrm-accent-rgb), 0.22);
}

.qrm-site .qrm-menu .qrm-subcats .primary_type {
  margin-top: 0.4rem;
  border-top: 0 !important;
  font-size: calc(var(--qrm-category-title, var(--qrm-menu-title)) * var(--qrm-heading-scale) * 0.72) !important;
}

/* Neutralise FoodPress's own tinted category background. */
.qrm-menu .tint_menu { background-color: transparent !important; }

.qrm-menu .fp_container { padding: 0.4rem 0 1.2rem; }

.qrm-menu .mt_description,
.qrm-menu .fp_cat_des {
  color: var(--qrm-muted) !important;
  font-size: 0.92rem !important;
  font-style: italic;
}

.qrm-menu .food_items_container { margin: 0 -0.45rem; }

.qrm-menu .fp_box {
  padding: 0.45rem !important;
  color: var(--qrm-text) !important;
  background: transparent !important;
}

.qrm-menu .fp_inner_box {
  height: 100%;
  padding: 0 !important;
  overflow: hidden;
  color: var(--qrm-text) !important;
  background: rgba(var(--qrm-background-rgb), 0.45) !important;
  border: 1px solid rgba(var(--qrm-text-rgb), 0.18) !important;
  border-radius: var(--qrm-item-radius) !important;
  box-shadow: var(--qrm-item-shadow) !important;
}

.qrm-menu .fp_thumbnail,
.qrm-menu .new_fp_thumbnail {
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  overflow: hidden;
  background: rgba(var(--qrm-background-rgb), 0.9);
}

.qrm-menu .fp_thumbnail img,
.qrm-menu .new_fp_thumb,
.qrm-menu .new_fp_thumbnail img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: var(--qrm-image-ratio);
  object-fit: var(--qrm-object-fit);
}

.qrm-site--images-hidden .qrm-menu .fp_thumbnail,
.qrm-site--images-hidden .qrm-menu .new_fp_thumbnail {
  display: none !important;
}

.qrm-menu .menu_info {
  position: relative;
  padding: 1.1rem !important;
  color: var(--qrm-text) !important;
  background: transparent !important;
}

/*
 * Item title and price.
 *
 * FoodPress puts the price in one of two places depending on the layout —
 * inside the <h3> after the title (style 1 at full width), or as a sibling
 * before the <h3> (style 1 in columns, and style 2) — and ships competing
 * float rules per style in a stylesheet that loads after this one. Laying the
 * text block out as a grid settles it: grid items ignore float entirely, so
 * the title always sits left and the price always sits right regardless of
 * DOM order or which FoodPress float happens to win.
 */

.qrm-menu .menu_info,
.qrm-menu .fp_box.style_1 .fp_inner_box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 0.9rem;
}

.qrm-menu .menu_info > h3,
.qrm-menu .fp_box.style_1 .fp_inner_box > h3 {
  grid-column: 1;
  grid-row: 1;
}

.qrm-menu .menu_info > .fp_price,
.qrm-menu .menu_info > .fp_price_wrap,
.qrm-menu .fp_box.style_1 .fp_inner_box > .fp_price,
.qrm-menu .fp_box.style_1 .fp_inner_box > .fp_price_wrap {
  grid-column: 2;
  grid-row: 1;
  float: none !important;
  margin: 0 !important;
  text-align: right;
}

/* Everything after the title spans the full width of the text block. */
.qrm-menu .menu_info > *:not(h3):not(.fp_price):not(.fp_price_wrap),
.qrm-menu .fp_box.style_1 .fp_inner_box > *:not(h3):not(.fp_price):not(.fp_price_wrap) {
  grid-column: 1 / -1;
}

.qrm-menu .menu_info h3,
.qrm-menu .fp_inner_box > h3,
.qrm-menu .fp_title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.9rem;
  margin: 0 0 0.3rem !important;
  color: var(--qrm-text) !important;
  font-family: var(--qrm-font-heading) !important;
  font-size: calc(var(--qrm-item-title) * var(--qrm-heading-scale)) !important;
  font-weight: 400 !important;
  line-height: 1.18 !important;
  text-transform: var(--qrm-title-transform) !important;
}

/* FoodPress's own clearfix has no job inside a grid. */
.qrm-menu .fp_inner_box > .clear { display: none; }

.no-readmore .qrm-menu .fp_inline_btn { display: none !important; }

.qrm-menu .fp_price,
.qrm-menu .fp_price_wrap {
  padding: 0 !important;
  color: var(--qrm-accent) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--qrm-font-body) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  white-space: nowrap;
}

/* Price inside the title: hold its own column on the right. */
.qrm-menu h3 > .fp_price,
.qrm-menu .fp_title > .fp_price {
  flex: 0 0 auto;
  margin-left: auto;
}

/* Price before the title: float it so the title wraps beside it. */
.qrm-menu .menu_info > .fp_price,
.qrm-menu .fp_inner_box > .fp_price,
.qrm-menu .menu_info > .fp_price_wrap,
.qrm-menu .fp_inner_box > .fp_price_wrap {
  float: right;
  margin: 0 0 0.25rem 0.9rem;
}

.qrm-menu .fp_inline_btn {
  display: inline-block;
  margin-left: 0.3rem;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.qrm-menu .fp_subheader,
.qrm-menu .menu_description,
.qrm-menu .fp_excerpt {
  color: rgba(var(--qrm-text-rgb), 0.72) !important;
  font-family: var(--qrm-font-body) !important;
  font-size: 0.92rem !important;
  line-height: 1.55 !important;
}

.qrm-menu a,
.qrm-menu .fp_inline_btn {
  color: var(--qrm-accent) !important;
}

.qrm-menu .fp_ingredients,
.qrm-menu .fp_allergens {
  color: var(--qrm-muted) !important;
}

/* ----------------------------------------------------- feature sections --- */

.qrm-promo {
  position: relative;
  display: grid;
  align-items: center;
  /* Width is a share of the column and the section centres itself in what is
     left over, so 80% reads as "80% wide, centred". */
  width: var(--qrm-promo-width);
  margin-inline: auto;
  margin-block: var(--qrm-promo-mt) var(--qrm-promo-mb);
  height: var(--qrm-promo-height);
  min-height: var(--qrm-promo-min-height);
  padding: var(--qrm-promo-padding);
  overflow: hidden;
  color: var(--qrm-promo-text);
  background-color: var(--qrm-promo-bg);
  background-image: var(--qrm-promo-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border: var(--qrm-promo-border-width) solid var(--qrm-promo-border);
  border-radius: var(--qrm-promo-radius);
  isolation: isolate;
}

/*
 * On a phone the address bar makes 100vh taller than the screen, so a
 * viewport-height section gets clipped. dvh tracks the real height.
 */
@supports (height: 1dvh) {
  .qrm-promo {
    height: var(--qrm-promo-height-dvh);
    min-height: var(--qrm-promo-min-height-dvh);
  }
}

/* Bleeds past the page padding to the edges of the column, ignoring width. */
.qrm-promo.is-bleed {
  width: auto;
  margin-inline: calc(var(--qrm-page-padding) * -1);
  border-inline: 0;
  border-radius: 0;
}

.qrm-promo__video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/*
 * Autoplay refused — Low Power Mode, a data saver, an old browser. Dropping
 * the element uncovers the section's background image, which is the same
 * still the poster was showing but at full quality.
 */
.qrm-promo.is-video-blocked .qrm-promo__video {
  display: none;
}

/* --------------------------------------------------------- play button --- */

/*
 * Hidden until the script confirms autoplay was refused. A tap is a user
 * gesture, which is the one thing Low Power Mode will accept.
 */
.qrm-promo__play {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: none;
  place-items: center;
  width: 4.25rem;
  height: 4.25rem;
  padding: 0;
  transform: translate(-50%, -50%);
  color: var(--qrm-btn-text);
  background: var(--qrm-accent);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: transform 180ms ease, background-color 180ms ease;
}

.qrm-promo.is-video-blocked .qrm-promo__play {
  display: grid;
}

/* With copy in the section, sit out of the way rather than over the text. */
.qrm-promo.has-copy .qrm-promo__play {
  top: auto;
  left: auto;
  right: 1rem;
  bottom: 1rem;
  width: 3.25rem;
  height: 3.25rem;
  transform: none;
}

.qrm-promo__play svg {
  width: 45%;
  height: 45%;
  /* Optical centring: the triangle's mass sits left of its bounding box. */
  margin-left: 8%;
  fill: currentColor;
}

.qrm-promo__play:hover {
  transform: translate(-50%, -50%) scale(1.06);
}

.qrm-promo.has-copy .qrm-promo__play:hover {
  transform: scale(1.06);
}

.qrm-promo__play:focus-visible {
  outline: 3px solid var(--qrm-btn-text);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .qrm-promo__play,
  .qrm-promo__play:hover {
    transition: none;
    transform: translate(-50%, -50%);
  }

  .qrm-promo.has-copy .qrm-promo__play,
  .qrm-promo.has-copy .qrm-promo__play:hover {
    transform: none;
  }
}

.qrm-promo__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, var(--qrm-promo-overlay));
  pointer-events: none;
}

.qrm-promo__inner {
  position: relative;
  width: min(100%, 34rem);
}

.qrm-promo--align-center { text-align: center; }
.qrm-promo--align-center .qrm-promo__inner { margin-inline: auto; }
.qrm-promo--align-right { text-align: right; }
.qrm-promo--align-right .qrm-promo__inner { margin-inline: auto 0; }
.qrm-promo--align-left .qrm-promo__inner { margin-inline: 0 auto; }

.qrm-promo__eyebrow {
  margin: 0 0 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: var(--qrm-eyebrow-space);
  text-transform: uppercase;
  opacity: 0.85;
}

.qrm-promo__title {
  margin: 0;
  color: inherit;
  font-family: var(--qrm-font-heading);
  font-size: calc(var(--qrm-menu-title) * var(--qrm-heading-scale));
  font-weight: 400;
  line-height: 1.12;
  text-transform: var(--qrm-title-transform);
  text-wrap: balance;
}

.qrm-promo__text {
  margin: 0.85rem 0 0;
  font-size: 0.92rem;
  line-height: 1.65;
}

.qrm-promo__text a { color: inherit; }

.qrm-promo__button {
  display: inline-block;
  margin-top: 1.4rem;
  padding: 0.78rem 1.4rem;
  color: var(--qrm-btn-text);
  background: var(--qrm-accent);
  border: 1px solid var(--qrm-accent);
  border-radius: var(--qrm-item-radius);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 160ms ease, background-color 160ms ease;
}

.qrm-promo__button:hover,
.qrm-promo__button:focus-visible {
  color: var(--qrm-accent);
  background: transparent;
}

/* --------------------------------------------- section scroll animation --- */

/*
 * Enter and exit are one pair of states, not two keyframe sequences: the
 * script adds .is-inview when the section scrolls into view and removes it
 * again when it leaves, so the same transition plays forward and backward.
 *
 * The resting state is only applied once the script has marked the section
 * ready — without JavaScript nothing is ever hidden.
 */

.qrm-promo.qrm-anim-ready {
  /* Intensity setting: 1 = default distances, 2 = twice as far. */
  --qrm-i: var(--qrm-promo-intensity, 1);
  transition:
    opacity var(--qrm-promo-speed) cubic-bezier(0.22, 1, 0.36, 1),
    transform var(--qrm-promo-speed) cubic-bezier(0.22, 1, 0.36, 1),
    filter var(--qrm-promo-speed) ease;
  will-change: opacity, transform, filter;
}

.qrm-promo.qrm-anim-ready[data-qrm-animate] { opacity: 0; }

.qrm-promo.qrm-anim-ready[data-qrm-animate="fade-up"]     { transform: translateY(calc(4rem * var(--qrm-i))); }
.qrm-promo.qrm-anim-ready[data-qrm-animate="fade-down"]   { transform: translateY(calc(-4rem * var(--qrm-i))); }
.qrm-promo.qrm-anim-ready[data-qrm-animate="zoom"]        { transform: scale(calc(1 - 0.16 * var(--qrm-i))); }
.qrm-promo.qrm-anim-ready[data-qrm-animate="slide-left"]  { transform: translateX(calc(6rem * var(--qrm-i))); }
.qrm-promo.qrm-anim-ready[data-qrm-animate="slide-right"] { transform: translateX(calc(-6rem * var(--qrm-i))); }
.qrm-promo.qrm-anim-ready[data-qrm-animate="blur"]        { transform: scale(calc(1 + 0.05 * var(--qrm-i))); filter: blur(calc(18px * var(--qrm-i))); }
/* Rise: slides up, grows into place and comes into focus at once. */
.qrm-promo.qrm-anim-ready[data-qrm-animate="rise"] {
  transform: translateY(calc(4.5rem * var(--qrm-i))) scale(calc(1 - 0.12 * var(--qrm-i)));
  filter: blur(calc(14px * var(--qrm-i)));
}

.qrm-promo.qrm-anim-ready.is-inview {
  opacity: 1;
  transform: none;
  filter: none;
}

/* A looping background video and scroll motion are both decoration. */
@media (prefers-reduced-motion: reduce) {
  .qrm-promo__video { display: none; }

  .qrm-promo.qrm-anim-ready,
  .qrm-promo.qrm-anim-ready[data-qrm-animate] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* -------------------------------------------------------- dishes reveal --- */

/*
 * Dishes come into view as you scroll (item_reveal, root .has-item-reveal) —
 * and so do folded category headings, which is what a menu that starts
 * collapsed is made of. An open heading stays put (its dishes move); the
 * class flips while the heading is on screen, at full progress, so opening
 * or closing it never jumps.
 *
 * Where the browser has scroll-driven animations, each dish is scrubbed by
 * its own position: it grows from 86%, rises 38px and comes out of a blur as
 * it enters, and plays back in reverse when scrolled away. Linear on
 * purpose — the scroll is the easing. It finishes once the dish is fully on
 * screen (entry 100%), not later: the last dishes at the bottom of a page
 * can never scroll further, and would stay half faded. `scale`/`translate`,
 * not `transform`, so no item style's own transform is overridden.
 *
 * Elsewhere (Firefox, older Safari) the script slides them in instead:
 * .qrm-reveal-ready hides each dish, .is-in brings it in, 70ms apart. The
 * transition lives on .is-in only — on the plain box it made dishes already
 * on screen fade out when the class was added.
 */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .has-item-reveal .qrm-menu :is(.fp_box, .primary_type.collapsed) {
      transform-origin: 50% 60%;
      animation: qrm-item-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }
  }
}

@keyframes qrm-item-in {
  from {
    opacity: 0;
    filter: blur(10px);
    scale: 0.86;
    translate: 0 38px;
  }

  to {
    opacity: 1;
    filter: none;
    scale: 1;
    translate: none;
  }
}

.qrm-reveal-ready .qrm-menu :is(.fp_box, .primary_type.collapsed).is-in {
  transition:
    opacity 380ms ease var(--qrm-reveal-delay, 0ms),
    translate 460ms cubic-bezier(0.2, 0.7, 0.25, 1) var(--qrm-reveal-delay, 0ms);
}

.qrm-reveal-ready .qrm-menu :is(.fp_box, .primary_type.collapsed):not(.is-in) {
  opacity: 0;
  translate: 0 16px;
}

/* ------------------------------------------------------ content blocks --- */

/*
 * Videos, images or HTML placed inside a category (blocks.php). They sit in
 * the category's item list, so they take the whole row in every item style,
 * fold with the category and are hidden while someone searches.
 */
.qrm-menu .qrm-block {
  position: relative;
  grid-column: 1 / -1;
  float: none;
  clear: both;
  width: 100%;
  margin: 0.2rem 0;
  overflow: hidden;
  border-radius: max(0.75rem, var(--qrm-item-radius, 0px));
}

.qrm-site .qrm-menu .qrm-block :is(.qrm-block__video, .qrm-block__image) {
  display: block;
  width: 100%;
  height: auto;
  max-height: 75vh;
  object-fit: cover;
}

/* "Edge to edge": out to the menu card's edges. The script measures how far
   the item list sits from them (--qrm-bleed-l/-r; card padding differs per
   template and screen); without it the block simply stays in the list. */
.qrm-menu .qrm-block--bleed {
  width: auto;
  margin-left: calc(-1 * var(--qrm-bleed-l, 0px));
  margin-right: calc(-1 * var(--qrm-bleed-r, 0px));
  border-radius: 0;
}

.qrm-menu .qrm-block__link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.qrm-site.qrm-searching .qrm-menu .qrm-block { display: none; }

/* ------------------------------------------------------- combo upgrade --- */

/*
 * A dish that can become a combo (combo.php) gets a strip under its card: a
 * drink on its right end, the title and text on the left, the prices
 * between. The strip is a sibling of the card (.fp_inner_box) inside the
 * dish's .fp_box, so it looks the same in every item style. The shine is
 * laid over the whole box, card and strip.
 *
 * The drink's size, place and tilt come from the Menu tab as variables
 * (--qrm-drink-w/-h/-top/-right/-tilt, --qrm-drink-room = the space the
 * text leaves it).
 *
 * Motion exists only once the script adds .qrm-combo-ready (never without
 * it, never for reduced motion). States the script moves a box through:
 *   (none)        hidden — the strip folded into a circle behind the drink
 *   .is-live      in: the strip opens out of the drink, the drink makes its
 *                 entrance, the text and prices follow, the old price is
 *                 struck, the shine crosses the dish (and returns)
 *   .is-leaving   out, in reverse, ending exactly on the hidden state —
 *                 then, after a pause, .is-live again ("Replay every")
 * Card animation "shine" keeps the strip still and only adds the shine; the
 * drink animates on its own switch.
 */

/* The card (.fp_inner_box) is height: 100% of the box in items.css, which
   left no room for the strip: it overflowed onto the next dish. A combo box
   stacks card and strip instead, the card filling what is left. */
.qrm-site .qrm-menu .fp_box.has-combo {
  position: relative;
  display: flex !important;
  flex-direction: column;
}

.qrm-site .qrm-menu .fp_box.has-combo .fp_inner_box {
  z-index: 1;
  flex: 1 1 auto;
  height: auto !important;
}

:is(.qrm-menu, .qrm-combo-pop) .qrm-combo {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.75rem;
  align-items: center;
  justify-content: var(--qrm-combo-justify, flex-start);
  width: var(--qrm-combo-width, 100%);
  min-height: 3.2rem;
  margin: 0.4rem 0 0;
  margin-inline: var(--qrm-combo-place, 0 auto);
  padding: var(--qrm-combo-pad, 10px) var(--qrm-drink-room, 4.5rem) var(--qrm-combo-pad, 10px) calc(var(--qrm-combo-pad, 10px) + 0.35rem);
  box-sizing: border-box;
  color: var(--qrm-combo-text-color, #fff);
  font-family: var(--qrm-combo-text-font, var(--qrm-font-body));
  line-height: 1.25;
  text-align: var(--qrm-combo-align, left);
  cursor: pointer;
}

/* The red shape is its own layer, so it can morph (clip-path) without
   clipping the drink that stands out of it. Open, the clip reaches past the
   edges so the shadow shows; closed, it is a circle at the drink's end. */
:is(.qrm-menu, .qrm-combo-pop) .qrm-combo__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 48%),
    var(--qrm-combo-color, #e41e2b);
  border-radius: var(--qrm-combo-radius, 13px);
  box-shadow: 0 12px 24px -14px rgba(0, 0, 0, 0.55);
  clip-path: inset(-30px round var(--qrm-combo-radius, 13px));
  transition: clip-path 600ms cubic-bezier(0.25, 1, 0.35, 1), opacity 250ms ease;
}

:is(.qrm-menu, .qrm-combo-pop) :is(.qrm-combo__copy, .qrm-combo__price) {
  position: relative;
  z-index: 1;
}

:is(.qrm-site .qrm-menu, .qrm-combo-pop) .qrm-combo__bottle {
  position: absolute;
  top: var(--qrm-drink-top, -28px);
  right: var(--qrm-drink-right, 14px);
  z-index: 3;
  width: var(--qrm-drink-w, auto);
  max-width: none;
  height: var(--qrm-drink-h, 76px);
  object-fit: contain;
  filter: drop-shadow(0 7px 7px rgba(0, 0, 0, 0.35));
  transform: rotate(var(--qrm-drink-tilt, -7deg));
  transform-origin: 50% 100%;
  pointer-events: none;
  transition: transform 850ms cubic-bezier(0.2, 1.3, 0.35, 1) 250ms, opacity 300ms ease 250ms;
}

:is(.qrm-menu, .qrm-combo-pop) .qrm-combo__copy {
  display: flex;
  flex: 1 1 8rem;
  flex-direction: column;
  align-items: var(--qrm-combo-items, flex-start);
  min-width: 0;
}

:is(.qrm-menu, .qrm-combo-pop) .qrm-combo__title {
  font-family: var(--qrm-combo-title-font, var(--qrm-font-heading));
  font-size: var(--qrm-combo-title-size, 17px);
  font-weight: 700;
  letter-spacing: 0.005em;
  text-transform: none;
  transition: opacity 400ms ease 450ms, transform 450ms ease 450ms;
}

:is(.qrm-menu, .qrm-combo-pop) .qrm-combo__text {
  font-size: var(--qrm-combo-text-size, 12px);
  opacity: 0.9;
  transition: opacity 400ms ease 560ms, transform 450ms ease 560ms;
}

:is(.qrm-menu, .qrm-combo-pop) .qrm-combo__price {
  display: flex;
  flex: 0 0 auto;
  gap: 0.15rem 0.45rem;
  align-items: baseline;
  font-size: var(--qrm-combo-price-size, 16px);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: opacity 400ms ease 680ms, transform 500ms cubic-bezier(0.2, 1.4, 0.4, 1) 680ms;
}

:is(.qrm-menu, .qrm-combo-pop) .qrm-combo__price s {
  position: relative;
  font-size: 0.8em;
  opacity: 0.8;
  text-decoration: none;
}

/* The strike is drawn, so it can be animated. */
:is(.qrm-menu, .qrm-combo-pop) .qrm-combo__price s::after {
  position: absolute;
  top: 52%;
  left: -0.1em;
  right: -0.1em;
  height: 1.5px;
  background: currentColor;
  content: "";
  transform: rotate(-8deg);
  transform-origin: 0 50%;
  transition: transform 350ms ease 900ms;
}

:is(.qrm-menu, .qrm-combo-pop) .qrm-combo__price b {
  padding: 0.12rem 0.55rem;
  color: var(--qrm-combo-color, #e41e2b);
  background: var(--qrm-combo-text-color, #fff);
  border-radius: 999px;
  font-size: 1em;
  font-weight: 800;
}

:is(.qrm-menu, .qrm-combo-pop) .qrm-combo__price small {
  font-size: 0.68em;
  font-weight: 600;
}

:is(.qrm-menu, .qrm-combo-pop) .qrm-combo-shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  border-radius: var(--qrm-combo-radius, 13px);
  pointer-events: none;
}

:is(.qrm-menu, .qrm-combo-pop) .qrm-combo-shine::before {
  position: absolute;
  top: -25%;
  bottom: -25%;
  left: 0;
  width: 38%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0));
  content: "";
  opacity: 0;
  transform: translateX(-170%) skewX(-18deg);
}

/* Narrow tiles (grid styles): a smaller drink. */
.qrm-site .qrm-menu .qrm-items--grid .qrm-combo__bottle { height: calc(var(--qrm-drink-h, 76px) * 0.8); }

/*
 * The same strip in the item popup (combo.php, under the dish's details),
 * still — plus the campaign's title, information and terms link, which only
 * show here. The drink stands above the strip, so the box makes room.
 */
.qrm-combo-pop {
  position: relative;
  margin: 1rem 0 0;
  padding-top: max(0px, calc(var(--qrm-drink-top, -28px) * -1));
}

body.qrm-popup .fp_menucard_content .qrm-combo-pop { margin: 0.4rem 1.5rem 1.4rem; }

.qrm-combo-pop .qrm-combo { cursor: default; }
.qrm-combo-pop .qrm-combo-shine { display: none; }

.qrm-combo-pop__campaign {
  margin-top: 0.85rem;
  color: var(--qrm-muted, #6b6b6b);
  font-size: 0.82rem;
  line-height: 1.5;
}

.qrm-combo-pop__campaign strong {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--qrm-text, #1c1c1c);
  font-size: 0.9rem;
}

.qrm-combo-pop__campaign p { margin: 0 0 0.4rem; }

.qrm-combo-pop__terms {
  color: inherit;
  font-size: 0.78rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- hidden: before the dish is in view, between loops, and where the
       outro ends. ------------------------------------------------------- */

.qrm-combo-ready.qrm-combo-anim--slide .qrm-menu .fp_box.has-combo:is(:not(.is-live), .is-leaving) .qrm-combo__bg {
  opacity: 0;
  clip-path: inset(0 0 0 calc(100% - var(--qrm-drink-room, 4.5rem)) round 999px);
}

.qrm-combo-ready.qrm-combo-anim--slide .qrm-menu .fp_box.has-combo:is(:not(.is-live), .is-leaving) :is(.qrm-combo__title, .qrm-combo__text) {
  opacity: 0;
  transform: translateY(0.45rem);
}

.qrm-combo-ready.qrm-combo-anim--slide .qrm-menu .fp_box.has-combo:is(:not(.is-live), .is-leaving) .qrm-combo__price {
  opacity: 0;
  transform: scale(0.7);
}

.qrm-combo-ready.qrm-combo-anim--slide .qrm-menu .fp_box.has-combo:is(:not(.is-live), .is-leaving) .qrm-combo__price s::after { transform: rotate(-8deg) scaleX(0); }

/* The drink's entrance presets: where it waits, out of sight. */
.qrm-combo-ready.qrm-drink-anim--on .qrm-menu .fp_box.has-combo:is(:not(.is-live), .is-leaving) .qrm-combo__bottle { opacity: 0; }
.qrm-combo-ready.qrm-drink-anim--on.qrm-drink--slide .qrm-menu .fp_box.has-combo:is(:not(.is-live), .is-leaving) .qrm-combo__bottle { transform: translateX(170%) rotate(26deg); }
.qrm-combo-ready.qrm-drink-anim--on.qrm-drink--drop .qrm-menu .fp_box.has-combo:is(:not(.is-live), .is-leaving) .qrm-combo__bottle { transform: translateY(-150%) rotate(var(--qrm-drink-tilt, -7deg)); }
.qrm-combo-ready.qrm-drink-anim--on.qrm-drink--pop .qrm-menu .fp_box.has-combo:is(:not(.is-live), .is-leaving) .qrm-combo__bottle { transform: scale(0.1) rotate(var(--qrm-drink-tilt, -7deg)); }
.qrm-combo-ready.qrm-drink-anim--on.qrm-drink--flip .qrm-menu .fp_box.has-combo:is(:not(.is-live), .is-leaving) .qrm-combo__bottle { transform: perspective(300px) rotateY(95deg) rotate(var(--qrm-drink-tilt, -7deg)); }
.qrm-combo-ready.qrm-drink-anim--on.qrm-drink--rise .qrm-menu .fp_box.has-combo:is(:not(.is-live), .is-leaving) .qrm-combo__bottle { transform: translateY(55%) scale(0.85) rotate(var(--qrm-drink-tilt, -7deg)); }
.qrm-combo-ready.qrm-drink-anim--on.qrm-drink--fade .qrm-menu .fp_box.has-combo:is(:not(.is-live), .is-leaving) .qrm-combo__bottle { transform: rotate(var(--qrm-drink-tilt, -7deg)); }

/* Each entrance gets its own curve. */
.qrm-drink--drop .qrm-menu .qrm-combo__bottle { transition-timing-function: cubic-bezier(0.3, 1.6, 0.5, 1), ease; }
.qrm-drink--pop .qrm-menu .qrm-combo__bottle { transition-timing-function: cubic-bezier(0.2, 1.8, 0.4, 1), ease; }
.qrm-drink--fade .qrm-menu .qrm-combo__bottle { transition-duration: 600ms, 600ms; }

/* --- out: the reverse order, faster — prices, text, drink, then the strip
       folds back into the circle behind the drink and fades. ------------ */

.qrm-combo-ready .qrm-menu .fp_box.has-combo.is-leaving .qrm-combo__price { transition: opacity 220ms ease, transform 260ms ease-in; }
.qrm-combo-ready .qrm-menu .fp_box.has-combo.is-leaving .qrm-combo__text { transition: opacity 220ms ease 80ms, transform 260ms ease-in 80ms; }
.qrm-combo-ready .qrm-menu .fp_box.has-combo.is-leaving .qrm-combo__title { transition: opacity 220ms ease 150ms, transform 260ms ease-in 150ms; }
.qrm-combo-ready .qrm-menu .fp_box.has-combo.is-leaving .qrm-combo__price s::after { transition: transform 150ms ease; }
.qrm-combo-ready .qrm-menu .fp_box.has-combo.is-leaving .qrm-combo__bottle { transition: transform 450ms cubic-bezier(0.5, 0, 0.75, 0) 250ms, opacity 250ms ease 450ms; }
.qrm-combo-ready .qrm-menu .fp_box.has-combo.is-leaving .qrm-combo__bg { transition: clip-path 450ms cubic-bezier(0.6, 0, 0.4, 1) 300ms, opacity 200ms ease 700ms; }

/* --- the shine and the drink's nod, while in. --- */

@media (prefers-reduced-motion: no-preference) {
  .qrm-combo-ready:not(.qrm-combo-anim--none) .qrm-menu .fp_box.has-combo.is-live:not(.is-leaving) .qrm-combo-shine::before {
    animation: qrm-combo-shine 6.5s ease-in-out 1.15s infinite;
  }

  .qrm-combo-ready.qrm-drink-anim--on .qrm-menu .fp_box.has-combo.is-live:not(.is-leaving) .qrm-combo__bottle {
    animation: qrm-combo-nod 6.5s ease-in-out 1.15s infinite;
  }
}

@keyframes qrm-combo-shine {
  0% { opacity: 1; transform: translateX(-170%) skewX(-18deg); }
  15% { opacity: 1; transform: translateX(330%) skewX(-18deg); }
  16%, 100% { opacity: 0; transform: translateX(330%) skewX(-18deg); }
}

/* Around the chosen tilt. */
@keyframes qrm-combo-nod {
  0%, 22%, 100% { transform: rotate(var(--qrm-drink-tilt, -7deg)); }
  8% { transform: translateY(-3px) rotate(calc(var(--qrm-drink-tilt, -7deg) + 6deg)); }
  15% { transform: rotate(calc(var(--qrm-drink-tilt, -7deg) - 2deg)); }
}

/* --------------------------------------------- FoodPress lightbox --- */

/*
 * FoodPress prints the dish name twice in the popup: in the header (over or
 * under the photo, with or without one) and again as an <h3> in the details
 * block. Drop the second — but only when the header title is there, since a
 * site can switch the header box off in FoodPress's own settings.
 */
.fp_menucard_content:has(.fp_popup_img_title) .fp_details > h3 {
  display: none !important;
}

/*
 * The item popup, restyled when "Restyle the item popup" is on (the body
 * then carries .qrm-popup — FoodPress prints the popup at the end of <body>,
 * outside .qrm-site). A calm card over a blurred page: the whole photo, name
 * and price, the description, then each FoodPress box (ingredients,
 * nutrition, allergens …) as a quiet labelled section with no icons.
 *
 * Markup: .fp_popup.fp_lightbox (the overlay) > .fp_content_in >
 * .fp_content_inin > .fp_lightbox_content > ( a.fplbclose +
 * .fp_pop_inner > .fp_menucard_content > header, details, options ).
 * The inner .fp_menucard_content carries .fp_lightbox too, so the overlay is
 * always named .fp_popup.fp_lightbox here.
 *
 * FoodPress's stylesheet loads after this one and its dynamic CSS sets fonts
 * and colours, hence the !importants. The colour and font variables reach
 * the popup through the inline CSS (frontend.php).
 */

body.qrm-popup .fp_popup.fp_lightbox {
  padding: 0 !important;
  background: rgba(12, 12, 14, 0.5) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  backdrop-filter: blur(8px) saturate(1.1);
}

body.qrm-popup .fp_popup.fp_lightbox .fp_content_inin {
  width: auto;
  padding: 1rem;
}

body.qrm-popup .fp_popup.fp_lightbox .fp_lightbox_content {
  width: 100%;
  max-width: 27rem;
  margin: 0 auto !important;
  transform: translateY(14px) scale(0.985);
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 220ms ease;
}

body.qrm-popup .fp_popup.fp_lightbox.show .fp_lightbox_content {
  transform: none;
}

body.qrm-popup .fp_lightbox_content .fp_pop_inner {
  overflow: hidden;
  color: var(--qrm-text, #1c1c1c);
  background: var(--qrm-surface, #fff) !important;
  border-radius: 1.25rem;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32), 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* A small frosted close button inside the card, drawn as a thin cross. */
body.qrm-popup .fp_lightbox_content .fplbclose {
  top: 0.75rem;
  right: 0.75rem;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  color: transparent !important;
  background: rgba(20, 20, 22, 0.42) !important;
  border-radius: 50%;
  font-size: 0 !important;
  line-height: 0 !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color 150ms ease;
}

body.qrm-popup .fp_lightbox_content .fplbclose::before,
body.qrm-popup .fp_lightbox_content .fplbclose::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.95rem;
  height: 1.5px;
  background: #fff;
  border-radius: 1px;
  content: "";
  transform: translate(-50%, -50%) rotate(45deg);
}

body.qrm-popup .fp_lightbox_content .fplbclose::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

body.qrm-popup .fp_lightbox_content .fplbclose:hover,
body.qrm-popup .fp_lightbox_content .fplbclose:focus-visible {
  background: rgba(20, 20, 22, 0.62) !important;
}

/*
 * The photo, whole. FoodPress caps the header at 400px and lays the title,
 * subtitle and price over it behind a 57% black wash; here the text goes
 * back into normal flow underneath. Transparent packshots sit on the card.
 */
body.qrm-popup .fp_menucard_content .fp_popup_img.fp_header {
  max-height: none !important;
  height: auto !important;
  background: transparent !important;
}

body.qrm-popup .fp_menucard_content .fp_popup_img.fp_header img {
  position: static !important;
  display: block;
  width: 100% !important;
  height: auto !important;
  max-height: min(52vh, 26rem);
  object-fit: contain;
  transform: none !important;
}

/*
 * Name and price on one line, the subtitle under them. FoodPress sizes this
 * box to fill the photo (300px tall, 175px top padding) and animates `all`
 * on it, which made it resize on open.
 */
body.qrm-popup .fp_menucard_content .fp_pop_headerS {
  position: static !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1rem;
  align-items: baseline;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 1.35rem 1.5rem 0.15rem !important;
  color: var(--qrm-text, #1c1c1c) !important;
  background: transparent !important;
  text-align: left;
  transition: none !important;
}

/* FoodPress dims the caption on hover, which only made sense over a photo. */
body.qrm-popup .fp_menucard_content .fp_pop_headerS:hover {
  background: transparent !important;
  opacity: 1 !important;
}

/* Without a photo the close button sits over the name: keep them apart. */
body.qrm-popup .fp_menucard_content .fp_popup_img.noimg .fp_pop_headerS {
  padding-top: 1.5rem !important;
  padding-right: 3.75rem !important;
}

/* FoodPress centres these and pads the title 50px a side when there is no
   photo, and sets the price in italics. */
body.qrm-popup .fp_menucard_content :is(.fp_popup_img_title, .fp_popup_img_subtitle, .fp_popup_img_price) {
  padding: 0 !important;
  font-style: normal !important;
  text-align: left !important;
}

body.qrm-popup .fp_menucard_content .fp_popup_img_title {
  grid-column: 1;
  grid-row: 1;
  color: var(--qrm-text, #1c1c1c) !important;
  font-family: var(--qrm-font-heading, Georgia, serif) !important;
  font-size: calc(var(--qrm-item-title, 20px) * var(--qrm-heading-scale, 1) * 1.15) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
  line-height: 1.2 !important;
  text-transform: none !important;
  text-shadow: none !important;
}

body.qrm-popup .fp_menucard_content .fp_popup_img_price {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  padding: 0 !important;
  color: var(--qrm-text, #1c1c1c) !important;
  background: transparent !important;
  font-family: var(--qrm-font-body, system-ui, sans-serif) !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  white-space: nowrap;
  text-shadow: none !important;
}

body.qrm-popup .fp_menucard_content .fp_popup_img_subtitle {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 0.3rem;
  color: var(--qrm-muted, #6b6b6b) !important;
  font-family: var(--qrm-font-body, system-ui, sans-serif) !important;
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  text-transform: none !important;
  text-shadow: none !important;
}

/* The description. */
body.qrm-popup .fp_menucard_content .fp_details {
  padding: 0.6rem 1.5rem 1.25rem !important;
}

body.qrm-popup .fp_menucard_content .fp_details .menu_description,
body.qrm-popup .fp_menucard_content .fp_details .menu_description p,
body.qrm-popup .fp_menucard_content .fp_details p.menu_additional_details {
  margin: 0;
  padding: 0;
  color: var(--qrm-muted, #6b6b6b) !important;
  font-family: var(--qrm-font-body, system-ui, sans-serif) !important;
  font-size: 0.92rem !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}

body.qrm-popup .fp_menucard_content .fp_details .menu_description p + p {
  margin-top: 0.5rem;
}

body.qrm-popup .fp_menucard_content .fp_details p.menu_additional_details {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(var(--qrm-text-rgb, 0, 0, 0), 0.09);
  font-size: 0.84rem !important;
}

/* Each FoodPress box (ingredients, nutrition, custom fields): a hairline, a
   small caps label and the text — no icons, no dashed rules, no tint. */
body.qrm-popup .fp_menucard_content .fp_popup_option {
  width: auto;
  margin: 0 1.5rem;
  padding: 1rem 0 1.1rem;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid rgba(var(--qrm-text-rgb, 0, 0, 0), 0.09) !important;
}

body.qrm-popup .fp_menucard_content .fp_popup_option:last-child {
  padding-bottom: 1.4rem;
}

body.qrm-popup .fp_menucard_content .fp_menudata_icon {
  display: none !important;
}

body.qrm-popup .fp_menucard_content .fp_popup_option .fp_inner_box {
  padding: 0 !important;
}

body.qrm-popup .fp_menucard_content .fp_popup_option_title {
  margin: 0 0 0.5rem !important;
  padding: 0 !important;
  color: var(--qrm-muted, #6b6b6b) !important;
  font-family: var(--qrm-font-body, system-ui, sans-serif) !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em;
  line-height: 1.3 !important;
  text-transform: uppercase;
}

body.qrm-popup .fp_menucard_content .fp_popup_option .fp_text,
body.qrm-popup .fp_menucard_content .fp_popup_option .fp_text :is(p, li, span) {
  margin: 0 !important;
  color: rgba(var(--qrm-text-rgb, 0, 0, 0), 0.82) !important;
  font-family: var(--qrm-font-body, system-ui, sans-serif) !important;
  font-size: 0.86rem !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}

/* Nutrition: one row per value, label left and amount right (popup.php
   rebuilds FoodPress's two run-on columns into .qrm-nutri rows). */
body.qrm-popup .fp_menucard_content .fp_nutritions p.fp_text {
  float: none !important;
  width: auto !important;
  text-transform: none !important;
}

body.qrm-popup .fp_menucard_content .fp_nutritions p.fp_text:empty {
  display: none;
}

body.qrm-popup .fp_menucard_content .fp_nutritions .qrm-nutri {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.42rem 0;
  border-bottom: 1px solid rgba(var(--qrm-text-rgb, 0, 0, 0), 0.06);
}

body.qrm-popup .fp_menucard_content .fp_nutritions .qrm-nutri:first-child { padding-top: 0; }
body.qrm-popup .fp_menucard_content .fp_nutritions .qrm-nutri:last-child { padding-bottom: 0; border-bottom: 0; }

body.qrm-popup .fp_menucard_content .fp_nutritions .qrm-nutri b {
  color: var(--qrm-text, #1c1c1c);
  font-weight: 500;
}

body.qrm-popup .fp_menucard_content .fp_nutritions .qrm-nutri > span {
  color: var(--qrm-muted, #6b6b6b) !important;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  body.qrm-popup .fp_popup.fp_lightbox .fp_lightbox_content {
    transform: none;
    transition: none;
  }
}

/* -------------------------------------------------------------- footer --- */

.qrm-site__footer {
  margin: 0;
  padding: 0.5rem 0.4rem 0;
  color: var(--qrm-muted);
  font-size: 0.82rem;
  text-align: center;
}

.qrm-site__footer a { color: var(--qrm-accent); }

/* ---------------------------------------------------------- responsive --- */

@media (max-width: 40rem) {
  .qrm-card {
    padding: calc(var(--qrm-card-padding) * 0.8) clamp(0.9rem, 6vw, 2.2rem);
  }

  .has-ornaments .qrm-card {
    background-size: 100% 5rem;
  }

  .qrm-schedule > div {
    grid-template-columns: 1fr auto;
  }

  .qrm-menu .food_items_container { margin: 0; }

  .qrm-menu .fp_box {
    width: 100% !important;
    padding: 0.4rem 0 !important;
  }
}