.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: 'Fredoka', sans-serif; font-weight: 600; color: #FFC72C; 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: #FFC72C; color: #1A1D22; font-family: 'Kalam', 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: #FFC72C;
    --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: 'Kalam', 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: 'Fredoka', 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: 'Kalam', 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: 'Fredoka', 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: 'Fredoka', 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: 'Fredoka', 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;
    }
}