/* ============================================================
   Mega Menu Widget — Elementor
   ============================================================ */

.mmw-wrap {
    --mmw-blue:   #2563EB;
    --mmw-blue-l: #EFF6FF;
    --mmw-ink:    #111827;
    --mmw-ink-s:  #374151;
    --mmw-muted:  #9CA3AF;
    --mmw-border: #E5E7EB;
    --mmw-bg:     #F9FAFB;
    --mmw-r:      14px;
    --mmw-rs:     8px;
    --mmw-font:   'DM Sans', 'Inter', system-ui, sans-serif;
    --mmw-font-d: 'Outfit', 'DM Sans', system-ui, sans-serif;
    display:      block;
    width:        100%;
    font-family:  var(--mmw-font);
}

/* Le dropdown s'étire dans le conteneur Woodmart */
.mmw-wrap .mmw-dropdown {
    width: 100% !important;
}

/* ── Trigger ─────────────────────────────────────────────── */
.mmw-trigger-wrap {
    position: relative;
    display: inline-block;
}

.mmw-trigger {
    display:     inline-flex;
    align-items: center;
    gap:         6px;
    padding:     9px 18px;
    background:  var(--mmw-blue);
    color:       #fff;
    border-radius: 50px;
    font-size:   14px;
    font-weight: 600;
    cursor:      pointer;
    font-family: var(--mmw-font);
    border:      none;
    outline:     none;
    transition:  opacity .15s;
    white-space: nowrap;
}
.mmw-trigger:hover { opacity: .88; }
.mmw-trigger:focus-visible {
    outline: 3px solid var(--mmw-blue);
    outline-offset: 3px;
}
.mmw-chevron { transition: transform .2s; }
.mmw-trigger[aria-expanded="true"] .mmw-chevron { transform: rotate(180deg); }

/* ── Dropdown ────────────────────────────────────────────── */
.mmw-dropdown {
    background:    #fff;
    overflow:      hidden;
    width:         100%;
}

/* Mode standalone — aucune bordure, Woodmart gère le contour */
.mmw-dropdown.mmw-standalone {
    position:      relative;
    width:         100%;
    border:        none;
    border-radius: 0;
    box-shadow:    none;
}

/* ── Header ──────────────────────────────────────────────── */
.mmw-dd-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         16px 20px;
    border-bottom:   1px solid var(--mmw-border);
    background:      var(--mmw-bg);
}
.mmw-dd-header-title {
    font-family: var(--mmw-font-d);
    font-size:   14px;
    font-weight: 700;
    color:       var(--mmw-ink);
}
.mmw-dd-header-sub {
    font-size:  12px;
    color:      var(--mmw-muted);
    margin-top: 2px;
}

/* ── Body ────────────────────────────────────────────────── */
.mmw-dd-body {
    display:               grid;
    grid-template-columns: 200px 1fr;
    min-height:            280px;
}

/* ── Cats gauche ─────────────────────────────────────────── */
.mmw-dd-cats {
    border-right: 1px solid var(--mmw-border);
    padding:      12px 0;
}
.mmw-dd-cat {
    display:     flex;
    align-items: center;
    gap:         10px;
    padding:     10px 16px;
    cursor:      pointer;
    transition:  background .15s;
    border-left: 3px solid transparent;
    text-decoration: none;
    color:       inherit;
}
.mmw-dd-cat:hover  { background: var(--mmw-blue-l); }
.mmw-dd-cat.mmw-active {
    background:        var(--mmw-blue-l);
    border-left-color: var(--mmw-blue);
}
.mmw-dd-cat.mmw-sep {
    margin-top:  8px;
    border-top:  1px solid var(--mmw-border);
    padding-top: 12px;
}
.mmw-dd-cat-icon {
    width:          32px;
    height:         32px;
    border-radius:  var(--mmw-rs);
    background:     var(--mmw-bg);
    display:        flex;
    align-items:    center;
    justify-content:center;
    flex-shrink:    0;
}
.mmw-dd-cat.mmw-active .mmw-dd-cat-icon { background: var(--mmw-blue-l); }
.mmw-dd-cat-icon svg {
    width:             16px;
    height:            16px;
    stroke:            var(--mmw-blue);
    fill:              none;
    stroke-width:      1.8;
    stroke-linecap:    round;
    stroke-linejoin:   round;
}
.mmw-dd-cat-name  { font-size: 13.5px; font-weight: 600; color: var(--mmw-ink); }
.mmw-dd-cat-count { font-size: 11px; color: var(--mmw-muted); }

/* ── Content droite ──────────────────────────────────────── */
.mmw-dd-content       { padding: 20px; transition: opacity .12s ease, transform .12s ease; }
.mmw-dd-content-title {
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color:          var(--mmw-muted);
    margin-bottom:  12px;
}

/* Tags / pills */
.mmw-dd-brands { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.mmw-dd-brand  {
    padding:       7px 14px;
    border:        1.5px solid var(--mmw-border);
    border-radius: 50px;
    font-size:     13px;
    font-weight:   500;
    color:         var(--mmw-ink-s);
    cursor:        pointer;
    transition:    border-color .15s, color .15s;
    text-decoration: none;
}
.mmw-dd-brand:hover    { border-color: var(--mmw-blue); color: var(--mmw-blue); }
.mmw-dd-brand.mmw-featured {
    border-color: var(--mmw-blue);
    background:   var(--mmw-blue-l);
    color:        var(--mmw-blue);
}

/* Produits */
.mmw-dd-promos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mmw-dd-promo  {
    background:    var(--mmw-bg);
    border-radius: var(--mmw-rs);
    padding:       12px 14px;
    cursor:        pointer;
    transition:    border-color .18s;
    border:        1.5px solid var(--mmw-border);
    display:       flex;
    align-items:   center;
    gap:           10px;
    text-decoration: none;
}
.mmw-dd-promo:hover { border-color: var(--mmw-blue); }
.mmw-dd-promo-img   {
    width:           44px;
    height:          44px;
    background:      #fff;
    border-radius:   var(--mmw-rs);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       22px;
    flex-shrink:     0;
    overflow:        hidden;
}
.mmw-prod-thumb  { width: 44px; height: 44px; object-fit: cover; border-radius: var(--mmw-rs); display: block; }
.mmw-prod-emoji  { font-size: 22px; }
.mmw-dd-promo-name  { font-size: 13px; font-weight: 600; color: var(--mmw-ink); margin-bottom: 2px; }
.mmw-dd-promo-price { font-size: 14px; font-weight: 800; color: var(--mmw-blue); font-family: var(--mmw-font-d); }
.mmw-dd-promo-price ins  { text-decoration: none; }
.mmw-dd-promo-price del  { font-size: 11px; color: var(--mmw-muted); font-weight: 400; margin-left: 4px; }

/* ── Footer ──────────────────────────────────────────────── */
.mmw-dd-footer {
    padding:         12px 20px;
    border-top:      1px solid var(--mmw-border);
    background:      var(--mmw-bg);
    display:         flex;
    justify-content: space-between;
    align-items:     center;
}
.mmw-dd-footer-left { display: flex; gap: 16px; }
.mmw-link-blue {
    font-size:       13px;
    font-weight:     600;
    color:           var(--mmw-blue);
    text-decoration: none;
}
.mmw-link-blue:hover { text-decoration: underline; }

/* ── État vide (éditeur sans config) ─────────────────────── */
.mmw-empty-notice {
    padding:       40px 24px;
    text-align:    center;
    color:         var(--mmw-muted);
    font-size:     13px;
    border:        2px dashed var(--mmw-border);
    border-radius: var(--mmw-r);
}
.mmw-empty-notice strong { display: block; font-size: 15px; color: var(--mmw-ink-s); margin-bottom: 6px; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 780px) {
    .mmw-dropdown.mmw-float { width: 95vw !important; }
    .mmw-dd-body            { grid-template-columns: 1fr; }
    .mmw-dd-cats            { border-right: none; border-bottom: 1px solid var(--mmw-border); display: flex; flex-wrap: wrap; padding: 8px; gap: 4px; }
    .mmw-dd-cat             { border-left: none !important; border-radius: var(--mmw-rs); border: 1.5px solid var(--mmw-border); padding: 6px 12px; }
    .mmw-dd-cat.mmw-active  { border-color: var(--mmw-blue); }
    .mmw-dd-promos          { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .mmw-dropdown, .mmw-trigger, .mmw-chevron, .mmw-dd-content { transition: none; }
}

/* ── Éditeur : onglets empilés ───────────────────────────────── */
.mmw-dd-content-editor {
    padding:    16px 20px;
    overflow-y: auto;
}
.mmw-editor-tab-block {
    border:        1.5px solid var(--mmw-border);
    border-radius: var(--mmw-rs);
    padding:       16px;
    margin-bottom: 16px;
    background:    #fff;
}
.mmw-editor-tab-block:last-child { margin-bottom: 0; }
.mmw-editor-tab-label {
    font-size:     11px;
    font-weight:   700;
    letter-spacing:1px;
    text-transform:uppercase;
    color:         var(--mmw-blue);
    background:    var(--mmw-blue-l);
    border-radius: 4px;
    padding:       3px 8px;
    display:       inline-block;
    margin-bottom: 12px;
}

/* Dans l'éditeur on garde une bordure pour délimiter le widget */
.mmw-editor-preview .mmw-dropdown {
    border:        1.5px solid var(--mmw-border) !important;
    border-radius: var(--mmw-r) !important;
    box-shadow:    0 4px 20px rgba(0,0,0,.08) !important;
}

/* ── Badge éditeur ───────────────────────────────────────────── */
.mmw-editor-badge {
    display:     inline-flex;
    align-items: center;
    gap:         6px;
    background:  #EFF6FF;
    border:      1.5px solid #BFDBFE;
    border-radius: 6px;
    padding:     6px 12px;
    font-size:   12px;
    font-weight: 600;
    color:       #2563EB;
    margin-bottom: 10px;
}

/* ── Éditeur : blocs empilés ─────────────────────────────────── */
.mmw-editor-stacked {
    padding:    12px 16px;
    overflow-y: auto;
    display:    flex;
    flex-direction: column;
    gap:        12px;
}
.mmw-editor-block {
    border:        1.5px solid var(--mmw-border);
    border-radius: var(--mmw-rs);
    padding:       14px;
    background:    #fff;
}
.mmw-editor-block-label {
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color:          var(--mmw-blue);
    background:     var(--mmw-blue-l);
    border-radius:  4px;
    padding:        3px 8px;
    display:        inline-block;
    margin-bottom:  12px;
}