/**
 * LaFactory Megamenu - pure CSS, no LESS, no var() polyfill needed.
 * Tokens use --lfmm-* with sensible defaults.
 * Dark-mode aware via @media (prefers-color-scheme: dark) and the CS-Cart
 * html.cs-dark-theme class.
 */

.lfmm {
    --lfmm-bar-bg:            #ffffff;
    --lfmm-bar-fg:            #1f2330;
    --lfmm-bar-fg-hover:      #0a66c2;
    --lfmm-bar-accent:        #0a66c2;
    --lfmm-bar-divider:       transparent;
    --lfmm-item-pad-x:        16px;
    --lfmm-item-pad-y:        12px;
    --lfmm-panel-bg:          #ffffff;
    --lfmm-panel-fg:          #1f2330;
    --lfmm-panel-shadow:      0 12px 28px rgba(15, 23, 42, 0.12);
    --lfmm-panel-pad:         24px;
    --lfmm-panel-radius:      8px;
    --lfmm-col-link-fg:       #1f2330;
    --lfmm-col-link-fg-hover: #0a66c2;
    --lfmm-col-leaf-fg:       #5a6478;
    --lfmm-z:                 200;
    --lfmm-min-h:             360px;
    --lfmm-cols:              4;

    position: relative;
    background: var(--lfmm-bar-bg);
    color: var(--lfmm-bar-fg);
    font-size: 14px;
    line-height: 1.4;
}

/* dark mode : scoped to explicit CS-Cart dark class only, NOT prefers-color-scheme.
   nova_theme storefront LaFactory forces html.cs-light-theme, so honoring the OS
   dark pref makes the menu unreadable against the light header (Francis 2026-05-17). */
html.cs-dark-theme .lfmm,
html[data-theme="dark"] .lfmm {
    --lfmm-bar-bg:            #0f1320;
    --lfmm-bar-fg:            #e6e9f2;
    --lfmm-bar-fg-hover:      #5fa8ff;
    --lfmm-bar-accent:        #5fa8ff;
    --lfmm-panel-bg:          #131826;
    --lfmm-panel-fg:          #e6e9f2;
    --lfmm-panel-shadow:      0 12px 28px rgba(0, 0, 0, 0.5);
    --lfmm-col-link-fg:       #e6e9f2;
    --lfmm-col-link-fg-hover: #5fa8ff;
    --lfmm-col-leaf-fg:       #9aa3b8;
}

/* ---------- first-level bar ---------- */
.lfmm__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
}
.lfmm__item {
    position: static;        /* panel anchors on .lfmm */
    display: flex;
    align-items: stretch;
}
.lfmm__link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: var(--lfmm-item-pad-y) var(--lfmm-item-pad-x);
    color: var(--lfmm-bar-fg);
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
    border: none;
    background: transparent;
    transition: color 0.12s ease;
}
.lfmm__link:hover,
.lfmm__link[aria-expanded="true"] {
    color: var(--lfmm-bar-fg-hover);
}
.lfmm--long .lfmm__label {
    max-width: var(--lfmm-long-w, 140px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
}
.lfmm__caret {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    opacity: 0.65;
    margin-left: 2px;
    transition: transform 0.18s ease, opacity 0.15s ease;
}
.lfmm__link:hover .lfmm__caret { opacity: 1; }
.lfmm__item.is-open > .lfmm__link > .lfmm__caret {
    transform: rotate(180deg);
    opacity: 1;
}

/* ---------- dropdown panel ---------- */
.lfmm__panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: var(--lfmm-z);
    background: var(--lfmm-panel-bg);
    color: var(--lfmm-panel-fg);
    box-shadow: var(--lfmm-panel-shadow);
    border-radius: 0 0 var(--lfmm-panel-radius) var(--lfmm-panel-radius);
    padding: var(--lfmm-panel-pad);
    /* min-height removed v0.1.3 (Francis 2026-05-17) : when categories have no
       sub-items, forcing 360px makes the panel a huge empty white box that
       overlaps the product grid below. Let content drive the height. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
.lfmm__item.is-open > .lfmm__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

/* ---------- columns ---------- */
.lfmm__cols {
    display: grid;
    grid-template-columns: repeat(var(--lfmm-cols), minmax(0, 1fr));
    gap: 24px;
    max-width: 1280px;
    margin: 0 auto;
}
.lfmm__col {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.lfmm__col-item {
    display: block;
}
.lfmm__col-link {
    display: block;
    font-weight: 600;
    color: var(--lfmm-col-link-fg);
    text-decoration: none;
    padding: 2px 0;
    transition: color 0.12s ease;
}
.lfmm__col-link:hover { color: var(--lfmm-col-link-fg-hover); }
.lfmm__col-children {
    list-style: none;
    margin: 6px 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.lfmm__col-leaf-link {
    color: var(--lfmm-col-leaf-fg);
    font-size: 13px;
    text-decoration: none;
    transition: color 0.12s ease;
}
.lfmm__col-leaf-link:hover { color: var(--lfmm-col-link-fg-hover); }

.lfmm__more {
    margin-top: 18px;
    border-top: 1px solid rgba(127, 127, 127, 0.15);
    padding-top: 12px;
}
.lfmm__more-link {
    color: var(--lfmm-bar-accent);
    font-weight: 600;
    text-decoration: none;
}

/* ---------- slider ---------- */
.lfmm__slide {
    display: none;
    align-items: stretch;
    flex: 1 1 auto;
}
.lfmm__slide.is-active { display: flex; }
.lfmm__slide-toggle {
    border: 0;
    background: transparent;
    color: var(--lfmm-bar-fg);
    font-size: 22px;
    cursor: pointer;
    padding: 0 8px;
    align-self: stretch;
    display: flex;
    align-items: center;
    transition: color 0.12s ease;
}
.lfmm__slide-toggle:hover { color: var(--lfmm-bar-fg-hover); }

/* ---------- burger ---------- */
.lfmm__burger {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    color: var(--lfmm-bar-fg);
    cursor: pointer;
    border-radius: 6px;
}
.lfmm__burger:hover { background: rgba(127, 127, 127, 0.1); }
.lfmm__burger-icon {
    width: 24px;
    height: 24px;
    color: currentColor;
    pointer-events: none;
}

/* ---------- nova_theme parent override (v0.1.2 Francis 2026-05-17) ----------
   nova_theme wraps the menu block in `<div class="top-menu hidden-phone">` which
   forces display:none under 768px -> the whole nav (burger included) disappears.
   We re-enable display when the container holds .lfmm (precise selector, won t
   touch other .top-menu.hidden-phone usages elsewhere). */
.top-menu.hidden-phone:has(.lfmm) {
    display: block !important;
}
/* Fallback for browsers without :has() : less precise but covers the case */
@media (max-width: 767px) {
    .top-menu.hidden-phone { display: block; }
}

/* ---------- mobile only ----------
   Breakpoint aligned with CS-Cart nova_theme (.hidden-phone breaks at 768px).
   Above 767px the desktop horizontal megamenu wins, no burger. */
@media (max-width: 767px) {
    .lfmm__burger { display: inline-flex; }
    .lfmm__list {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--lfmm-bar-bg);
        box-shadow: var(--lfmm-panel-shadow);
        z-index: var(--lfmm-z);
    }
    .lfmm__list.is-open { display: flex; }
    .lfmm__item { flex-direction: column; }
    .lfmm__link {
        width: 100%;
        justify-content: space-between;
        border-bottom: 1px solid rgba(127, 127, 127, 0.1);
    }
    .lfmm__panel {
        position: static;
        box-shadow: none;
        padding: 12px var(--lfmm-panel-pad);
        min-height: 0;
        background: transparent;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
    }
    .lfmm__item.is-open > .lfmm__panel { display: block; }
    .lfmm__cols {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ---------- a11y focus ring ---------- */
.lfmm a:focus-visible,
.lfmm button:focus-visible {
    outline: 2px solid var(--lfmm-bar-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- helper : item badge via class .lfmm-badge--<color> ---------- */
.lfmm-badge--new::after,
.lfmm-badge--hot::after,
.lfmm-badge--promo::after {
    content: attr(data-lfmm-badge);
    display: inline-block;
    margin-left: 8px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    vertical-align: middle;
}
.lfmm-badge--new::after   { background: #1f9d55; }
.lfmm-badge--hot::after   { background: #e53935; }
.lfmm-badge--promo::after { background: #f59f00; color: #1f2330; }