/* ================================================================
   Restaurant Menu Builder v9 — Frontend CSS
   All visual values driven by CSS custom properties.
================================================================ */

/* ── Defaults ─────────────────────────────────────────────────── */
.rmb-wrap {
    --rmb-accent:            #FDB81B;
    --rmb-bg:                transparent;
    --rmb-card-bg:           #ffffff;
    --rmb-text:              #1a1a1a;
    --rmb-desc-color:        #666666;
    --rmb-price-color:       #FDB81B;
    --rmb-cal-color:         #999999;
    /* v9.2: Calorie Icon toggle + sizing — see Style > Calories in Elementor */
    --rmb-cal-icon-display:  inline-block;
    --rmb-cal-icon-size:     1em;
    --rmb-cal-icon-gap:      4px;
    /* v9.3: EXTRA Content Area spacing — added on TOP of each layout's
       existing built-in padding (Grid's .rmb-card-body padding, List/
       Delivery's .rmb-row/.rmb-ditem padding), not a replacement for it.
       Defaults to 0 so nothing changes in appearance until the person
       deliberately adds more room under the image / around the text via
       Style > Spacing & Sizing > Content Area. */
    --rmb-content-pad-top:    0px;
    --rmb-content-pad-right:  0px;
    --rmb-content-pad-bottom: 0px;
    --rmb-content-pad-left:   0px;
    --rmb-desc-align:      left;
    --rmb-desc-margin-top:    0px;
    --rmb-desc-margin-bottom: 8px;
    /* v9.4: reserved vertical space for the description — 0 means no
       reserved space (current behavior, unchanged). Setting this to
       anything larger centers the text within that space using equal
       room above and below, rather than the uneven top/bottom margins a
       person could otherwise end up with. */
    --rmb-desc-min-height: 0px;
    --rmb-cat-color:         #1a1a1a;
    --rmb-note-color:        #888888;
    --rmb-note-size:         12px;
    --rmb-nav-bg:            #ffffff;
    --rmb-nav-text:          #444444;
    --rmb-nav-active-bg:     var(--rmb-accent);
    --rmb-nav-active-text:   #ffffff;
    --rmb-sidebar-hover-bg:  rgba(0,0,0,0.03);
    --rmb-radius:            14px;
    --rmb-img-ratio:         66%;
    --rmb-gap:               20px;
    --rmb-border-width:      0px;
    --rmb-border-color:      #e0e0e0;
    --rmb-name-size:         16px;
    --rmb-desc-size:         13px;
    --rmb-price-size:        16px;
    --rmb-cat-size:          20px;
    --rmb-sticky-top:        0px;
    --rmb-hover-y:           4px;
    --rmb-hover-scale:       1.03;
    --rmb-hover-glow:        3px;
    --rmb-sz-label:          #444444;
    --rmb-sz-price:          var(--rmb-accent);
    --rmb-sz-cal:            #999999;
    --rmb-sz-size:           13px;
    --rmb-item-sep:          0px;
    --rmb-item-sep-color:    rgba(0,0,0,0.12);
    --rmb-nav-zindex:        300;
    --rmb-sz-box-bg:         rgba(0,0,0,0.04);
    --rmb-sz-box-border:     rgba(0,0,0,0.12);
    /* v9: dropdown panel row spacing/colors — see sec_selector_box */
    --rmb-sel-opt-pad-y:      7px;
    --rmb-sel-opt-pad-x:      10px;
    --rmb-sel-opt-gap:        16px;
    --rmb-sel-opt-row-gap:    0px;
    --rmb-sel-opt-label-color: inherit;
    --rmb-sel-opt-price-color: inherit;
    /* v9: Card Size control — scales grid/list/delivery cards up or down
       without affecting the column count or gap. 1 = 100% (unchanged). */
    --rmb-card-scale: 1;

    background: var(--rmb-bg);
    color: var(--rmb-text);
    font-family: inherit;
    box-sizing: border-box;
}
.rmb-wrap *, .rmb-wrap *::before, .rmb-wrap *::after { box-sizing: inherit; }

/* ── Utility ──────────────────────────────────────────────────── */
.rmb-empty { padding: 32px; text-align: center; color: #888; }

/* ── Category Headings ────────────────────────────────────────── */
.rmb-cat-heading,
.rmb-dsection-title {
    font-size: var(--rmb-cat-size);
    font-weight: 700;
    margin: 0 0 20px;
    line-height: 1.2;
}
/* v9.4 FIX: color previously had no !important and relied on a single
   class selector. These headings are real <h2> tags (for outline/SEO
   correctness), and many themes style headings globally — e.g.
   `.entry-content h2 { color: ... }` — with 2 selector "parts" (a class +
   a tag) versus our 1 class here, which beats us on specificity even
   though our rule appears later in the stylesheet. This is the same root
   cause already found and fixed for the lightbox buttons and sidebar nav
   links (theme global styles winning ties/near-ties). Repeating the
   .rmb-wrap ancestor raises specificity further and !important removes
   any doubt, without needing to know exactly what the theme's rule looks
   like on any given site. */
.rmb-wrap .rmb-cat-heading,
.rmb-wrap .rmb-dsection-title {
    color: var(--rmb-cat-color) !important;
}
/* Separator line — ::after is fully independent of text width/alignment */
.rmb-cat-heading::after,
.rmb-dsection-title::after {
    content: '';
    display: block;
    width: 100%;
    height: 0;                          /* > 0 when Elementor sep_width is set */
    background-color: var(--rmb-accent);
    margin-top: 10px;
}

/* ── Item Name ────────────────────────────────────────────────── */
.rmb-item-name {
    font-size: var(--rmb-name-size);
    font-weight: 600;
    margin: 0 0 6px;
    color: var(--rmb-text);
    line-height: 1.3;
    transition: color 0.2s;
}

/* v9.2: badge/dietary icon library — shared 1em square sizing so an icon
   dropped into any badge (beside-name, corner, body, dietary tag) lines
   up with the surrounding text without per-context size tweaks. Colored
   via currentColor, so it always matches whichever text color applies to
   its specific badge context already (no separate icon-color control
   needed anywhere this is used). */
.rmb-icon { display: inline-flex; width: 1em; height: 1em; flex-shrink: 0; }
.rmb-icon svg { width: 100%; height: 100%; }

/* Badge shown beside the item name (Badge Position = "Beside item name")
   — a small inline chip that sits on the same line as the name, wrapping
   naturally if the name is long. Independent size/color/spacing controls
   live in Style > Badges. */
.rmb-badge-inline {
    display: inline-flex; align-items: center; gap: 4px;
    vertical-align: middle;
    font-size: var(--rmb-badge-inline-size, 0.7em);
    font-weight: 700;
    padding: var(--rmb-badge-inline-pad-y, 2px) var(--rmb-badge-inline-pad-x, 7px);
    border-radius: var(--rmb-badge-inline-radius, 20px);
    background: var(--rmb-badge-inline-bg, rgba(0,0,0,0.06));
    color: var(--rmb-badge-inline-color, #555);
    white-space: nowrap;
}
.rmb-badge-inline .rmb-icon { width: 1.1em; height: 1.1em; }
.rmb-badge-inline--new        { background: var(--rmb-badge-inline-bg, #e3f2fd); color: var(--rmb-badge-inline-color, #1565c0); }
.rmb-badge-inline--popular    { background: var(--rmb-badge-inline-bg, #fff3e0); color: var(--rmb-badge-inline-color, #e65100); }
.rmb-badge-inline--spicy      { background: var(--rmb-badge-inline-bg, #ffebee); color: var(--rmb-badge-inline-color, #c62828); }
.rmb-badge-inline--special    { background: var(--rmb-badge-inline-bg, #f3e5f5); color: var(--rmb-badge-inline-color, #6a1b9a); }
.rmb-badge-inline--bestseller { background: var(--rmb-badge-inline-bg, #fff8e1); color: var(--rmb-badge-inline-color, #f57f17); }

/* ── Description ──────────────────────────────────────────────── */
.rmb-item-desc {
    font-size: var(--rmb-desc-size);
    color: var(--rmb-desc-color);
    /* v9.4: "vertical alignment" now means true centering within a
       reserved slot, not independent top/bottom margins (which could end
       up uneven — e.g. 4px top / 12px bottom is NOT centered, just
       shifted). --rmb-desc-min-height reserves the space (0 by default =
       no reserved space, so nothing changes until it's set); the
       description text is then vertically centered inside THAT space via
       flex, so equal room shows above and below regardless of how short
       the text is. If the text is taller than the reserved space, the
       box simply grows around it and centering has no visible effect,
       exactly like centering anything else that doesn't fit its box. */
    display: flex; flex-direction: column; justify-content: center;
    min-height: var(--rmb-desc-min-height, 0px);
    text-align: var(--rmb-desc-align);
    margin: var(--rmb-desc-margin-top) 0 var(--rmb-desc-margin-bottom);
    line-height: 1.5;
}
/* v10.3: the description text is a -webkit-box (for the line clamp,
   inline style from PHP) nested inside a flex parent (.rmb-item-desc,
   used for the optional vertical-centering feature above). Flex
   containers stretch their children's cross-axis size by default, which
   fights with -webkit-box's own internal height calculation — the
   result was clientHeight coming out smaller than the text's true
   rendered height even when the clamp wasn't actually cutting anything
   off, so EVERY description looked "overflowing" to checkDescOverflow()
   in front.js regardless of its real length. align-self: flex-start
   stops the flex parent from stretching this child at all, so its
   height is determined purely by its own content/clamp, exactly as
   -webkit-line-clamp expects. */
.rmb-item-desc-text {
    overflow-wrap: break-word;
    word-wrap: break-word;
    align-self: flex-start;
    width: 100%;
}
.rmb-desc-readmore {
    font-weight: 700;
    cursor: pointer;
    color: var(--rmb-readmore-color, inherit);
    margin-left: 4px;
}
.rmb-desc-readmore:hover { opacity: 0.75; }

/* ── Note ─────────────────────────────────────────────────────── */
.rmb-item-note {
    font-size: var(--rmb-note-size);
    color: var(--rmb-note-color);
    font-style: italic;
    margin: 6px 0 0;
    line-height: 1.4;
}

/* ── Price ────────────────────────────────────────────────────── */
.rmb-price {
    font-size: var(--rmb-price-size);
    font-weight: 700;
    color: var(--rmb-price-color);
}
/* Spacing wrapper used by below_name and standalone positions */
.rmb-price-block {
    display: block;
    margin: 4px 0 8px;
}

/* ── Calories + meta ──────────────────────────────────────────── */
.rmb-item-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }

/* v9.2: shared flame icon that now precedes every calorie number on the
   menu (bottom-of-card, beside-price, per-size, dropdown box, dropdown
   list, and every external/on-image position). All calorie badges are
   flex containers so the icon and "N Cal" text line up on one baseline
   regardless of font size. Icon color inherits from each badge's own
   `color` (currentColor) so it always matches that badge's existing
   color control — no separate icon-color control needed, and it can
   never visually clash with the text next to it. */
.rmb-cal, .rmb-price-cal, .rmb-sz-cal, .rmb-selbox-cal, .rmb-selbox-cal-external {
    display: inline-flex; align-items: center; gap: var(--rmb-cal-icon-gap, 4px);
}
.rmb-cal-icon {
    width: var(--rmb-cal-icon-size, 1em); height: var(--rmb-cal-icon-size, 1em);
    flex-shrink: 0;
    /* Toggled by the "Calorie Icon" switcher in Style > Calories.
       display:none collapses the icon completely (not just opacity:0) so
       its gap doesn't leave an odd empty space when disabled. */
    display: var(--rmb-cal-icon-display, inline-block);
}
.rmb-cal       { font-size: 12px; color: var(--rmb-cal-color); }
/* v9: calorie badge beside a single flat price (List/Delivery) — mirrors
   .rmb-sz-cal's look-and-feel but styled independently. */
.rmb-price-cal { font-size: 0.8em; color: #999999; margin-left: 8px; white-space: nowrap; }

/* ── Dietary tags ─────────────────────────────────────────────── */
/* v9.2: tags are now flex containers so an icon (when Badge Display Style
   is Icon or Icon + Text) sits cleanly beside the text, or alone with the
   text node simply absent — see RMB_Renderer::dietary(). */
.rmb-tag              { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; letter-spacing: .3px; padding: 2px 7px; border-radius: 20px; background: rgba(0,0,0,0.06); color: #555; }
.rmb-tag--vegan       { background: #e8f5e9; color: #2e7d32; }
.rmb-tag--vegetarian  { background: #f1f8e9; color: #558b2f; }
.rmb-tag--gluten_free { background: #fff8e1; color: #f57f17; }
.rmb-tag--dairy_free  { background: #e3f2fd; color: #1565c0; }
.rmb-tag--halal       { background: #fce4ec; color: #880e4f; }

/* ── Sizes (plain text, no dot) ───────────────────────────────── */
.rmb-sizes {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0;
    align-items: center;
}
/* Vertical stacked */
.rmb-sizes-vertical .rmb-sizes {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
}
.rmb-size-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--rmb-sz-size);
}
/* NO dot separator — confirmed removed */
.rmb-sz-label { color: var(--rmb-sz-label); font-weight: 500; }
.rmb-sz-price { color: var(--rmb-sz-price); font-weight: 700; }
.rmb-sz-cal   { color: var(--rmb-sz-cal);   font-size: .85em; }

/* ── Badges ───────────────────────────────────────────────────── */
.rmb-badge {
    display: inline-block;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    padding: 3px 8px; border-radius: 4px; line-height: 1.4;
    background: var(--rmb-accent); color: #fff;
    white-space: nowrap; pointer-events: none; user-select: none;
}
.rmb-card-img-wrap .rmb-badge,
.rmb-row-img-wrap  .rmb-badge,
.rmb-ditem-img-wrap .rmb-badge { position: absolute; z-index: 2; }

.rmb-badge-pos-top-left    .rmb-card-img-wrap .rmb-badge,
.rmb-badge-pos-top-left    .rmb-row-img-wrap  .rmb-badge,
.rmb-badge-pos-top-left    .rmb-ditem-img-wrap .rmb-badge
    { top:10px !important; left:10px !important; right:auto !important; bottom:auto !important; }
.rmb-badge-pos-top-right   .rmb-card-img-wrap .rmb-badge,
.rmb-badge-pos-top-right   .rmb-row-img-wrap  .rmb-badge,
.rmb-badge-pos-top-right   .rmb-ditem-img-wrap .rmb-badge
    { top:10px !important; right:10px !important; left:auto !important; bottom:auto !important; }
.rmb-badge-pos-bottom-left .rmb-card-img-wrap .rmb-badge,
.rmb-badge-pos-bottom-left .rmb-row-img-wrap  .rmb-badge,
.rmb-badge-pos-bottom-left .rmb-ditem-img-wrap .rmb-badge
    { bottom:10px !important; left:10px !important; top:auto !important; right:auto !important; }
.rmb-badge-pos-bottom-right .rmb-card-img-wrap .rmb-badge,
.rmb-badge-pos-bottom-right .rmb-row-img-wrap  .rmb-badge,
.rmb-badge-pos-bottom-right .rmb-ditem-img-wrap .rmb-badge
    { bottom:10px !important; right:10px !important; top:auto !important; left:auto !important; }
.rmb-badge-body { position:static !important; margin-bottom:8px; display:inline-block; }

/* Card-corner badge: positioned relative to the WHOLE card (not just the
   image), floating above everything inside it — image, text, footer, all
   of it. .rmb-card/.rmb-row/.rmb-ditem already have position:relative. */
.rmb-badge-card-corner {
    position: absolute !important;
    z-index: 5;
    top: 10px;
}
.rmb-wrap .rmb-badge-card-corner { left: 10px; right: auto; }
/* top-right variant, driven by the SAME badge_position value chosen in Elementor */
.rmb-badge-pos-card-top-right .rmb-badge-card-corner { left: auto; right: 10px; }
.rmb-badge--new        { background:#4caf50; }
.rmb-badge--popular    { background:#ff5722; }
.rmb-badge--spicy      { background:#f44336; }
.rmb-badge--special    { background:#9c27b0; }
.rmb-badge--bestseller { background:#ff9800; }

/* ── No image ─────────────────────────────────────────────────── */
.rmb-no-img { width:100%; height:100%; min-height:80px; display:flex; align-items:center; justify-content:center; font-size:36px; background:#f5f5f5; }

/* ════════════════════════════════════════════════════════════════
   HOVER EFFECTS
════════════════════════════════════════════════════════════════ */
.rmb-card, .rmb-row, .rmb-ditem { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.rmb-hover-lift   .rmb-card:hover, .rmb-hover-lift   .rmb-row:hover, .rmb-hover-lift   .rmb-ditem:hover  { transform: translateY(calc(-1 * var(--rmb-hover-y))) !important; box-shadow: 0 calc(var(--rmb-hover-y) * 2.5) 28px rgba(0,0,0,.14) !important; }
.rmb-hover-scale  .rmb-card:hover, .rmb-hover-scale  .rmb-ditem:hover                                    { transform: scale(var(--rmb-hover-scale)) !important; box-shadow: 0 8px 24px rgba(0,0,0,.12) !important; }
.rmb-hover-glow   .rmb-card:hover, .rmb-hover-glow   .rmb-row:hover, .rmb-hover-glow   .rmb-ditem:hover  { box-shadow: 0 0 0 var(--rmb-hover-glow) var(--rmb-accent), 0 6px 20px rgba(0,0,0,.1) !important; transform: none !important; }
.rmb-hover-border .rmb-card:hover, .rmb-hover-border .rmb-row:hover, .rmb-hover-border .rmb-ditem:hover  { border-color: var(--rmb-accent) !important; box-shadow:none !important; transform:none !important; }
.rmb-hover-shadow .rmb-card:hover, .rmb-hover-shadow .rmb-row:hover, .rmb-hover-shadow .rmb-ditem:hover  { box-shadow: 0 var(--rmb-hover-y) calc(var(--rmb-hover-y)*4) rgba(0,0,0,.22) !important; transform: translateY(calc(-1 * var(--rmb-hover-y) * .4)) !important; }
.rmb-hover-none   .rmb-card:hover, .rmb-hover-none   .rmb-row:hover, .rmb-hover-none   .rmb-ditem:hover  { transform:none !important; box-shadow:inherit !important; }

/* ════════════════════════════════════════════════════════════════
   STICKY — Correct 2-stage: desktop, then mobile override
   Desktop sticky: always uses --rmb-sticky-top
   Offset: --rmb-sticky-top is a single Elementor RESPONSIVE control, so
   the correct per-breakpoint value is already resolved by real CSS media
   queries before JS reads it (see front.js activeOffset()).
   Sidebar nav: NEVER sticky on mobile (it hides at 768px anyway)
════════════════════════════════════════════════════════════════ */
.rmb-nav-wrap { position: relative; background: var(--rmb-nav-bg); z-index: var(--rmb-nav-zindex, 300); }

/* Sticky positioning is handled entirely by JS (see front.js initSticky()).
   CSS position:sticky is NOT used here because it silently breaks the moment
   ANY ancestor element (an Elementor section/container, for example) has
   overflow:hidden/auto/scroll or a transform applied — a near-universal
   situation in page-builder markup that CSS alone cannot detect or work
   around. JS toggles a fixed .rmb-js-pinned class + inline position:fixed
   styles instead, which is completely unaffected by ancestor overflow. */
.rmb-js-pinned.rmb-nav-wrap,
.rmb-js-pinned.rmb-sidebar-nav {
    /* v9.3: was a hardcoded, un-removable shadow — now driven by a CSS
       var (see Style > Navigation > "Sticky Shadow") so it can be turned
       off like every other shadow in the plugin. Defaults to the same
       shadow, so nothing changes for anyone who hasn't touched the new
       toggle yet. */
    box-shadow: var(--rmb-sticky-shadow, 0 2px 10px rgba(0,0,0,0.10));
}
.rmb-sticky-placeholder { display: block; height: 0; margin: 0; padding: 0; }
/* Pin the placeholder into the sidebar's own grid column so it can never
   disrupt the 200px/1fr two-column layout, regardless of pin state. */
.rmb-sidebar-wrap > .rmb-sticky-placeholder { grid-column: 1; grid-row: 1; }

/* ════════════════════════════════════════════════════════════════
   PILL TABS
════════════════════════════════════════════════════════════════ */
.rmb-tabs-nav {
    display: flex; flex-wrap: nowrap; gap: 6px; padding: 12px 16px;
    overflow-x: auto; scrollbar-width: none;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
}
.rmb-tabs-nav::-webkit-scrollbar { display: none; }

.rmb-tab {
    flex-shrink: 0; background: rgba(0,0,0,0.05); color: var(--rmb-nav-text);
    border: none; border-radius: 999px; /* overridable via Elementor nav_tab_radius !important */
    padding: 7px 18px; font-size: 13px; font-weight: 500;
    cursor: pointer; transition: all .15s; white-space: nowrap;
}
.rmb-tab:not(.active):hover { background: rgba(0,0,0,0.1); color: var(--rmb-nav-hover-text, var(--rmb-nav-text)); }
/* !important ensures active colours always override nav_tab_bg Elementor rule */
.rmb-tab.active {
    background: var(--rmb-nav-active-bg) !important;
    color: var(--rmb-nav-active-text) !important;
}

/* ════════════════════════════════════════════════════════════════
   SIDEBAR NAV
   Uses a fixed border-radius (8px) — NOT --rmb-radius — so it
   does NOT change when the user adjusts Card Border Radius.
════════════════════════════════════════════════════════════════ */
.rmb-sidebar-wrap { display: grid; grid-template-columns: 200px 1fr; gap: 32px; }
.rmb-sidebar-nav  { background: var(--rmb-nav-bg); border-radius: 8px; padding: 8px 0; align-self: start; position: relative; z-index: var(--rmb-nav-zindex, 300); }

.rmb-sidebar-link,
.rmb-sidebar-link:hover,
.rmb-sidebar-link:focus,
.rmb-sidebar-link:focus-visible,
.rmb-sidebar-link:active,
.rmb-sidebar-link:visited {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 16px; color: var(--rmb-nav-text);
    font-size: 14px; font-weight: 500;
    /* v9.3 FIX: many themes apply a global `a:hover { text-decoration:
       underline }` (sometimes with !important) — since the base rule
       only reset text-decoration on the resting state, that theme rule
       could still win the moment someone hovered or focused a sidebar
       link, making an underline reappear that nothing in this plugin's
       panel could turn off. Every interactive state is reset explicitly
       now, the same fix already applied to the lightbox buttons. */
    text-decoration: none !important;
    border-left: 3px solid transparent; transition: all .15s;
}
/* v9.3 FIX: hover/active tint was a hardcoded rgba(0,0,0,0.03) with no
   Elementor control — if someone set the Nav Background to match their
   page background, this faint overlay still showed through underneath
   the active/hovered link with no way to turn it off. Now driven by a
   CSS var (defaults to the same tint, so nothing changes until someone
   deliberately overrides it) — see Style > Navigation > "Hover/Inactive
   Highlight". */
.rmb-sidebar-link:hover  { color: var(--rmb-nav-hover-text, var(--rmb-accent)); background: var(--rmb-sidebar-hover-bg); }
/* v9.3 FIX: this rule used --rmb-nav-active-BG (a background variable)
   to set the TEXT color, and never referenced --rmb-nav-active-text at
   all — so "Active Tab Text Color" silently did nothing for the Sticky
   Sidebar nav style, while "Active Tab Background" was actually changing
   the wrong thing (text, not background). Both variables now do exactly
   what their control labels say, matching how Pill Tabs already worked
   correctly (see .rmb-tab.active above). */
.rmb-sidebar-link.active {
    background: var(--rmb-nav-active-bg) !important;
    color: var(--rmb-nav-active-text) !important;
    border-left-color: var(--rmb-nav-active-bg) !important;
}
.rmb-sidebar-count { font-size: 11px; color: #aaa; background: rgba(0,0,0,0.06); padding: 1px 7px; border-radius: 20px; }

@media (max-width: 768px) { .rmb-sidebar-wrap { grid-template-columns: 1fr; } .rmb-sidebar-nav { display: none; } }

/* ════════════════════════════════════════════════════════════════
   GRID LAYOUT
════════════════════════════════════════════════════════════════ */
.rmb-layout-grid .rmb-content,
.rmb-layout-list .rmb-content { padding-top: 24px; }
.rmb-cat-section              { margin-bottom: 40px; }
.rmb-cat-section.rmb-hidden   { display: none; }

.rmb-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--rmb-gap); }
@media (max-width: 768px) { .rmb-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .rmb-grid { grid-template-columns: 1fr; } }

.rmb-card {
    position: relative; /* FIX (v9): required so absolutely-positioned
       children — card-corner badges, card_bottom_left/right calorie
       badges, and the image lightbox trigger — anchor to the CARD, not to
       whichever ancestor element happens to be positioned (or the page,
       if nothing is). This is the root cause of "Bottom of card" price/
       calorie positions rendering in the wrong place. */
    background: var(--rmb-card-bg); border-radius: var(--rmb-radius);
    border: var(--rmb-border-width) solid var(--rmb-border-color);
    overflow: hidden; display: flex; flex-direction: column;
    /* v9: Card Size control. `zoom` (not `transform: scale`) is used
       deliberately — transform would leave the card's LAID-OUT box at its
       original size while only the paint shrinks/grows, causing overlap
       with neighboring cards or leftover empty space in the grid cell.
       zoom actually resizes the box in-flow, so grid/flex gaps and
       surrounding cards adjust correctly at any scale. Supported in all
       current major browsers (Firefox added support in 2024). */
    zoom: var(--rmb-card-scale, 1);
}
.rmb-card-img-wrap {
    position: relative; width: 100%; padding-bottom: var(--rmb-img-ratio);
    overflow: hidden; background: #f5f5f5;
    border-radius: var(--rmb-radius) var(--rmb-radius) 0 0; flex-shrink: 0;
}
.rmb-card-img-wrap img { position: absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.rmb-card-img-wrap .rmb-no-img { position: absolute; inset:0; min-height:unset; }
.rmb-card-body {
    /* v9.3: base 14px + optional EXTRA Content Area spacing via calc() so
       the default (0px extra) renders identically to before this update. */
    padding: calc(14px + var(--rmb-content-pad-top)) calc(14px + var(--rmb-content-pad-right)) calc(14px + var(--rmb-content-pad-bottom)) calc(14px + var(--rmb-content-pad-left));
    flex: 1; display: flex; flex-direction: column;
}
.rmb-card-foot.rmb-item-foot { justify-content: flex-start; padding-top: 12px; gap: 8px; }

/* ════════════════════════════════════════════════════════════════
   IMAGE LIGHTBOX TRIGGER (v9 / v9.1 hardened reset)
   Every item photo across all three layouts is wrapped in this <button>
   so clicking it opens the full-size lightbox (see initLightbox() in
   front.js). Reset to be visually invisible — a plain passthrough for
   whichever <img>/wrapper CSS already targets the photo directly — with
   only a cursor change and a subtle focus ring for keyboard users.

   v9.1: many themes (this plugin has been confirmed against at least one
   Elementor-based theme, but the underlying cause is generic) ship a
   "global button" stylesheet that styles the bare `button` element
   directly, often with a color accent on :hover/:focus and sometimes
   `!important`. Because that theme selector targets `button` itself
   rather than a class, its specificity can tie with — or beat — a plain
   `.rmb-lightbox-trigger` class rule, so the theme's colored border kept
   winning for every interactive state we didn't explicitly re-assert
   (hover, focus, focus-visible, active). The previous reset only handled
   the resting state, which is why a Customizer override was needed at
   all. Every state is now reset explicitly, with !important, directly in
   the plugin, so this holds on any theme without extra per-site CSS.
════════════════════════════════════════════════════════════════ */
.rmb-lightbox-trigger,
.rmb-lightbox-trigger:hover,
.rmb-lightbox-trigger:focus,
.rmb-lightbox-trigger:focus-visible,
.rmb-lightbox-trigger:focus-within,
.rmb-lightbox-trigger:active,
.rmb-lightbox-trigger:visited {
    display: block; position: absolute; inset: 0; z-index: 1;
    width: 100%; height: 100%; margin: 0 !important; padding: 0 !important;
    background: transparent !important; background-color: transparent !important;
    border: 0 !important; border-width: 0 !important; border-style: none !important; border-color: transparent !important;
    outline: none !important; box-shadow: none !important;
    border-radius: 0 !important;
    appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important;
    cursor: zoom-in;
    font: inherit; color: inherit; text-align: inherit; text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
}
/* Keyboard-only focus ring — intentionally re-added AFTER the reset block
   above (later in source order + more specific :focus-visible pseudo)
   so Tab-key navigation still gets a visible indicator, just one this
   plugin controls instead of the theme's. Mouse clicks never trigger
   :focus-visible, so hovering/clicking the photo stays borderless. */
.rmb-lightbox-trigger:focus-visible {
    outline: 2px solid var(--rmb-accent) !important; outline-offset: -2px;
}
/* List/Delivery thumbnails aren't absolutely positioned inside their wrap
   the way the Grid card image is, so the trigger there sits in normal
   flow at the thumbnail's own size instead of stretching to fill a
   position:relative parent. */
.rmb-row-img-wrap .rmb-lightbox-trigger,
.rmb-ditem-img-wrap .rmb-lightbox-trigger {
    position: static; display: inline-block; width: auto; height: auto;
    line-height: 0; /* removes the few px of inline-baseline gap under the img */
}

/* ════════════════════════════════════════════════════════════════
   LIST LAYOUT
════════════════════════════════════════════════════════════════ */
/* v9: List layout now supports a desktop columns control (like Grid Cards).
   Always rendered as a CSS grid — at the default of 1 column this looks
   and behaves identically to the original single-column flex stack, so
   no PHP-side class toggle is needed; the Elementor "Columns (Desktop
   Layout)" control simply changes --rmb-list-cols. */
.rmb-list {
    display: grid;
    grid-template-columns: repeat(var(--rmb-list-cols, 1), 1fr);
    gap: var(--rmb-gap);
    align-items: start;
}

/* ── List layout ─────────────────────────────────────────────── */
/* Item separator — a plain border-top on the box itself. Because it's
   part of the element's OWN border (not a pseudo-element poking outside
   its box), it is completely unaffected by overflow:hidden on that same
   element, and it never touches or interferes with the border-radius
   corners. The first item in a list never gets one (no preceding sibling
   to match the + selector), matching the expected "only between items"
   behaviour. */
.rmb-row + .rmb-row,
.rmb-ditem + .rmb-ditem {
    border-top: var(--rmb-item-sep) solid var(--rmb-item-sep-color);
}

.rmb-row {
    position: relative; /* FIX (v9): see .rmb-card comment — anchors
       card-corner badges and card_bottom_left/right calorie badges to
       the row itself instead of an unrelated ancestor. */
    display: flex; gap: 16px;
    padding: 16px;
    background: var(--rmb-card-bg); border-radius: var(--rmb-radius);
    border: var(--rmb-border-width) solid var(--rmb-border-color);
    overflow: hidden; /* FIX: clips children to the rounded corners so the border never appears broken */
    zoom: var(--rmb-card-scale, 1); /* v9: Card Size control — see .rmb-card comment */
}
.rmb-row-img-wrap {
    position: relative; flex-shrink: 0;
    /* FIX: center image vertically in the row */
    align-self: center;
}
.rmb-row-img, .rmb-row-img-wrap .rmb-no-img {
    width: 100px; height: 100px;
    border-radius: calc(var(--rmb-radius) * .7);
    object-fit: cover; display: block; font-size: 28px; min-height: unset;
}
.rmb-row-body {
    flex: 1; min-width: 0; display: flex; flex-direction: column;
    /* v9.3: Content Area Padding — left excluded here since the row's own
       gap (between image and body) already provides that spacing; adding
       --rmb-content-pad-left too would double it up. */
    padding: var(--rmb-content-pad-top) var(--rmb-content-pad-right) var(--rmb-content-pad-bottom) 0;
}
@media (max-width: 480px) { .rmb-row { flex-wrap: wrap; } }

/* ════════════════════════════════════════════════════════════════
   DELIVERY LAYOUT
════════════════════════════════════════════════════════════════ */
.rmb-delivery-nav {
    background: var(--rmb-nav-bg);
    border-bottom: 1px solid rgba(0,0,0,0.08);
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.rmb-delivery-nav::-webkit-scrollbar { display: none; }
.rmb-delivery-nav-inner { display: flex; gap: 6px; padding: 10px 16px; white-space: nowrap; }

.rmb-dnav-btn {
    flex-shrink: 0; background: rgba(0,0,0,0.05); color: var(--rmb-nav-text);
    border: none; border-radius: 999px;
    padding: 7px 16px; font-size: 13px; font-weight: 500;
    cursor: pointer; transition: all .15s;
}
.rmb-dnav-btn:not(.active):hover { background: rgba(0,0,0,0.1); color: var(--rmb-nav-hover-text, var(--rmb-nav-text)); }
/* !important ensures active colours override any nav_tab_bg rule */
.rmb-dnav-btn.active {
    background: var(--rmb-nav-active-bg) !important;
    color: var(--rmb-nav-active-text) !important;
}

.rmb-delivery-content { padding-top: 8px; }
.rmb-dsection { padding: 24px 0; border-bottom: 1px solid rgba(0,0,0,0.07); }
.rmb-dsection:last-child { border-bottom: none; }
/* v9: Delivery App items now also support a desktop columns control */
.rmb-ditems {
    display: grid;
    grid-template-columns: repeat(var(--rmb-list-cols, 1), 1fr);
    gap: var(--rmb-gap);
    align-items: start;
}
/* In multi-column grid mode, cards should stretch to fill their cell
   top-to-bottom (matches Grid Cards' .rmb-card sizing behaviour) rather
   than keeping their intrinsic flex-row height only. */
.rmb-ditem, .rmb-row { height: 100%; }
/* Mobile safety: multi-column List/Delivery always collapses to a single
   column below 480px, same guard Grid Cards already has, since a fixed
   multi-column grid would otherwise be unusable on a phone screen even if
   the user forgot to lower the Tablet/Mobile Columns control. */
@media (max-width: 480px) {
    .rmb-list, .rmb-ditems { grid-template-columns: 1fr !important; }
}

.rmb-ditem {
    position: relative;
    display: flex; gap: 16px; padding: 16px;
    background: var(--rmb-card-bg); border-radius: var(--rmb-radius);
    border: var(--rmb-border-width) solid var(--rmb-border-color);
    overflow: hidden; /* FIX: clips children to the rounded corners so the border never appears broken */
    zoom: var(--rmb-card-scale, 1); /* v9: Card Size control — see .rmb-card comment */
}
.rmb-ditem-body     {
    flex: 1; min-width: 0; display: flex; flex-direction: column;
    /* v9.3: left excluded — see .rmb-row-body comment above, same reasoning. */
    padding: var(--rmb-content-pad-top) var(--rmb-content-pad-right) var(--rmb-content-pad-bottom) 0;
}
.rmb-item-foot {
    display: flex; align-items: center; gap: 12px;
    margin-top: auto;      /* pushes footer to the bottom of the flex-column body */
    padding-top: 8px;
    flex-wrap: wrap;
}
.rmb-ditem-img-wrap {
    flex-shrink: 0;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    position: relative;
    /* FIX: center image vertically in the card */
    align-self: center;
}
.rmb-ditem-img, .rmb-ditem-img-wrap .rmb-no-img {
    width: 110px; height: 110px;
    border-radius: calc(var(--rmb-radius) * .7); object-fit: cover;
    font-size: 32px; min-height: unset;
}
@media (max-width: 480px) {
    .rmb-ditem-img, .rmb-ditem-img-wrap .rmb-no-img { width: 80px; height: 80px; }
}

/* ════════════════════════════════════════════════════════════════
   PRICE LAYOUTS
════════════════════════════════════════════════════════════════ */
/* v9.3: .rmb-price-{value} now lives on each CARD ROOT (.rmb-card /
   .rmb-row / .rmb-ditem) rather than on the widget-level .rmb-wrap —
   Price Position is two independent settings (single-price items vs
   multi-size items) as of v9.3, so a menu can show both position values
   across different items simultaneously; a single wrap-level class could
   never express that. Every selector below still works unchanged since
   .rmb-item-foot / .rmb-name-row / etc. are descendants of the card root
   either way — only the class's location moved, not what it targets. */
/* FIX (v9): with flex-direction:row-reverse, justify-content:flex-end pushed
   content to the visual LEFT (the reversed axis's "end" is the physical
   start), so "Bottom of card — right side" rendered on the left instead —
   the opposite of its label. Removing row-reverse and simply justifying
   the normal-order content to the end achieves the intended right-aligned
   footer without flipping the visual order of price + selector children. */
.rmb-price-footer_right .rmb-item-foot { justify-content: flex-end; }
/* "Bottom of card — left side" is the implicit default (flex-start), but
   make it explicit so it can never inherit a stray justify-content from
   another price-layout rule (e.g. .rmb-price-standalone .rmb-card-foot). */
.rmb-price-footer .rmb-item-foot { justify-content: flex-start; }

/* Menu style — name left, price right on same line */
.rmb-price-name_inline .rmb-name-row {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 12px; flex-wrap: nowrap; margin-bottom: 6px;
}
.rmb-price-name_inline .rmb-name-row .rmb-item-name { flex:1; margin-bottom:0; min-width:0; }
.rmb-price-name_inline .rmb-name-row .rmb-price,
.rmb-price-name_inline .rmb-name-row .rmb-sizes     { flex-shrink:0; }
.rmb-price-name_inline .rmb-ditem-body .rmb-name-row {
    display: flex; justify-content: space-between; align-items: baseline; gap:12px; margin-bottom:6px;
}
.rmb-price-name_inline .rmb-ditem-body .rmb-name-row .rmb-item-name { flex:1; min-width:0; margin-bottom:0; }

/* Image overlay price badge */
.rmb-price-on-img {
    position: absolute; bottom:10px; right:10px; z-index:3;
    background: var(--rmb-accent); color: #fff;
    font-size:13px; font-weight:700; padding:4px 12px; border-radius:999px;
    line-height:1.3; white-space:nowrap; pointer-events:none;
}
.rmb-row-img-wrap .rmb-price-on-img { font-size:11px; padding:2px 8px; bottom:6px; right:6px; }
.rmb-card-img-wrap, .rmb-row-img-wrap, .rmb-ditem-img-wrap { position: relative; }

/* Standalone centred price block */
.rmb-price-standalone-block {
    text-align:center; padding:10px 0 12px;
    border-top:1px solid rgba(0,0,0,0.06); border-bottom:1px solid rgba(0,0,0,0.06);
    margin:8px 0;
}
.rmb-price-standalone .rmb-price-standalone-block .rmb-price { font-size:calc(var(--rmb-price-size)*1.4); display:block; }
.rmb-price-standalone .rmb-price-standalone-block .rmb-sizes { justify-content:center; }
.rmb-price-standalone .rmb-card-foot { justify-content:center; }

/* ════════════════════════════════════════════════════════════════
   SIZES VISUAL STYLE
   Class on .rmb-wrap: rmb-szstyle-{plain|divided|boxed|table}
   "plain" needs no extra CSS — it's the existing default .rmb-size-row look.
════════════════════════════════════════════════════════════════ */

/* ── Divided: thin line between each size (direction-aware) ─────── */
.rmb-szstyle-divided.rmb-sizes-horizontal .rmb-size-row + .rmb-size-row {
    border-left: 1px solid rgba(0,0,0,0.12);
    padding-left: 8px;
}
.rmb-szstyle-divided.rmb-sizes-vertical .rmb-size-row + .rmb-size-row {
    border-top: 1px solid rgba(0,0,0,0.12);
    padding-top: 6px;
    margin-top: 2px;
}

/* ── Boxed: each size as a small bordered chip ───────────────────── */
.rmb-szstyle-boxed .rmb-size-row {
    background: var(--rmb-sz-box-bg);
    border: 1px solid var(--rmb-sz-box-border);
    border-radius: 8px;
    padding: 5px 12px;
}

/* ── Table: receipt-style rows — label left, price right, full width ── */
.rmb-szstyle-table .rmb-sizes {
    flex-direction: column !important;
    width: 100%;
}
.rmb-szstyle-table .rmb-size-row {
    display: flex !important;
    justify-content: space-between;
    align-items: baseline;
    width: 100%;
    padding: 5px 0;
    border-bottom: 1px dashed var(--rmb-sz-box-border);
}
.rmb-szstyle-table .rmb-size-row:last-child { border-bottom: none; }
.rmb-szstyle-table .rmb-sz-label { flex: 1; }
.rmb-szstyle-table .rmb-sz-price { flex-shrink: 0; margin-left: 12px; }
.rmb-szstyle-table .rmb-sz-cal   { flex-shrink: 0; margin-left: 8px; }

/* ════════════════════════════════════════════════════════════════
   LIST VIEW — Dedicated size/price column
   Used automatically when Layout=List, Price Position="Menu style"
   (name_inline), and the item has 2+ sizes. Instead of cramming a
   price range next to the name (which overlaps on long names), the
   right side of the row becomes its own vertical column — one line
   per size, cleanly stacked, with room for 3+ sizes to breathe.
════════════════════════════════════════════════════════════════ */
.rmb-row--sizes-col {
    align-items: stretch;
}
.rmb-row-sizes-col {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-width: 92px;
    padding-left: 14px;
    margin-left: 4px;
    border-left: 1px solid rgba(0,0,0,0.08);
    text-align: right;
}
.rmb-row-sizes-col .rmb-size-row {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    line-height: 1.25;
}
.rmb-row-sizes-col .rmb-sz-label { font-size: 11px; opacity: .75; }
.rmb-row-sizes-col .rmb-sz-price { font-size: var(--rmb-sz-size); }
.rmb-row-sizes-col .rmb-sz-cal   { font-size: 10px; }

/* ════════════════════════════════════════════════════════════════
   INTERACTIVE SELECTOR BOX (sizes_style = "dropdown")
   One box shows the CURRENTLY selected size's label + price. Clicking
   it opens a dropdown listing every size; clicking an option updates
   the box and closes the panel. Calories can render inside the box,
   below/beside it, on the image, or pinned to a corner of the card.
════════════════════════════════════════════════════════════════ */
.rmb-selbox { position: relative; display: inline-block; }

.rmb-selbox-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid #ddd; border-radius: 8px;
    padding: 8px 14px; cursor: pointer;
    font: inherit; color: inherit;
    line-height: 1.2;
}
div.rmb-selbox-btn { cursor: default; } /* single-size items render a <div>, not clickable */

.rmb-selbox-label { font-size: 0.85em; opacity: .75; }
.rmb-selbox-price { font-weight: 700; }
.rmb-selbox-cal    { font-size: 0.8em; opacity: .7; margin-left: 4px; }
.rmb-selbox-arrow  { flex-shrink: 0; transition: transform .15s; }
.rmb-selbox-btn[aria-expanded="true"] .rmb-selbox-arrow { transform: rotate(180deg); }

.rmb-selbox-list {
    position: absolute; z-index: 40;
    top: calc(100% + 4px); left: 0;
    min-width: 100%; max-height: 220px; overflow-y: auto;
    margin: 0; padding: 4px; list-style: none;
    background: #fff; border: 1px solid #e0e0e0; border-radius: 8px;
    /* v9.3 FIX: removed the hardcoded box-shadow that used to live here —
       it made the "Panel Shadow" switcher in Style > Selector Box
       incapable of ever actually turning the shadow off, since this rule
       kept applying underneath regardless of the toggle's state. The
       Elementor control now owns box-shadow entirely (defaults to the
       same shadow, so nothing changes for anyone who hasn't touched the
       toggle yet). */
}
.rmb-selbox-list[hidden] { display: none; }

/* Dropdown-panel row defaults — overridable via Elementor (v9: sec_selector_box) */
.rmb-selbox-option {
    display: flex; justify-content: space-between; align-items: center;
    gap: var(--rmb-sel-opt-gap, 16px);
    padding: var(--rmb-sel-opt-pad-y, 7px) var(--rmb-sel-opt-pad-x, 10px);
    margin-bottom: var(--rmb-sel-opt-row-gap, 0px);
    border-radius: 6px;
    cursor: pointer; white-space: nowrap;
    font-size: 0.92em;
}
.rmb-selbox-option:last-child { margin-bottom: 0; }
.rmb-selbox-option:hover { background: #f5f5f5; }
.rmb-selbox-option.active { font-weight: 700; }
.rmb-selbox-opt-label { color: var(--rmb-sel-opt-label-color, inherit); }
.rmb-selbox-opt-price { flex-shrink: 0; color: var(--rmb-sel-opt-price-color, inherit); }

/* External calorie badge — position variants */
.rmb-selbox-cal-external {
    font-size: 12px; color: #999;
}
.rmb-selbox-cal-pos-below_box  { display: block; margin-top: 4px; }
.rmb-selbox-cal-pos-beside_box { display: inline-block; margin-left: 10px; vertical-align: middle; }

.rmb-selbox-cal-pos-on_image,
.rmb-selbox-cal-pos-card_bottom_left,
.rmb-selbox-cal-pos-card_bottom_right {
    position: absolute; z-index: 4;
    background: rgba(0,0,0,0.65); color: #fff;
    padding: 2px 8px; border-radius: 999px;
    line-height: 1.4;
}
.rmb-selbox-cal-pos-on_image          { bottom: 8px; left: 8px; }
.rmb-selbox-cal-pos-card_bottom_left  { bottom: 10px; left: 10px; }
.rmb-selbox-cal-pos-card_bottom_right { bottom: 10px; right: 10px; }

/* Empty external badge (e.g. selected size has no calorie value) collapses cleanly */
.rmb-selbox-cal-external:empty { display: none; }

/* ════════════════════════════════════════════════════════════════
   IMAGE LIGHTBOX OVERLAY (v9)
   Single shared overlay per page, injected once by front.js and reused
   for every .rmb-wrap instance — opens full-screen on photo click, closes
   via the [X] button, a click on the dark backdrop, or the Escape key.
════════════════════════════════════════════════════════════════ */
.rmb-lightbox-overlay {
    position: fixed; inset: 0; z-index: 100000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.9);
    padding: 40px;
    opacity: 0; visibility: hidden;
    transition: opacity .2s ease;
}
.rmb-lightbox-overlay.rmb-lightbox-open { opacity: 1; visibility: visible; }
.rmb-lightbox-img {
    max-width: 100%; max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
    /* v9.3: removed the hardcoded shadow here — this element is a single
       shared overlay appended once to document.body for the whole page
       (see getLightbox() in front.js), not scoped to any one widget
       instance, so it can't be wired to a per-widget Elementor toggle the
       way every other shadow in this plugin now is. Simplest correct fix
       is removing it outright rather than leaving an un-removable one. */
}
/* v9.1: hardened the same way as .rmb-lightbox-trigger above — this
   button is appended directly to document.body (outside .rmb-wrap
   entirely, see getLightbox() in front.js), so it has NO ancestor
   scoping to help it beat a theme's global `button` styles. Every
   interactive state is reset explicitly with !important. */
.rmb-lightbox-close,
.rmb-lightbox-close:hover,
.rmb-lightbox-close:focus,
.rmb-lightbox-close:focus-visible,
.rmb-lightbox-close:active,
.rmb-lightbox-close:visited {
    position: absolute; top: 18px; right: 18px;
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.12) !important; background-image: none !important;
    border: 0 !important; border-width: 0 !important; border-style: none !important; border-color: transparent !important;
    border-radius: 50% !important;
    outline: none !important; box-shadow: none !important;
    appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important;
    color: #fff !important; cursor: pointer;
    text-decoration: none !important;
    margin: 0 !important; padding: 0 !important;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s;
}
.rmb-lightbox-close:hover, .rmb-lightbox-close:focus-visible {
    background: rgba(255,255,255,0.25) !important;
}
.rmb-lightbox-close:focus-visible {
    outline: 2px solid #fff !important; outline-offset: 2px;
}
.rmb-lightbox-close svg { width: 20px; height: 20px; pointer-events: none; }
@media (max-width: 600px) {
    .rmb-lightbox-overlay { padding: 16px; }
    .rmb-lightbox-close { top: 10px; right: 10px; width: 38px; height: 38px; }
}

/* ════════════════════════════════════════════════════════════════
   CAROUSEL LAYOUT (v10.4 — additive, new)
   Cards inside .rmb-carousel-track are the SAME .rmb-card markup Grid
   Cards uses, so every existing card control (hover, badges, price
   position, sizes, dietary…) already works here unchanged. Only the
   wrapper differs: a horizontally-scrollable flex row with scroll-snap
   instead of a CSS grid, plus optional arrows / progress bar / CTA.
   ════════════════════════════════════════════════════════════════ */
.rmb-carousel-list { display: flex; flex-direction: column; gap: 40px; }
.rmb-carousel-section { width: 100%; }
.rmb-carousel-heading { font-size: var(--rmb-cat-size); margin: 0 0 14px; }

.rmb-carousel-viewport { position: relative; }

.rmb-carousel-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    /* v10.8: Rows control — default 1 behaves exactly like the previous
       flex row (single column-flow line); at 2 or 3, cards stack top-to-
       bottom within each column before the grid moves to the next column,
       so Prev/Next/autoslide (which step by one column's width — see
       stepSize() in front.js) advance a whole row-group at a time. */
    grid-template-rows: repeat( var( --rmb-carousel-rows, 1 ), auto );
    gap: var(--rmb-gap);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity; /* not "mandatory" — mandatory fights with the
        autoslide JS's own scrollTo() mid-animation and visibly flickers as the
        browser re-snaps to the nearest point while the script is still moving it */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox — the progress bar below is the visual scrollbar */
    -ms-overflow-style: none;
    padding: 2px; /* keeps hover lift/shadow from clipping on the track edge */
}
.rmb-carousel-track::-webkit-scrollbar { display: none; }

.rmb-carousel-track .rmb-card {
    width: 190px; /* overridden responsively by the Slide Width control */
    scroll-snap-align: start;
    /* v10.14 FIX: this used to force align-self: start on every card,
       which was meant to stop 2/3-Row layouts from stretching oddly
       across unrelated columns — but it ALSO disabled CSS Grid's own
       built-in, automatic equal-height behavior for the normal 1-Row
       case (align-items: stretch is Grid's default; every card in the
       same grid row naturally matches the tallest one in that row for
       free, no JS required). That's exactly why cards stopped lining
       up in height once this rule was added, regardless of what the
       Reserved Height for Centering control was set to — it was
       fighting Grid's own natural fix for this. Now left as the Grid
       default (stretch) in all cases, including 2/3-Row layouts — a
       card being slightly taller than its own content strictly needs
       is a much smaller concern than cards not lining up at all, and
       Rows is a responsive setting (can differ per breakpoint), so a
       static per-row-count opt-out here couldn't track that correctly
       anyway. */
}

/* v10.9: Continuous Marquee mode — driven by raw scrollLeft assignment every
   animation frame (see initMarquee() in front.js), NOT scrollTo()/scrollBy().
   scroll-snap-type must be off here for the same reason it was softened to
   "proximity" for Step mode earlier: any snapping fights a script that's
   actively moving scrollLeft itself, causing stutter. Marquee doesn't need
   snap points at all since it never stops on a "page". */
.rmb-carousel--marquee .rmb-carousel-track {
    scroll-snap-type: none;
    cursor: default;
}

.rmb-carousel-arrow {
    position: absolute; top: 40%; transform: translateY(-50%);
    width: 36px; height: 36px; border-radius: 50% !important;
    display: flex !important; align-items: center; justify-content: center;
    margin: 0 !important; padding: 0 !important; line-height: 0 !important;
    background: #ffffff !important; background-color: #ffffff !important; color: #1a1a1a !important;
    border: 0 !important; border-width: 0 !important; border-style: none !important; border-color: transparent !important;
    outline: none !important; box-shadow: 0 2px 10px rgba(0,0,0,.18) !important;
    appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important;
    cursor: pointer; z-index: 5; transition: opacity .2s ease, transform .2s ease;
}
.rmb-carousel-arrow:hover, .rmb-carousel-arrow:focus, .rmb-carousel-arrow:focus-visible, .rmb-carousel-arrow:active {
    background: #ffffff !important; color: #1a1a1a !important; outline: none !important;
}
.rmb-carousel-arrow:focus-visible { outline: 2px solid var(--rmb-accent) !important; outline-offset: 2px; }
.rmb-carousel-arrow svg { width: 45%; height: 45%; display: block; pointer-events: none; }
.rmb-carousel-arrow:hover { transform: translateY(-50%) scale(1.06); }
.rmb-carousel-arrow--prev { left: 8px; }
.rmb-carousel-arrow--next { right: 8px; }
.rmb-carousel-arrow.rmb-carousel-arrow--disabled { opacity: .35; pointer-events: none; }

.rmb-carousel-progress {
    position: relative; width: 100%; height: 4px; border-radius: 999px;
    background: rgba(0,0,0,.1); margin-top: 12px; overflow: hidden;
}
.rmb-carousel-progress-thumb {
    position: absolute; top: 0; left: 0; height: 100%; border-radius: inherit;
    background: var(--rmb-accent);
    transition: left .15s ease, width .15s ease;
}

.rmb-cta-align-wrap { display: flex; justify-content: flex-start; }
.rmb-cta-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: #1a1a1a; color: #ffffff; text-decoration: none;
    padding: 14px 20px; border-radius: 10px; margin-top: 16px;
    font-weight: 600; white-space: nowrap;
    transition: background .2s ease;
}
.rmb-cta-btn:hover { color: #ffffff; }
.rmb-cta-arrow { display: inline-block; transition: transform .2s ease; }
.rmb-cta-btn:hover .rmb-cta-arrow { transform: translateX(4px); }

@media (max-width: 480px) {
    .rmb-carousel-arrow { width: 30px; height: 30px; }
}
/* v10.6: independent Desktop vs Mobile arrow visibility. Arrows are
   always rendered in the HTML if either toggle is on (JS still needs
   them in the DOM); these two rules just hide them at the breakpoint
   the person turned off, matching the same 767px mobile cutoff the
   rest of the plugin's responsive CSS already uses. */
@media (min-width: 768px) {
    .rmb-carousel-arrow.rmb-arrow-hide-desktop { display: none !important; }
}
@media (max-width: 767px) {
    .rmb-carousel-arrow.rmb-arrow-hide-mobile { display: none !important; }
}