/**
 * MegaMenu Frontend Styles
 * Compatible with MegaMenuComponent.php renderer
 *
 * Architecture:
 *   - BEM-inspired naming: mm-block, mm-block__element, mm-block--modifier
 *   - CSS custom properties for easy theming
 *   - Mobile-first responsive design
 *   - Smooth transitions and animations
 *   - All classes match the HTML output of MegaMenuComponent.php
 *
 * Features:
 *   - Horizontal & vertical menu orientations
 *   - Overlay, push, and inline display modes
 *   - Click and hover trigger modes
 *   - Slide, fade, scale, and none animations
 *   - RTL language support
 *   - Fullscreen mobile mode
 *   - Badge system (top-right, top-left, bottom-right, bottom-left)
 *   - Entity elements (product, category, brand, CMS)
 *   - Active state highlighting with indicators
 *   - Custom scrollbar styling
 *   - Sticky positioning
 *   - Width variants (FULL, CONTAINER, PARENT)
 *   - prefers-reduced-motion accessibility
 *   - Print-friendly layout
 *
 * @version 4.0.0
 * @compatible PrestaShop 9 / PHP 8.1+
 */

/* ==========================================================================
   CSS CUSTOM PROPERTIES
   ========================================================================== */

.mm-container {
    /* Colors */
    --mm-color-text: #1e293b;
    --mm-color-text-muted: #64748b;
    --mm-color-link: inherit;
    --mm-color-link-hover: #3b82f6;
    --mm-color-submenu-bg: #ffffff;
    --mm-color-submenu-text: #374151;
    --mm-color-submenu-link: #64748b;
    --mm-color-submenu-link-hover: #1e293b;
    --mm-color-submenu-link-hover-bg: #f1f5f9;
    --mm-color-submenu-heading: #1e293b;
    --mm-color-overlay: rgba(0, 0, 0, 0.3);
    /* Submenu */
    --mm-submenu-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    --mm-submenu-border-radius: 8px;
    --mm-submenu-offset-top: 0px;
    --mm-submenu-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --mm-submenu-padding: 16px;
    --mm-submenu-z-index: 1050;
    /* Menu item */
    --mm-item-padding: 10px 16px;
    --mm-item-font-size: 14px;
    --mm-item-font-weight: 500;
    --mm-item-gap: 0px;
    /* Nested levels */
    --mm-level-indent: 16px;
    --mm-level-border-color: #e2e8f0;
    /* Mobile */
    --mm-mobile-breakpoint: 768px;
    --mm-mobile-toggle-size: 40px;
    --mm-mobile-submenu-bg: #f8fafc;
    /* Transitions */
    --mm-transition-fast: 0.15s ease;
    --mm-transition-normal: 0.25s ease;
    /* Animation */
    --mm-animation-duration: 0.25s;
    --mm-push-width: 300px;
    /* Badge */
    --mm-badge-font-size: 10px;
    --mm-badge-font-weight: 700;
    --mm-badge-padding: 2px 6px;
    --mm-badge-border-radius: 999px;
    --mm-badge-color: #ffffff;
    --mm-badge-bg: #ef4444;
    /* Active indicator */
    --mm-active-indicator-size: 2px;
    --mm-active-indicator-color: var(--mm-color-link-hover);
    /* Scrollbar */
    --mm-scrollbar-width: 6px;
    --mm-scrollbar-color: rgba(0, 0, 0, 0.2);
    --mm-scrollbar-hover-color: rgba(0, 0, 0, 0.35);
}

/* ==========================================================================
   BASE CONTAINER
   ========================================================================== */

.mm-container {
    position: relative;
    font-family: inherit;
    font-size: var(--mm-item-font-size);
    line-height: 1.5;
    color: var(--mm-color-text);
    z-index: var(--mm-submenu-z-index);
}

.mm-container--horizontal { display: flex; flex-direction: row; align-items: center; }
.mm-container--vertical { display: flex; flex-direction: column; }

/* ==========================================================================
   CONTAINER WIDTH VARIANTS
   ========================================================================== */

.mm-container--width-FULL { width: 100%; }
.mm-container--width-CONTAINER { max-width: 1200px; margin-left: auto; margin-right: auto; width: 100%; }
.mm-container--width-PARENT { width: 100%; }

/* ==========================================================================
   BACKDROP (overlay & push modes)
   ========================================================================== */

.mm-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 1049;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mm-backdrop.mm-backdrop--visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ==========================================================================
   MOBILE SIDEBAR TRIGGER (universal "Menu" button + backdrop)
   Hidden by default; revealed only inside the mobile media query below —
   same pattern as .mm-mobile-toggle just underneath. Without this base
   rule the trigger has no display:none to fall back on above the
   breakpoint and stays visible on desktop.
   ========================================================================== */

.mm-mobile-sidebar-trigger {
    display: none;
}

.mm-mobile-sidebar-backdrop {
    display: none;
}

/* ==========================================================================
   MOBILE TOGGLE BUTTON (horizontal menus)
   ========================================================================== */

.mm-mobile-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: var(--mm-mobile-toggle-size);
    height: var(--mm-mobile-toggle-size);
    padding: 8px;
    background: none;
    border: 1px solid var(--mm-level-border-color);
    border-radius: 6px;
    cursor: pointer;
    z-index: calc(var(--mm-submenu-z-index) + 20);
}

.mm-toggle-bar {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--mm-color-text);
    border-radius: 2px;
    transition: var(--mm-transition-fast);
}

/* Hamburger → X animation */
.mm-container.mm--open .mm-mobile-toggle .mm-toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mm-container.mm--open .mm-mobile-toggle .mm-toggle-bar:nth-child(2) { opacity: 0; }
.mm-container.mm--open .mm-mobile-toggle .mm-toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   TRIGGER BUTTON (vertical menus)
   ========================================================================== */

.mm-wrapper--vertical { position: relative; display: inline-flex; flex-direction: column; }

.mm-trigger-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--mm-item-padding);
    background: none;
    border: 1px solid var(--mm-level-border-color);
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--mm-item-font-size);
    font-weight: var(--mm-item-font-weight);
    color: var(--mm-color-text);
    text-decoration: none;
    transition: background var(--mm-transition-fast), color var(--mm-transition-fast);
}

.mm-trigger-btn:hover { opacity: 0.9; background: var(--mm-color-submenu-link-hover-bg); }
.mm-trigger-btn:focus-visible { outline: 2px solid var(--mm-color-link-hover); outline-offset: 2px; }

.mm-trigger-icon { flex-shrink: 0; display: block; object-fit: cover; }
.mm-trigger-icon--left { margin-right: 4px; }
.mm-trigger-icon--right { margin-left: 4px; }
.mm-trigger-text { flex-shrink: 0; }

.mm-trigger-arrow { font-size: 10px; line-height: 1; transition: transform var(--mm-transition-normal); }
.mm-trigger-arrow--left { margin-right: 4px; order: -1; }
.mm-trigger-arrow--right { margin-left: 4px; }

.mm-wrapper--vertical .mm-trigger-btn[aria-expanded="true"] .mm-trigger-arrow--right { transform: rotate(180deg); }

/* Hide the vertical container by default when inside a trigger wrapper.
   It will be shown via JS (adds mm-container--open) or CSS sibling selector. */
.mm-wrapper--vertical > .mm-container--vertical {
    display: none;
}

/* Show the vertical container when trigger is expanded (CSS sibling selector fallback) */
.mm-wrapper--vertical .mm-trigger-btn[aria-expanded="true"] ~ .mm-container--vertical { display: flex; }

/* Show the vertical container when JS adds mm-container--open */
.mm-wrapper--vertical > .mm-container--vertical.mm-container--open { display: flex; }

/* ==========================================================================
   MENU LIST
   ========================================================================== */

.mm-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--mm-item-gap);
}

.mm-container[data-menu-type="vertical"] .mm-list,
.mm-container--vertical .mm-list {
    flex-direction: column;
}

/* ==========================================================================
   MENU ITEM
   ========================================================================== */

.mm-item { position: relative; }
.mm-item--inactive { opacity: 0.5; pointer-events: none; }

/* ==========================================================================
   MENU LINK
   ========================================================================== */

.mm-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: var(--mm-item-padding);
    text-decoration: none;
    color: var(--mm-color-link);
    font-weight: var(--mm-item-font-weight);
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--mm-transition-fast), background var(--mm-transition-fast);
    border-radius: 4px;
    position: relative;
}

.mm-link:hover { color: var(--mm-color-link-hover); }

/* ==========================================================================
   MENU ICON
   ========================================================================== */

.mm-icon { flex-shrink: 0; display: inline-block; vertical-align: middle; }
.mm-icon--left { margin-right: 6px; }
.mm-icon--right { margin-left: 6px; }

/* ==========================================================================
   MENU LABEL
   ========================================================================== */

.mm-label { flex-shrink: 0; }

/* ==========================================================================
   BADGE STYLES
   ========================================================================== */

.mm-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--mm-badge-font-size);
    font-weight: var(--mm-badge-font-weight);
    line-height: 1;
    padding: var(--mm-badge-padding);
    border-radius: var(--mm-badge-border-radius);
    background: var(--mm-badge-bg);
    color: var(--mm-badge-color);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    z-index: 1;
}

/* Position variants — on menu links (relative to .mm-link) */
.mm-link > .mm-badge--top-right { position: absolute; top: 2px; right: -4px; }
.mm-link > .mm-badge--top-left { position: absolute; top: 2px; left: -4px; }
.mm-link > .mm-badge--bottom-right { position: absolute; bottom: 2px; right: -4px; }
.mm-link > .mm-badge--bottom-left { position: absolute; bottom: 2px; left: -4px; }

/* Position variants — on elements (relative to .mm-element) */
.mm-element > .mm-badge--top-right { position: absolute; top: -6px; right: -6px; }
.mm-element > .mm-badge--top-left { position: absolute; top: -6px; left: -6px; }
.mm-element > .mm-badge--bottom-right { position: absolute; bottom: -6px; right: -6px; }
.mm-element > .mm-badge--bottom-left { position: absolute; bottom: -6px; left: -6px; }

/* ==========================================================================
   SUBMENU ARROW
   ========================================================================== */

.mm-arrow {
    display: inline-flex;
    align-items: center;

    transition: transform var(--mm-transition-normal);
}

.mm-arrow svg { display: block; }
.mm-item:hover > .mm-link > .mm-arrow { transform: rotate(180deg); }

/* ==========================================================================
   DROPDOWN ICON (DropdownIconConfig)
   ========================================================================== */

.mm-dropdown-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.mm-dropdown-icon img {
    display: block;
    object-fit: contain;
}

.mm-dropdown-icon--left { order: -1; }
.mm-dropdown-icon--right { order: 1; }

/* Rotation on submenu open */
.mm-item.mm--open > .mm-link .mm-dropdown-icon--rotate,
.mm-item:hover > .mm-link .mm-dropdown-icon--rotate {
    transform: rotate(var(--mm-rotate-deg, 180deg));
}

/* ==========================================================================
   MENU ITEM ALIGNMENT (alignVertical / alignHorizontal)
   ========================================================================== */

.mm-item--valign-top { align-self: flex-start; }
.mm-item--valign-center { align-self: center; }
.mm-item--valign-bottom { align-self: flex-end; }

.mm-item--halign-left .mm-link { justify-content: flex-start; text-align: left; }
.mm-item--halign-center .mm-link { justify-content: center; text-align: center; }
.mm-item--halign-right .mm-link { justify-content: flex-end; text-align: right; }

/* ==========================================================================
   ACTIVE STATE HIGHLIGHTING
   ========================================================================== */

.mm-item--active > .mm-link { color: var(--mm-color-link-hover); font-weight: 600; }

/* Horizontal active indicator — bottom bar */
.mm-container--horizontal .mm-item--active > .mm-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--mm-active-indicator-size);
    background: var(--mm-active-indicator-color);
    border-radius: 1px;
}

/* Vertical active indicator — left bar */
.mm-container--vertical .mm-item--active > .mm-link::after {
    content: '';
    position: absolute;
    bottom: auto;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: var(--mm-active-indicator-color);
    border-radius: 0 2px 2px 0;
}

/* ==========================================================================
   SUBMENU (DROPDOWN)
   ========================================================================== */

.mm-submenu {
    position: absolute;
    top: calc(100% + var(--mm-submenu-offset-top));
    min-width: 280px;
    background: var(--mm-color-submenu-bg);
    box-shadow: var(--mm-submenu-shadow);
    border-radius: var(--mm-submenu-border-radius);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity var(--mm-submenu-transition),
        visibility var(--mm-submenu-transition),
        transform var(--mm-submenu-transition);
    z-index: var(--mm-submenu-z-index);
    overflow: hidden;
    /* border-box is good hygiene here since per-instance builder styles
       (e.g. .mm-submenu--<id>) apply padding/border directly on this
       element and width is also set per-instance — but note this alone
       does NOT fix the mobile accordion collapse below: max-height:0 only
       floors the box at its padding+border total, it does not zero them.
       The actual collapse-to-0 fix is in the mobile media query, which
       zeroes padding/border/margin directly on the closed state. */
    box-sizing: border-box;
}

/* --- Position: center (default) --- */
.mm-submenu--center { left: 50%; transform: translateX(-50%) translateY(4px); }
.mm-item:hover > .mm-submenu--center,
.mm-item.mm--open > .mm-submenu--center { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }

/* --- Position: left --- */
.mm-submenu--left { left: 0; transform: translateY(4px); }
.mm-item:hover > .mm-submenu--left,
.mm-item.mm--open > .mm-submenu--left { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }

/* --- Position: right --- */
.mm-submenu--right { right: 0; left: auto; transform: translateY(4px); }
.mm-item:hover > .mm-submenu--right,
.mm-item.mm--open > .mm-submenu--right { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }

/* --- Width: FULL viewport --- */
.mm-submenu--full { /*width: 100vw;*/ left: 0; right: 0; }

/* --- Width: global-menu (stretches to nav) ---
   NOTE: .mm-item is the nearest positioned ancestor (.mm-list/.mm-container
   are not position:relative), so left:0/right:0 here only reaches the
   individual <li>'s own box, not the full nav strip. This is a same-paint
   fallback only; setupHorizontalSubmenuPositioning() in megamenu.js measures
   .mm-list's actual rect on mouseenter/resize and applies a precise pixel
   left/width against it once the reference element is available. */
.mm-submenu--global-menu { left: 0; right: 0; width: auto; }

/* --- Width: container (size against .mm-container) ---
   Same positioned-ancestor limitation as --global-menu above: CSS alone
   can only approximate this against .mm-item. JS overrides with the real
   .mm-container rect once it can measure it. */
.mm-submenu--container { left: 0; right: 0; width: auto; }

/* --- Width: parent-item (size against the <li> itself) ---
   This is the one reference where .mm-item already being the positioned
   ancestor is correct by construction — no width override needed here
   beyond what buildSubmenuWidthStyle() already emits inline. Position
   (left/center/right) still applies via the classes above. */
.mm-submenu--parent-item { /* intentionally minimal: .mm-item is already the correct anchor */ }

/* --- Width: window (fixed positioning) --- */
.mm-submenu--window { position: fixed !important; }
.mm-submenu--window.mm-submenu--center { left: 50%; transform: translateX(-50%); }
.mm-submenu--window.mm-submenu--left { left: 0; right: auto; transform: none; }
.mm-submenu--window.mm-submenu--right { right: 0; left: auto; transform: none; }

/* --- Vertical menu: submenu opens to the right --- */
.mm-container[data-menu-type="vertical"] .mm-submenu,
.mm-container--vertical .mm-submenu {
    top: 0;
    left: 100%;
    /* Width is driven through --mm-vsub-w CSS custom property.
       For auto-width submenus (no data-vsub-width), the natural width
       is measured once on init and stored in --mm-vsub-w.
       For user-defined widths (data-vsub-width > 0), an initial
       estimate is computed from the database config, and the
       positioning engine (positionSubmenu) adjusts on hover.
       The value is NEVER removed, only overwritten on resize,
       so there is no auto→set flash.  We do NOT use inline
       style.width/minWidth/maxWidth because those would override
       the user's database width setting (e.g. width: 100%). */
    width: var(--mm-vsub-w, auto);
    max-width: var(--mm-vsub-w, calc(100vw - 40px));
    min-width: var(--mm-vsub-min-w, 0);
    box-sizing: border-box;
}

/* Override mm-submenu--full and mm-submenu--window for vertical menus:
   these classes are designed for horizontal menus only and would break
   fly-out positioning (position:fixed + left:0 = off-screen). */
.mm-container--vertical .mm-submenu--full,
.mm-container[data-menu-type="vertical"] .mm-submenu--full {
    width: auto;
    left: 100%;
    right: auto;
}

.mm-container--vertical .mm-submenu--window,
.mm-container[data-menu-type="vertical"] .mm-submenu--window {
    position: absolute !important;
    left: 100%;
    right: auto;
    transform: none;
}

.mm-container[data-menu-type="vertical"] .mm-submenu--center,
.mm-container--vertical .mm-submenu--center {
    left: 100%;
    transform: translateY(4px);
}

.mm-container[data-menu-type="vertical"] .mm-item:hover > .mm-submenu--center,
.mm-container[data-menu-type="vertical"] .mm-item.mm--open > .mm-submenu--center,
.mm-container--vertical .mm-item:hover > .mm-submenu--center,
.mm-container--vertical .mm-item.mm--open > .mm-submenu--center {
    transform: translateY(0);
}

.mm-container[data-menu-type="vertical"] .mm-submenu--right,
.mm-container--vertical .mm-submenu--right {
    right: auto;
    left: 100%;
}

/* Show submenu on hover / JS active state / focus within for vertical menus */
.mm-container--vertical .mm-item:hover > .mm-submenu,
.mm-container--vertical .mm-item.mm--open > .mm-submenu,
.mm-container--vertical .mm-item.mm-item--vsub-active > .mm-submenu,
.mm-container--vertical .mm-item:focus-within > .mm-submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ==========================================================================
   VERTICAL SUBMENU INTELLIGENT POSITIONING SYSTEM
   ==========================================================================

   These classes support the dynamic vertical mega menu submenu positioning
   engine. The PHP renderer emits these classes and the JS positioning engine
   adds/removes them dynamically based on viewport calculations.

   CSS classes:
     .mm-vsub--inline           Mode 1: aligned with parent item (top:0)
     .mm-vsub--dropdown         Mode 2: aligned with dropdown container (JS computes top)
     .mm-vsub--parent-item      Legacy alias for .mm-vsub--inline
     .mm-vsub--menu-container   Legacy alias for .mm-vsub--dropdown
     .mm-vsub--open-end        Opens on the natural "end" side
     .mm-vsub--open-start      Opens on the "start" side (after flip)
     .mm-vsub--flip-left       Flipped to open on left side
     .mm-vsub--flip-right      Flipped to open on right side
     .mm-vsub--nudge-top       Nudged down to avoid top viewport overflow
     .mm-vsub--nudge-bottom    Height constrained to avoid bottom viewport overflow
     .mm-vsub--constrained-width  Width clamped to viewport available space
     .mm-vsub--positioning     JS is actively positioning (has transition)
     .mm-vsub--no-transition   Instant repositioning (no transition for scroll/resize)

   Data attributes on .mm-submenu:
     data-vertical-submenu-position  'dropdown' | 'inline' (per-submenu top position)
     data-vsub-instance          Unique ID for JS scoping
     data-vsub-position-mode     'parent-item' | 'menu-container' (global fallback)
     data-vsub-collision         'true' | 'false'
     data-vsub-viewport-padding  Minimum px from viewport edges
     data-vsub-width             User-defined width (0 = auto)
     data-vsub-width-unit        'px' | '%' | 'vw'
     data-vsub-width-reference   'available' | 'window' | 'parent' (how to
                                  interpret %): 'available' (default) = % of
                                  the space left after the parent
                                  dropdown/item, i.e.
                                  (windowWidth - parentDropdownWidth) * pct;
                                  'window' = % of full viewport width;
                                  'parent' = % of the parent item's own width
     data-vsub-width-position    'left' | 'right' (preferred open direction)
     data-vsub-natural-w         Pre-calculated natural width in px (set on init/resize)
   ========================================================================== */

/* Base vertical submenu item positioning context */
.mm-container--vertical .mm-item { position: relative; }

/* Vertical submenu fly-out base */
.mm-container--vertical .mm-submenu--vertical,
.mm-container--vertical .mm-vsub--inline,
.mm-container--vertical .mm-vsub--dropdown,
.mm-container--vertical .mm-vsub--parent-item,
.mm-container--vertical .mm-vsub--menu-container {
    position: absolute;
    top: 0;
    left: 100%;
    right: auto;
    /* width / max-width / min-width / box-sizing are inherited from the
       base .mm-container--vertical .mm-submenu rule above.  They are NOT
       repeated here so there is a single source of truth. */
    z-index: 1060;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease,
                left 0.2s ease, right 0.2s ease,
                top 0.15s ease,
                max-height 0.2s ease;
}

/* ── Mode 1: inline / parent-item — aligned with hovered item ── */
.mm-vsub--inline,
.mm-vsub--parent-item {
    left: 100%;
    right: auto;
    top: 100%; 
}
.mm-container[data-menu-type="vertical"] .mm-list{
    width:100%;
}
/* ── Mode 2: dropdown / menu-container — aligned with menu container ── */
/* JS computes a negative top offset (cRect.top - itemRect.top + container.clientTop)
   to pull the submenu up to the container's inner content edge (inside its border).
   The CSS top:0 here is a safe default; the JS inline style overrides it at runtime. */
.mm-vsub--dropdown,
.mm-vsub--menu-container {
    left: 100%;
    right: auto;
    top: 0;

}

/* ── Horizontal open direction classes ── */
.mm-vsub--open-end {
    left: 100% !important;
    right: auto !important;
}

.mm-vsub--open-start {
    right: 100% !important;
    left: auto !important;
    margin-left: 0;
    margin-right: 0;
}

/* ── Legacy flip classes (backwards compatibility) ── */
.mm-vsub--flip-right {
    left: 100% !important;
    right: auto !important;
}

.mm-vsub--flip-left {
    right: 100% !important;
    left: auto !important;
    margin-left: 0;
    margin-right: 0;
}

/* ── Vertical collision classes ── */
.mm-vsub--nudge-top {
    /* JS sets sub.style.top to push down from top edge */
}

.mm-vsub--nudge-bottom {
    overflow-y: auto;
}

/* ── Width constraint for viewport overflow prevention ── */
.mm-vsub--constrained-width {
    box-sizing: border-box;
    max-width: calc(100vw - 20px) !important;
    overflow-x: hidden;
}

/* ── Positioning transition state ── */
.mm-vsub--positioning {
    transition: opacity 0.2s ease, visibility 0.2s ease,
                left 0.2s ease, right 0.2s ease,
                top 0.15s ease,
                max-height 0.2s ease;
}

.mm-vsub--no-transition {
    transition: none !important;
}

/* ── RTL adjustments ── */
[dir="rtl"] .mm-vsub--inline,
[dir="rtl"] .mm-vsub--dropdown,
[dir="rtl"] .mm-vsub--parent-item,
[dir="rtl"] .mm-vsub--menu-container {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 0;
}

[dir="rtl"] .mm-vsub--open-end {
    right: 100% !important;
    left: auto !important;
    margin-right: 0;
    margin-left: 0;
}

[dir="rtl"] .mm-vsub--open-start {
    left: 100% !important;
    right: auto !important;

    margin-right: 0;
}

[dir="rtl"] .mm-vsub--flip-left {
    left: 100% !important;
    right: auto !important;

    margin-right: 0;
}

[dir="rtl"] .mm-vsub--flip-right {
    right: 100% !important;
    left: auto !important;
    margin-right: 0;
    margin-left: 0;
}

/* ==========================================================================
   SUBMENU CONTENT
   ========================================================================== */

.mm-submenu__content {
    padding: var(--mm-submenu-padding);
    max-height: calc(100vh - 20px);
    overflow-y: hidden;
    overflow-x: hidden;
}

/* ==========================================================================
   CUSTOM SCROLLBAR (vertical menus)
   ========================================================================== */

.mm-container--vertical .mm-submenu__content,
.mm-container--vertical .mm-list {
    scrollbar-width: thin;
    scrollbar-color: var(--mm-scrollbar-color) transparent;
}

.mm-container--vertical .mm-submenu__content::-webkit-scrollbar,
.mm-container--vertical .mm-list::-webkit-scrollbar {
    width: var(--mm-scrollbar-width);
}

.mm-container--vertical .mm-submenu__content::-webkit-scrollbar-track,
.mm-container--vertical .mm-list::-webkit-scrollbar-track {
    background: transparent;
}

.mm-container--vertical .mm-submenu__content::-webkit-scrollbar-thumb,
.mm-container--vertical .mm-list::-webkit-scrollbar-thumb {
    background-color: var(--mm-scrollbar-color);
    border-radius: 3px;
}

.mm-container--vertical .mm-submenu__content::-webkit-scrollbar-thumb:hover,
.mm-container--vertical .mm-list::-webkit-scrollbar-thumb:hover {
    background-color: var(--mm-scrollbar-hover-color);
}

/* ==========================================================================
   SUBMENU ROW
   ========================================================================== */

.mm-row { display: flex; flex-wrap: wrap; gap: 0; }
.mm-row--separated { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--mm-level-border-color); }

/* ==========================================================================
   SUBMENU COLUMN (flex-based 12-column system)
   ========================================================================== */

.mm-column { padding: 8px; min-width: 0; box-sizing: border-box; }
.mm-column + .mm-column { /* gutter handled by mm-row gap */ }

/* ==========================================================================
   SUBMENU ELEMENT (base)
   ========================================================================== */

.mm-element { margin-bottom: 6px; position: relative; }
.mm-element:last-child { margin-bottom: 0; }
.mm-element--inactive { opacity: 0.5; pointer-events: none; }

/* ==========================================================================
   HEADING ELEMENT
   ========================================================================== */

.mm-element--heading h4,
.mm-element--heading h3,
.mm-element--heading h2,
.mm-element--heading h5,
.mm-element--heading h6 {
    margin: 0;
    padding: 4px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--mm-color-submenu-heading);
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ==========================================================================
   TEXT ELEMENT
   ========================================================================== */

.mm-element--text p {
    margin: 0;
    padding: 4px 0;
    font-size: 13px;
    color: var(--mm-color-text-muted);
    line-height: 1.6;
}

/* ==========================================================================
   IMAGE ELEMENT
   ========================================================================== */

.mm-element--image .mm-image { display: block; max-width: 100%; height: auto; border-radius: 6px; object-fit: cover; }
.mm-element--image a { display: block; padding: 0; }
.mm-element--image a:hover { background: none; }

/* ==========================================================================
   VIDEO ELEMENT
   ========================================================================== */

.mm-element--video .mm-video { width: 100%; max-width: 100%; border-radius: 6px; display: block; }

/* ==========================================================================
   BUTTON ELEMENT
   ========================================================================== */

.mm-element--button .mm-element--button-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    transition:
        background var(--mm-transition-fast),
        color var(--mm-transition-fast),
        box-shadow var(--mm-transition-fast),
        transform var(--mm-transition-fast);
}

.mm-element--button .mm-element--button-link:hover { transform: translateY(-1px); }
.mm-element--button .mm-element--button-link:active { transform: translateY(0); }

/* ==========================================================================
   LINK-CUSTOM ELEMENT
   ========================================================================== */

.mm-element--link-custom .mm-element--link,
.mm-element--link-custom a.mm-element--link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: var(--mm-color-link-hover);
    font-weight: 500;
    cursor: pointer;
    transition: color var(--mm-transition-fast), opacity var(--mm-transition-fast);
}

.mm-element--link-custom .mm-element--link:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* ==========================================================================
   ENTITY ELEMENTS (product, category, brand, cms)
   ========================================================================== */

.mm-element--product a,
.mm-element--category a,
.mm-element--brand a,
.mm-element--cms a,
.mm-entity-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    text-decoration: none;
    color: var(--mm-color-submenu-link);
    border-radius: 6px;
    transition: color var(--mm-transition-fast), background var(--mm-transition-fast);
    line-height: 1.4;
}

.mm-element--product a:hover,
.mm-element--category a:hover,
.mm-element--brand a:hover,
.mm-element--cms a:hover,
.mm-entity-link:hover {
    color: var(--mm-color-submenu-link-hover);
    background: var(--mm-color-submenu-link-hover-bg);
}

.mm-entity-image { flex-shrink: 0; width: 40px; height: 40px; object-fit: cover; border-radius: 4px; }
.mm-entity-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;     white-space: break-spaces; }

.mm-entity-price {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--mm-color-link-hover, #3b82f6);
    white-space: nowrap;
    margin-left: auto;
}

/* ==========================================================================
   NESTED CHILDREN (sub-levels)
   ========================================================================== */

.mm-children {
    margin-top: 8px;
    padding-left: var(--mm-level-indent);
}

.mm-children .mm-column { flex: 0 0 100% !important; max-width: 100% !important; padding-left: 0; }
.mm-children .mm-element a { font-size: 13px; padding: 5px 10px; }

/* Level-specific border colors */
.mm-children--level-2 { border-left-color: #8b5cf6; }
.mm-children--level-3 { border-left-color: #ec4899; }
.mm-children--level-4 { border-left-color: #f59e0b; }

/* ==========================================================================
   VERTICAL DISPLAY MODES
   ========================================================================== */

/* Inline mode — default vertical behavior */
.mm-container--inline { position: relative; }

/* Overlay mode */
.mm-container--vertical.mm-container--overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 300px;
    max-width: 85vw;
    z-index: 1050;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--mm-color-submenu-bg);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
    overflow-y: auto;
    overflow-x: hidden;
}

.mm-container--vertical.mm-container--overlay.mm-container--open { transform: translateX(0); }

/* Push mode */
.mm-container--vertical.mm-container--push {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: var(--mm-push-width, 300px);
    max-width: 85vw;
    z-index: 1050;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--mm-color-submenu-bg);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
    overflow-y: auto;
    overflow-x: hidden;
}

.mm-container--vertical.mm-container--push.mm-container--open { transform: translateX(0); }

body.mm-body--pushed {
    transform: translateX(var(--mm-push-width, 300px));
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Fixed sidebar mode — always visible, no open/close toggle */
.mm-container--vertical.mm-container--fixed-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 1040;
    background: var(--mm-color-submenu-bg);
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.08);
    overflow-y: auto;
    overflow-x: hidden;
    /* No transform transition needed — always visible */
}

/* Submenus in fixed-sidebar open to the right */
.mm-container--fixed-sidebar .mm-submenu {
    position: fixed;
    top: auto;
    left: var(--mm-sidebar-width, 280px);
    transform: translateY(4px);
    box-shadow: 4px 4px 24px rgba(0, 0, 0, 0.12);
}

.mm-container--fixed-sidebar .mm-item:hover > .mm-submenu,
.mm-container--fixed-sidebar .mm-item.mm--open > .mm-submenu {
    transform: translateY(0);
}

/* Inside container mode — flows in page layout, non-full height */
.mm-container--vertical.mm-container--inside-container {
    position: relative;
    background: var(--mm-color-submenu-bg);
    border: 1px solid var(--mm-level-border-color);
    border-radius: 8px;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
    overflow-y: auto;
    overflow-x: hidden;
}

/* Submenus in inside-container mode open to the right */
.mm-container--inside-container .mm-submenu {
    position: fixed;
    top: auto;
    left: var(--mm-sidebar-width, 280px);
    transform: translateY(4px);
    box-shadow: 4px 4px 24px rgba(0, 0, 0, 0.12);
    z-index: 1060;
}

.mm-container--inside-container .mm-item:hover > .mm-submenu,
.mm-container--inside-container .mm-item.mm--open > .mm-submenu {
    transform: translateY(0);
}

/* Custom scrollbar for inside-container */
.mm-container--inside-container .mm-list {
    scrollbar-width: thin;
    scrollbar-color: var(--mm-scrollbar-color) transparent;
}

.mm-container--inside-container .mm-list::-webkit-scrollbar {
    width: var(--mm-scrollbar-width);
}

.mm-container--inside-container .mm-list::-webkit-scrollbar-track {
    background: transparent;
}

.mm-container--inside-container .mm-list::-webkit-scrollbar-thumb {
    background-color: var(--mm-scrollbar-color);
    border-radius: 3px;
}

/* Sticky mode */
.mm-container--sticky { position: sticky; top: 0; z-index: 1040; }

/* ==========================================================================
   ANIMATION KEYFRAMES
   ========================================================================== */

@keyframes mm-slide-down {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes mm-slide-right {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes mm-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes mm-scale-in {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* Animation applied via data-animation attribute */
.mm-container[data-animation="slide"] .mm-submenu {
    animation: mm-slide-down var(--mm-animation-duration, 0.25s) ease forwards;
}

.mm-container[data-animation="fade"] .mm-submenu {
    animation: mm-fade-in var(--mm-animation-duration, 0.25s) ease forwards;
}

.mm-container[data-animation="scale"] .mm-submenu {
    animation: mm-scale-in var(--mm-animation-duration, 0.25s) ease forwards;
}

.mm-container[data-animation="none"] .mm-submenu { animation: none; }

/* ==========================================================================
   POPUP MODE (vertical menus)
   ========================================================================== */

.mm-wrapper--popup {
    position: relative;
    display: inline-flex;
    flex-direction: column;
}

.mm-container--popup {
    position: fixed;
    z-index: var(--mm-submenu-z-index);
    background: var(--mm-color-submenu-bg);
    box-shadow: var(--mm-submenu-shadow);
    border-radius: var(--mm-submenu-border-radius);
    overflow: hidden;
    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mm-container--popup.mm-container--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Popup positions */
.mm-container--popup[data-popup-position="left"] {
    top: 0;
    left: 0;
    bottom: 0;
    width: 380px;
    max-width: 90vw;
    transform: translateX(-100%);
}

.mm-container--popup[data-popup-position="left"].mm-container--open {
    transform: translateX(0);
}

.mm-container--popup[data-popup-position="right"] {
    top: 0;
    right: 0;
    bottom: 0;
    width: 380px;
    max-width: 90vw;
    transform: translateX(100%);
}

.mm-container--popup[data-popup-position="right"].mm-container--open {
    transform: translateX(0);
}

.mm-container--popup[data-popup-position="center-modal"] {
    top: 50%;
    left: 50%;
    width: 480px;
    max-width: 90vw;
    max-height: 85vh;
    transform: translate(-50%, -50%) scale(0.95);
    transition:
        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mm-container--popup[data-popup-position="center-modal"].mm-container--open {
    transform: translate(-50%, -50%) scale(1);
}

.mm-container--popup[data-popup-position="fullscreen"] {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    max-height: none;
    border-radius: 0;
    transform: translateY(100%);
}

.mm-container--popup[data-popup-position="fullscreen"].mm-container--open {
    transform: translateY(0);
}

/* Popup overlay */
.mm-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: calc(var(--mm-submenu-z-index) - 1);
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mm-popup-overlay.mm-popup-overlay--visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Popup overlay variants */
.mm-popup-overlay[data-overlay-type="light"] { background: rgba(255, 255, 255, 0.7); }
.mm-popup-overlay[data-overlay-type="dark"] { background: rgba(0, 0, 0, 0.6); }
.mm-popup-overlay[data-overlay-type="none"] { background: transparent; }

/* Popup close button */
.mm-popup-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: var(--mm-color-submenu-link-hover-bg, #f1f5f9);
    border: 1px solid var(--mm-level-border-color, #e2e8f0);
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: var(--mm-color-text-muted, #64748b);
    z-index: 10;
    transition: background var(--mm-transition-fast), color var(--mm-transition-fast);
}

.mm-popup-close-btn:hover {
    background: #e2e8f0;
    color: var(--mm-color-text, #1e293b);
}

.mm-popup-close-btn:focus-visible {
    outline: 2px solid var(--mm-color-link-hover);
    outline-offset: 2px;
}

/* Popup animations */
.mm-container--popup[data-popup-animation="slide-left"] {
    transform: translateX(-100%);
}
.mm-container--popup[data-popup-animation="slide-left"].mm-container--open {
    transform: translateX(0);
}

.mm-container--popup[data-popup-animation="slide-right"] {
    transform: translateX(100%);
}
.mm-container--popup[data-popup-animation="slide-right"].mm-container--open {
    transform: translateX(0);
}

.mm-container--popup[data-popup-animation="slide-top"] {
    transform: translateY(-100%);
}
.mm-container--popup[data-popup-animation="slide-top"].mm-container--open {
    transform: translateY(0);
}

.mm-container--popup[data-popup-animation="fade"] {
    transform: none;
}

.mm-container--popup[data-popup-animation="scale"] {
    transform: scale(0.9);
}
.mm-container--popup[data-popup-animation="scale"].mm-container--open {
    transform: scale(1);
}

/* Popup mobile override */
@media (max-width: 768px) {
    .mm-container--popup[data-popup-mobile-override="fullscreen"] {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        max-height: none !important;
        border-radius: 0 !important;
        transform: none !important;
        z-index: 9999 !important;
        overflow-y: auto;
    }

    .mm-container--popup[data-popup-mobile-override="bottom-sheet"] {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100vw !important;
        max-height: 85vh !important;
        border-radius: 16px 16px 0 0 !important;
        transform: translateY(100%) !important;
        z-index: 9999 !important;
    }

    .mm-container--popup[data-popup-mobile-override="bottom-sheet"].mm-container--open {
        transform: translateY(0) !important;
    }

    .mm-container--popup[data-popup-mobile-override="dropdown"] {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 70vh !important;
        transform: none !important;
        z-index: auto !important;
        box-shadow: var(--mm-submenu-shadow) !important;
    }

    .mm-popup-close-btn {
        top: 8px;
        right: 8px;
        width: 28px;
        height: 28px;
        font-size: 16px;
    }
}

/* Popup RTL */
.mm-container--rtl .mm-container--popup[data-popup-position="left"] {
    left: auto;
    right: 0;
    transform: translateX(100%);
}
.mm-container--rtl .mm-container--popup[data-popup-position="left"].mm-container--open {
    transform: translateX(0);
}

.mm-container--rtl .mm-container--popup[data-popup-position="right"] {
    right: auto;
    left: 0;
    transform: translateX(-100%);
}
.mm-container--rtl .mm-container--popup[data-popup-position="right"].mm-container--open {
    transform: translateX(0);
}

/* ==========================================================================
   TOUCH SUPPORT (prevent sticky hover on touch devices)

   :not(.mm--open) is required — without it this rule's specificity beats
   the mobile accordion's ".mm-item.mm--open > .mm-submenu" rule. A tap
   sets :hover (sticky, since touch devices never fire a real mouseleave)
   AND toggles mm--open at the same time, so without the guard, this rule
   unconditionally forces the submenu back to opacity:0/hidden/
   pointer-events:none right after opening — the submenu never visibly
   opens on mobile even though mm--open was set correctly.
   ========================================================================== */

body.mm-touching .mm-container--horizontal .mm-item:not(.mm--open):hover > .mm-submenu--center,
body.mm-touching .mm-container--horizontal .mm-item:not(.mm--open):hover > .mm-submenu--left,
body.mm-touching .mm-container--horizontal .mm-item:not(.mm--open):hover > .mm-submenu--right {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ==========================================================================
   RTL SUPPORT
   ========================================================================== */

.mm-container--rtl,
[dir="rtl"] .mm-container {
    direction: rtl;
}

/* RTL icon adjustments */
.mm-container--rtl .mm-icon--left { margin-right: 0; margin-left: 6px; order: 1; }
.mm-container--rtl .mm-icon--right { margin-left: 0; margin-right: 6px; }

/* RTL arrow flip */
.mm-container--rtl .mm-arrow { margin-left: 0; margin-right: 4px; transform: rotate(180deg); }
.mm-container--rtl .mm-item:hover > .mm-link > .mm-arrow { transform: rotate(0deg); }

/* RTL trigger */
.mm-container--rtl .mm-trigger-icon--left { margin-right: 0; margin-left: 4px; }
.mm-container--rtl .mm-trigger-icon--right { margin-left: 0; margin-right: 4px; }

/* RTL vertical overlay — slide from right */
.mm-container--rtl.mm-container--vertical.mm-container--overlay {
    left: auto; right: 0; transform: translateX(100%);
}
.mm-container--rtl.mm-container--vertical.mm-container--overlay.mm-container--open { transform: translateX(0); }

/* RTL vertical push — slide from right */
.mm-container--rtl.mm-container--vertical.mm-container--push {
    left: auto; right: 0; transform: translateX(100%);
}
.mm-container--rtl.mm-container--vertical.mm-container--push.mm-container--open { transform: translateX(0); }

/* RTL vertical fixed-sidebar — on right */
.mm-container--rtl.mm-container--vertical.mm-container--fixed-sidebar {
    left: auto; right: 0;
}

/* RTL fixed-sidebar submenus open to the left */
.mm-container--rtl.mm-container--fixed-sidebar .mm-submenu {
    left: auto;
    right: var(--mm-sidebar-width, 280px);
}

/* RTL inside-container submenus open to the left */
.mm-container--rtl.mm-container--inside-container .mm-submenu {
    left: auto;
    right: var(--mm-sidebar-width, 280px);
}

/* RTL pushed body */
[dir="rtl"] body.mm-body--pushed,
body.mm-body--pushed.mm-body--rtl {
    transform: translateX(calc(var(--mm-push-width, 300px) * -1));
}

/* RTL submenu positioning */
.mm-container--rtl .mm-submenu--left { left: auto; right: 0; }
.mm-container--rtl .mm-submenu--right { right: auto; left: 0; }
.mm-container--rtl .mm-submenu--full { left: auto; right: 0; }

/* RTL nested children */
.mm-container--rtl .mm-children {
    padding-left: 0;
    padding-right: var(--mm-level-indent);
    border-left: none;
    border-right: 2px solid var(--mm-level-border-color);
}

.mm-container--rtl .mm-children--level-2 { border-right-color: #8b5cf6; }
.mm-container--rtl .mm-children--level-3 { border-right-color: #ec4899; }
.mm-container--rtl .mm-children--level-4 { border-right-color: #f59e0b; }

/* RTL active indicator — flip to right */
.mm-container--rtl.mm-container--vertical .mm-item--active > .mm-link::after {
    left: auto; right: 0; border-radius: 2px 0 0 2px;
}

/* ==========================================================================
   DEVICE VISIBILITY CLASSES (generated by PHP scoped CSS)
   ========================================================================== */

.mm-hidden--desktop,
.mm-hidden--tablet,
.mm-hidden--mobile {
    /* Rules injected by PHP scoped CSS */
}

/* ==========================================================================
   RESPONSIVE — TABLET (max-width: 1024px)
   ========================================================================== */

@media (max-width: 1024px) {
    /* width: 100vw is intentionally NOT used here (see the commented-out
       default rule above): 100vw includes the scrollbar's own width, so on
       any page with a vertical scrollbar this pushes the submenu's right
       edge past the visible viewport and forces horizontal scroll on the
       whole document. left:0 + right:0 sizes it to its positioned ancestor
       (.mm-item) instead, which can never exceed the visible viewport. */
    .mm-submenu--full { left: 0; right: 0; transform: none !important; }
    .mm-item:hover > .mm-submenu--full { transform: none !important; }
    .mm-submenu--window { position: absolute !important; }
    .mm-submenu--window.mm-submenu--center { left: 50%; transform: translateX(-50%); }
}

/* ==========================================================================
   RESPONSIVE — MOBILE (max-width: 768px)
   ========================================================================== */

@media (max-width: 768px) {
    /* Show hamburger */
    .mm-mobile-toggle { display: flex; }

    /* Hide list by default */
    .mm-list { display: none; flex-direction: column; width: 100%; }

    /* Show list when open */
    .mm-container.mm--open .mm-list,
    .mm-container.mm-container--open .mm-list { display: flex; }

    /* Full-width items */
    .mm-item { width: 100%; }

    .mm-link {
        padding: 12px 16px;
        border-bottom: 1px solid var(--mm-level-border-color);
        border-radius: 0;
    }

    .mm-label { flex: 1; }

    /* Submenu → static accordion */
    .mm-submenu {
        position: static !important;
        width: 100% !important;
        min-width: 0;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        box-shadow: none;
        border-radius: 0;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        max-height: 0;
        overflow: hidden;
        background: var(--mm-mobile-submenu-bg);
        transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease, border-width 0.35s ease;
    }

    /* max-height:0 above only floors the box at its own padding + border
       total — it does NOT zero them. Per-instance builder styles
       (.mm-submenu--<id>, injected per menu instance with arbitrary
       admin-configured values) apply padding/border directly on this same
       element for the desktop "card" look, and those rules live outside
       this stylesheet and outside this selector's control, so their
       values can't be known or hardcoded here. Left un-zeroed, a closed
       accordion item still renders a solid, bordered box exactly the
       height of that padding + border (e.g. 16px+16px padding + 1px+1px
       border = 34px) even though its content is fully clipped — this is
       the empty white box some closed menu items show on mobile.
       Scoping to :not(.mm--open) (rather than putting the override on the
       plain .mm-submenu selector and trying to !important it back on
       .mm--open) means this rule simply stops matching once the item
       opens, so the instance's own padding/border apply on their own —
       no need to reconstruct or guess their value with revert/unset,
       which cannot see past this stylesheet to another author rule. */
    .mm-item:not(.mm--open) > .mm-submenu {
        padding: 0 !important;
        border-width: 0 !important;
        margin: 0 !important;
    }

    .mm-item:hover > .mm-submenu { transform: none !important; }
    .mm-item.mm--open > .mm-submenu { max-height: 2000px; opacity: 1; }
    .mm-item.mm--open > .mm-link > .mm-arrow { transform: rotate(180deg); }

    /* Reset position/width classes for mobile */
    .mm-submenu--center,
    .mm-submenu--left,
    .mm-submenu--right,
    .mm-submenu--full,
    .mm-submenu--container,
    .mm-submenu--parent-item,
    .mm-submenu--global-menu,
    .mm-submenu--window {
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        position: static !important;
    }

    /* Column layout → stacked */
    .mm-row { flex-direction: column; }
    .mm-column { flex: 0 0 100% !important; max-width: 100% !important; }
    .mm-children { margin-left: 12px; }

    /* Vertical menu on mobile */
    .mm-container[data-menu-type="vertical"] .mm-submenu,
    .mm-container--vertical .mm-submenu { margin-left: 0; left: auto; min-width: 0 !important; }

    /* Vertical menu on mobile: neutralize fly-out layout only.
       max-height is deliberately NOT set here — it stays owned by the
       generic .mm-submenu / .mm-item.mm--open > .mm-submenu accordion
       rules below, so open/close continues to work for vertical menus
       on mobile. Previously this shared the same max-height:none!important
       block as the .mm-vsub--* collision-state classes further down,
       which unconditionally kept every vertical submenu expanded
       regardless of mm--open. */
    .mm-container--vertical .mm-submenu--vertical {
        position: static !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        top: auto !important;
        overflow-y: visible !important;
    }

    /* Disable vsub fly-out POSITIONING on mobile — use accordion instead.
       These are desktop-only JS collision-state classes (flip/nudge/etc.),
       but on real menus they land on the SAME element the accordion
       toggles (PHP always stamps e.g. mm-vsub--parent-item alongside
       mm-item--has-submenu's .mm-submenu). max-height is therefore
       deliberately NOT reset here — same reasoning as the
       .mm-container--vertical .mm-submenu--vertical rule above: it must
       stay owned by the generic .mm-submenu / .mm-item.mm--open >
       .mm-submenu accordion rules, or "max-height:none !important" wins
       over the accordion's "max-height:2000px" (no !important) regardless
       of specificity, and the submenu can never visually close. */
    .mm-vsub--inline,
    .mm-vsub--dropdown,
    .mm-vsub--parent-item,
    .mm-vsub--menu-container,
    .mm-vsub--open-end,
    .mm-vsub--open-start,
    .mm-vsub--flip-left,
    .mm-vsub--flip-right,
    .mm-vsub--nudge-top,
    .mm-vsub--nudge-bottom,
    .mm-vsub--no-transition,
    .mm-vsub--positioning {
        position: static !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        top: auto !important;
        overflow-y: visible !important;
    }

    .mm-vsub--constrained-width { max-width: none !important; }

    /* Fixed sidebar and inside-container → fullscreen on mobile */
    .mm-container--fixed-sidebar,
    .mm-container--inside-container {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        max-height: none !important;
        z-index: 9999 !important;
        transform: none !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow-y: auto;
        background: #ffffff;
    }

    .mm-container--fixed-sidebar .mm-submenu,
    .mm-container--inside-container .mm-submenu {
        position: static !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        box-shadow: none !important;
    }

    /* Trigger button stays visible on mobile */
    .mm-wrapper--vertical .mm-trigger-btn { width: 100%; justify-content: center; }

    /* Mobile badges — keep visible but adjust */
    .mm-badge { font-size: 9px; padding: 1px 5px; }
    .mm-link > .mm-badge--top-right { top: 50%; right: 8px; transform: translateY(-50%); }
}

/* ==========================================================================
   RESPONSIVE — FULLSCREEN MOBILE
   ========================================================================== */

@media (max-width: 768px) {
    .mm-container[data-mobile-mode="fullscreen"] {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 9999 !important;
        transform: none !important;
        overflow-y: auto;
        background: #ffffff;
    }

    .mm-container[data-mobile-mode="fullscreen"].mm-container--open { display: flex !important; }
    .mm-container[data-mobile-mode="fullscreen"]:not(.mm-container--open) { display: none !important; }

    .mm-container[data-mobile-mode="fullscreen"] .mm-list { display: flex; flex-direction: column; width: 100%; }

    .mm-container[data-mobile-mode="fullscreen"] .mm-submenu {
        position: static !important;
        width: 100% !important;
        min-width: 0;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        box-shadow: none;
        border-radius: 0;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease;
    }

    .mm-container[data-mobile-mode="fullscreen"] .mm-item.mm--open > .mm-submenu { max-height: 2000px; }
}

/* ==========================================================================
   RESPONSIVE — MOBILE SIDEBAR (universal "Menu" button + left drawer)

   Applies to every MegaMenuComponent instance on mobile, regardless of
   globalMenuType (horizontal/vertical) or verticalDisplay.mode
   (dropdown/popup/overlay/push/fixed-sidebar/inside-container). Mirrors
   MegaMenuMobileComponent's own sidebar-left numbers exactly: 320px,
   translateX(-110%) -> translateX(0), white background. Container base
   is opacity/visibility/pointer-events driven (not display:none), same
   mechanic as .mmm-container / .mmm-container--open there.

   Selectors are scoped to ".mm-instance .mm-container" (rather than a
   bare ".mm-container") to raise specificity above the pre-existing
   "[data-mobile-mode="fullscreen"]" attribute-selector rule two blocks
   up — that rule is never actually emitted by MegaMenuComponent.php
   (dead scaffolding left over for a feature only referenced from the
   JS side), but scoping here means this drawer would still correctly
   win even if that attribute were ever wired up later. z-index 9995 /
   9990 match MegaMenuMobileComponent's .mmm-container / .mmm-overlay.
   ========================================================================== */

@media (max-width: 768px) {
    /* Hide the old hamburger / vertical trigger button, show the new one */
    .mm-instance .mm-mobile-toggle,
    .mm-instance .mm-wrapper--vertical .mm-trigger-btn {
        display: none !important;
    }

    .mm-mobile-sidebar-trigger {
        display: inline-flex;
    }

    /* Universal drawer state — supersedes every display-mode's own
       mobile treatment (fixed-sidebar/inside-container fullscreen,
       overlay/push slide, dropdown/popup absolute positioning). */
    .mm-instance .mm-container {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        bottom: 0 !important;
        height: 100vh !important;
        width: 320px !important;
        max-width: 90vw !important;
        max-height: none !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        box-sizing: border-box;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: #ffffff;
        z-index: 9995 !important;
        transform: translateX(-110%) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.3s ease, visibility 0.3s !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .mm-instance .mm-container.mm-container--sidebar-mobile-open {
        transform: translateX(0) !important;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* .mm-list's own visibility no longer drives open/close — the
       drawer transform does. Always laid out (off-canvas when
       closed), matching MegaMenuMobileComponent's own container. */
    .mm-instance .mm-container .mm-list {
        display: flex !important;
        flex-direction: column;
        width: 100%;
    }

    .mm-mobile-sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: var(--mm-color-overlay);
        z-index: 9990;
        transition: opacity 0.3s;
    }

    .mm-mobile-sidebar-backdrop.mm-mobile-sidebar-backdrop--visible {
        display: block;
    }

    body.mm-sidebar-mobile--locked {
        overflow: hidden;
    }

    /* RTL — drawer opens from the right instead */
    .mm-instance .mm-container--rtl {
        left: auto !important;
        right: 0 !important;
        transform: translateX(110%) !important;
    }

    .mm-instance .mm-container--rtl.mm-container--sidebar-mobile-open {
        transform: translateX(0) !important;
    }
}

/* ==========================================================================
   RESPONSIVE — SMALL MOBILE (max-width: 480px)
   ========================================================================== */

@media (max-width: 480px) {
    .mm-container { font-size: 13px; }
    .mm-link { padding: 10px 12px; }
    .mm-submenu__content { padding: 12px; }
    .mm-element a { padding: 6px 8px; font-size: 12px; }
    .mm-element--heading h4, .mm-element--heading h3, .mm-element--heading h2,
    .mm-element--heading h5, .mm-element--heading h6 { font-size: 14px; }
    .mm-children { padding-left: 12px; }
    .mm-container--rtl .mm-children { padding-right: 12px; }
    .mm-entity-price { font-size: 12px; }
    .mm-badge { font-size: 8px; padding: 1px 4px; }
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .mm-submenu,
    .mm-link,
    .mm-element a,
    .mm-arrow,
    .mm-element--button a,
    .mm-toggle-bar,
    .mm-trigger-btn,
    .mm-backdrop,
    .mm-container--overlay,
    .mm-container--push,
    .mm-container--fixed-sidebar,
    .mm-container--inside-container,
    body.mm-body--pushed,
    .mm-badge,
    .mm-vsub--inline,
    .mm-vsub--dropdown,
    .mm-vsub--parent-item,
    .mm-vsub--menu-container,
    .mm-submenu--vertical,
    .mm-instance .mm-container,
    .mm-mobile-sidebar-backdrop {
        transition: none !important;
    }

    .mm-container[data-animation="slide"] .mm-submenu,
    .mm-container[data-animation="fade"] .mm-submenu,
    .mm-container[data-animation="scale"] .mm-submenu {
        animation: none !important;
    }

    .mm-item:hover > .mm-submenu--center,
    .mm-item:hover > .mm-submenu--left,
    .mm-item:hover > .mm-submenu--right {
        transform: none !important;
    }
}

.mm-link:focus-visible,
.mm-element a:focus-visible,
.mm-trigger-btn:focus-visible {
    outline: 2px solid var(--mm-color-link-hover);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ==========================================================================
   PRINT
   ========================================================================== */

@media print {
    .mm-mobile-toggle,
    .mm-trigger-arrow,
    .mm-arrow,
    .mm-backdrop,
    .mm-badge {
        display: none !important;
    }

    .mm-submenu {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
        box-shadow: none !important;
        max-height: none !important;
        overflow: visible !important;
        width: 100% !important;
        left: auto !important;
        right: auto !important;
    }

    .mm-container.mm--open .mm-list,
    .mm-container.mm-container--open .mm-list,
    .mm-list { display: flex !important; }

    .mm-wrapper--vertical .mm-trigger-btn[aria-expanded="true"] ~ .mm-container--vertical,
    .mm-wrapper--vertical > .mm-container--vertical.mm-container--open { display: flex !important; }

    .mm-row { flex-direction: column; }
    .mm-column { flex: 0 0 100% !important; max-width: 100% !important; }

    .mm-container--overlay,
    .mm-container--push,
    .mm-container--fixed-sidebar,
    .mm-container--inside-container {
        position: relative !important;
        transform: none !important;
        height: auto !important;
        width: 100% !important;
        box-shadow: none !important;
    }

    body.mm-body--pushed { transform: none !important; }
    .mm-container--sticky { position: relative; }
    .mm-item--active > .mm-link::after { display: none; }
}