/*
 * Menu item styles — four layouts, three styles each.
 *
 * This file owns the *structure* of a menu item and loads after the shell and
 * the template skin. Colours, fonts and radius come from the template through
 * variables, so every style works on every template:
 *
 *   --qrm-item-bg       card fill            (default: the surface colour)
 *   --qrm-item-border   card / row hairline  (default: 12% text colour)
 *   --qrm-item-radius   card corners         (setting: "Item corner radius")
 *   --qrm-item-shadow   card shadow          (setting: "Item shadow")
 *   --qrm-item-card-shadow  a skin's own card shadow, replacing the above
 *   --qrm-thumb-size    split thumbnail      (default: 5.5rem)
 *   --qrm-thumb-radius  split thumbnail      (default: follows the card)
 *   --qrm-image-ratio   hero / grid photos   (setting: "Image aspect ratio")
 *   --qrm-item-border-width  card / row border  (setting: "Card border width")
 *   --qrm-item-pad      card inner padding   (setting: "Card inner padding", unset = the style's own)
 *   --qrm-item-gap      space between items  (setting: "Space between items", unset = the style's own)
 *   --qrm-thumb-set     "Photo size", for styles a skin's --qrm-thumb-size must not reach
 *
 * Rules are scoped `.qrm-site .qrm-menu .qrm-items--<style>`: the style classes
 * sit on each FoodPress category wrapper (fp_container), so one category can
 * use a different style from the rest. That out-ranks the skins
 * (`.qrm-site--tpl-x .qrm-menu …`). FoodPress's own stylesheet loads after
 * this one and sets floats, widths, min-heights, a 30px title padding and an
 * absolute price on its column layouts, so structural properties it touches
 * carry !important.
 *
 * FoodPress markup (style "two", which every photo style selects):
 *   .fp_box > .fp_inner_box > ( .fp_thumbnail > img ) + .menu_info
 *   .menu_info > .fp_price + h3 + h5.fp_subheader + .menu_description
 * Style "one" has no photo and no .menu_info; the text sits directly in
 * .fp_inner_box. Every style degrades to a text-only item for it, for
 * `.no_img` items, and when "Item images" is set to Hide.
 */

/* ================================================================ base === */

.qrm-site .qrm-menu .qrm-items .food_items_container {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--qrm-item-gap, 0.8rem);
  margin: 0 !important;
  overflow: visible !important;
}

/*
 * After the featured dishes FoodPress adds <div class="clear"> inside the same
 * container. In a grid that is a cell of its own: a blank tile in two
 * columns, an extra gap in one.
 */
.qrm-site .qrm-menu .qrm-items .food_items_container > .clear {
  display: none !important;
}

.qrm-site .qrm-menu .qrm-items .fp_box {
  float: none !important;
  width: auto !important;
  min-width: 0;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.qrm-site .qrm-menu .qrm-items .fp_inner_box {
  position: relative;
  display: block;
  height: 100%;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  color: var(--qrm-text) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.qrm-site .qrm-menu .qrm-items .fp_thumbnail,
.qrm-site .qrm-menu .qrm-items .new_fp_thumbnail {
  position: relative;
  float: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: hidden;
  border: 0 !important;
  /* No tint behind the photo: transparent packshots must sit on the card. */
}

/*
 * FoodPress styles full-width style-2 photos as a 30% float with a 5px
 * transparent border, and below 480px caps them at max-width: 100px with
 * 20px margins — under a selector (.fp_box.menuItem.c_100.normal_item
 * .style_2 img.new_fp_thumb) that out-ranks this one. Hence the !important.
 */
.qrm-site .qrm-menu .qrm-items .fp_thumbnail img,
.qrm-site .qrm-menu .qrm-items .new_fp_thumb {
  display: block;
  float: none !important;
  box-sizing: border-box;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  aspect-ratio: auto;
  object-fit: var(--qrm-object-fit);
  transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.qrm-site .qrm-menu .qrm-items .menu_info {
  position: static;
  float: none !important;
  width: auto !important;
  min-width: 0;
  padding: 0 !important;
}

.qrm-site .qrm-menu .qrm-items .fp_box h3 {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: calc(var(--qrm-item-title) * var(--qrm-heading-scale)) !important;
  line-height: 1.2 !important;
  overflow-wrap: anywhere;
}

.qrm-site .qrm-menu .qrm-items .fp_box .fp_price {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  float: none !important;
  margin: 0 !important;
  font-style: normal !important;
}

.qrm-site .qrm-menu .qrm-items .fp_box .fp_subheader {
  margin: 0.2rem 0 0 !important;
  padding: 0 !important;
  font-style: normal !important;
}

.qrm-site .qrm-menu .qrm-items .fp_box .menu_description {
  margin-top: 0.25rem;
  padding: 0 !important;
  font-style: normal !important;
}

/* Descriptions are summaries: the popup has the full text. */
.qrm-site .qrm-menu .qrm-items .fp_box .menu_description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/*
 * A description that is only the Read More link takes no space when the link
 * is hidden. The server marks those (qrm_site_core_render_items): CSS cannot
 * tell, because :only-child ignores text, so a :has() test also matched every
 * description that does have text.
 */
.qrm-site.no-readmore .qrm-menu .qrm-items .fp_box .menu_description.qrm-desc-empty {
  display: none;
}

.qrm-site .qrm-menu .qrm-items .fp_inner_box > .clear { display: none; }

@media (hover: hover) {
  .qrm-site .qrm-menu .qrm-items .fp_box:hover .new_fp_thumb { transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .qrm-site .qrm-menu .qrm-items .new_fp_thumb { transition: none; }
}

/* Shared card surface for the styles that draw one. */
.qrm-site .qrm-menu .qrm-items--split-classic .fp_inner_box,
.qrm-site .qrm-menu .qrm-items--split-alternate .fp_inner_box,
.qrm-site .qrm-menu .qrm-items--hero-stacked .fp_inner_box,
.qrm-site .qrm-menu .qrm-items--hero-framed .fp_inner_box,
.qrm-site .qrm-menu .qrm-items--grid-tiles .fp_inner_box {
  background: var(--qrm-item-bg, var(--qrm-surface)) !important;
  border: var(--qrm-item-border-width, 1px) solid var(--qrm-item-border, rgba(var(--qrm-text-rgb), 0.12)) !important;
  border-radius: var(--qrm-item-radius) !important;
  box-shadow: var(--qrm-item-card-shadow, var(--qrm-item-shadow)) !important;
}

/* A price pill, used by several styles. */
.qrm-site .qrm-menu .qrm-items--split-alternate .fp_box .fp_price,
.qrm-site .qrm-menu .qrm-items--hero-stacked .fp_box .fp_price {
  align-self: start;
  padding: 0.2rem 0.6rem !important;
  color: var(--qrm-accent) !important;
  background: rgba(var(--qrm-accent-rgb), 0.12) !important;
  border-radius: 999px !important;
  font-size: 0.88rem !important;
  line-height: 1.35 !important;
}

/* ====================================================== split layouts === */

.qrm-site .qrm-menu .qrm-items--split .fp_inner_box {
  display: flex !important;
  align-items: center;
  gap: 0.85rem;
}

.qrm-site .qrm-menu .qrm-items--split .fp_thumbnail {
  flex: 0 0 var(--qrm-thumb-size, 5.5rem) !important;
  width: var(--qrm-thumb-size, 5.5rem) !important;
  aspect-ratio: 1;
}

.qrm-site .qrm-menu .qrm-items--split .menu_info { flex: 1 1 auto; }

/* --- split · classic: square photo beside the text, on a card --- */

.qrm-site .qrm-menu .qrm-items--split-classic .fp_inner_box {
  padding: var(--qrm-item-pad, 0.75rem) !important;
}

.qrm-site .qrm-menu .qrm-items--split-classic .fp_thumbnail {
  align-self: flex-start;
  border-radius: var(--qrm-thumb-radius, max(0.5rem, calc(var(--qrm-item-radius) * 0.7)));
}

.qrm-site .qrm-menu .qrm-items--split-classic .fp_box .menu_description {
  -webkit-line-clamp: 2;
}

/* --- split · alternating: edge-to-edge photo, sides swap per row --- */

.qrm-site .qrm-menu .qrm-items--split-alternate .fp_inner_box {
  align-items: stretch;
  gap: 0;
  min-height: 8.75rem !important;
}

.qrm-site .qrm-menu .qrm-items--split-alternate .fp_thumbnail {
  flex: 0 0 40% !important;
  align-self: stretch !important;
  width: 40% !important;
  aspect-ratio: auto;
  border-radius: 0 !important;
}

.qrm-site .qrm-menu .qrm-items--split-alternate .fp_thumbnail img {
  position: absolute;
  inset: 0;
}

.qrm-site .qrm-menu .qrm-items--split-alternate .menu_info {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.15rem;
  padding: var(--qrm-item-pad, 1rem 1.1rem) !important;
}

.qrm-site .qrm-menu .qrm-items--split-alternate .menu_info > .fp_price {
  order: 9;
  margin-top: 0.55rem !important;
}

.qrm-site .qrm-menu .qrm-items--split-alternate .fp_box.no_img .fp_inner_box,
.qrm-site.qrm-site--images-hidden .qrm-menu .qrm-items--split-alternate .fp_inner_box {
  min-height: 0 !important;
}

.qrm-site .qrm-menu .qrm-items--split-alternate .fp_box:nth-child(even of .fp_box) .fp_inner_box {
  flex-direction: row-reverse;
}

.qrm-site .qrm-menu .qrm-items--split-alternate .fp_box .menu_description {
  -webkit-line-clamp: 2;
}

/* --- split · compact: round photo, price right, hairline rows --- */

.qrm-site .qrm-menu .qrm-items--split-compact .food_items_container { gap: var(--qrm-item-gap, 0); }

.qrm-site .qrm-menu .qrm-items--split-compact .fp_inner_box {
  gap: 0.85rem;
  padding: var(--qrm-item-pad, 0.8rem) 0 !important;
  border-bottom: var(--qrm-item-border-width, 1px) solid var(--qrm-item-border, rgba(var(--qrm-text-rgb), 0.12)) !important;
}

.qrm-site .qrm-menu .qrm-items--split-compact .fp_box:last-child .fp_inner_box {
  border-bottom: 0 !important;
}

.qrm-site .qrm-menu .qrm-items--split-compact .fp_thumbnail {
  flex-basis: var(--qrm-compact-thumb-size, 3.75rem) !important;
  width: var(--qrm-compact-thumb-size, 3.75rem) !important;
  border-radius: var(--qrm-thumb-radius, 50%);
  box-shadow: 0 6px 16px -10px rgba(0, 0, 0, 0.5);
}

/* Name and description on the left, the price centred on the right. */
.qrm-site .qrm-menu .qrm-items--split-compact .menu_info {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.9rem;
}

.qrm-site .qrm-menu .qrm-items--split-compact .menu_info > * { grid-column: 1; }

.qrm-site .qrm-menu .qrm-items--split-compact .menu_info > .fp_price {
  grid-column: 2;
  grid-row: 1 / span 3;
  font-size: 1rem !important;
}

.qrm-site .qrm-menu .qrm-items--split-compact .fp_box h3 {
  font-size: calc(var(--qrm-item-title) * var(--qrm-heading-scale) * 0.88) !important;
}

.qrm-site .qrm-menu .qrm-items--split-compact .fp_box .menu_description {
  -webkit-line-clamp: 1;
  font-size: 0.82rem !important;
}

/* ======================================================= hero layouts === */

.qrm-site .qrm-menu .qrm-items--hero .food_items_container { gap: var(--qrm-item-gap, 1.1rem); }

.qrm-site .qrm-menu .qrm-items--hero .fp_thumbnail {
  width: 100% !important;
  aspect-ratio: var(--qrm-image-ratio);
}

/* --- hero · stacked: wide photo on top, text below --- */

.qrm-site .qrm-menu .qrm-items--hero-stacked .menu_info {
  padding: var(--qrm-item-pad, 1rem 1.1rem 1.15rem) !important;
}

.qrm-site .qrm-menu .qrm-items--hero-stacked .fp_box h3 {
  font-size: calc(var(--qrm-item-title) * var(--qrm-heading-scale) * 1.1) !important;
}

.qrm-site .qrm-menu .qrm-items--hero-stacked .fp_box.style_1 .fp_inner_box {
  padding: var(--qrm-item-pad, 1rem 1.1rem) !important;
}

/* --- hero · overlay: text over the photo, price chip --- */

.qrm-site .qrm-menu .qrm-items--hero-overlay .fp_inner_box {
  display: grid !important;
  border-radius: var(--qrm-item-radius) !important;
  box-shadow: var(--qrm-item-shadow) !important;
  isolation: isolate;
}

.qrm-site .qrm-menu .qrm-items--hero-overlay .fp_thumbnail,
.qrm-site .qrm-menu .qrm-items--hero-overlay .menu_info {
  grid-area: 1 / 1;
}

.qrm-site .qrm-menu .qrm-items--hero-overlay .fp_box:not(.no_img) .menu_info {
  z-index: 1;
  align-self: end;
  padding: 3.5rem 1.15rem 1.1rem !important;
  /* Shading behind the text, in the overlay colour; deepens with strength.
     !important: the shell's `.qrm-menu .menu_info { background: transparent
     !important }` otherwise wins, and the shading never showed. */
  background: linear-gradient(
    to top,
    rgba(var(--qrm-overlay-rgb, 21, 25, 34), min(0.95, calc(var(--qrm-overlay-opacity, 0.35) * 0.4 + 0.72))),
    rgba(var(--qrm-overlay-rgb, 21, 25, 34), min(0.8, calc(var(--qrm-overlay-opacity, 0.35) * 0.5 + 0.38))) 52%,
    transparent
  ) !important;
}

.qrm-site .qrm-menu .qrm-items--hero-overlay .fp_box:not(.no_img) :is(h3, .fp_subheader, .menu_description) {
  color: #fff !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.qrm-site .qrm-menu .qrm-items--hero-overlay .fp_box:not(.no_img) :is(.fp_subheader, .menu_description) {
  color: rgba(255, 255, 255, 0.82) !important;
}

.qrm-site .qrm-menu .qrm-items--hero-overlay .fp_box h3 {
  font-size: calc(var(--qrm-item-title) * var(--qrm-heading-scale) * 1.2) !important;
}

.qrm-site .qrm-menu .qrm-items--hero-overlay .fp_box:not(.no_img) .menu_info > .fp_price {
  position: absolute !important;
  z-index: 2;
  top: 0.85rem !important;
  right: 0.85rem !important;
  left: auto !important;
  padding: 0.3rem 0.75rem !important;
  color: var(--qrm-btn-text) !important;
  background: var(--qrm-accent) !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.55) !important;
  font-size: 0.92rem !important;
}

.qrm-site .qrm-menu .qrm-items--hero-overlay .fp_box.no_img .fp_inner_box,
.qrm-site .qrm-menu .qrm-items--hero-overlay .fp_box.style_1 .fp_inner_box,
.qrm-site.qrm-site--images-hidden .qrm-menu .qrm-items--hero-overlay .fp_inner_box {
  background: var(--qrm-item-bg, var(--qrm-surface)) !important;
}

.qrm-site .qrm-menu .qrm-items--hero-overlay .fp_box.no_img .menu_info,
.qrm-site .qrm-menu .qrm-items--hero-overlay .fp_box.style_1 .fp_inner_box,
.qrm-site.qrm-site--images-hidden .qrm-menu .qrm-items--hero-overlay .menu_info {
  padding: 1rem 1.15rem !important;
  background: none;
}

/* With photos hidden the overlay copy would be white on the card. */
.qrm-site.qrm-site--images-hidden .qrm-menu .qrm-items--hero-overlay .fp_box :is(h3, .fp_subheader, .menu_description) {
  color: inherit !important;
  text-shadow: none;
}

.qrm-site.qrm-site--images-hidden .qrm-menu .qrm-items--hero-overlay .menu_info > .fp_price {
  position: static !important;
  color: var(--qrm-accent) !important;
  background: transparent !important;
  box-shadow: none !important;
}

/*
 * Both Overlay styles: a tint over the whole photo, colour and strength
 * from the settings (--qrm-overlay-rgb / --qrm-overlay-opacity). Sits
 * above the photo, below the text and the featured badge.
 */
.qrm-site .qrm-menu :is(.qrm-items--hero-overlay, .qrm-items--grid-overlay) .fp_box:not(.no_img) .fp_thumbnail::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: rgba(var(--qrm-overlay-rgb, 21, 25, 34), var(--qrm-overlay-opacity, 0.35));
  content: "";
  pointer-events: none;
}

/* --- hero · framed: inset photo, centred editorial text --- */

.qrm-site .qrm-menu .qrm-items--hero-framed .fp_inner_box {
  padding: var(--qrm-item-pad, 0.6rem) !important;
  text-align: center;
}

.qrm-site .qrm-menu .qrm-items--hero-framed .fp_thumbnail {
  border-radius: max(0px, calc(var(--qrm-item-radius) - 0.35rem));
}

.qrm-site .qrm-menu .qrm-items--hero-framed .menu_info,
.qrm-site .qrm-menu .qrm-items--hero-framed .fp_box.style_1 .fp_inner_box {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  padding: 1.1rem 0.85rem 0.9rem !important;
}

.qrm-site .qrm-menu .qrm-items--hero-framed .fp_box h3 {
  justify-content: center;
  font-size: calc(var(--qrm-item-title) * var(--qrm-heading-scale) * 1.15) !important;
  letter-spacing: 0.01em;
}

.qrm-site .qrm-menu .qrm-items--hero-framed .menu_info > .fp_price {
  order: 9;
  margin-top: 0.75rem !important;
  padding-top: 0.55rem !important;
  border-top: 1px solid rgba(var(--qrm-accent-rgb), 0.45) !important;
  font-family: var(--qrm-font-heading) !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.04em;
}

/* ======================================================= grid layouts === */

.qrm-site .qrm-menu .qrm-items--grid .food_items_container {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--qrm-item-gap, 0.75rem);
}

.qrm-site .qrm-menu .qrm-items--grid .fp_thumbnail {
  width: 100% !important;
  aspect-ratio: var(--qrm-image-ratio);
}

.qrm-site .qrm-menu .qrm-items--grid .fp_box h3 {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: calc(var(--qrm-item-title) * var(--qrm-heading-scale) * 0.82) !important;
}

/* Two narrow columns have no room for a description. */
.qrm-site .qrm-menu .qrm-items--grid .fp_box .menu_description { display: none !important; }

.qrm-site .qrm-menu .qrm-items--grid .fp_box .fp_subheader {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.78rem !important;
}

/* Title, subtitle, then the price under them. */
.qrm-site .qrm-menu .qrm-items--grid .menu_info,
.qrm-site .qrm-menu .qrm-items--grid .fp_box.style_1 .fp_inner_box {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
}

.qrm-site .qrm-menu .qrm-items--grid .menu_info > .fp_price { order: 9; }

/*
 * A dish without a photo keeps the photo slot as a soft plate placeholder,
 * so the tiles in a row line up instead of one card being mostly empty.
 */
.qrm-site:not(.qrm-site--images-hidden) .qrm-menu :is(.qrm-items--grid-tiles, .qrm-items--grid-minimal) .fp_box.no_img .fp_inner_box::before {
  display: block;
  flex: none;
  aspect-ratio: var(--qrm-image-ratio);
  background:
    radial-gradient(circle, rgba(var(--qrm-accent-rgb), 0.28) 0 9%, transparent 9.5%),
    radial-gradient(circle, transparent 0 21%, rgba(var(--qrm-accent-rgb), 0.3) 21.5% 23%, transparent 23.5%),
    linear-gradient(135deg, rgba(var(--qrm-accent-rgb), 0.1), rgba(var(--qrm-text-rgb), 0.05));
  content: "";
}

.qrm-site .qrm-menu .qrm-items--grid-minimal .fp_box.no_img .fp_inner_box::before {
  border-radius: max(0.75rem, var(--qrm-item-radius));
}

/* --- grid · tiles: photo cards, price pinned to the bottom --- */

.qrm-site .qrm-menu .qrm-items--grid-tiles .fp_inner_box {
  display: flex !important;
  flex-direction: column;
}

.qrm-site .qrm-menu .qrm-items--grid-tiles .menu_info {
  flex: 1 1 auto;
  padding: var(--qrm-item-pad, 0.7rem 0.75rem 0.8rem) !important;
}

.qrm-site .qrm-menu .qrm-items--grid-tiles .menu_info > .fp_price {
  margin-top: auto !important;
  padding-top: 0.45rem !important;
  font-size: 0.95rem !important;
}

/* --- grid · minimal: rounded photo and caption, no card --- */

.qrm-site .qrm-menu .qrm-items--grid-minimal .food_items_container { row-gap: var(--qrm-item-gap, 1.1rem); }

.qrm-site .qrm-menu .qrm-items--grid-minimal .fp_thumbnail {
  border-radius: max(0.75rem, var(--qrm-item-radius));
}

.qrm-site .qrm-menu .qrm-items--grid-minimal .menu_info {
  padding: 0.55rem 0.15rem 0 !important;
}

.qrm-site .qrm-menu .qrm-items--grid-minimal .menu_info > .fp_price {
  margin-top: 0.25rem !important;
  font-size: 0.9rem !important;
}

/* --- grid · overlay: square photo tiles, name over the image --- */

.qrm-site .qrm-menu .qrm-items--grid-overlay .food_items_container { gap: var(--qrm-item-gap, 0.5rem); }

.qrm-site .qrm-menu .qrm-items--grid-overlay .fp_inner_box {
  display: grid !important;
  border-radius: var(--qrm-item-radius) !important;
  isolation: isolate;
}

.qrm-site .qrm-menu .qrm-items--grid-overlay .fp_thumbnail,
.qrm-site .qrm-menu .qrm-items--grid-overlay .menu_info {
  grid-area: 1 / 1;
}

.qrm-site .qrm-menu .qrm-items--grid-overlay .fp_box:not(.no_img) .menu_info {
  z-index: 1;
  align-self: end;
  padding: 2.75rem 0.7rem 0.65rem !important;
  /* Shading behind the text, in the overlay colour; deepens with strength.
     !important: the shell's `.qrm-menu .menu_info { background: transparent
     !important }` otherwise wins, and the shading never showed. */
  background: linear-gradient(
    to top,
    rgba(var(--qrm-overlay-rgb, 21, 25, 34), min(0.95, calc(var(--qrm-overlay-opacity, 0.35) * 0.4 + 0.72))),
    rgba(var(--qrm-overlay-rgb, 21, 25, 34), min(0.8, calc(var(--qrm-overlay-opacity, 0.35) * 0.5 + 0.38))) 52%,
    transparent
  ) !important;
}

.qrm-site .qrm-menu .qrm-items--grid-overlay .fp_box:not(.no_img) :is(h3, .fp_subheader, .fp_price) {
  color: #fff !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}

.qrm-site .qrm-menu .qrm-items--grid-overlay .fp_box:not(.no_img) .fp_subheader { display: none !important; }

.qrm-site .qrm-menu .qrm-items--grid-overlay .menu_info > .fp_price {
  margin-top: 0.2rem !important;
  font-size: 0.85rem !important;
}

.qrm-site .qrm-menu .qrm-items--grid-overlay .fp_box.no_img .fp_inner_box,
.qrm-site .qrm-menu .qrm-items--grid-overlay .fp_box.style_1 .fp_inner_box,
.qrm-site.qrm-site--images-hidden .qrm-menu .qrm-items--grid-overlay .fp_inner_box {
  padding: 0.8rem !important;
  background: var(--qrm-item-bg, var(--qrm-surface)) !important;
}

.qrm-site.qrm-site--images-hidden .qrm-menu .qrm-items--grid-overlay .fp_box :is(h3, .fp_subheader) {
  color: inherit !important;
  text-shadow: none;
}

.qrm-site.qrm-site--images-hidden .qrm-menu .qrm-items--grid-overlay .fp_box .fp_price {
  color: var(--qrm-accent) !important;
  text-shadow: none;
}

/* ======================================================= list layouts === */

.qrm-site .qrm-menu .qrm-items--list .food_items_container { gap: var(--qrm-item-gap, 0); }

/* --- list · dotted leader: name ···· price, no photos --- */

.qrm-site .qrm-menu .qrm-items--list-leader .fp_thumbnail { display: none !important; }

.qrm-site .qrm-menu .qrm-items--list-leader .fp_inner_box {
  padding: var(--qrm-item-pad, 0.75rem) 0 !important;
}

.qrm-site .qrm-menu .qrm-items--list-leader .menu_info,
.qrm-site .qrm-menu .qrm-items--list-leader .fp_box.style_1 .fp_inner_box {
  display: grid !important;
  grid-template-columns: minmax(0, max-content) minmax(1.25rem, 1fr) auto;
  align-items: baseline;
  column-gap: 0.45rem;
}

.qrm-site .qrm-menu .qrm-items--list-leader .menu_info > *,
.qrm-site .qrm-menu .qrm-items--list-leader .fp_box.style_1 .fp_inner_box > * {
  grid-column: 1 / -1;
}

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

/* The leader is the text block's own pseudo-element, sitting in column 2. */
.qrm-site .qrm-menu .qrm-items--list-leader .menu_info::before {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  margin-bottom: 0.32em;
  border-bottom: 2px dotted rgba(var(--qrm-text-rgb), 0.32);
  content: "";
}

.qrm-site .qrm-menu .qrm-items--list-leader .menu_info > .fp_price {
  grid-column: 3;
  grid-row: 1;
  /* On a wrapped name the dots run along its last line; so does the price. */
  align-self: end;
}

.qrm-site .qrm-menu .qrm-items--list-leader .fp_box h3 {
  font-size: calc(var(--qrm-item-title) * var(--qrm-heading-scale) * 0.92) !important;
}

.qrm-site .qrm-menu .qrm-items--list-leader .fp_box :is(.fp_subheader, .menu_description) {
  max-width: 34rem;
  font-size: 0.86rem !important;
}

/* --- list · divided: hairline rows, small photo on the right --- */

.qrm-site .qrm-menu .qrm-items--list-divided .fp_inner_box {
  display: flex !important;
  flex-direction: row-reverse;
  align-items: center;
  gap: 1rem;
  padding: var(--qrm-item-pad, 1rem) 0 !important;
  border-bottom: var(--qrm-item-border-width, 1px) solid var(--qrm-item-border, rgba(var(--qrm-text-rgb), 0.12)) !important;
}

.qrm-site .qrm-menu .qrm-items--list-divided .fp_box:last-child .fp_inner_box {
  border-bottom: 0 !important;
}

.qrm-site .qrm-menu .qrm-items--list-divided .fp_thumbnail {
  /* Its own size: a skin's --qrm-thumb-size is for the split styles; the
     "Photo size" setting sets both. */
  flex: 0 0 var(--qrm-thumb-set, 4.5rem) !important;
  width: var(--qrm-thumb-set, 4.5rem) !important;
  aspect-ratio: 1;
  border-radius: max(0.6rem, calc(var(--qrm-item-radius) * 0.6));
}

.qrm-site .qrm-menu .qrm-items--list-divided .menu_info {
  display: flex !important;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
}

.qrm-site .qrm-menu .qrm-items--list-divided .menu_info > .fp_price {
  order: 9;
  margin-top: 0.4rem !important;
  font-size: 0.95rem !important;
}

.qrm-site .qrm-menu .qrm-items--list-divided .fp_box .menu_description {
  -webkit-line-clamp: 2;
  font-size: 0.85rem !important;
}

/* --- list · centred: fine-dining, centred text, no photos --- */

.qrm-site .qrm-menu .qrm-items--list-centered .fp_thumbnail { display: none !important; }

.qrm-site .qrm-menu .qrm-items--list-centered .fp_inner_box {
  padding: var(--qrm-item-pad, 1.15rem) 0.5rem !important;
  text-align: center;
}

/* A short accent rule between dishes. */
.qrm-site .qrm-menu .qrm-items--list-centered .fp_box + .fp_box .fp_inner_box::before {
  display: block;
  width: 2.25rem;
  height: 1px;
  margin: 0 auto 1.15rem;
  background: rgba(var(--qrm-accent-rgb), 0.55);
  content: "";
}

.qrm-site .qrm-menu .qrm-items--list-centered .menu_info,
.qrm-site .qrm-menu .qrm-items--list-centered .fp_box.style_1 .fp_inner_box {
  display: flex !important;
  flex-direction: column;
  align-items: center;
}

.qrm-site .qrm-menu .qrm-items--list-centered .fp_box h3 {
  justify-content: center;
  font-size: calc(var(--qrm-item-title) * var(--qrm-heading-scale) * 1.05) !important;
  letter-spacing: 0.015em;
}

.qrm-site .qrm-menu .qrm-items--list-centered .fp_box .fp_subheader {
  font-style: italic !important;
}

.qrm-site .qrm-menu .qrm-items--list-centered .fp_box .menu_description {
  max-width: 28rem;
}

.qrm-site .qrm-menu .qrm-items--list-centered .menu_info > .fp_price {
  order: 9;
  margin-top: 0.5rem !important;
  font-family: var(--qrm-font-heading) !important;
  font-size: 1.05rem !important;
  letter-spacing: 0.06em;
}

/* ===================================================== featured items === */

/*
 * FoodPress sorts featured items to the top and marks them .ft_item. The
 * plugin always asks for ft_style="none", so they share the regular style-2
 * markup and every item style works for them; FoodPress's own featured
 * styles used four other markups. The look is the "Featured items" setting:
 *   highlight  accent ring + badge, same layout
 *   spotlight  ring + badge + a full-width card with a wide photo
 *   plain      no difference
 * The badge text is --qrm-featured-label (setting, default a star).
 */

.qrm-site:is(.qrm-featured--highlight, .qrm-featured--spotlight) .qrm-menu .qrm-items .fp_box.ft_item .fp_inner_box {
  box-shadow: 0 0 0 2px var(--qrm-accent), var(--qrm-item-card-shadow, var(--qrm-item-shadow)) !important;
}

/* Rows without a card get a tinted panel, so the ring has something to hug. */
.qrm-site:is(.qrm-featured--highlight, .qrm-featured--spotlight) .qrm-menu :is(.qrm-items--list, .qrm-items--split-compact, .qrm-items--grid-minimal) .fp_box.ft_item .fp_inner_box {
  padding-inline: 0.8rem !important;
  background: rgba(var(--qrm-accent-rgb), 0.06) !important;
  border-bottom-color: transparent !important;
  border-radius: max(0.6rem, var(--qrm-item-radius)) !important;
}

.qrm-site:is(.qrm-featured--highlight, .qrm-featured--spotlight) .qrm-menu .qrm-items--list .fp_box.ft_item + .fp_box {
  margin-top: 0.5rem !important;
}

/* The badge: on the photo where there is one… */
.qrm-site:is(.qrm-featured--highlight, .qrm-featured--spotlight) .qrm-menu .qrm-items .fp_box.ft_item .fp_thumbnail::after,
/* …otherwise as a small label above the name. */
.qrm-site:is(.qrm-featured--highlight, .qrm-featured--spotlight) .qrm-menu .qrm-items .fp_box.ft_item:is(.no_img, .style_1) h3::before,
.qrm-site:is(.qrm-featured--highlight, .qrm-featured--spotlight) .qrm-menu :is(.qrm-items--list, .qrm-items--split-compact) .fp_box.ft_item h3::before,
.qrm-site:is(.qrm-featured--highlight, .qrm-featured--spotlight).qrm-site--images-hidden .qrm-menu .qrm-items .fp_box.ft_item h3::before {
  padding: 0.15rem 0.55rem;
  color: var(--qrm-btn-text);
  background: var(--qrm-accent);
  border-radius: 999px;
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.45);
  font-family: var(--qrm-font-body);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.05em;
  text-shadow: none;
  text-transform: uppercase;
  white-space: nowrap;
  content: var(--qrm-featured-label, "\2605");
}

.qrm-site .qrm-menu .qrm-items .fp_box.ft_item .fp_thumbnail::after {
  position: absolute;
  z-index: 2;
  top: 0.5rem;
  left: 0.5rem;
}

/* Lists and compact rows carry the badge on the title instead. */
.qrm-site .qrm-menu :is(.qrm-items--list, .qrm-items--split-compact) .fp_box.ft_item .fp_thumbnail::after { display: none; }

/* A block that shrinks to its text, so it sits on its own line above the name. */
.qrm-site .qrm-menu .qrm-items .fp_box.ft_item h3::before {
  display: table;
  margin-bottom: 0.4rem;
}

.qrm-site:is(.qrm-featured--highlight, .qrm-featured--spotlight) .qrm-menu .qrm-items .fp_box.ft_item h3 {
  display: block !important;
}

.qrm-site .qrm-menu :is(.qrm-items--list-centered, .qrm-items--hero-framed) .fp_box.ft_item h3::before {
  margin-inline: auto;
}

/* --- spotlight: featured items become a wide feature card --- */

.qrm-site.qrm-featured--spotlight .qrm-menu .qrm-items--grid .fp_box.ft_item {
  grid-column: 1 / -1;
}

.qrm-site.qrm-featured--spotlight .qrm-menu .fp_box.ft_item .fp_thumbnail {
  aspect-ratio: 16 / 9 !important;
}

.qrm-site.qrm-featured--spotlight .qrm-menu .qrm-items--split .fp_box.ft_item .fp_inner_box,
.qrm-site.qrm-featured--spotlight .qrm-menu .qrm-items--list-divided .fp_box.ft_item .fp_inner_box {
  flex-direction: column !important;
  align-items: stretch;
  min-height: 0 !important;
}

.qrm-site.qrm-featured--spotlight .qrm-menu :is(.qrm-items--split, .qrm-items--list) .fp_box.ft_item .fp_thumbnail {
  flex: none !important;
  align-self: stretch !important;
  width: 100% !important;
  border-radius: max(0px, calc(var(--qrm-item-radius) - 0.35rem));
}

.qrm-site.qrm-featured--spotlight .qrm-menu .qrm-items--split-alternate .fp_box.ft_item .fp_thumbnail img {
  position: static;
}

/* Lists hide photos, except on a spotlighted dish. */
.qrm-site.qrm-featured--spotlight:not(.qrm-site--images-hidden) .qrm-menu .qrm-items--list .fp_box.ft_item .fp_thumbnail {
  display: block !important;
  margin-bottom: 0.75rem !important;
}

.qrm-site.qrm-featured--spotlight .qrm-menu :is(.qrm-items--split, .qrm-items--list-divided) .fp_box.ft_item .menu_info {
  padding: 0.85rem 0.25rem 0.15rem !important;
}

.qrm-site.qrm-featured--spotlight .qrm-menu .fp_box.ft_item h3 {
  font-size: calc(var(--qrm-item-title) * var(--qrm-heading-scale) * 1.12) !important;
}

/* A spotlighted grid card has room for its description again. */
.qrm-site.qrm-featured--spotlight .qrm-menu .qrm-items--grid .fp_box.ft_item .menu_description {
  display: -webkit-box !important;
}