/* ── RestaurantMenu: Public menu view styles ─────────────────────────────── */
:root {
    --rmv-primary:  #e53935;
    --rmv-bg:       #f9f7f5;
    --rmv-surface:  #ffffff;
    --rmv-text:     #1a1a1a;
    --rmv-muted:    #666666;
    --rmv-border:   #ececec;
    --rmv-radius:   10px;
    --rmv-font:     'Segoe UI', system-ui, sans-serif;
    /* scale & density — overridden via inline style from DesignConfig */
    --rmv-fscale:   1;
    --rmv-density:  1;
}

/* Theme overrides */
[data-theme="dark"]   { --rmv-bg:#121212; --rmv-surface:#1e1e1e; --rmv-text:#f0f0f0; --rmv-muted:#aaa; --rmv-border:#333; }
[data-theme="fresh"]  { --rmv-primary:#2e7d32; }
[data-theme="ocean"]  { --rmv-primary:#0277bd; }
[data-theme="luxury"] { --rmv-primary:#ad9350; --rmv-bg:#111; --rmv-surface:#1a1a1a; --rmv-text:#e8d98e; --rmv-muted:#b0a070; --rmv-border:#333; }
[data-theme="kawaii"] { --rmv-primary:#e91e8c; }
[data-theme="retro"]  { --rmv-bg:#fdf6e3; --rmv-surface:#fef9f0; --rmv-primary:#c62300; }

/* ── Templates ───────────────────────────────────────────────────────────── */

/* Classic — warm white, rounded cards (default) */
[data-template="classic"] {
    --rmv-primary: #e53935; --rmv-bg: #f9f7f5; --rmv-surface: #ffffff;
    --rmv-text: #1a1a1a; --rmv-muted: #666; --rmv-border: #ececec;
    --rmv-radius: 10px; --rmv-font: 'Segoe UI', system-ui, sans-serif;
}

/* Dark — navy, golden amber accent */
[data-template="dark"] {
    --rmv-primary: #f5a623; --rmv-bg: #1a1a2e; --rmv-surface: #16213e;
    --rmv-text: #e8e8e8; --rmv-muted: #9e9e9e; --rmv-border: #2e2e4e;
    --rmv-radius: 8px; --rmv-font: 'Segoe UI', system-ui, sans-serif;
}
[data-template="dark"] .rmv-tag          { background: #1e2a3a; }
[data-template="dark"] .rmv-cat-nav-link { color: #aaa; }

/* Elegant — dark gold, warm luxury */
[data-template="elegant"] {
    --rmv-primary: #8b6914; --rmv-bg: #1c1610; --rmv-surface: #251e15;
    --rmv-text: #f0e6d0; --rmv-muted: #b09070; --rmv-border: #3a3020;
    --rmv-radius: 4px; --rmv-font: Georgia, 'Palatino Linotype', serif;
}
[data-template="elegant"] .rmv-tag          { background: #2e2418; color: #c8a860; }
[data-template="elegant"] .rmv-cat-nav-link { color: #c8a860; }
[data-template="elegant"] .rmv-business-name,
[data-template="elegant"] .rmv-menu-title   { font-style: italic; }

/* Modern — blue, clean lines */
[data-template="modern"] {
    --rmv-primary: #1565c0; --rmv-bg: #f0f4ff; --rmv-surface: #ffffff;
    --rmv-text: #0d1b2a; --rmv-muted: #546e7a; --rmv-border: #d0dce8;
    --rmv-radius: 12px; --rmv-font: 'Segoe UI', system-ui, sans-serif;
}
[data-template="modern"] .rmv-item       { box-shadow: 0 2px 8px rgba(21,101,192,.08); }
[data-template="modern"] .rmv-cat-title  { color: #1565c0; }

/* Colorful — purple / violet accents */
[data-template="colorful"] {
    --rmv-primary: #7b1fa2; --rmv-bg: #fff8fe; --rmv-surface: #ffffff;
    --rmv-text: #1a0027; --rmv-muted: #7e57c2; --rmv-border: #e8d5f5;
    --rmv-radius: 14px; --rmv-font: 'Segoe UI', system-ui, sans-serif;
}
[data-template="colorful"] .rmv-item       { box-shadow: 0 2px 10px rgba(123,31,162,.08); }
[data-template="colorful"] .rmv-cat-title  { color: #7b1fa2; }

/* Bistro — linen warmth, serif, rustic corners */
[data-template="bistro"] {
    --rmv-primary: #8b4513; --rmv-bg: #f5ede0; --rmv-surface: #fffdf8;
    --rmv-text: #2c1a0e; --rmv-muted: #7a6550; --rmv-border: #ddd0b8;
    --rmv-radius: 4px; --rmv-font: Georgia, 'Palatino Linotype', serif;
}
[data-template="bistro"] .rmv-business-name,
[data-template="bistro"] .rmv-menu-title    { font-style: italic; }
[data-template="bistro"] .rmv-cat-title     { font-style: italic; border-bottom: 1px solid var(--rmv-border); padding-bottom: 8px; }

/* Minimal — white, black, no card borders */
[data-template="minimal"] {
    --rmv-primary: #222222; --rmv-bg: #ffffff; --rmv-surface: #fafafa;
    --rmv-text: #111111; --rmv-muted: #888; --rmv-border: #dddddd;
    --rmv-radius: 0; --rmv-font: 'Helvetica Neue', Arial, sans-serif;
}
[data-template="minimal"] .rmv-item             { border: none; border-bottom: 1px solid var(--rmv-border); border-radius: 0; padding: 16px 0; box-shadow: none !important; }
[data-template="minimal"] .rmv-item:last-child   { border-bottom: none; }
[data-template="minimal"] .rmv-items-grid        { gap: 0; }
[data-template="minimal"] .rmv-cat-nav-link      { border-radius: 0; }
[data-template="minimal"] .rmv-header            { border-bottom: 2px solid #111; }

/* Street Food — bold orange, uppercase energy */
[data-template="street"] {
    --rmv-primary: #ff5722; --rmv-bg: #fafafa; --rmv-surface: #ffffff;
    --rmv-text: #1a1a1a; --rmv-muted: #666; --rmv-border: #f0f0f0;
    --rmv-radius: 6px; --rmv-font: 'Arial Black', 'Arial Bold', sans-serif;
}
[data-template="street"] .rmv-item-name { text-transform: uppercase; letter-spacing: .03em; font-size: 1rem; }
[data-template="street"] .rmv-cat-title { text-transform: uppercase; letter-spacing: .12em; font-size: 1rem; }
[data-template="street"] .rmv-item      { border-left: 3px solid var(--rmv-primary); border-radius: 0 var(--rmv-radius) var(--rmv-radius) 0; }

/* Luxury — black & gold, refined spacing */
[data-template="luxury"] {
    --rmv-primary: #c9a84c; --rmv-bg: #080808; --rmv-surface: #121212;
    --rmv-text: #f0e6c8; --rmv-muted: #9a8a6a; --rmv-border: #222;
    --rmv-radius: 2px; --rmv-font: Georgia, 'Times New Roman', serif;
}
[data-template="luxury"] .rmv-header            { background: #000; border-bottom-color: #1a1a1a; }
[data-template="luxury"] .rmv-cat-title         { color: var(--rmv-primary); letter-spacing: .15em; text-transform: uppercase; font-size: .9rem; }
[data-template="luxury"] .rmv-tag               { background: #1a1a1a; color: var(--rmv-primary); }
[data-template="luxury"] .rmv-cat-nav-link.active { color: #000; }
[data-template="luxury"] .rmv-item-price        { letter-spacing: .05em; }

/* Vintage — double borders, dark textured look, and block price badges */
[data-template="vintage"] {
    --rmv-primary: #e8c373; --rmv-bg: #141311; --rmv-surface: #1b1916;
    --rmv-text: #f5ebd5; --rmv-muted: #a0957f; --rmv-border: #8b6d37;
    --rmv-radius: 12px; --rmv-font: Georgia, 'Playfair Display', serif;
}
[data-template="vintage"] .rmv-main {
    border: 1px solid var(--rmv-border);
    border-radius: var(--rmv-radius);
    padding: 24px;
    background: #0d0c0a;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    margin-top: 20px;
    margin-bottom: 20px;
}
[data-template="vintage"] .rmv-header {
    background: transparent;
    border-bottom: none;
    padding-bottom: 0;
}
[data-template="vintage"] .rmv-category {
    background: var(--rmv-surface);
    border: 3px double var(--rmv-border);
    border-radius: var(--rmv-radius);
    padding: 10px 16px 20px;
    margin-bottom: 24px;
}
[data-template="vintage"] .rmv-cat-title {
    color: var(--rmv-primary);
    text-align: center;
    font-size: calc(1.35rem * var(--rmv-fscale, 1));
    font-family: Georgia, 'Playfair Display', serif;
    font-style: italic;
    border-bottom: 1px solid var(--rmv-border);
    padding-bottom: 10px;
    margin-bottom: 16px;
}
[data-template="vintage"] .rmv-item {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none !important;
    border-bottom: 1px dashed rgba(139, 109, 55, 0.35);
    padding: 12px 0;
    margin: 0;
}
[data-template="vintage"] .rmv-item:last-child {
    border-bottom: none;
}
[data-template="vintage"] .rmv-item-price {
    background: var(--rmv-primary);
    color: var(--rmv-bg);
    padding: 4px 12px;
    border-radius: 4px;
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-weight: 700;
    font-size: calc(0.95rem * var(--rmv-fscale, 1));
    display: inline-block;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
[data-template="vintage"] .rmv-business-name {
    color: var(--rmv-primary);
    font-family: Georgia, 'Playfair Display', serif;
    font-style: italic;
    font-weight: 700;
    font-size: calc(2.4rem * var(--rmv-fscale, 1));
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
[data-template="vintage"] .rmv-menu-title {
    color: var(--rmv-primary);
    font-family: Georgia, 'Playfair Display', serif;
    font-style: italic;
}
[data-template="vintage"] .rmv-tag {
    background: rgba(232, 195, 115, 0.1);
    color: var(--rmv-primary);
    border: 1px solid rgba(232, 195, 115, 0.2);
}
[data-template="vintage"] .rmv-variant-chip {
    background: transparent;
    color: var(--rmv-text);
    border: 1px solid rgba(232, 195, 115, 0.3);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--rmv-font, 'Segoe UI', system-ui, sans-serif); background: var(--rmv-bg); color: var(--rmv-text); }
a    { color: var(--rmv-primary); text-decoration: none; }

/* Demo banner */
.rmv-demo-banner {
    position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
    height: 36px; display: flex; align-items: center; justify-content: center;
    gap: 0.4rem; flex-wrap: wrap;
    background: #fff3cd; border-bottom: 1px solid #ffc107;
    color: #856404; font-size: 0.8rem; padding: 0 1rem;
}
.rmv-demo-banner a      { color: #856404; font-weight: 700; text-decoration: underline; margin-left: 0.3rem; }
.rmv-demo-sep           { opacity: 0.6; }
body.rmv-has-demo-banner { padding-top: 36px; }

/* Header */
.rmv-header {
    background: var(--rmv-surface); border-bottom: 1px solid var(--rmv-border);
    text-align: center; padding: 24px 20px 16px;
}
.rmv-logo          { max-height: 72px; border-radius: 12px; margin-bottom: 12px; }
.rmv-business-name { font-size: 1.6rem; font-weight: 800; line-height: 1.2; }
.rmv-address, .rmv-phone { color: var(--rmv-muted); margin-top: 4px; font-size: .9rem; }
.rmv-phone a { color: var(--rmv-muted); }

/* Menu title */
.rmv-menu-title-wrap { text-align: center; padding: 20px 20px 12px; }
.rmv-menu-title      { font-size: 1.3rem; font-weight: 700; color: var(--rmv-primary); margin: 0; }
.rmv-menu-subtitle   { color: var(--rmv-muted); font-size: .9rem; margin: 4px 0 0; }

/* Language toggler bar */
.rmv-lang-bar { display: flex; justify-content: center; gap: 6px; padding: 0 16px 10px; flex-wrap: wrap; }
.rmv-lang-btn {
    padding: 3px 14px; border-radius: 20px;
    border: 1px solid var(--rmv-border);
    background: transparent; color: var(--rmv-muted);
    font-size: .78rem; font-weight: 600; letter-spacing: .04em;
    cursor: pointer; text-decoration: none; line-height: 1.8;
    transition: background .15s, color .15s;
}
.rmv-lang-btn:hover { background: var(--rmv-surface); color: var(--rmv-text); }
.rmv-lang-btn--active {
    background: var(--rmv-primary); color: #fff !important;
    border-color: var(--rmv-primary);
}

/* Category nav */
.rmv-cat-nav {
    position: sticky; top: 0; z-index: 100;
    background: var(--rmv-surface); border-bottom: 1px solid var(--rmv-border);
    overflow: hidden; padding: 0 8px;
}
.rmv-cat-nav-inner {
    display: flex; gap: 4px; overflow-x: auto; padding: 8px 8px;
    justify-content: safe center;
    scrollbar-width: none;
}
.rmv-cat-nav-inner::-webkit-scrollbar { display: none; }
.rmv-cat-nav-link {
    white-space: nowrap; padding: 6px 14px; border-radius: 20px;
    font-size: .85rem; color: var(--rmv-muted); font-weight: 500;
    background: transparent; transition: all .15s;
}
.rmv-cat-nav-link:hover, .rmv-cat-nav-link.active {
    background: var(--rmv-primary); color: #fff; text-decoration: none;
}

/* Main */
.rmv-main { padding: 16px; max-width: 860px; margin: 0 auto; }

/* Category section */
.rmv-category      { margin-bottom: 32px; scroll-margin-top: 52px; }
.rmv-cat-title     { font-size: 1.2rem; font-weight: 800; margin: 0 0 12px; color: var(--rmv-text); }
.rmv-cat-desc      { color: var(--rmv-muted); font-size: .9rem; margin: 0 0 14px; }

/* Category divider — opt-in via data-cat-divider="1" on body */
[data-cat-divider="1"] .rmv-cat-title { border-bottom: 2px solid var(--rmv-primary); padding-bottom: 8px; }

/* Items grid */
.rmv-items-grid {
    display: grid; grid-template-columns: 1fr;
    gap: 10px;
}
@media (min-width: 600px) {
    .rmv-items-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Item card */
.rmv-item {
    background: var(--rmv-surface); border: 1px solid var(--rmv-border);
    border-radius: var(--rmv-radius); padding: 14px;
    transition: box-shadow .15s;
    display: flex; gap: 12px; align-items: flex-start;
    cursor: pointer;
}
/* Item image */
.rmv-item-img-wrap { flex-shrink: 0; }
.rmv-item-img      { object-fit: cover; border-radius: calc(var(--rmv-radius) - 2px); display: block; }
.rmv-item-img--sm  { width: 56px;  height: 56px; }
.rmv-item-img--md  { width: 80px;  height: 80px; }
.rmv-item-img--lg  { width: 120px; height: 120px; }
.rmv-item-body     { flex: 1; min-width: 0; }
.rmv-item:hover          { box-shadow: 0 4px 16px rgba(0,0,0,.09); }
.rmv-item-featured       { border-color: var(--rmv-primary); }
.rmv-item-header         { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 4px; }
.rmv-item-name           { font-weight: 700; font-size: .95rem; }
.rmv-item-price          { white-space: nowrap; font-weight: 700; color: var(--rmv-primary); font-size: .95rem; flex-shrink: 0; }
.rmv-price-orig          { text-decoration: line-through; color: var(--rmv-muted); font-weight: 400; margin-right: 4px; font-size: .85rem; }
.rmv-item-desc           { color: var(--rmv-muted); font-size: .85rem; margin: 0 0 8px; }
.rmv-badge-featured      { font-size: .7rem; background: transparent; color: #f5a623; border: 1px solid rgba(245,166,35,.45); border-radius: 20px; padding: 0 6px; }

/* Tags */
.rmv-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.rmv-tag  { padding: 2px 8px; background: var(--rmv-border); border-radius: 20px; font-size: .75rem; color: var(--rmv-muted); }

/* Variants */
.rmv-variants       { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.rmv-variants-label { font-size: .78rem; color: var(--rmv-muted); font-weight: 600; white-space: nowrap; }
.rmv-variant-chip   { padding: 2px 9px; background: var(--rmv-surface); border: 1px solid var(--rmv-border);
                       border-radius: 20px; font-size: .75rem; color: var(--rmv-text); white-space: nowrap; }
.rmv-variant-chip--unavail { opacity: .4; text-decoration: line-through; }

/* Meta row */
.rmv-item-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: .8rem; color: var(--rmv-muted); }
.rmv-item-meta i { margin-right: 3px; }
.rmv-allergens   { color: #ef6c00; }

/* Footer */
.rmv-footer {
    text-align: center; padding: 24px 16px;
    border-top: 1px solid var(--rmv-border); margin-top: 16px;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.rmv-social-links { display: flex; flex-direction: row; gap: 8px; }
.rmv-social-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%; background: var(--rmv-border);
    color: var(--rmv-text); font-size: 1.1rem;
    transition: background .15s;
}
.rmv-social-link:hover { background: var(--rmv-primary); color: #fff; }
.rmv-footer-credit     { color: var(--rmv-muted); font-size: .8rem; margin: 0; }
.rmv-footer-note {
    color: var(--rmv-muted); font-size: .85rem; margin: 0;
    max-width: 560px; text-align: center;
}

/* Cover image */
.rmv-cover-wrap { width: 100%; overflow: hidden; max-height: 260px; margin-bottom: 1.5rem; }
.rmv-cover-img  { width: 100%; height: 100%; object-fit: cover; display: block; max-height: 260px; }

/* Announcement banner */
.rmv-announcement-banner {
    background: var(--rmv-primary); color: #fff;
    text-align: center; padding: 10px 20px;
    font-size: .9rem; font-weight: 600;
}

/* Back to top */
.rmv-back-to-top {
    position: fixed; bottom: 20px; right: 20px;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--rmv-primary); color: #fff; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,.2); opacity: 0; transition: opacity .2s;
    pointer-events: none;
}
.rmv-back-to-top.show { opacity: 1; pointer-events: auto; }

/* ── Font scale (applied via --rmv-fscale CSS var set inline from DesignConfig) ─── */
.rmv-business-name { font-size: calc(1.6rem  * var(--rmv-fscale, 1)); }
.rmv-menu-title    { font-size: calc(1.3rem  * var(--rmv-fscale, 1)); }
.rmv-cat-title     { font-size: calc(1.2rem  * var(--rmv-fscale, 1)); }
.rmv-item-name     { font-size: calc(.95rem  * var(--rmv-fscale, 1)); }
.rmv-item-price    { font-size: calc(.95rem  * var(--rmv-fscale, 1)); }

/* ── Density / spacing (applied via --rmv-density CSS var set inline) ─────────── */
.rmv-main       { padding: calc(16px * var(--rmv-density, 1)); max-width: 860px; margin: 0 auto; }
.rmv-item       { background: var(--rmv-surface); border: 1px solid var(--rmv-border); border-radius: var(--rmv-radius); padding: calc(14px * var(--rmv-density, 1)); transition: box-shadow .15s; }
.rmv-items-grid { display: grid; grid-template-columns: 1fr; gap: calc(10px * var(--rmv-density, 1)); }
.rmv-category   { margin-bottom: calc(32px * var(--rmv-density, 1)); scroll-margin-top: 52px; }
@media (min-width: 600px) { .rmv-items-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── Item layout variants ────────────────────────────────────────────────────── */
/* List — always single column regardless of viewport width */
[data-item-layout="list"] .rmv-items-grid { grid-template-columns: 1fr !important; }

/* Grid 2 — responsive: 1 col on phones, 2 cols from 480 px up */
[data-item-layout="grid-2"] .rmv-items-grid { grid-template-columns: 1fr; }
@media (min-width: 480px) { [data-item-layout="grid-2"] .rmv-items-grid { grid-template-columns: repeat(2, 1fr); } }

/* Grid 3 — 1 col on phones, 2 cols from 480 px, 3 cols from 700 px */
[data-item-layout="grid-3"] .rmv-items-grid { grid-template-columns: 1fr; }
@media (min-width: 480px) { [data-item-layout="grid-3"] .rmv-items-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px) { [data-item-layout="grid-3"] .rmv-items-grid { grid-template-columns: repeat(3, 1fr); } }

/* Grid-2 / Grid-3 multi-column cards: stack image above body when columns are active */
@media (min-width: 480px) {
    [data-item-layout="grid-2"] .rmv-item,
    [data-item-layout="grid-3"] .rmv-item { flex-direction: column; align-items: center; }
    [data-item-layout="grid-2"] .rmv-item-body,
    [data-item-layout="grid-3"] .rmv-item-body { width: 100%; }
}

/* Full-width image mode (data-img-display="full" on body) */
@media (min-width: 480px) {
    [data-img-display="full"][data-item-layout="grid-2"] .rmv-item,
    [data-img-display="full"][data-item-layout="grid-3"] .rmv-item { align-items: stretch; }
    [data-img-display="full"][data-item-layout="grid-2"] .rmv-item-img-wrap,
    [data-img-display="full"][data-item-layout="grid-3"] .rmv-item-img-wrap { width: 100%; }
    [data-img-display="full"][data-item-layout="grid-2"] .rmv-item-img,
    [data-img-display="full"][data-item-layout="grid-3"] .rmv-item-img { width: 100%; height: 160px; border-radius: var(--rmv-radius) var(--rmv-radius) 0 0; }
}

[data-item-layout="compact"] .rmv-items-grid   { grid-template-columns: 1fr !important; gap: 3px; }
[data-item-layout="compact"] .rmv-item         { padding: 8px 12px; }
[data-item-layout="compact"] .rmv-item-desc,
[data-item-layout="compact"] .rmv-tags,
[data-item-layout="compact"] .rmv-variants,
[data-item-layout="compact"] .rmv-item-meta    { display: none; }

[data-item-layout="magazine"] .rmv-items-grid                       { grid-template-columns: 1fr; }
@media (min-width: 500px) { [data-item-layout="magazine"] .rmv-items-grid { grid-template-columns: repeat(2, 1fr); } }
[data-item-layout="magazine"] .rmv-item:first-child                  { grid-column: 1 / -1; }
[data-item-layout="magazine"] .rmv-item:first-child .rmv-item-name   { font-size: calc(1.1rem * var(--rmv-fscale,1)); }

/* ── Category layout variants ───────────────────────────────────────────────── */

/* accordion */
[data-cat-layout="accordion"] .rmv-cat-nav              { display: none; }
[data-cat-layout="accordion"] .rmv-cat-title            { cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: space-between; }
[data-cat-layout="accordion"] .rmv-cat-title::after     { content: '▾'; flex-shrink: 0; font-size: .75rem; opacity: .6; transition: transform .2s; }
[data-cat-layout="accordion"] .rmv-category.rm-closed .rmv-cat-title::after { transform: rotate(-90deg); }
[data-cat-layout="accordion"] .rmv-category.rm-closed .rmv-cat-desc,
[data-cat-layout="accordion"] .rmv-category.rm-closed .rmv-items-grid { display: none; }

/* catalog: big section headers, no nav */
[data-cat-layout="catalog"] .rmv-cat-nav                { display: none; }
[data-cat-layout="catalog"] .rmv-cat-title              { font-size: calc(1.5rem * var(--rmv-fscale,1)); padding: 20px 0 14px; border-bottom: 2px solid var(--rmv-primary); margin-bottom: 20px; }
[data-cat-layout="catalog"] .rmv-category               { padding-bottom: 28px; }

/* drill: hide main on load (JS takes over) */
[data-cat-layout="drill-menu"] .rmv-cat-nav,
[data-cat-layout="drill-cards"] .rmv-cat-nav            { display: none; }

/* ── Drill home / navigation UI ─────────────────────────────────────────────── */
.rmv-drill-back-bar {
    max-width: 860px; margin: 0 auto; padding: 8px 16px;
}
.rmv-drill-back {
    display: inline-flex; align-items: center; gap: 8px;
    background: none; border: none; color: var(--rmv-primary); cursor: pointer; font-size: .95rem; padding: 4px 0;
}
.rmv-drill-home {
    max-width: 860px; margin: 0 auto; padding: calc(16px * var(--rmv-density,1));
}

/* drill-menu: text list */
.rmv-drill-cat-list    { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rmv-drill-cat-btn     {
    width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
    padding: calc(14px * var(--rmv-density,1)) calc(18px * var(--rmv-density,1));
    background: var(--rmv-surface); border: 1px solid var(--rmv-border); border-radius: var(--rmv-radius);
    font-size: calc(1rem * var(--rmv-fscale,1)); font-weight: 600; color: var(--rmv-text);
    cursor: pointer; transition: all .15s;
}
.rmv-drill-cat-btn:hover { background: var(--rmv-primary); color: #fff; border-color: var(--rmv-primary); }

/* drill-cards: card grid */
.rmv-drill-card-grid   {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(10px * var(--rmv-density,1));
}
@media (min-width: 500px) { .rmv-drill-card-grid { grid-template-columns: repeat(3, 1fr); } }
.rmv-drill-cat-card    {
    background: var(--rmv-surface); border: 1px solid var(--rmv-border); border-radius: var(--rmv-radius);
    padding: calc(20px * var(--rmv-density,1)) calc(12px * var(--rmv-density,1));
    text-align: center; cursor: pointer; transition: all .15s;
}
.rmv-drill-cat-card:hover   { background: var(--rmv-primary); color: #fff; border-color: var(--rmv-primary); }
.rmv-drill-cat-card:hover .rmv-drill-card-count { color: rgba(255,255,255,.75); }
.rmv-drill-card-icon   { font-size: 2rem; margin-bottom: 8px; }
.rmv-drill-card-name   { font-size: calc(.95rem * var(--rmv-fscale,1)); font-weight: 700; color: var(--rmv-text); }
.rmv-drill-cat-card:hover .rmv-drill-card-name { color: #fff; }
.rmv-drill-card-count  { font-size: .78rem; color: var(--rmv-muted); margin-top: 4px; }

/* ── Item detail panel – shared text styles ────────────────────────────────── */
.rmv-item-detail {
    background: var(--rmv-surface); border: 1px solid var(--rmv-border);
    border-radius: var(--rmv-radius); padding: 0; overflow: hidden;
    margin: 12px 0 24px; grid-column: 1 / -1;
}
.rmv-detail-back {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: 1px solid var(--rmv-border); border-radius: 8px;
    padding: 5px 14px; font-size: .85rem; cursor: pointer;
    color: var(--rmv-text); margin-bottom: 14px; align-self: flex-start;
    transition: background .15s;
}
.rmv-detail-back:hover { background: var(--rmv-bg); }
.rmv-detail-name { font-size: calc(1.4rem * var(--rmv-fscale,1)); font-weight: 700; margin-bottom: 4px; }
.rmv-detail-price { font-size: calc(1.1rem * var(--rmv-fscale,1)); color: var(--rmv-accent, var(--rmv-primary)); font-weight: 700; margin-bottom: 12px; }
.rmv-detail-desc { font-size: .95rem; color: var(--rmv-text); line-height: 1.65; margin-bottom: 14px; }
.rmv-detail-section-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--rmv-muted); margin: 14px 0 6px; }

/* ── Two-column hero layout ─────────────────────────────────────────────────── */
.rmv-detail-layout {
    display: grid; grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .rmv-detail-layout { grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); min-height: 460px; }
    .rmv-detail-layout.rmv-no-img { grid-template-columns: 1fr; min-height: unset; }
    .rmv-detail-layout.rmv-no-img .rmv-detail-hero-wrap { display: none; }
    .rmv-detail-layout.rmv-no-img .rmv-detail-info { border-radius: var(--rmv-radius); }
}
.rmv-detail-hero-wrap {
    position: relative; overflow: hidden;
    background: var(--rmv-border); min-height: 260px;
    border-radius: var(--rmv-radius) var(--rmv-radius) 0 0;
}
@media (min-width: 640px) {
    .rmv-detail-hero-wrap { border-radius: var(--rmv-radius) 0 0 var(--rmv-radius); min-height: unset; }
}
.rmv-detail-hero { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; }
.rmv-detail-hero-no-img {
    width: 100%; height: 100%; min-height: 260px;
    display: flex; align-items: center; justify-content: center;
    font-size: 4rem; color: var(--rmv-muted);
}
.rmv-detail-thumb-strip {
    position: absolute; bottom: 10px; left: 10px; right: 10px;
    display: flex; gap: 6px; overflow-x: auto;
}
.rmv-detail-thumb {
    width: 52px; height: 52px; object-fit: cover; border-radius: 6px;
    border: 2px solid rgba(255,255,255,.5); cursor: pointer; flex-shrink: 0; transition: border-color .15s;
}
.rmv-detail-thumb.rmvdt-active { border-color: var(--rmv-primary); }
.rmv-detail-info {
    padding: 22px 24px 24px; overflow-y: auto;
    display: flex; flex-direction: column;
}
@media (max-width: 639px) { .rmv-detail-info { padding: 16px 16px 20px; } }

/* ── Related items ──────────────────────────────────────────────────────────── */
.rmv-detail-related-label { font-size: .73rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--rmv-muted); margin: 20px 0 8px; }
.rmv-detail-related-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
@media (max-width: 639px) { .rmv-detail-related-grid { grid-template-columns: repeat(3,1fr); gap: 6px; } }
.rmv-detail-related-card { background: var(--rmv-bg); border: 1px solid var(--rmv-border); border-radius: calc(var(--rmv-radius) - 2px); overflow: hidden; cursor: pointer; transition: border-color .15s; }
.rmv-detail-related-card:hover { border-color: var(--rmv-primary); }
.rmv-detail-related-thumb { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.rmv-detail-related-info { padding: 5px 7px 7px; }
.rmv-detail-related-name { font-size: .77rem; font-weight: 600; color: var(--rmv-text); line-height: 1.3; }
.rmv-detail-related-price { font-size: .72rem; color: var(--rmv-primary); font-weight: 700; margin-top: 2px; }

/* ── Modal item detail ─────────────────────────────────────────────────────── */
.rmv-detail-modal {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,.5);
    display: flex; align-items: flex-start; justify-content: center;
    overflow-y: auto; padding: 20px;
}
.rmv-detail-modal-inner {
    background: var(--rmv-surface); border-radius: var(--rmv-radius);
    width: 100%; max-width: 840px; overflow: hidden;
    position: relative; margin: auto;
}

/* ── Replace (full-page) item detail ──────────────────────────────────────── */
.rmv-detail-replace {
    position: fixed; inset: 0; z-index: 999;
    background: var(--rmv-bg); overflow-y: auto; padding: 20px;
}
.rmv-detail-replace-inner { max-width: 920px; margin: 0 auto; }

/* ── Cursor: no pointer when item details is disabled ────────────────────── */
body[data-item-details=""] .rmv-item { cursor: default; }

/* ── Search Bar Styling ────────────────────────────────────────────── */
.rmv-search-bar-wrap {
    max-width: 860px;
    margin: 12px auto 16px auto;
    padding: 0 16px;
}
.rmv-search-input-container {
    position: relative;
    width: 100%;
}
.rmv-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--rmv-muted);
    font-size: 0.95rem;
}
[dir="rtl"] .rmv-search-icon {
    left: auto;
    right: 14px;
}
.rmv-search-input {
    width: 100%;
    padding: 10px 40px 10px 40px;
    border: 1px solid var(--rmv-border);
    border-radius: 24px;
    background: var(--rmv-surface);
    color: var(--rmv-text);
    font-size: 0.9rem;
    transition: border-color .15s, box-shadow .15s;
    outline: none;
}
.rmv-search-input:focus {
    border-color: var(--rmv-primary);
    box-shadow: 0 0 0 3px rgba(128, 128, 128, 0.15);
}
.rmv-search-clear {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--rmv-muted);
    cursor: pointer;
    line-height: 1;
    padding: 0;
}
[dir="rtl"] .rmv-search-clear {
    right: auto;
    left: 14px;
}

/* ── Custom Menu Header Customizations ──────────────────────────────── */
.rmv-cover-wrap {
    position: relative;
    width: 100%;
    overflow: visible;
}
.rmv-cover-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}
.rmv-logo-overlap-container {
    position: absolute;
    bottom: -36px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}
.rmv-logo-standard-container {
    margin-top: 10px;
    margin-bottom: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.rmv-logo {
    max-height: 80px;
    width: 80px;
    height: 80px;
    object-fit: cover;
    background: #fff;
    border: 3px solid #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    margin-bottom: 0 !important;
    transition: all 0.2s ease;
}
.rmv-logo-overlap {
    width: 84px;
    height: 84px;
    max-height: 84px;
}

/* Logo Shape Modifier Classes */
.rmv-logo-circle {
    border-radius: 50% !important;
}
.rmv-logo-square {
    border-radius: 4px !important;
}
.rmv-logo-rounded {
    border-radius: 16px !important;
}

.rmv-header-has-overlap {
    padding-top: 48px !important;
}

/* ── Contact Pills Row ──────────────────────────────────────────────── */
.rmv-contact-pills {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 12px auto;
    max-width: 600px;
}
.rmv-contact-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--rmv-surface, #fff);
    border: 1px solid var(--rmv-border, #ececec);
    border-radius: 30px;
    color: var(--rmv-text, #1a1a1a);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.04);
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
    outline: none;
}
.rmv-contact-pill:hover {
    background: var(--rmv-bg, #fafafa);
    border-color: var(--rmv-primary);
}
.rmv-contact-pill:active {
    transform: scale(0.97);
}
.rmv-contact-pill i {
    color: var(--rmv-primary);
    font-size: 0.9rem;
}

/* Opening hours dot and dropdown */
.rmv-hours-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    background-color: #888;
}
.rmv-hours-dropdown {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: opacity 0.2s ease;
}
.rmv-hours-dropdown-inner {
    background: var(--rmv-surface, #fff);
    border-radius: 18px;
    width: 90%;
    max-width: 360px;
    padding: 20px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.18);
    transform: translateY(20px);
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.rmv-hours-dropdown.rmv-hours-dropdown--open .rmv-hours-dropdown-inner {
    transform: translateY(0);
}
.rmv-hours-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--rmv-border, #ececec);
    padding-bottom: 10px;
    font-size: 1.05rem;
    color: var(--rmv-text, #1a1a1a);
}
.rmv-hours-close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--rmv-muted, #666);
    line-height: 1;
    padding: 0 5px;
}
.rmv-hours-close-btn:hover {
    color: var(--rmv-text);
}
.rmv-hours-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.rmv-hours-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 4px;
    font-size: 0.9rem;
    color: var(--rmv-text, #333);
    border-bottom: 1px dashed var(--rmv-border, #ececec);
}
.rmv-hours-item:last-child {
    border-bottom: none;
}
.rmv-hours-item--today {
    font-weight: 700;
    color: var(--rmv-primary);
    background: rgba(229, 57, 53, 0.06);
    border-radius: 8px;
    padding-left: 8px;
    padding-right: 8px;
}
.rmv-hours-day {
    text-transform: capitalize;
}
.rmv-hours-time {
    font-variant-numeric: tabular-nums;
}

/* ── WhatsApp Button Visual Options ──────────────────────────────────── */
.rmv-item-order-controls {
    display: flex !important;
    width: 100%;
}
.rmv-wabtn-left   { justify-content: flex-start !important; text-align: left; }
.rmv-wabtn-center { justify-content: center !important; text-align: center; }
.rmv-wabtn-right  { justify-content: flex-end !important; text-align: right; }

.rmv-wa-add-btn-icon-only {
    width: 32px;
    height: 32px;
    padding: 0 !important;
    border-radius: 50% !important;
    justify-content: center;
    align-items: center;
    gap: 0 !important;
}
.rmv-wa-add-btn-icon-only i {
    font-size: 1.15rem;
    margin: 0 !important;
}

/* SweetAlert2 Variant Selector Popup Styles */
.rmv-swal-variant-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 15px;
}
.rmv-swal-variant-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 12px 16px;
    background: var(--rmv-surface, #fff);
    border: 1px solid var(--rmv-border, #eee);
    border-radius: var(--rmv-radius, 8px);
    color: var(--rmv-text, #333);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.rmv-swal-variant-btn:hover {
    background: rgba(var(--rmv-primary-rgb, 25, 118, 210), 0.08);
    border-color: var(--rmv-primary);
}
.rmv-swal-variant-price {
    color: var(--rmv-primary);
    font-weight: 700;
}
.rmv-variant-popup {
    border-radius: var(--rmv-radius, 12px) !important;
    background: var(--rmv-surface, #fff) !important;
    color: var(--rmv-text, #333) !important;
}
.rmv-variant-popup .swal2-title {
    color: var(--rmv-text, #333) !important;
    font-family: var(--rmv-font);
}