/* Mizrahnik Mega Menu v2.4 – Auto dark mode detection */

/* ═══ Light mode defaults ═══ */
:root {
    --mmm-green:#5FA886; --mmm-green-h:#4e9173; --mmm-green-soft:rgba(255,255,255,.12);
    --mmm-pbg:#f8fafb; --mmm-phov:#fff; --mmm-ptxt:#5FA886; --mmm-psub:#6b7f8e;
    --mmm-pttl:#1a2d3d; --mmm-pbrd:rgba(26,45,61,.09);
    --mmm-dbg:#fff; --mmm-dtxt:#5FA886; --mmm-dbrd:rgba(26,45,61,.09); --mmm-dhbg:#5FA886;
    /* CTA button. Yellow because the bar itself is the brand green — a green
       button on it would be invisible. #FFEEAD is --mz-secondary, the token the
       design system assigns to highlights and CTAs. The text stays dark in BOTH
       themes: white on this yellow fails contrast (06-design-system §9) and is
       called out as a known dark-mode pitfall (05-dark-mode-guide §8). */
    --mmm-cta-bg:#FFEEAD; --mmm-cta-bg-h:#ffe58a; --mmm-cta-text:#2C3E2F;
    /* Green CTA — used in the mobile drawer in both themes, and in the desktop
       bar in dark mode (where the header container is forced to #111827 by
       mizrahnik-dark-mode, so a green pill reads clearly against it).

       #3E7F63 is the brand green one step deeper. The exact brand #5FA886 was
       measured and does not work here: white on it is 2.83:1 and dark text on
       it is 4.05:1, so neither passes AA. Same hue, white text passes at
       4.75:1. To go back to the literal brand value, change these two lines —
       and know that the text contrast drops below AA. */
    --mmm-cta-green:#3E7F63; --mmm-cta-green-h:#356d55; --mmm-cta-green-text:#ffffff;
}

/* ═══ Override site link colors ═══ */
.mmm-panel a,.mmm-panel a:link,.mmm-panel a:visited,.mmm-panel a:hover,.mmm-panel a:active,
body .mmm-panel a,.elementor .mmm-panel a{color:var(--mmm-ptxt)!important;text-decoration:none!important}
.mmm-panel a:hover,body .mmm-panel a:hover{color:var(--mmm-green-h)!important}
.mmm-drawer a,.mmm-drawer a:link,.mmm-drawer a:visited,.mmm-drawer a:active,
body .mmm-drawer a,.elementor .mmm-drawer a{color:var(--mmm-dtxt)!important;text-decoration:none!important}
.mmm-panel .mmm-sb,body .mmm-panel .mmm-sb{color:var(--mmm-psub)!important}

/* NUCLEAR button reset inside drawer */
.mmm-drawer [role="button"],.mmm-drawer button,body .mmm-drawer [role="button"]{
    all:unset!important;box-sizing:border-box!important;cursor:pointer!important;font-family:'Fredoka','Fredoka One','Heebo',sans-serif!important;
}
/* Restore SVG icons after nuclear reset (safety net) */
.mmm-drawer [role="button"] svg,.mmm-drawer [role="button"] .mmm-da-ico{
    display:block!important;visibility:visible!important;
}

/* ═══ Nav wrapper ═══ */
.mmm-wrap{flex:1;display:flex;align-items:center;min-width:0;position:relative;font-family:'Fredoka','Fredoka One','Heebo',sans-serif}

/* ═══ Top-level links – always white ═══ */
.mmm-list{display:flex;align-items:center;gap:1px;list-style:none!important;margin:0!important;padding:0!important}
.mmm-list>li{list-style:none!important;margin:0!important;padding:0!important}
.mmm-link,.mmm-link:link,.mmm-link:visited,.mmm-link:hover,.mmm-link:active,
body .mmm-link,.elementor .mmm-link{
    display:inline-flex!important;align-items:center;gap:4px;padding:10px 13px;font-size:.9rem;font-weight:600;
    color:#fff!important;border-radius:10px;transition:background .2s;white-space:nowrap;position:relative;
    text-decoration:none!important;background:transparent}
.mmm-link:hover,.mmm-link.active{background:var(--mmm-green-soft)!important}
.mmm-link::after{content:'';position:absolute;bottom:2px;right:12px;left:12px;height:2.5px;background:#fff;border-radius:2px;transform:scaleX(0);transition:transform .15s}
.mmm-link.active::after{transform:scaleX(1)}
[data-m]{position:relative}
[data-m] .mmm-link.active::before{content:'';position:absolute;bottom:-30px;right:-10px;left:-10px;height:30px;z-index:91}
.mmm-chev{width:13px!important;height:13px!important;transition:transform .25s;opacity:.7;color:#fff;flex-shrink:0}
.mmm-link.active .mmm-chev{transform:rotate(180deg);opacity:1}
/* ═══ Top-level link media (icon / image) – desktop bar ═══
   The size is a base × a scale factor, never a fixed number. --mmm-lm-size is
   whatever the editor set on the item (absent = the fallbacks below), and
   --mmm-lm-scale shrinks it per breakpoint exactly like the text. Sizing the
   icon inline instead would end the discussion: an inline !important outranks
   an !important rule in a stylesheet, so no media query could shrink it. */
.mmm-lm{display:inline-flex!important;align-items:center;justify-content:center;flex-shrink:0;line-height:0;--mmm-lm-scale:1}
/* The bar is the brand green with white text and a white chevron, so the icon
   goes white too. Same decision as .mmm-link and .mmm-chev above — not a new
   color, the SVG's own stroke attribute just has to be overridden. */
.mmm-lm svg,.mmm-link .mmm-lm .mmm-da-ico{
    width:calc(var(--mmm-lm-size,18px) * var(--mmm-lm-scale))!important;
    height:calc(var(--mmm-lm-size,18px) * var(--mmm-lm-scale))!important;
    min-width:calc(var(--mmm-lm-size,18px) * var(--mmm-lm-scale));
    stroke:#fff!important;opacity:.95}
.mmm-link:hover .mmm-lm svg,.mmm-link.active .mmm-lm svg{opacity:1}
.mmm-lm-img{
    width:calc(var(--mmm-lm-size,20px) * var(--mmm-lm-scale));
    height:calc(var(--mmm-lm-size,20px) * var(--mmm-lm-scale));
    border-radius:6px;overflow:hidden}
.mmm-lm-img img{width:100%;height:100%;object-fit:cover;display:block}
/* The two steps below mirror the text scale further down the file:
   .9rem → .84rem (93%) → .76rem (84%). If that scale ever changes, these
   move with it — that is the whole point of tying them to the same ratios. */
@media(min-width:1280px) and (max-width:1399px){
    .mmm-lm{--mmm-lm-scale:.93}
}
@media(min-width:1024px) and (max-width:1279px){
    .mmm-lm{--mmm-lm-scale:.84}
}
/* בורגר מופיע עד 1023px (טאבלט אנכי ומטה) */
@media(max-width:1023px){.mmm-list{display:none!important}}

/* הצטמצמות הדרגתית של התפריט האופקי במסכים בינוניים */
/* 1280-1399px — צפיפות בינונית (מעט פחות padding, font קצת קטן יותר) */
@media(min-width:1280px) and (max-width:1399px){
    .mmm-link,body .mmm-link,.elementor .mmm-link{padding:10px 9px;font-size:.84rem}
}
/* 1024-1279px — צפיפות מלאה (12" MacBook וטאבלט אופקי, טקסט הדוק אבל עדיין קריא) */
@media(min-width:1024px) and (max-width:1279px){
    .mmm-list{gap:0}
    .mmm-link,body .mmm-link,.elementor .mmm-link{padding:10px 5px;font-size:.76rem}
    .mmm-chev{width:11px!important;height:11px!important}
    .mmm-link::after{right:8px;left:8px}
}

/* ═══ Hamburger – Inline SVG ═══ */
.mmm-burger,body .mmm-burger,.elementor .mmm-burger,button.mmm-burger{
    all:unset!important;display:none!important;align-items:center!important;justify-content:center!important;
    width:44px!important;height:44px!important;cursor:pointer!important;border-radius:10px!important;
    transition:background .2s!important;position:relative!important;z-index:10!important;box-sizing:border-box!important}
.mmm-burger:hover{background:rgba(255,255,255,.15)!important}
@media(max-width:1023px){.mmm-burger,body .mmm-burger,.elementor .mmm-burger,button.mmm-burger{display:flex!important}}
.mmm-burger-svg{width:24px!important;height:24px!important;flex-shrink:0;pointer-events:none}
.mmm-burger-svg line{stroke:white!important;stroke-width:2.5!important;transition:all .3s cubic-bezier(.4,0,.2,1);transform-origin:center}
.mmm-burger.open .mmm-bl1{transform:translateY(6px) rotate(45deg)}
.mmm-burger.open .mmm-bl2{opacity:0}
.mmm-burger.open .mmm-bl3{transform:translateY(-6px) rotate(-45deg)}

/* ═══ Mega panels ═══ */
.mmm-panel{
    position:absolute;left:0;right:0;z-index:2147483645;background:var(--mmm-pbg);
    border-bottom:1px solid var(--mmm-pbrd);box-shadow:0 20px 60px rgba(26,45,61,.15);
    opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px);transition:opacity .15s,transform .15s,visibility 0s .15s;
    max-height:80vh;overflow-y:auto;overscroll-behavior:contain;font-family:'Fredoka','Fredoka One','Heebo',sans-serif}
.mmm-panel.open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition:opacity .2s,transform .2s,visibility 0s 0s}
@media(max-width:1023px){.mmm-panel{display:none!important}}
.mmm-pin{max-width:1340px;margin:0 auto;padding:24px 28px 32px}
.mmm-ph{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;padding-bottom:14px;border-bottom:1px solid var(--mmm-pbrd)}
.mmm-pt{font-size:1.05rem;font-weight:800;color:var(--mmm-pttl)!important}
.mmm-pa{font-size:.84rem;font-weight:600;color:var(--mmm-green)!important}
.mmm-pa:hover{color:var(--mmm-green-h)!important}
.mmm-cols{display:grid;gap:28px 36px}
@media(max-width:1279px){.mmm-cols{grid-template-columns:repeat(3,1fr)!important}}
.mmm-colh{display:flex;align-items:center;gap:7px;padding-bottom:10px;margin-bottom:6px;border-bottom:2px solid var(--mmm-green);font-size:.8rem;font-weight:700;color:var(--mmm-green)!important;letter-spacing:.04em}

/* ═════ ULTRA CLEAN & MINIMALIST HOVER (DESKTOP) ═════ */
.mmm-dl { display: flex; flex-direction: column; gap: 4px; }

/* פריט עם תמונה */
.mmm-a {
    display: flex; align-items: center; gap: 12px; padding: 8px 10px;
    border-radius: 8px; background: transparent;
    transition: background 0.2s ease;
    transform: none !important;
}
.mmm-a:hover {
    background: rgba(95, 168, 134, 0.06) !important;
    transform: none !important;
}

/* התמונה (Thumbnail) */
.mmm-th {
    width: 42px; height: 42px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
    background: #f0f4f6; border: 2px solid transparent;
    transition: border-color 0.2s ease;
    transform: none !important;
}
.mmm-a:hover .mmm-th, .mmm-sl:hover .mmm-th {
    border-color: var(--mmm-green);
    transform: none !important;
}
.mmm-th img { width: 100%; height: 100%; object-fit: cover; }

/* טקסט */
.mmm-nm { font-size: .95rem; font-weight: 600; color: var(--mmm-ptxt) !important; transition: color 0.2s ease; }
.mmm-sb { font-size: .78rem; color: var(--mmm-psub) !important; }
.mmm-a:hover .mmm-nm, .mmm-sl:hover .mmm-nm { color: var(--mmm-green-h) !important; }

/* גריד פריטים ללא תמונה */
.mmm-sg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mmm-sg.c4 { grid-template-columns: repeat(4, 1fr); }

/* פריט עם אייקון בלבד */
.mmm-sl {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    border-radius: 8px; font-size: .95rem; font-weight: 500;
    color: var(--mmm-ptxt) !important; background: transparent;
    transition: background 0.2s ease, color 0.2s ease;
    transform: none !important;
}
.mmm-sl:hover {
    background: rgba(95, 168, 134, 0.06) !important;
    color: var(--mmm-green-h) !important;
    transform: none !important;
}

/* האייקון - נעול הרמטית ולא משתנה בריחוף */
.mmm-ico {
    width: 36px; height: 36px; border-radius: 10px; background: rgba(95, 168, 134, 0.08);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    color: var(--mmm-green); font-size: 1.1rem;
    transition: none !important;
    transform: none !important;
}

/* ביטול מוחלט של כל שינוי צבע באייקון בדסקטופ בריחוף */
.mmm-panel .mmm-sl:hover .mmm-ico, 
.mmm-panel .mmm-a:hover .mmm-ico {
    background: rgba(95, 168, 134, 0.08) !important;
    color: var(--mmm-green) !important;
}
.mmm-panel .mmm-sl:hover .mmm-da-ico, 
.mmm-panel .mmm-a:hover .mmm-da-ico {
    filter: none !important;
    opacity: 0.7 !important;
}

/* התאמה למצב כהה (Dark Mode) - נקי וללא שינוי באייקונים בריחוף */
.mmm-dark .mmm-a:hover, html[data-theme="dark"] .mmm-a:hover,
.mmm-dark .mmm-sl:hover, html[data-theme="dark"] .mmm-sl:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

.mmm-dark .mmm-panel .mmm-sl:hover .mmm-ico, 
.mmm-dark .mmm-panel .mmm-a:hover .mmm-ico,
html[data-theme="dark"] .mmm-panel .mmm-sl:hover .mmm-ico,
html[data-theme="dark"] .mmm-panel .mmm-a:hover .mmm-ico {
    background: rgba(111,191,154,.1) !important;
    color: #5FA886 !important;
}

/* Backdrop */
.mmm-bk{position:fixed;inset:0;z-index:2147483644;background:rgba(13,27,42,.3);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .15s,visibility 0s .15s;pointer-events:none}
.mmm-bk.show{opacity:1;visibility:visible;transition:opacity .15s,visibility 0s 0s}

/* ═══ Mobile drawer ═══ */
.mmm-drawer{overscroll-behavior:contain;position:fixed;top:0;right:0;bottom:0;width:min(88vw,400px);z-index:2147483647;background:var(--mmm-dbg);transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:-8px 0 40px rgba(0,0,0,.12);overflow:hidden;font-family:'Fredoka','Fredoka One','Heebo',sans-serif}
.mmm-drawer.open{transform:translateX(0)}
@media(max-width:767px){.mmm-drawer{width:100vw}}
.mmm-dh{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:16px 20px!important;background:var(--mmm-dhbg)!important;border-bottom:1px solid rgba(255,255,255,.15)!important;flex-shrink:0}
.mmm-dh-t{font-size:1.05rem!important;font-weight:700!important;color:#fff!important}
.mmm-dh-x,body .mmm-dh-x,button.mmm-dh-x{display:flex!important;align-items:center!important;justify-content:center!important;width:36px!important;height:36px!important;border-radius:10px!important;color:#fff!important;border:none!important;background:transparent!important;cursor:pointer!important;font-size:22px!important;font-weight:300;line-height:1!important;padding:0!important}
.mmm-dh-x:hover{background:rgba(255,255,255,.15)!important}
/* .mmm-db is the positioning viewport for the sub-panels and must NOT scroll.
   It used to be both: position:relative AND overflow-y:scroll. An absolutely
   positioned child resolves against the padding box of its positioned ancestor,
   and for a scroll container that box is anchored to the content origin — it
   does not follow the scroll. So .mmm-ms sat at the top of the scrollable
   content instead of at the top of the visible area. Open a sub-menu from an
   item you had to scroll down to reach, and the panel came in one scrollTop
   above the viewport: the level-1 list showed through underneath, then it
   snapped into place. Items near the top of the drawer never showed it, because
   there scrollTop is 0 and the two origins coincide.
   The scrolling moved down to .mmm-dm, which is what actually holds the list. */
.mmm-db{flex:1;display:flex;flex-direction:column;overflow:hidden;overscroll-behavior:contain;position:relative;background:var(--mmm-dbg);min-height:0}
/* The level-1 scroller. Keeps every property the drawer scroll fixes of
   3.2.4-3.2.9 landed on, one level down from where they used to sit. */
.mmm-dm{flex:1;min-height:0;overflow-y:scroll;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:6px 0;list-style:none!important;margin:0!important}
.mmm-di{border-bottom:1px solid var(--mmm-dbrd);list-style:none!important}
.mmm-di:last-child{border-bottom:none}

/* Drawer items (links + role=button) */
.mmm-da,a.mmm-da,[role="button"].mmm-da,body .mmm-da,.elementor .mmm-da,.mmm-drawer .mmm-da{
    display:flex!important;align-items:center!important;gap:14px!important;width:100%!important;
    padding:15px 20px!important;font-size:1rem!important;font-weight:600!important;color:var(--mmm-dtxt)!important;
    background:transparent!important;border:none!important;border-radius:0!important;box-shadow:none!important;
    outline:none!important;text-decoration:none!important;font-family:'Fredoka','Fredoka One','Heebo',sans-serif!important;
    text-align:right!important;direction:rtl!important;-webkit-appearance:none!important;appearance:none!important;
    margin:0!important;line-height:1.5!important;-webkit-tap-highlight-color:transparent!important;
    -webkit-touch-callout:none!important}
/* Hover+active ONLY for mouse users - DISABLED for mobile (user request) */
/* @media(hover:hover) and (pointer:fine){
    .mmm-da:hover,.mmm-da:focus{background:rgba(95,168,134,.04)!important}
    .mmm-da:active{background:rgba(95,168,134,.08)!important}
} */
/* JS-controlled mobile tap feedback - DISABLED (user request: no background change) */
/* .mmm-da.mmm-tapped{background:rgba(95,168,134,.06)!important} */
/* Active parent: keep highlight when sub-panel is open - DISABLED */
/* .mmm-da.mmm-active-parent{background:rgba(95,168,134,.08)!important} */
/* Kill ALL visual feedback during panel transitions */
.mmm-sliding {
    pointer-events: none !important;
}
.mmm-sliding .mmm-da, .mmm-sliding .mmm-msl,
.mmm-sliding .mmm-da.mmm-tapped, .mmm-sliding .mmm-msl.mmm-tapped {
    background: transparent !important;
    transition: none !important;
}
.mmm-da-sub,[role="button"].mmm-da-sub,body .mmm-da-sub{border-bottom:1px solid var(--mmm-dbrd)!important}
.mmm-arr{font-size:0!important;flex-shrink:0!important;display:inline-block!important}

/* Sub-panels */
/* overscroll-behavior:contain is what stops a scroll inside the drawer from
   chaining out to the page behind it. These sub-panels never carried it
   themselves — until 3.6.2 they inherited the boundary from .mmm-db, which was
   both their parent and the scroll container. Moving the scrolling to .mmm-dm
   put that boundary on a sibling instead of an ancestor, and the panels lost
   it. Every surface in the drawer that scrolls now declares its own. */
.mmm-ms{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--mmm-dbg);transform:translateX(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:2;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.mmm-ms.open{transform:translateX(0)}
.mmm-ms3{z-index:3}
/* Block pointer events on level-1 when sub-panel is open (iOS touch-through fix) */
.mmm-db.mmm-sub-open > .mmm-dm{pointer-events:none!important}

/* Back button */
.mmm-msb,body .mmm-msb,[role="button"].mmm-msb,.elementor .mmm-msb,.mmm-drawer .mmm-msb{
    display:flex!important;align-items:center!important;gap:10px!important;padding:16px 20px!important;
    font-size:1rem!important;font-weight:700!important;color:#fff!important;background:var(--mmm-dhbg)!important;
    border:none!important;border-bottom:1px solid rgba(255,255,255,.15)!important;border-radius:0!important;
    width:100%!important;font-family:'Fredoka','Fredoka One','Heebo',sans-serif!important;text-align:right!important;direction:rtl!important;
    box-shadow:none!important;-webkit-appearance:none!important;appearance:none!important;margin:0!important;line-height:1.5!important}
.mmm-arr-back{font-size:18px!important;font-weight:300!important;color:rgba(255,255,255,.7)!important;transform:rotate(180deg)!important;display:inline-block!important}

/* Section headers */
.mmm-mss{font-size:.78rem!important;font-weight:700!important;color:var(--mmm-green)!important;letter-spacing:.04em;padding:14px 20px 6px;border-bottom:2px solid var(--mmm-green);margin:0 20px 2px}

/* Mobile items */
.mmm-msl,a.mmm-msl,body .mmm-msl{display:flex!important;align-items:center!important;gap:14px!important;padding:13px 20px!important;font-size:.95rem!important;font-weight:500!important;color:var(--mmm-dtxt)!important;border-bottom:1px solid var(--mmm-dbrd)!important;text-decoration:none!important;background:transparent!important;-webkit-tap-highlight-color:transparent!important;-webkit-touch-callout:none!important}
/* @media(hover:hover) and (pointer:fine){.mmm-msl:active{background:rgba(95,168,134,.06)!important}} */
/* .mmm-msl.mmm-tapped{background:rgba(95,168,134,.04)!important} */
.mmm-msl:last-child{border-bottom:none!important}
.mmm-msi{width:40px;height:40px;border-radius:50%;overflow:hidden;flex-shrink:0;background:#f0f4f6;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.mmm-msi img{width:100%;height:100%;object-fit:cover}

/* Drawer icon — uses hardcoded stroke="#5FA886" in SVG HTML */
.mmm-da-ico,svg.mmm-da-ico{
    width:22px!important;height:22px!important;flex-shrink:0!important;min-width:22px!important;
    display:block!important;opacity:.7;transition:opacity .2s,stroke .2s}
@media(hover:hover) and (pointer:fine){
    .mmm-da:hover .mmm-da-ico,.mmm-da:focus .mmm-da-ico,
    .mmm-sl:hover .mmm-da-ico,.mmm-a:hover .mmm-da-ico{opacity:1!important}
    .mmm-msl:active .mmm-da-ico{opacity:1!important}
}
.mmm-msl .mmm-da-ico{margin-inline-end:6px}

body.mmm-locked{overflow:hidden!important}

/* Device visibility */
.mmm-desktop-only{display:block}
.mmm-mobile-only{display:none}
@media(max-width:1023px){.mmm-desktop-only{display:none!important}.mmm-mobile-only{display:block!important}}
.mmm-custom-html{padding:4px 10px;font-size:.85rem}


/* ═══════════════════════════════════════════════════════════════
   DARK MODE – Triggered by .mmm-dark class (auto-detected by JS)
   Also supports html[data-theme="dark"] as fallback
   ═══════════════════════════════════════════════════════════════ */

/*
 * KEY FIX: The site's dark mode CSS does:
 * [data-theme="dark"] a { color: var(--mz-dm-primary) !important }
 * where --mz-dm-primary = #5FA886 (green).
 * We can't beat its specificity, so instead we REDEFINE the variable
 * inside our components. The site's own rule then applies #fff.
 */
html[data-theme="dark"] .mmm-panel,
html[data-theme="dark"] .mmm-drawer,
.mmm-dark .mmm-panel,
.mmm-dark .mmm-drawer,
.mmm-panel.mmm-dark,
.mmm-drawer.mmm-dark {
    --mz-dm-primary: #ffffff !important;
    --mz-dm-accent: #cccccc !important;
}

/* Variable overrides for our own vars */
.mmm-dark,
html[data-theme="dark"] {
    --mmm-green-soft:rgba(255,255,255,.15);
    --mmm-pbg:var(--mz-dm-bg, #111827); --mmm-phov:var(--mz-dm-card-hover, #374151); --mmm-ptxt:#fff; --mmm-psub:#9ca3af;
    --mmm-pttl:#f3f4f6; --mmm-pbrd:var(--mz-dm-border, #374151);
    --mmm-dbg:var(--mz-dm-bg, #111827); --mmm-dtxt:#fff; --mmm-dbrd:var(--mz-dm-border, #374151); --mmm-dhbg:#1f2937;
}

/* Force ALL text white in dark mode – panels */
.mmm-dark .mmm-panel a,
.mmm-dark .mmm-panel a:link,
.mmm-dark .mmm-panel a:visited,
.mmm-dark .mmm-nm,
.mmm-dark .mmm-sl,
.mmm-dark .mmm-pt,
.mmm-dark .mmm-pa,
.mmm-dark .mmm-pa:link,
.mmm-dark .mmm-colh,
html[data-theme="dark"] .mmm-panel a,
html[data-theme="dark"] .mmm-nm,
html[data-theme="dark"] .mmm-sl,
html[data-theme="dark"] .mmm-pt,
html[data-theme="dark"] .mmm-pa,
html[data-theme="dark"] .mmm-colh {
    color: #fff !important;
}

.mmm-dark .mmm-panel a:hover,
html[data-theme="dark"] .mmm-panel a:hover {
    color: #ccc !important;
}

.mmm-dark .mmm-colh,
html[data-theme="dark"] .mmm-colh {
    border-bottom-color: rgba(255,255,255,.3) !important;
}

.mmm-dark .mmm-panel,
html[data-theme="dark"] .mmm-panel {
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
}

.mmm-dark .mmm-bk,
html[data-theme="dark"] .mmm-bk {
    background: rgba(0,0,0,.5);
}

/* Force ALL text white in dark mode – drawer (mobile) */
.mmm-dark .mmm-da,
.mmm-dark .mmm-da .mmm-da-txt,
.mmm-dark .mmm-drawer .mmm-da,
.mmm-dark .mmm-arr,
.mmm-dark .mmm-msl,
.mmm-dark .mmm-mss,
.mmm-dark .mmm-drawer a,
.mmm-dark .mmm-drawer a:link,
.mmm-dark .mmm-drawer a:visited,
html[data-theme="dark"] .mmm-da,
html[data-theme="dark"] .mmm-da .mmm-da-txt,
html[data-theme="dark"] .mmm-drawer .mmm-da,
html[data-theme="dark"] .mmm-arr,
html[data-theme="dark"] .mmm-msl,
html[data-theme="dark"] .mmm-mss,
html[data-theme="dark"] .mmm-drawer a,
html[data-theme="dark"] .mmm-drawer a:link,
html[data-theme="dark"] .mmm-drawer a:visited {
    color: #fff !important;
}

.mmm-dark .mmm-mss,
html[data-theme="dark"] .mmm-mss {
    border-bottom-color: rgba(255,255,255,.3) !important;
}

.mmm-dark .mmm-di,
.mmm-dark .mmm-da-sub,
.mmm-dark .mmm-msl,
html[data-theme="dark"] .mmm-di,
html[data-theme="dark"] .mmm-da-sub,
html[data-theme="dark"] .mmm-msl {
    border-color: rgba(226,232,238,.08) !important;
}

.mmm-dark .mmm-msi,
html[data-theme="dark"] .mmm-msi {
    background: #1a2d3d;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
}

.mmm-dark .mmm-ico,
html[data-theme="dark"] .mmm-ico {
    background: rgba(111,191,154,.1);
}

/* Dark mode icons — ALWAYS GREEN (user request) */
.mmm-dark .mmm-da-ico,
html[data-theme="dark"] .mmm-da-ico,
.mmm-dark .mmm-drawer .mmm-da-ico,
html[data-theme="dark"] .mmm-drawer .mmm-da-ico {
    stroke: #5FA886 !important;
    fill: none !important;
    opacity: 1 !important;
    color: #5FA886 !important;
}

/* Icons inside sub-panel items in dark mode — full visibility */
.mmm-dark .mmm-ms .mmm-da-ico,
.mmm-dark .mmm-msl .mmm-da-ico,
html[data-theme="dark"] .mmm-ms .mmm-da-ico,
html[data-theme="dark"] .mmm-msl .mmm-da-ico {
    stroke: #5FA886 !important;
    fill: none !important;
    opacity: 1 !important;
    color: #5FA886 !important;
}

/* CRITICAL: Force ALL drawer icons to be green in dark mode */
.mmm-dark .mmm-drawer svg.mmm-da-ico,
html[data-theme="dark"] .mmm-drawer svg.mmm-da-ico,
.mmm-dark .mmm-dm .mmm-da-ico,
html[data-theme="dark"] .mmm-dm .mmm-da-ico {
    stroke: #5FA886 !important;
    fill: none !important;
    opacity: 1 !important;
    color: #5FA886 !important;
}

/* Active parent in dark mode - DISABLED */
/* .mmm-dark .mmm-da.mmm-active-parent,
html[data-theme="dark"] .mmm-da.mmm-active-parent {
    background: rgba(255,255,255,.08) !important;
} */

/* Dark mode hover - icons should stay green always */
@media(hover:hover) and (pointer:fine){
.mmm-dark .mmm-da:hover,
.mmm-dark .mmm-drawer a:hover,
html[data-theme="dark"] .mmm-da:hover,
html[data-theme="dark"] .mmm-drawer a:hover {
    color: #ccc !important;
    background: transparent !important; /* No background change */
}
.mmm-dark .mmm-da:hover .mmm-da-ico,
html[data-theme="dark"] .mmm-da:hover .mmm-da-ico,
.mmm-dark .mmm-drawer .mmm-da:hover .mmm-da-ico,
html[data-theme="dark"] .mmm-drawer .mmm-da:hover .mmm-da-ico {
    opacity: 1 !important;
    stroke: #5FA886 !important;
    color: #5FA886 !important;
}
}

/* ═══════════════════════════════════════════════════════════════
   STRICT iOS ONLY HOVER KILLER
   ═══════════════════════════════════════════════════════════════ */

/* 1. איפוס רקע, טקסט ואנימציות אך ורק ב-iOS */
.is-ios-device .mmm-drawer a:hover,
.is-ios-device .mmm-drawer .mmm-da:hover,
.is-ios-device .mmm-drawer .mmm-msl:hover,
.is-ios-device .mmm-drawer [role="button"]:hover {
    background-color: transparent !important;
    color: var(--mmm-dtxt) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* 2. איפוס האייקונים החופשיים ב-iOS */
.is-ios-device .mmm-drawer a:hover .mmm-da-ico,
.is-ios-device .mmm-drawer .mmm-da:hover .mmm-da-ico,
.is-ios-device .mmm-drawer .mmm-msl:hover .mmm-da-ico {
    opacity: 0.7 !important;
    color: #5FA886 !important;
}

/* 3. איפוס הקופסה הירוקה של האייקון ב-iOS */
.is-ios-device .mmm-drawer a:hover .mmm-ico,
.is-ios-device .mmm-drawer .mmm-msl:hover .mmm-ico {
    background: rgba(95,168,134,.08) !important;
    color: var(--mmm-green) !important;
}

/* ═════ תמיכת מצב כהה ל-iOS ═════ */
.is-ios-device .mmm-dark .mmm-drawer a:hover,
.is-ios-device .mmm-dark .mmm-drawer .mmm-da:hover,
.is-ios-device .mmm-dark .mmm-drawer .mmm-msl:hover,
html[data-theme="dark"].is-ios-device .mmm-drawer a:hover,
html[data-theme="dark"].is-ios-device .mmm-drawer .mmm-da:hover,
html[data-theme="dark"].is-ios-device .mmm-drawer .mmm-msl:hover {
    color: #fff !important;
    background-color: transparent !important;
}

.is-ios-device .mmm-dark .mmm-drawer a:hover .mmm-da-ico,
.is-ios-device .mmm-dark .mmm-drawer .mmm-msl:hover .mmm-da-ico,
html[data-theme="dark"].is-ios-device .mmm-drawer a:hover .mmm-da-ico,
html[data-theme="dark"].is-ios-device .mmm-drawer .mmm-msl:hover .mmm-da-ico {
    opacity: 0.85 !important;
    color: #5FA886 !important;
}

.is-ios-device .mmm-dark .mmm-drawer a:hover .mmm-ico,
.is-ios-device .mmm-dark .mmm-drawer .mmm-msl:hover .mmm-ico,
html[data-theme="dark"].is-ios-device .mmm-drawer a:hover .mmm-ico,
html[data-theme="dark"].is-ios-device .mmm-drawer .mmm-msl:hover .mmm-ico {
    background: rgba(111,191,154,.1) !important;
    color: #5FA886 !important;
}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important}}

/* ═══════════════════════════════════════════════════════════════
   CRITICAL OVERRIDE – Beats Elementor/theme CSS via high specificity
   Previously loaded inline in <body>, now in main CSS for consistency
   across all pages (not just where shortcode is rendered)
   ═══════════════════════════════════════════════════════════════ */

/* Reset font on all drawer children */
.mmm-drawer *,
.mmm-drawer *::before,
.mmm-drawer *::after {
    font-family:'Fredoka','Fredoka One','Heebo',sans-serif!important;
    box-sizing:border-box!important;
}

/* Drawer container */
.mmm-drawer {
    background:var(--mmm-dbg)!important;
    color:var(--mmm-dtxt)!important;
}

/* Header bar */
.mmm-drawer .mmm-dh {
    display:flex!important;align-items:center!important;justify-content:space-between!important;
    background-color:var(--mmm-dhbg)!important;
    padding:16px 20px!important;
    border-bottom:1px solid rgba(255,255,255,.15)!important;
    flex-shrink:0!important;
}
.mmm-drawer .mmm-dh-t { color:#fff!important;font-size:1.05rem!important;font-weight:700!important; }
.mmm-drawer .mmm-dh-x {
    color:#fff!important;border:none!important;background:transparent!important;
    font-size:0!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    width:36px!important;height:36px!important;cursor:pointer!important;
}
.mmm-drawer .mmm-dh-x svg { display:block!important;visibility:visible!important; }

/* Level-1 drawer items */
.mmm-drawer .mmm-da,
.mmm-drawer a.mmm-da,
.mmm-drawer [role="button"].mmm-da {
    display:flex!important;align-items:center!important;gap:14px!important;
    width:100%!important;padding:15px 20px!important;
    font-size:1rem!important;font-weight:600!important;
    color:var(--mmm-dtxt)!important;
    background:transparent!important;border:none!important;
    text-align:right!important;direction:rtl!important;line-height:1.5!important;
    text-decoration:none!important;
    -webkit-tap-highlight-color:transparent!important;
    -webkit-touch-callout:none!important;
    user-select:none!important;
}
.mmm-drawer .mmm-di { border-bottom:1px solid var(--mmm-dbrd)!important; }

/* Chevron arrow – CSS-drawn, no font dependency */
.mmm-drawer .mmm-arr {
    display:inline-block!important;flex-shrink:0!important;
    width:8px!important;height:8px!important;
    border-right:2px solid #6b7f8e!important;
    border-bottom:2px solid #6b7f8e!important;
    transform:rotate(135deg)!important;
    font-size:0!important;color:transparent!important;
    vertical-align:middle!important;background:transparent!important;
}

/* Sub-panel back button - ALWAYS green background, NO hover effects */
.mmm-drawer .mmm-msb,
.mmm-drawer [role="button"].mmm-msb,
.mmm-drawer .mmm-msb:hover,
.mmm-drawer .mmm-msb:active,
.mmm-drawer .mmm-msb:focus,
.mmm-drawer [role="button"].mmm-msb:hover,
.mmm-drawer [role="button"].mmm-msb:active,
.mmm-drawer [role="button"].mmm-msb:focus,
body .mmm-drawer .mmm-msb,
body .mmm-drawer .mmm-msb:hover,
body .mmm-drawer .mmm-msb:active {
    display:flex!important;align-items:center!important;gap:10px!important;
    background-color:var(--mmm-dhbg)!important;
    background:var(--mmm-dhbg)!important;
    color:#fff!important;
    padding:16px 20px!important;width:100%!important;
    border:none!important;border-bottom:1px solid rgba(255,255,255,.15)!important;
    font-size:1rem!important;font-weight:700!important;
    text-align:right!important;direction:rtl!important;
    -webkit-tap-highlight-color:transparent!important;
}

/* Back arrow */
.mmm-drawer .mmm-arr-back {
    display:inline-block!important;flex-shrink:0!important;
    width:8px!important;height:8px!important;
    border-right:2px solid rgba(255,255,255,.7)!important;
    border-bottom:2px solid rgba(255,255,255,.7)!important;
    transform:rotate(315deg)!important;
    font-size:0!important;color:transparent!important;
    vertical-align:middle!important;background:transparent!important;
}

/* Sub-panel leaf items */
.mmm-drawer .mmm-msl,
.mmm-drawer a.mmm-msl {
    display:flex!important;align-items:center!important;gap:14px!important;
    padding:13px 20px!important;
    font-size:.95rem!important;font-weight:500!important;
    color:var(--mmm-dtxt)!important;
    border-bottom:1px solid var(--mmm-dbrd)!important;
    text-decoration:none!important;background:transparent!important;
    -webkit-tap-highlight-color:transparent!important;
    -webkit-touch-callout:none!important;
    user-select:none!important;
}

/* Section headers */
.mmm-drawer .mmm-mss {
    font-size:.78rem!important;font-weight:700!important;
    color:var(--mmm-green)!important;
    padding:14px 20px 6px!important;
    border-bottom:2px solid var(--mmm-green)!important;
    margin:0 20px 2px!important;
    display:block!important;
}

/* ═══════════════════════════════════════════════════════════════
   CRITICAL: Kill ALL background effects on drawer items
   User request: NO background change ever, on any device
   ═══════════════════════════════════════════════════════════════ */
.mmm-drawer .mmm-da,
.mmm-drawer a.mmm-da,
.mmm-drawer [role="button"].mmm-da,
.mmm-drawer .mmm-da:hover,
.mmm-drawer .mmm-da:focus,
.mmm-drawer .mmm-da:active,
.mmm-drawer a.mmm-da:hover,
.mmm-drawer a.mmm-da:focus,
.mmm-drawer a.mmm-da:active,
.mmm-drawer [role="button"].mmm-da:hover,
.mmm-drawer [role="button"].mmm-da:focus,
.mmm-drawer [role="button"].mmm-da:active,
body .mmm-drawer .mmm-da,
body .mmm-drawer .mmm-da:hover,
body .mmm-drawer .mmm-da:active {
    background: transparent !important;
    background-color: transparent !important;
}

/* Same for mobile sub-panel items */
.mmm-drawer .mmm-msl,
.mmm-drawer a.mmm-msl,
.mmm-drawer .mmm-msl:hover,
.mmm-drawer .mmm-msl:focus,
.mmm-drawer .mmm-msl:active,
.mmm-drawer a.mmm-msl:hover,
.mmm-drawer a.mmm-msl:focus,
.mmm-drawer a.mmm-msl:active,
body .mmm-drawer .mmm-msl,
body .mmm-drawer .mmm-msl:hover,
body .mmm-drawer .mmm-msl:active {
    background: transparent !important;
    background-color: transparent !important;
}

/* Dark mode - same rules */
.mmm-dark .mmm-drawer .mmm-da,
.mmm-dark .mmm-drawer .mmm-da:hover,
.mmm-dark .mmm-drawer .mmm-da:active,
.mmm-dark .mmm-drawer .mmm-msl,
.mmm-dark .mmm-drawer .mmm-msl:hover,
.mmm-dark .mmm-drawer .mmm-msl:active,
html[data-theme="dark"] .mmm-drawer .mmm-da,
html[data-theme="dark"] .mmm-drawer .mmm-da:hover,
html[data-theme="dark"] .mmm-drawer .mmm-da:active,
html[data-theme="dark"] .mmm-drawer .mmm-msl,
html[data-theme="dark"] .mmm-drawer .mmm-msl:hover,
html[data-theme="dark"] .mmm-drawer .mmm-msl:active {
    background: transparent !important;
    background-color: transparent !important;
}

/* Dark mode - back button KEEPS its background */
.mmm-dark .mmm-drawer .mmm-msb,
.mmm-dark .mmm-drawer .mmm-msb:hover,
.mmm-dark .mmm-drawer .mmm-msb:active,
html[data-theme="dark"] .mmm-drawer .mmm-msb,
html[data-theme="dark"] .mmm-drawer .mmm-msb:hover,
html[data-theme="dark"] .mmm-drawer .mmm-msb:active {
    background: var(--mmm-dhbg) !important;
    background-color: var(--mmm-dhbg) !important;
}

/* ═══════════════════════════════════════════════════════════════
   Mobile tap feedback: ICONS & IMAGES ONLY (subtle scale grow)
   ═══════════════════════════════════════════════════════════════ */

/* Add smooth transition to icons and images */
.mmm-drawer .mmm-ico,
.mmm-drawer .mmm-da-ico,
.mmm-drawer .mmm-msi,
.mmm-drawer .mmm-th {
    transition: transform 0.15s ease !important;
}

/* Scale on active (tap) - mobile */
.mmm-drawer .mmm-da:active .mmm-ico,
.mmm-drawer .mmm-msl:active .mmm-ico,
.mmm-drawer .mmm-da:active .mmm-da-ico,
.mmm-drawer .mmm-msl:active .mmm-da-ico,
.mmm-drawer .mmm-da:active .mmm-msi,
.mmm-drawer .mmm-msl:active .mmm-msi,
.mmm-drawer .mmm-da:active .mmm-th,
.mmm-drawer .mmm-msl:active .mmm-th {
    transform: scale(1.12) !important;
}

/* ── Per-item: no media background (🎨 רקע מדיה = בלי) ──
   Must stay at the very end of the file: it wins on source order over the
   hover and dark-mode rules above that force a background back on. Anything
   added after this that sets `background` on these elements breaks it silently. */
.mmm-nobg,
.mmm-th.mmm-nobg,
.mmm-msi.mmm-nobg,
.mmm-ico.mmm-nobg,
.mmm-lm-img.mmm-nobg,
.mmm-dark .mmm-nobg,
html[data-theme="dark"] .mmm-nobg,
.mmm-a:hover .mmm-nobg,
.mmm-sl:hover .mmm-nobg,
.mmm-panel .mmm-a:hover .mmm-ico.mmm-nobg,
.mmm-panel .mmm-sl:hover .mmm-ico.mmm-nobg {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* ── Per-item: 'full' shape — whole image, no circle crop (⬭ = מלא) ── */
.mmm-th.mmm-fit,
.mmm-msi.mmm-fit,
.mmm-lm-img.mmm-fit {
    border-radius: 8px !important;
}
.mmm-th.mmm-fit img,
.mmm-msi.mmm-fit img,
.mmm-lm-img.mmm-fit img {
    object-fit: contain !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   CTA — פריט מודגש ככפתור (⭐ הדגשה ככפתור = כפתור מודגש)
   ═══════════════════════════════════════════════════════════════════════
   Placed at the end of the file on purpose: it has to win on source order
   against the dark-mode and hover blocks above, which set link colors with
   !important.

   Two color schemes, by context:

   - Desktop bar, light: yellow. The bar is the brand green, so a green pill on
     it would be green on green.
   - Desktop bar, dark: green. mizrahnik-dark-mode forces every .e-con to
     #111827, so the bar is dark there and green reads at 6.3:1 against it.
   - Mobile drawer, both themes: green.

   Dark text on the yellow and white text on the green are both hard
   requirements, not preferences — see the token comments at the top. */

/* ── Desktop nav bar, light mode ── */
.mmm-link.mmm-cta,
body .mmm-link.mmm-cta,
.elementor .mmm-link.mmm-cta,
.mmm-link.mmm-cta:link,
.mmm-link.mmm-cta:visited {
    background: var(--mmm-cta-bg) !important;
    color: var(--mmm-cta-text) !important;
    border-radius: 50px;
    padding-block: 8px;
    padding-inline: 20px;
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(26, 45, 61, .18);
    transition: background 150ms cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 150ms cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mmm-link.mmm-cta:hover,
.mmm-link.mmm-cta.active,
body .mmm-link.mmm-cta:hover {
    background: var(--mmm-cta-bg-h) !important;
    color: var(--mmm-cta-text) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(26, 45, 61, .24);
}
.mmm-link.mmm-cta:active { transform: scale(.97); }
/* The underline that marks an open panel would cut across the pill */
.mmm-link.mmm-cta::after { display: none !important; }
/* The icon rule for the bar forces stroke:#fff because the bar is green.
   On the yellow pill that would be invisible. */
.mmm-link.mmm-cta .mmm-lm svg,
.mmm-link.mmm-cta .mmm-lm .mmm-da-ico {
    stroke: var(--mmm-cta-text) !important;
    opacity: 1;
}
/* Chevron on a highlighted parent item */
.mmm-link.mmm-cta .mmm-chev { color: var(--mmm-cta-text) !important; opacity: .8; }
.mmm-link.mmm-cta:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}
/* The bar already tightens hard here — keep the pill from forcing a second row */
@media(min-width:1024px) and (max-width:1279px){
    .mmm-link.mmm-cta,body .mmm-link.mmm-cta,.elementor .mmm-link.mmm-cta{
        padding-inline: 12px;
    }
}

/* ── Desktop nav bar, dark mode: green instead of yellow ──
   Declared after the light block and with the theme selector, so it wins on
   both specificity and source order. Every property that carries a color is
   restated here; inheriting half of them from the yellow block is how a pill
   ends up green with dark-green text nobody can read. */
html[data-theme="dark"] .mmm-link.mmm-cta,
html[data-theme="dark"] body .mmm-link.mmm-cta,
html[data-theme="dark"] .mmm-link.mmm-cta:link,
html[data-theme="dark"] .mmm-link.mmm-cta:visited,
.mmm-dark .mmm-link.mmm-cta,
.mmm-dark .mmm-link.mmm-cta:link,
.mmm-dark .mmm-link.mmm-cta:visited {
    background: var(--mmm-cta-green) !important;
    color: var(--mmm-cta-green-text) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .38);
}
html[data-theme="dark"] .mmm-link.mmm-cta:hover,
html[data-theme="dark"] .mmm-link.mmm-cta.active,
html[data-theme="dark"] body .mmm-link.mmm-cta:hover,
.mmm-dark .mmm-link.mmm-cta:hover,
.mmm-dark .mmm-link.mmm-cta.active {
    background: var(--mmm-cta-green-h) !important;
    color: var(--mmm-cta-green-text) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .45);
}
/* The icon and chevron follow the text, not the yellow rule above */
html[data-theme="dark"] .mmm-link.mmm-cta .mmm-lm svg,
html[data-theme="dark"] .mmm-link.mmm-cta .mmm-lm .mmm-da-ico,
.mmm-dark .mmm-link.mmm-cta .mmm-lm svg,
.mmm-dark .mmm-link.mmm-cta .mmm-lm .mmm-da-ico {
    stroke: var(--mmm-cta-green-text) !important;
}
html[data-theme="dark"] .mmm-link.mmm-cta .mmm-chev,
.mmm-dark .mmm-link.mmm-cta .mmm-chev {
    color: var(--mmm-cta-green-text) !important;
}

/* ── Mobile drawer: full-width button, in its place in the menu order ──
   Green in both themes. The drawer sits on white in light mode and on
   #111827 in dark, and the same green works against both — unlike the bar,
   whose light-mode background IS the brand green and forces yellow there. */
.mmm-di.mmm-cta-row { border-bottom: none !important; }
.mmm-drawer .mmm-di .mmm-da.mmm-cta,
.mmm-drawer .mmm-di a.mmm-da.mmm-cta,
.mmm-drawer .mmm-di [role="button"].mmm-da.mmm-cta,
html[data-theme="dark"] .mmm-drawer .mmm-di .mmm-da.mmm-cta,
html[data-theme="dark"] .mmm-drawer .mmm-di a.mmm-da.mmm-cta,
html[data-theme="dark"] .mmm-drawer .mmm-di [role="button"].mmm-da.mmm-cta,
.mmm-dark .mmm-drawer .mmm-di .mmm-da.mmm-cta,
.mmm-dark .mmm-drawer .mmm-di a.mmm-da.mmm-cta {
    background: var(--mmm-cta-green) !important;
    color: var(--mmm-cta-green-text) !important;
    border-radius: 14px !important;
    margin: 12px 16px !important;
    padding: 14px 18px !important;
    width: auto !important;
    min-height: 48px;                 /* tap target */
    justify-content: center !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 12px rgba(26, 45, 61, .22) !important;
    transition: transform 100ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mmm-drawer .mmm-di .mmm-da.mmm-cta:active { transform: scale(.97); }
/* Every text-bearing child, in both themes. The drawer link rule and the
   dark-mode blocks above both set color with !important, so anything not
   named here reverts to the drawer's default green-on-white. */
.mmm-drawer .mmm-di .mmm-da.mmm-cta .mmm-da-txt,
html[data-theme="dark"] .mmm-drawer .mmm-di .mmm-da.mmm-cta .mmm-da-txt,
.mmm-dark .mmm-drawer .mmm-di .mmm-da.mmm-cta .mmm-da-txt {
    color: var(--mmm-cta-green-text) !important;
}
.mmm-drawer .mmm-di .mmm-da.mmm-cta .mmm-arr,
html[data-theme="dark"] .mmm-drawer .mmm-di .mmm-da.mmm-cta .mmm-arr,
.mmm-dark .mmm-drawer .mmm-di .mmm-da.mmm-cta .mmm-arr {
    color: var(--mmm-cta-green-text) !important; opacity: .8;
}
/* Four separate dark-mode blocks above force drawer icons to the brand green.
   On this green button that would be green on green. */
.mmm-drawer .mmm-di .mmm-da.mmm-cta .mmm-da-ico,
.mmm-drawer .mmm-di .mmm-da.mmm-cta svg.mmm-da-ico,
html[data-theme="dark"] .mmm-drawer .mmm-di .mmm-da.mmm-cta .mmm-da-ico,
html[data-theme="dark"] .mmm-drawer .mmm-di .mmm-da.mmm-cta svg.mmm-da-ico,
.mmm-dark .mmm-drawer .mmm-di .mmm-da.mmm-cta .mmm-da-ico,
.mmm-dark .mmm-drawer .mmm-di .mmm-da.mmm-cta svg.mmm-da-ico {
    stroke: var(--mmm-cta-green-text) !important;
    color: var(--mmm-cta-green-text) !important;
    opacity: 1 !important;
}
/* An image thumb inside the button keeps its own pixels — only the ring around
   it needs to stop being the gray drawer chip.

   :not(.mmm-nobg) matters. This rule is more specific than the .mmm-nobg block
   above and comes later, so without the exclusion it would quietly override the
   item's own "🎨 רקע מאחורי המדיה = בלי רקע" setting and there would be no way
   to turn the ring off on a CTA. */
.mmm-drawer .mmm-di .mmm-da.mmm-cta .mmm-msi:not(.mmm-nobg) {
    background: rgba(255, 255, 255, .18) !important;
    box-shadow: none !important;
}
.mmm-drawer .mmm-di .mmm-da.mmm-cta:focus-visible {
    outline: 3px solid var(--mmm-cta-green-text);
    outline-offset: 2px;
}


/* ── Light / dark image pair ───────────────────────────────────────────────
   An item can carry a second image for dark mode (a white PNG icon reads on a
   dark or green surface and disappears on a light one). Both are rendered and
   CSS picks — the theme is a data-attribute set on the client, so PHP cannot
   know which to emit.

   Scoped to .mmm-swap on purpose. Applied globally, an item with only one
   image would get display:none in dark mode and vanish. .mmm-swap is only
   emitted when both images exist. */
.mmm-swap .mmm-i-d { display: none; }
html[data-theme="dark"] .mmm-swap .mmm-i-l,
.mmm-dark .mmm-swap .mmm-i-l { display: none; }
html[data-theme="dark"] .mmm-swap .mmm-i-d,
.mmm-dark .mmm-swap .mmm-i-d { display: block; }