.rmm-wrapper { max-width: 1200px; margin: 0 auto; font-family: inherit; padding: 40px 20px; }
.rmm-breadcrumb { margin-bottom: 30px; font-size: 14px; }
.rmm-breadcrumb a { text-decoration: none; color: #b8860b; font-weight: 600; }
.rmm-breadcrumb a:hover { text-decoration: underline; }

/* Category grid (homepage view) — "photo toss" hover effect, scrapbook/polaroid style.
   Ported 1:1 (dimensions, easing, timings, fonts) from the supplied reference design. */
.rmm-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 60px 30px; padding-top: 26px; }
@media (max-width: 980px) { .rmm-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 66px 22px; } }
@media (max-width: 560px) { .rmm-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 56px 14px; } }

.rmm-cat-card { position: relative; display: block; text-decoration: none; aspect-ratio: 3.2 / 4; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

.rmm-cat-photo { position: absolute; inset: 0; background: #fff; border-radius: 3px; padding: 7px; box-shadow: 0 10px 22px -8px rgba(20,40,60,0.30), 0 2px 6px rgba(20,40,60,0.16); will-change: transform, opacity; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.rmm-cat-photo-img { position: relative; width: 100%; height: 100%; border-radius: 1px; overflow: hidden; background-size: cover; background-position: center; display: flex; align-items: flex-end; justify-content: center; background-color: #2b2b2b; }
.rmm-cat-photo-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rmm-cat-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 52%; background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.28) 55%, transparent 100%); }
.rmm-cat-caption { position: relative; z-index: 2; width: 100%; padding: 0 11px 11px; font-family: 'Bahnschrift', sans-serif; font-weight: 600; color: #96daea; text-transform: uppercase; line-height: 1.08; text-shadow: 0 2px 6px rgba(0,0,0,0.45); text-align: center; }
.rmm-cat-main .rmm-cat-caption { font-size: clamp(14px, 1.6vw, 18px); }
.rmm-cat-preview .rmm-cat-caption { font-size: 10.5px; padding-bottom: 8px; }

.rmm-cat-tape { position: absolute; width: 50px; height: 19px; background: rgba(255,255,255,0.55); border: 1px solid rgba(255,255,255,0.75); box-shadow: 0 2px 4px rgba(0,0,0,0.15); z-index: 20; pointer-events: none; }
.rmm-cat-tape-tl { top: -7px; left: 12px; transform: rotate(-8deg); }
.rmm-cat-tape-br { bottom: -7px; right: 12px; transform: rotate(6deg); }

.rmm-cat-sticker { position: absolute; top: 8px; right: -6px; background: #96daea; color: #1A1D22; font-family: 'Bahnschrift', cursive; font-weight: 700; font-size: 10.5px; padding: 4px 9px 3px; border-radius: 2px; transform: rotate(7deg); box-shadow: 0 3px 6px rgba(0,0,0,0.25); z-index: 6; white-space: nowrap; }

.rmm-cat-main { z-index: 10; transition: transform 420ms cubic-bezier(0.34,1.56,0.64,1), box-shadow 420ms ease; }

.rmm-cat-preview { opacity: 0; pointer-events: none; transition: transform 460ms cubic-bezier(0.34,1.61,0.64,1), opacity 260ms ease; }
.rmm-cat-p1 { z-index: 7; }
.rmm-cat-p2 { z-index: 8; }
.rmm-cat-p3 { z-index: 9; }

.rmm-cat-card.rmm-tossed .rmm-cat-preview { opacity: 1; }

.rmm-cat-main.rmm-no-image .rmm-cat-photo-img { background: linear-gradient(135deg, #2b2b2b, #4a4a4a); }


/* -----------------------------------------------------------
   Category items page ("Salads" style page) — light scrapbook
   theme: blue gradient background, decorative header, polaroid
   item cards, and a paperclip "recipe note" popup on hover.
   Ported 1:1 (colors, fonts, spacing, easing) from the supplied
   reference design.
   ----------------------------------------------------------- */

.rmm-cat-page {
    --rmm-bg: #96DAEA;
    --rmm-bg-2: #7DCBE0;
    --rmm-ink: #1A1D22;
    --rmm-ink-soft: #4A5560;
    --rmm-yellow: #96daea;
    --rmm-yellow-deep: #F2A900;
    --rmm-cream: #FBF3E1;
    --rmm-cream-edge: #EFE2C4;
    --rmm-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    background:
        radial-gradient(circle at 10% 8%, var(--rmm-bg-2), transparent 42%),
        radial-gradient(circle at 92% 85%, var(--rmm-bg-2), transparent 42%),
        var(--rmm-bg);
    padding: 130px 5vw 252px; /* extra 162px reserves clearance for the footer's plate image (elementor-element margin-top:-160px poke-up effect), so it no longer overlaps the last row of menu item cards now that the panel below is the same solid blue instead of a separate cream gap */
    color: var(--rmm-ink);
}

/* The site footer's first section carries a fixed 162px top margin (meant as
   breathing room on pages whose background matches the footer). On the menu
   category pages that margin exposes a gap of the page's cream background
   between this blue panel and the footer below it. Zero it here so the
   category page's background flows straight into the footer with no seam. */
body.tax-menu_category .elementor-element-1937f31a {
    margin-top: 0 !important;
}
.rmm-cat-page-inner { max-width: 1220px; margin: 0 auto; }

/* Header */
.rmm-cat-page-header { position: relative; text-align: center; margin-bottom: 34px; }
.rmm-back-link { position: absolute; left: 0; top: 8px; text-decoration: none; color: var(--rmm-ink); font-weight: 700; font-size: 14px; }
.rmm-back-link:hover { text-decoration: underline; }

.rmm-daily-note { position: absolute; top: -10px; right: 0; background: var(--rmm-yellow); color: var(--rmm-ink); font-family: 'Bahnschrift', cursive; font-weight: 700; font-size: 13px; text-align: center; line-height: 1.3; width: 86px; padding: 12px 8px 10px; transform: rotate(6deg); box-shadow: 0 8px 14px -6px rgba(0,0,0,0.35); }
.rmm-daily-note span { color: #D9534F; }

.rmm-cat-page-title { font-family: 'Bahnschrift', sans-serif; font-weight: 700; font-size: clamp(30px, 5vw, 52px); margin: 0; letter-spacing: .5px; text-transform: uppercase; }
.rmm-squiggle { display: inline-block; width: 28px; color: var(--rmm-bg-2); filter: brightness(0.55) sepia(1) hue-rotate(150deg) saturate(3); vertical-align: middle; margin: 0 12px; }
.rmm-squiggle svg { display: block; width: 30px; height: 20px; }
.rmm-squiggle-right svg { transform: scaleX(-1); }

.rmm-cat-tagline { display: inline-block; margin-top: 8px; background: var(--rmm-yellow); color: var(--rmm-ink); font-weight: 700; font-size: 12.5px; letter-spacing: .6px; padding: 6px 16px 5px; border-radius: 3px; transform: rotate(-1deg); text-transform: uppercase; box-shadow: 0 3px 0 rgba(0,0,0,0.06); }

.rmm-cat-instructions { max-width: 520px; margin: 12px auto 0; font-size: 14px; color: var(--rmm-ink-soft); line-height: 1.6; }

.rmm-cat-empty { text-align: center; font-size: 16px; color: var(--rmm-ink-soft); }

/* Items grid */
.rmm-items-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 46px 30px; padding-top: 30px; position: relative; }
@media (max-width: 980px) { .rmm-items-grid { grid-template-columns: repeat(2, 1fr); gap: 50px 24px; } }
@media (max-width: 560px) { .rmm-items-grid { grid-template-columns: repeat(2, 1fr); gap: 44px 14px; } }

.rmm-item-card { position: relative; aspect-ratio: 0.92 / 1; cursor: default; z-index: 1; transition: opacity 320ms ease; }
.rmm-items-grid.rmm-has-active .rmm-item-card:not(.rmm-active) { opacity: .5; }
.rmm-item-card.rmm-active { z-index: 30; }

.rmm-item-tape { position: absolute; top: -7px; left: 12px; width: 50px; height: 19px; background: rgba(255,255,255,0.55); border: 1px solid rgba(255,255,255,0.75); box-shadow: 0 2px 4px rgba(0,0,0,0.15); transform: rotate(-8deg); z-index: 20; pointer-events: none; }

.rmm-item-badge { position: absolute; top: 8px; right: -6px; background: var(--rmm-yellow); color: var(--rmm-ink); font-family: 'Bahnschrift', cursive; font-weight: 700; font-size: 10.5px; padding: 4px 9px 3px; border-radius: 2px; transform: rotate(7deg); box-shadow: 0 3px 6px rgba(0,0,0,0.25); z-index: 6; white-space: nowrap; }

.rmm-item-image { position: absolute; inset: 0; background: #fff; border-radius: 3px; padding: 7px; box-shadow: 0 10px 22px -8px rgba(20,40,60,0.30), 0 2px 6px rgba(20,40,60,0.16); z-index: 5; transform: rotate(var(--rmm-rot, 0deg)); transition: transform 380ms var(--rmm-spring), box-shadow 380ms ease; }
.rmm-item-image-inner { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 1px; }
.rmm-item-image-inner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rmm-item-card:hover .rmm-item-image,
.rmm-item-card:active .rmm-item-image,
.rmm-item-card:focus-within .rmm-item-image { transform: rotate(0deg) translateY(-10px) scale(1.06); box-shadow: 0 30px 40px -14px rgba(15,25,35,0.5), 0 8px 16px rgba(15,25,35,0.28); }

.rmm-item-name { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 40px 10px 10px; font-family: 'Bahnschrift', sans-serif; font-weight: 600; color: var(--rmm-yellow); text-transform: uppercase; font-size: 13.5px; text-shadow: 0 2px 6px rgba(0,0,0,0.45); background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%); }

/* Hover "recipe note" popup, docked beside the card like a paperclip note.
   Left/right side and vertical offset are computed by JS (checks available
   viewport space) for pixel-accurate placement — see rmm-touch-toss.js. */
.rmm-item-note {
    position: absolute;
    top: 8%;
    width: 210px;
    background: var(--rmm-cream);
    border: 1px solid var(--rmm-cream-edge);
    border-radius: 3px;
    padding: 16px 16px 14px;
    box-shadow: 0 18px 30px -10px rgba(20,20,10,0.35);
    z-index: 25;
    opacity: 0;
    pointer-events: none;
    transition: transform 400ms var(--rmm-spring), opacity 260ms ease;
}
.rmm-item-card.rmm-note-right .rmm-item-note { left: 100%; margin-left: -26px; transform: translateX(-16px) rotate(-4deg) scale(.9); }
.rmm-item-card.rmm-note-left .rmm-item-note { right: 100%; margin-right: -26px; transform: translateX(16px) rotate(4deg) scale(.9); }
.rmm-item-card.rmm-active .rmm-item-note { opacity: 1; pointer-events: auto; }
.rmm-item-card.rmm-active.rmm-note-right .rmm-item-note { transform: translateX(0) rotate(-2deg) scale(1); }
.rmm-item-card.rmm-active.rmm-note-left .rmm-item-note { transform: translateX(0) rotate(2deg) scale(1); }

.rmm-item-note-clip { position: absolute; top: -14px; right: 18px; width: 26px; height: 38px; color: #8a8f96; transform: rotate(6deg); filter: drop-shadow(0 3px 3px rgba(0,0,0,0.25)); }
.rmm-item-note-clip svg { width: 100%; height: 100%; }
.rmm-item-note-title { margin: 2px 0 6px; font-family: 'Bahnschrift', sans-serif; font-weight: 600; font-size: 15px; color: var(--rmm-ink); }
.rmm-item-note-desc { font-size: 11.5px; line-height: 1.55; color: var(--rmm-ink-soft); margin: 0 0 10px; }
.rmm-item-note-desc p { margin: 0; }
.rmm-item-note-price { font-family: 'Bahnschrift', sans-serif; font-weight: 600; font-size: 15px; color: var(--rmm-ink); margin-bottom: 8px; }
.rmm-item-note-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rmm-item-note-tags li { font-size: 11px; color: var(--rmm-ink); }

@media (max-width: 700px) {
    /* The recipe-note popup's left/right placement (and its show/hide transform)
       is actually driven by a JS Web Animation on .rmm-item-note, which overrides
       any CSS "transform" declaration here (even !important) while it is running.
       So on mobile — where the hover-driven .rmm-note-right/.rmm-note-left classes
       never get added and the animation sits at its rest frame (transform: none) —
       the popup fell back to unclamped default positioning and hung off the right
       edge of the viewport, forcing the ENTIRE page into the browser's horizontal
       shrink-to-fit mobile rendering (this is what broke "the whole design" on
       phones, not just this popup). Fix: position it with plain "left" + "margin"
       (which the JS animation does NOT touch) instead of "transform", and pin it to
       the viewport via position:fixed so it's always centered and on-screen no
       matter which grid column the card sits in. */
    .rmm-item-note {
        position: fixed;
        left: 50%;
        right: auto;
        top: auto;
        bottom: 24px;
        margin: 0 0 0 -100px;
        width: 200px;
        max-width: calc(100vw - 32px);
    }
}


/* ---------- Homepage mobile-overflow safety net ----------
   Two pre-existing Elementor elements on the homepage (not part of this plugin)
   have no responsive override and push the ENTIRE page wider than the mobile
   viewport, which forces the browser's whole-page shrink-to-fit behavior — this
   is why the homepage's polaroid category grid (and everything else) looked
   squished/cut-off on phones. Neutralizing them here since this stylesheet is
   already enqueued on the homepage and the theme's own auto-generated page CSS
   isn't directly editable. */
@media (max-width: 700px) {
    .elementor-element.elementor-element-de293b5 > .elementor-widget-container {
        margin: 0 !important;
    }
    body:not(.rtl) .elementor-element.elementor-element-fa71652 {
        display: none !important;
    }
}

/* Mobile fix: the homepage "FRESH TO ORDER" category grid's column wrapper has a
   fixed 100px left+right padding (post-6679.css, element 7fcd49d) with no mobile
   override. On a ~390px phone viewport that leaves only ~135px for the grid,
   squeezing the polaroid cards down to unreadable thumbnails. Reduced to a sane
   mobile padding here for the same reason as the other overrides above. */
@media (max-width: 700px) {
    .elementor-6679 .elementor-element.elementor-element-7fcd49d > .elementor-element-populated {
        padding-inline: 16px !important;
    }
}


/* ---------------------------------------------------------------
   2026-08-29 client request: menu photo cleanup
   - smaller category/item photos with more breathing room per card
   - bigger item name text
   - remove the tape + "CHEF'S PICK" sticker decorations
   --------------------------------------------------------------- */
.rmm-cat-card, .rmm-item-card { display: block; width: 80%; margin: 0 auto; }

.rmm-cat-grid { gap: 84px 40px; }
@media (max-width: 980px) { .rmm-cat-grid { gap: 90px 30px; } }
@media (max-width: 560px) { .rmm-cat-grid { gap: 78px 20px; } }

.rmm-items-grid { gap: 70px 40px; }
@media (max-width: 980px) { .rmm-items-grid { gap: 74px 30px; } }
@media (max-width: 560px) { .rmm-items-grid { gap: 66px 20px; } }

.rmm-item-name { font-size: 23px; color: #FAE345 !important; text-align: center; padding-bottom: 24px; }

.rmm-squiggle { display: none !important; }

.rmm-item-note-tags {
  flex-direction: row !important;
  align-items: center !important;
}

.rmm-item-note-tags li {
  font-size: 0 !important;
}

.rmm-item-note-tags li img {
  width: 80px !important;
  height: 80px !important;
}

.rmm-cat-tape, .rmm-item-tape, .rmm-cat-sticker { display: none !important; }


/* 2026-08-29 (session 5) - MADE FRESH DAILY note recolor + reposition, category page title styling, hide hover-instructions text */
.rmm-daily-note {
  background: #FAE345 !important;
  text-align: center !important;
  top: -22px;
}

/* .rmm-cat-page-title override reverted 2026-08-29 (session 6) - client wanted the ITEM name centered/bigger/up instead, and this category-page H1 reverted to original */

.rmm-cat-instructions {
  display: none !important;
}


.rmm-cat-caption {
  color: #FAE345 !important;
}


/* 2026-08-29 (session 8) - category card stack: hide caption/fade on the BACK preview photos, and fan them out further so each shows more fully */
.rmm-cat-preview .rmm-cat-caption { display: none !important; }
.rmm-cat-preview .rmm-cat-fade { display: none !important; }

/* keep the hovered/tossed card stack ABOVE its neighbours so the fanned-out back photos are never clipped by the next card */
.rmm-cat-card { position: relative; }
.rmm-cat-card.rmm-tossed, .rmm-cat-card:hover { z-index: 60 !important; }

/* back preview photos were only filling part of their frame (leaving dark empty space) - force them to fill it like the main photo */
.rmm-cat-preview .rmm-cat-photo-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }


/* 2026-08-30 (session 9) - MOBILE menu grid fix.
   Cause: the earlier '.rmm-cat-card, .rmm-item-card { width: 80% }' rule shrank every
   card to 80% of an already-narrow 2-column phone layout, so cards rendered ~106px wide
   and the category caption clipped mid-word ('CLASSIC SANDWICHE'). On phones let the
   cards fill their column, trim the wrapper padding and column gap to buy back width,
   and let the caption wrap instead of being cut off by the photo frame's overflow:hidden. */
@media (max-width: 700px) {
  .rmm-wrapper { padding-left: 10px !important; padding-right: 10px !important; }

  .rmm-cat-grid, .rmm-items-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 14px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .rmm-cat-grid { row-gap: 60px !important; }
  .rmm-items-grid { row-gap: 54px !important; }

  .rmm-cat-card, .rmm-item-card { width: 100% !important; margin: 0 auto !important; }

  .rmm-cat-main .rmm-cat-caption {
    font-size: 13px !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
    line-height: 1.15 !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
  .rmm-cat-preview .rmm-cat-caption { font-size: 9px !important; }
}


/* 2026-08-30 (session 9) - MOBILE category-page header fix.
   Cause: the back-link and the yellow MADE FRESH DAILY note are absolutely positioned
   around a centred title, which works on desktop but collapses on a phone - the 32px
   title ran the full width and the note + back-link landed on top of it. On phones the
   header becomes a simple vertical stack: back-link, note, then a smaller wrapping title. */
@media (max-width: 700px) {
  .rmm-cat-page-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
  }
  .rmm-back-link {
    position: static !important;
    order: 1 !important;
    align-self: flex-start !important;
  }
  .rmm-daily-note {
    position: static !important;
    order: 2 !important;
    align-self: flex-end !important;
    margin-right: 6px !important;
  }
  .rmm-cat-page-title {
    order: 3 !important;
    font-size: 27px !important;
    line-height: 1.15 !important;
    width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
}


/* client asked for less dead space above the category title (was a flat 130px) */
/* Heading height matched to the rest of the site: About, Locations and Menu all put
   their H1 at y=285 (at scroll 0). 253px of top padding lands the category title on
   exactly that line, so the inner pages no longer sit higher than everything else. */
.rmm-cat-page { padding-top: 253px !important; }
@media (max-width: 700px) { .rmm-cat-page { padding-top: 0 !important; /* 2026-08-30: the gap this used to open above the title
       is now carried by .rmm-cat-sticky-top's own padding, so the spacing travels
       with the bar when it pins instead of being dead space at the top of the page. */ } }


/* 2026-08-30 (session 9) - category page header cleanup + paperclip side.
   1) Client asked to drop the plugin's own category title and Back-to-Menu link
      (they sat cramped right under the nav and did not match the heading height on
      the rest of the site). Hidden rather than deleted from the template so it is a
      one-line revert if they want them back. The site nav still has MENU, so removing
      the back link does not strand anyone.
   2) The MADE FRESH DAILY note was pinned above the header (top:-22px); with the title
      gone it needed real space, so the header keeps a min-height and the note sits
      inside it instead of hanging off the top.
   3) The paperclip on the hover note was always at the note's top-RIGHT. Because the
      note opens to the RIGHT of its card by default, that put the clip over the NEXT
      card's photo. The clip now follows the note's side: note-right -> clip on the
      left edge, note-left -> clip on the right edge, so it always clips onto its OWN
      card. Rotation is mirrored per side so it still looks natural. */
/* title + back link RESTORED - client wanted them moved DOWN, not deleted */
.rmm-cat-page-header { margin-bottom: 34px !important; }
.rmm-daily-note { top: -22px !important; }

.rmm-item-card.rmm-note-right .rmm-item-note-clip {
  left: 36px !important; right: auto !important; transform: rotate(-6deg) !important;
}
.rmm-item-card.rmm-note-left .rmm-item-note-clip {
  right: 36px !important; left: auto !important; transform: rotate(6deg) !important;
}


/* 2026-08-30 (session 9) - Back to Menu moved below the dishes and restyled as a pill.
   Client wanted it to match the CATERING MENU / MENU SECRETS buttons on /menu/ and to
   sit centred under the grid. Those are Elementor buttons, so the values here are copied
   from their computed style (white bg, #000 text, 23px radius, 10px/22px padding,
   Bahnschrift 600 at 14px) rather than eyeballed, so the two match exactly.
   The markup moved in templates/taxonomy-menu-category.php - the link used to live in
   the page header and was absolutely positioned, hence the position:static reset. */
.rmm-back-wrap {
  display: flex !important;
  justify-content: center !important;
  margin-top: 54px !important;
}
.rmm-back-wrap .rmm-back-link {
  position: static !important;
  display: inline-block !important;
  background: #fff !important;
  color: #000 !important;
  border-radius: 23px !important;
  padding: 10px 22px !important;
  font-family: 'Bahnschrift', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  align-self: center !important;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.rmm-back-wrap .rmm-back-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}


/* 2026-08-30 (session 9) - Locations page: pair the two card buttons side by side and
   uppercase them to match the rest of the site's buttons (ORDER NOW, CATERING MENU...).
   These are Elementor button widgets, each a full-width child of a flex .elementor-widget-wrap,
   which is why they stacked. Scoped to body.page-id-988977 (the Locations page) so no other
   Elementor button anywhere on the site is affected.
   Two non-obvious bits found by measuring rather than guessing:
     - the SECOND button widget carries margin-top:16px on its .elementor-widget-container,
       which left the pair 8px out of vertical alignment until it was zeroed;
     - the buttons already use the site font/size/weight (Bahnschrift 600 14px) - only the
       casing differed, so text-transform is all that was needed, no font overrides.
   Side-by-side only from 701px up: on a 390px phone the pair overflows the card and wraps
   with an ugly indent, so phones keep the original stacked layout (uppercase still applies). */
body.page-id-988977 .elementor-button { text-transform: uppercase !important; }

@media (min-width: 701px) {
  body.page-id-988977 .elementor-widget-wrap > .elementor-widget-button {
    width: auto !important;
    flex: 0 0 auto !important;
    margin-bottom: 0 !important;
    align-self: center !important;
  }
  body.page-id-988977 .elementor-widget-wrap > .elementor-widget-button + .elementor-widget-button {
    margin-left: 14px !important;
  }
  body.page-id-988977 .elementor-widget-wrap > .elementor-widget-button > .elementor-widget-container {
    margin-top: 0 !important;
  }
}


/* 2026-08-30 (session 9) - MOBILE category page layout (from the client's mockup).
   Scoped entirely to max-width:700px - desktop keeps the centred title and the
   Back to Menu pill. Nothing here touches the site header or footer. */

/* the category switcher is a mobile-only device */
.rmm-cat-tabs { display: none; }

@media (max-width: 700px) {

  /* Title left, yellow note right, on one line - like the mockup. The header was a
     vertical stack from the earlier mobile fix; this turns it back into a row. */
  .rmm-cat-page-header {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
  }
  .rmm-cat-page-title {
    order: 1 !important;
    text-align: left !important;
    width: auto !important;
    flex: 1 1 auto !important;
    font-size: 30px !important;
  }
  .rmm-daily-note {
    order: 2 !important;
    align-self: center !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  /* Category tabs: one swipeable row of pills, current one filled black. */
  .rmm-cat-tabs {
    display: flex !important;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 0 20px;
    padding-bottom: 2px;
  }
  .rmm-cat-tabs::-webkit-scrollbar { display: none; }
  .rmm-cat-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    text-decoration: none;
    font-family: 'Bahnschrift', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: #1A1D22;
    background: #fff;
    border-radius: 999px;
    padding: 8px 16px;
  }
  .rmm-cat-tab.is-current {
    background: #000;
    color: #fff;
  }

  /* The mockup shows the dish note with no paperclip, so it is hidden on phones.
     Kept on desktop, where the client specifically asked for it to be positioned
     clear of the photos - this only removes it at mobile widths. */
  .rmm-item-note-clip { display: none !important; }

}




/* 2026-08-30 (session 9) - MOBILE /menu/ carousel (from the client's mockup).
   Categories become one swipeable row with the next card peeking, plus dot indicators.
   Mobile only - the desktop 4-column grid is untouched. */
.rmm-cat-dots { display: none; }

@media (max-width: 700px) {
  .rmm-cat-grid {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 14px !important;
    padding-bottom: 4px !important;
  }
  .rmm-cat-grid::-webkit-scrollbar { display: none; }
  .rmm-cat-grid > .rmm-cat-card {
    flex: 0 0 74% !important;
    width: 74% !important;
    scroll-snap-align: center;
  }

  /* dots are built by rmm_menu_carousel_dots(); one per card, current one filled */
  .rmm-cat-dots {
    display: flex !important;
    justify-content: center;
    gap: 7px;
    margin: 18px 0 0;
  }
  .rmm-cat-dots button {
    width: 7px; height: 7px;
    padding: 0; border: 0;
    border-radius: 50%;
    background: rgba(0,0,0,0.18);
    cursor: pointer;
  }
  .rmm-cat-dots button.is-on { background: #1A1D22; }
}


/* 2026-08-30 (session 9) - two mobile corrections after testing on a real phone.
   1) The dish note was pinned to the BOTTOM OF THE VIEWPORT (position:fixed, from an
      earlier overflow fix), so tapping a dish in row 1 popped the note down near row 3.
      Client wants it on the dish they tapped. Anchored to the card instead - the card is
      position:relative, and using left/top/width (never transform) keeps clear of the JS
      Web Animation that drives the show/hide. Width is a % of the CARD, so it cannot
      overflow the viewport - which is what the old fixed positioning was guarding against.
   2) The carousel dots rendered as huge blue pills: the theme styles bare buttons
      (padding, min-width, background) and plain width/height lost to it. Full reset. */
@media (max-width: 700px) {

  .rmm-item-card .rmm-item-note {
    position: absolute !important;
    left: 4% !important;
    right: auto !important;
    top: 12% !important;
    bottom: auto !important;
    margin: 0 !important;
    width: 92% !important;
    max-width: none !important;
  }

  .rmm-cat-dots button {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 8px !important;
    height: 8px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(0,0,0,0.20) !important;
    box-shadow: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    flex: 0 0 auto !important;
  }
  .rmm-cat-dots button.is-on { background: #1A1D22 !important; }
}


/* 2026-08-30 (session 9) - dietary tags side by side inside the mobile note.
   The note is narrow on phones, so the two 64px icons wrapped onto separate lines.
   Forced onto one row with a smaller icon so both fit without wrapping. */
@media (max-width: 700px) {
  .rmm-item-note-tags {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px !important;
  }
  .rmm-item-note-tags li img {
    width: 44px !important;
    height: 44px !important;
  }
}


/* 2026-08-30 (session 9) - mobile: let the swipe rows run to the screen edges.
   Both rows sat inside a padded wrapper, so they stopped short and looked boxed in.
   Cancelling that padding with a negative margin and re-adding it as PADDING on the
   scroll track itself is the trick: the track becomes full-bleed (content can scroll
   right up to the edge) while the first item keeps a sensible lead-in.
     - /menu/ carousel: wrapper pads 10px, so -10px margin, 0 padding = cards start
       flush at the screen edge, and the card grows 74% -> 82%.
     - category tabs: page pads 5vw, so -5vw margin + 5vw padding keeps the first tab
       aligned with the title while the strip bleeds off the right edge. */
@media (max-width: 700px) {
  .rmm-cat-grid {
    margin-left: -10px !important;
    margin-right: -10px !important;
    padding-left: 0 !important;
    /* The horizontal scroll container clips vertically too (overflow-x:auto forces
       overflow-y to compute to auto), and the polaroid's shadow reaches ~24px below
       the card - so without room here the section cuts the shadow off flat. */
    padding-bottom: 30px !important;
    padding-right: 0 !important;
  }
  .rmm-cat-grid > .rmm-cat-card {
    flex: 0 0 82% !important;
    width: 82% !important;
  }

  .rmm-cat-tabs {
    margin-left: -5vw !important;
    margin-right: -5vw !important;
    padding-left: 5vw !important;
    padding-right: 5vw !important;
  }
}


/* 2026-08-30 (session 9) - mobile: pin the title + tabs while the dishes scroll.
   Wrapped together in .rmm-cat-sticky-top (see the template) so ONE sticky element
   handles both - stacking two separate stickies would need the header height
   hard-coded, which breaks as soon as a long category name wraps to two lines.
   It needs an opaque background or the dishes show through as they pass under,
   and the negative side margin + matching padding makes that background span the
   full screen width instead of stopping at the page gutter. */
@media (max-width: 700px) {
  .rmm-cat-sticky-top {
    position: sticky !important;
    /* the theme's mobile header is fixed at the very top and is 74px tall, so a
       sticky top of 0 parks the title UNDERNEATH it and only the tabs stay
       visible. Offsetting by the header height keeps both on screen. */
    top: 74px;
    z-index: 40;
    background: var(--rmm-bg, #96DAEA);
    margin-left: -5vw;
    margin-right: -5vw;
    padding: 14px 5vw 6px;
  }
  /* the tabs already bleed to the edges; inside the sticky wrapper their own
     negative margin would double up, so it is neutralised here */
  .rmm-cat-sticky-top .rmm-cat-tabs {
    margin-left: -5vw !important;
    margin-right: -5vw !important;
    margin-bottom: 10px !important;
  }
}


/* 2026-08-30 (session 9) - mobile: the dish note becomes a centred card.
   It used to be positioned beside its dish (.rmm-note-right => left:100%), which
   on a phone pushed it past the right edge of the screen - that overhang is the
   white strip the client photographed. Anchoring it to the viewport instead of
   the card makes overflow structurally impossible.
   position:fixed is safe here ONLY because the item cards carry no transform at
   mobile widths (a transformed ancestor would capture fixed positioning and
   silently turn it back into absolute) - verified live before relying on it.
   Centring uses insets + auto block margins, never translate: a JS Web Animation
   owns this element's transform and would overwrite it. */
@media (max-width: 700px) {

  .rmm-item-card .rmm-item-note,
  .rmm-item-card.rmm-active .rmm-item-note,
  .rmm-item-note.rmm-note-left,
  .rmm-item-note.rmm-note-right {
    position: fixed !important;
    left: 5% !important;
    right: 5% !important;
    top: 0 !important;
    bottom: 0 !important;
    margin-top: auto !important;
    margin-bottom: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: -moz-fit-content !important;
    height: fit-content !important;
    max-height: 78vh !important;
    overflow-y: auto !important;
    z-index: 200 !important;
    padding: 30px 20px 20px !important;
  }

  /* The card sets z-index:30 with position:relative, which makes it a stacking
     context - so the note's own z-index cannot lift it above the sticky title
     bar (z-index:40) or the theme header (99). The CARD has to be raised. */
  .rmm-item-card.rmm-active {
    z-index: 200 !important;
  }

  /* Bigger dietary tags now that the note is a full-width card. */
  .rmm-item-note-tags {
    gap: 22px !important;
  }

  .rmm-item-note-tags li img {
    width: 72px !important;
    height: 72px !important;
  }
}

/* Close button. Hidden by default so desktop (hover-driven, closes by itself)
   is untouched; the button markup is added to every note by rmm_note_close_button().
   A bare <button> inherits heavy theme styling on this site, so every property
   here is a deliberate reset rather than decoration. */
.rmm-note-close {
  display: none;
}

@media (max-width: 700px) {
  .rmm-note-close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, .07) !important;
    color: #111 !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: 21px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    cursor: pointer !important;
    z-index: 3 !important;
  }

  .rmm-note-close:hover,
  .rmm-note-close:focus-visible {
    background: rgba(0, 0, 0, .16) !important;
    color: #000 !important;
  }
}


/* 2026-08-30 (session 9) - one flat blue, no bands.
   .rmm-cat-page painted #96DAEA and then laid two darker radial blobs
   (rgb(125,203,224) at 10%/8% and 92%/85%) on top of it. Every other blue on
   the page - the sticky title bar, the Elementor sections above and below - is
   flat #96DAEA, so the gradient read as bands: a crisp seam wherever the
   gradient area met a flat one. The colours were never actually different, which
   is why comparing backgroundColor values showed nothing; the difference was a
   background-IMAGE only one element carried. Dropping it makes the whole page a
   single tone, as asked. */
.rmm-cat-page {
  background-image: none !important;
}


/* 2026-08-30 (session 9) - category title on the site headline scale.
   Measured the hero heading on /about/, /careers/, /locations/ and /menu/ at five
   widths rather than guessing: "Bahnschrift Condensed" 700, and the theme steps
   80px/88px -> 45px/45px -> 32px/32px at 1024 and 600. The category title already
   matched at the two larger steps but sat at 30px/34.5px on phones and carried a
   0.5px letter-spacing the rest of the site does not, so it read as a different
   heading. Pinned to the measured values so it cannot drift again. */
.rmm-cat-page-title {
  font-family: "Bahnschrift Condensed", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
  font-size: 80px !important;
  line-height: 88px !important;
}

@media (max-width: 1024px) {
  .rmm-cat-page-title { font-size: 45px !important; line-height: 45px !important; }
}

@media (max-width: 600px) {
  .rmm-cat-page-title { font-size: 32px !important; line-height: 32px !important; }
}

/* Back to Menu: the site's buttons are Bahnschrift 600/14px, #fff on #000 text,
   23px radius, 10px 22px padding, no border and no shadow - this already matched
   those, but it was still sentence case and still carried the hover lift I had
   added, which no other button on the site has. Both removed. */
.rmm-back-wrap .rmm-back-link {
  text-transform: uppercase !important;
  box-shadow: none !important;
  transition: none !important;
  transform: none !important;
}

.rmm-back-wrap .rmm-back-link:hover,
.rmm-back-wrap .rmm-back-link:focus,
.rmm-back-wrap .rmm-back-link:focus-visible,
.rmm-back-wrap .rmm-back-link:active {
  box-shadow: none !important;
  transform: none !important;
}

@media (max-width: 700px) {

  /* The caption was sized 13px back when a card was one half of a two-column
     phone grid. The card is now 82% of the screen, so it had become tiny. */
  .rmm-cat-main .rmm-cat-caption {
    font-size: 20px !important;
  }

  /* Cards line up on a common top edge as you swipe, and the track carries enough
     room for the polaroid shadow. The scroller clips vertically whether we like it
     or not (overflow-x:auto forces overflow-y to auto), so the only way to stop it
     slicing the shadow flat is to keep that much padding inside the scroll box. */
  .rmm-cat-grid {
    align-items: flex-start !important;
    padding-top: 34px !important;
    padding-bottom: 42px !important;
  }

  /* The resting row sits straight so the cards read as aligned; the tilt still
     plays on tap, because the toss animation adds .rmm-tossed and this rule
     deliberately stops applying then. */
  .rmm-cat-grid .rmm-cat-card:not(.rmm-tossed) .rmm-cat-main {
    transform: none !important;
  }
}


/* 2026-08-30 (session 9) - carousel cards snap flush to the left edge.
   The track was already full-bleed (measured 0 -> viewport width at 390/412/430/
   480/600), so the side gap the client photographed was not a margin at all: the
   cards carried scroll-snap-align:center, which parks the settled card in the
   MIDDLE of the track and therefore leaves an even gap on both sides of it -
   measured at 38px either side on a 430px screen, which matches the screenshot.
   Snapping to start pins each card flush left, so the only empty space is the
   deliberate peek of the next card on the right. */
@media (max-width: 700px) {
  .rmm-cat-grid .rmm-cat-card {
    scroll-snap-align: start !important;
  }
}


/* 2026-08-30 (session 9) - padding-agnostic full-bleed.
   These three rows were bled to the screen edge by cancelling the wrapper padding
   with a negative margin of the same size (-10px, -5vw). That only works while the
   ancestors keep the padding you measured: on the HOME page the carousel sits in
   an .elementor-widget-wrap that adds 16px a side, which -10px cannot cancel, so
   the same markup was flush on /menu/ and inset by 16px on /. Guessing the number
   was the bug. calc(50% - 50vw) pulls each row out to the viewport edge whatever
   its ancestors add, because it is measured against the viewport rather than
   against a padding value we happen to know today. Verified it introduces no
   page-level horizontal overflow (scrollWidth stays == clientWidth). */
@media (max-width: 700px) {

  .rmm-cat-grid,
  .rmm-cat-tabs,
  .rmm-cat-sticky-top {
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    width: auto !important;
  }

  /* The grid runs card-to-edge; the other two keep an inner gutter so their
     content does not touch the screen. */
  .rmm-cat-grid {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .rmm-cat-tabs {
    padding-left: 5vw !important;
    padding-right: 5vw !important;
  }

  .rmm-cat-sticky-top {
    padding-left: 5vw !important;
    padding-right: 5vw !important;
  }
}


/* 2026-08-30 (session 9) - carousel caption a little larger and lifted clear of
   the card edge. 23px rather than a rounder 24px because 24 wraps SIGNATURE
   SANDWICHES - the longest category name - onto two lines at 390px, the width most
   phones report; 23px keeps it on one line there. Below about 375px it wraps at any
   of these sizes, which is fine: the caption still sits inside the photo's dark
   gradient (214px tall) and inside the card, so it degrades without clipping.
   Raised with `bottom` and not padding, because this caption carries no background
   of its own - the gradient is a separate .rmm-cat-fade layer - so shifting the
   text cannot expose a gap the way it did on .rmm-item-name back in part 7. */
@media (max-width: 700px) {
  .rmm-cat-main .rmm-cat-caption {
    font-size: 23px !important;
    bottom: 14px !important;
  }
}


/* 2026-08-30 (session 9) - the paperclip is gone everywhere.
   It had already been hidden on phones (the client's mockup of the note had no
   clip); they have now asked for the same on desktop, so this unscoped rule
   supersedes the mobile-only one above rather than replacing it - keeping both
   makes the history readable, and deleting this single rule brings the clip back
   on desktop exactly as it was, with its side-following positioning intact. */
.rmm-item-note-clip {
  display: none !important;
}


/* 2026-08-30 (session 9) - four mobile menu tweaks, requested as one batch. */
@media (max-width: 700px) {

  /* 1. Dish names on the cards were 23px - sized for the old wider card - and
     were wrapping onto two lines on the narrow two-up grid. */
  .rmm-item-name {
    font-size: 19px !important;
  }

  /* 2. The note sits at the BOTTOM of the screen instead of centred. The offset
     clears the page's own fixed ORDER NOW bar (measured 55px tall) plus a gap,
     and env(safe-area-inset-bottom) keeps it off the iPhone home indicator.
     top/bottom are set explicitly because the centring this replaces worked by
     pinning BOTH insets and letting auto block margins split the difference -
     leaving top:0 in place would stretch the card the full height instead. */
  .rmm-item-card .rmm-item-note,
  .rmm-item-card.rmm-active .rmm-item-note,
  .rmm-item-note.rmm-note-left,
  .rmm-item-note.rmm-note-right {
    top: auto !important;
    bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    max-height: 62vh !important;
  }

  .rmm-item-note-title {
    font-size: 19px !important;
    line-height: 1.25 !important;
  }

  .rmm-item-note-desc {
    font-size: 14.5px !important;
    line-height: 1.5 !important;
  }

  /* 3. Category title larger. Note this now runs ABOVE the site's own headline
     scale (32px on phones), which the previous round had deliberately matched -
     the client asked for bigger here specifically. Checked the worst case:
     SIGNATURE SANDWICHES wraps to two lines on a 360px screen and still clears
     the yellow note beside it, because that row is a flex row where the title
     flexes and the note holds its width. */
  .rmm-cat-page-title {
    font-size: 38px !important;
    line-height: 38px !important;
  }

  /* 4. Close button keeps the glyph, loses the grey disc behind it. */
  .rmm-note-close {
    background: transparent !important;
  }

  .rmm-note-close:hover,
  .rmm-note-close:focus-visible {
    background: transparent !important;
    color: #000 !important;
  }
}


/* 2026-08-30 (session 9) - make sure the long press does not raise the browser's
   own text-selection callout on top of the note. The card itself opts out of
   selection; the note re-enables it so the description stays selectable. */
@media (max-width: 700px) {
  .rmm-item-card {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  .rmm-item-note {
    -webkit-user-select: text;
    user-select: text;
  }
}


/* 2026-08-30 (session 9) - category pages rebuilt to the Menu page's layout.
   Everything below is derived from MEASURING /menu/ at 768/900/1024/1280/1440
   rather than from eyeballing the mockup, so the two pages agree by construction:

     /menu/  grid = min(1100px, viewport - 40px), centred
             4 columns above 980px, 2 below
             column-gap 40px / row-gap 84px above 980px, 30px / 90px below
             card = 80% of its column, centred (196px at 1280)

   The category page was landing on a different content box (a 5% page padding
   plus a 1220px inner cap), which is why its cards came out 204px against the
   Menu page's 196px. Matching the CONTAINER makes the cards match automatically -
   there is no card-width rule here at all. */
@media (min-width: 701px) {

  .rmm-cat-page {
    padding-left: 20px !important;
    padding-right: 20px !important;
    /* The hover note on a last-column card opens rightward and can run past the
       viewport - that was already adding a horizontal scrollbar near 1024px before
       this change, and widening the grid to match /menu/ made it wider still.
       `clip` contains it without creating a scroll container. Desktop only: the
       mobile sticky title bar must not get a clipping ancestor. */
    overflow-x: clip;
  }

  .rmm-cat-page-inner {
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Title left, MADE FRESH DAILY note at the right end of the same row. The note
     has to be given an explicit order: it comes BEFORE the title in the markup,
     which never mattered while it was absolutely positioned, but puts it on the
     wrong side the moment the header becomes a flex row. */
  .rmm-cat-page-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    text-align: left !important;
    margin-bottom: 18px !important;
  }

  .rmm-cat-page-title {
    order: 1 !important;
    text-align: left !important;
    flex: 1 1 auto !important;
    width: auto !important;
    margin: 0 !important;
  }

  .rmm-daily-note {
    order: 2 !important;
    position: static !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
  }

  /* The category switcher was built mobile-only, so every pill style lived inside
     the phone media query and there was nothing to show at this width. */
  .rmm-cat-tabs {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 26px;
    padding: 0;
  }

  .rmm-cat-tab {
    flex: 0 0 auto;
    text-decoration: none;
    font-family: 'Bahnschrift', sans-serif;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: #1A1D22;
    background: #fff;
    border-radius: 999px;
    padding: 9px 14px !important;
    line-height: 1 !important;
  }

  .rmm-cat-tab.is-current {
    background: #000;
    color: #fff;
  }

  .rmm-items-grid {
    row-gap: 84px !important;
    padding-top: 10px !important;
  }
}

/* Below 980px /menu/ switches to 2 columns and a taller row gap - match it. */
@media (min-width: 701px) and (max-width: 980px) {
  .rmm-items-grid { row-gap: 90px !important; }
}

/* Tablet: trim the pills so all eight categories still make a single row. */
@media (min-width: 701px) and (max-width: 1180px) {
  .rmm-cat-tab {
    font-size: 12px !important;
    padding: 8px 11px !important;
  }

  .rmm-cat-tabs { gap: 6px !important; }
}


/* 2026-08-30 (session 9) - BACK TO MENU gets the same arrow icon as ORDER NOW,
   mirrored. That button is an Elementor button whose icon is Font Awesome 5 Solid
   (fa-arrow-circle-right) at the button's own 14px, black, with a 5px flex gap to
   the label - so the back link now renders fa-arrow-circle-LEFT under exactly the
   same numbers rather than an approximation. Font Awesome is already enqueued on
   category pages (the header's ORDER NOW button pulls it in), so this costs no
   extra request. The glyph inherits font-size and colour from the link, which is
   what keeps the two buttons in step if either is ever restyled. */
.rmm-back-wrap .rmm-back-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
}

.rmm-back-wrap .rmm-back-link .fa-arrow-circle-left {
  font-size: inherit;
  line-height: 1;
}


/* 2026-08-30 (session 9) - smaller dish name, shorter dark overlay.
   The gradient IS this element's background, so its height is the element's
   height - which was 96px of a 169px photo on a phone, 56% of the picture, mostly
   because of 40px of top padding. Trimming the padding and the type shrinks the
   overlay itself; there is no separate scrim to resize.
   Kept bottom-anchored at bottom:0 with the padding change only, for the reason
   found back in part 7: moving this box with `bottom` drags its gradient up and
   exposes a white strip of the polaroid beneath it.
   Checked the worst case on all 8 categories rather than one: the longest names
   (Bamieh (Okra), Cauliflower Salad, Grilled Halloumi) now top out at 45% of the
   photo, down from 56%, and nothing overflows its frame. */
.rmm-item-name {
  font-size: 19px !important;
  line-height: 1.15 !important;
  padding: 18px 10px 12px !important;
}

@media (max-width: 700px) {
  .rmm-item-name {
    font-size: 16px !important;
  }
}


/* 2026-08-30 (session 9) - dish cards and title land on the SAME pixels as the
   Menu page, so nothing jumps when you move between pages.

   The previous round matched the horizontal geometry (content box, columns, card
   WIDTH) and stopped there, which is why the client could still see a jump: the
   two things that were never compared were card HEIGHT and vertical position.

   Card height: the two cards had different aspect ratios - .rmm-cat-card is
   3.2/4 and .rmm-item-card was 0.92/1, so at an identical 196px width they came
   out 245px and 213px tall. One shared ratio fixes it at every width, because the
   widths already agree.

   Vertical position: measured on /menu/ with the admin bar discounted (it shifts
   everything 46px while logged in and would have poisoned every number here):

       >=1025px   title top 169, first card top 479   (gap 310)
       769-1024   title top 189, first card top 444   (gap 255)
       <=768      title top 203, first card top 458   (gap 255)

   Two separate controls, because they are two separate problems: page padding-top
   places the TITLE, and a min-height on the title+tabs block fixes the distance
   from the title down to the CARDS. Doing it with a min-height rather than more
   padding means a category name that wraps to two lines eats into the slack
   instead of pushing the grid down - which is the whole point, since the jump the
   client is describing happens between pages with different title lengths. The
   tabs sit at the bottom of that block (margin-top: auto), so the empty space
   lands between title and tabs, mirroring where /menu/ carries its subtitle. */
.rmm-item-card {
  aspect-ratio: 3.2 / 4 !important;
}

@media (min-width: 701px) {
  .rmm-cat-sticky-top {
    display: flex !important;
    flex-direction: column !important;
  }

  .rmm-cat-tabs {
    margin-top: auto !important;
  }
}

@media (min-width: 1025px) {
  .rmm-cat-page { padding-top: 137px !important; }
  .rmm-cat-sticky-top { min-height: 300px !important; }
}

@media (min-width: 701px) and (max-width: 1024px) {
  .rmm-cat-page { padding-top: 63px !important; }
  .rmm-cat-sticky-top { min-height: 259px !important; }
}


/* ============================================================
   2026-09-05 - category header alignment pass (client request)
   1) filter tabs centred exactly
   2) "Made Fresh Daily" sticker nudged down + left
   3) title left edge aligned to the /menu/ page headline:
      /menu/ headline block is 890px centred, this page's inner is
      1100px centred, so the indent is (1100-890)/2 = 105px
   ============================================================ */

@media (min-width: 701px) {
  .rmm-cat-page .rmm-cat-tabs {
    justify-content: center !important;
  }

  .rmm-cat-page .rmm-daily-note {
    position: relative !important;
    top: 42px !important;
    left: -70px !important;
  }
}

@media (min-width: 1141px) {
  .rmm-cat-page .rmm-cat-page-title {
    padding-left: 105px !important;
  }
}

/* 2026-09-05 (b) - title dropped one headline line (88px = the /menu/
   headline's line-height) so it sits level with that page's second line.
   position:relative so nothing else in the sticky header shifts. */
@media (min-width: 1141px) {
  .rmm-cat-page .rmm-cat-page-title {
    position: relative !important;
    top: 88px !important;
  }
}

/* 2026-09-05 (c) - Locations page, mobile: ORDER NOW + GET DIRECTIONS sit
   side by side at equal width and height inside each location card.
   They are already siblings in a row-wrap .elementor-widget-wrap; the only
   thing that pushed the second one onto its own line was a widget margin,
   so the margin reset is what actually does the work. The body- prefix is
   needed to clear an !important width rule further up the cascade. */
@media (max-width: 767px) {
body .elementor-element-456d2cc > .elementor-widget-wrap > .elementor-widget.elementor-element-e6ce3c1,
body .elementor-element-456d2cc > .elementor-widget-wrap > .elementor-widget.elementor-element-29b2fc6,
body .elementor-element-58e6a76 > .elementor-widget-wrap > .elementor-widget.elementor-element-687318b,
body .elementor-element-58e6a76 > .elementor-widget-wrap > .elementor-widget.elementor-element-913201c {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
    margin: 0 !important;
  }

  body .elementor-element-456d2cc > .elementor-widget-wrap > .elementor-widget.elementor-element-e6ce3c1 .elementor-widget-container,
  body .elementor-element-58e6a76 > .elementor-widget-wrap > .elementor-widget.elementor-element-687318b .elementor-widget-container { padding-right: 5px !important; }

  body .elementor-element-456d2cc > .elementor-widget-wrap > .elementor-widget.elementor-element-29b2fc6 .elementor-widget-container,
  body .elementor-element-58e6a76 > .elementor-widget-wrap > .elementor-widget.elementor-element-913201c .elementor-widget-container { padding-left: 5px !important; }

body .elementor-element-e6ce3c1 .elementor-button,
body .elementor-element-29b2fc6 .elementor-button,
body .elementor-element-687318b .elementor-button,
body .elementor-element-913201c .elementor-button {
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 46px !important;
    padding: 10px 6px !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    gap: 6px !important;
  }
}

@media (max-width: 380px) {
body .elementor-element-e6ce3c1 .elementor-button,
body .elementor-element-29b2fc6 .elementor-button,
body .elementor-element-687318b .elementor-button,
body .elementor-element-913201c .elementor-button {
    font-size: 11px !important;
    padding: 10px 4px !important;
  }
}

/* 2026-09-05 (c2) - the two buttons shared a row but sat 16px apart
   vertically: the outlined GET DIRECTIONS widget carries container padding
   that the filled one does not. flex-start + zeroed vertical padding levels them. */
@media (max-width: 767px) {
  body .elementor-element-456d2cc > .elementor-widget-wrap > .elementor-widget.elementor-element-e6ce3c1,
  body .elementor-element-456d2cc > .elementor-widget-wrap > .elementor-widget.elementor-element-29b2fc6,
  body .elementor-element-58e6a76 > .elementor-widget-wrap > .elementor-widget.elementor-element-687318b,
  body .elementor-element-58e6a76 > .elementor-widget-wrap > .elementor-widget.elementor-element-913201c {
    align-self: flex-start !important;
  }

  body .elementor-element-e6ce3c1 > .elementor-widget-container,
  body .elementor-element-29b2fc6 > .elementor-widget-container,
  body .elementor-element-687318b > .elementor-widget-container,
  body .elementor-element-913201c > .elementor-widget-container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
  }
}