/* ============================================================================
   header-modern.css — Variante "Modern" dell'header e-commerce (opzione).
   Attiva solo quando l'header ha la classe .ke-header--modern (config
   tema_header_variante = modern). Tutto scoped → il tema classico è invariato.
   ========================================================================== */

/* ── Barra menu desktop: sfondo full-width, voci allineate al container ──────
   La <nav> in modalità modern è larga 100% (fuori dal container dell'header);
   lo sfondo copre tutta la larghezza, le voci restano dentro il container
   interno (allineate sotto il logo, come la topbar). */
.ke-ec-menu--modern {
    background: var(--ke-menu-bg, #f3f4f6);
    border-top: none !important;
}
.ke-ec-menu--modern a {
    color: var(--ke-menu-text, #1f2937) !important;
    opacity: 1 !important;
    transition: color .15s ease, background-color .15s ease;
}
.ke-ec-menu--modern a:hover {
    color: var(--ke-menu-hover, #000000) !important;
    background: rgba(0, 0, 0, 0.05);
}
/* la freccia dropdown eredita il colore del testo voce */
.ke-ec-menu--modern a svg { color: inherit; }

/* ── Icone header (carrello / utente) a contrasto ───────────────────────────
   --ke-ico-color è impostato da ke-header-contrast.js dalla luminanza dello
   sfondo header; fallback scuro (modern = pensato per header chiaro).
   !important per vincere lo stile inline #ffffff delle macro. */
.ke-header--modern .mini-cart-link,
.ke-header--modern .account-link {
    color: var(--ke-ico-color, #1f2937) !important;
}

/* ── Hamburger (mobile/tablet) a contrasto ─────────────────────────────────── */
.ke-header--modern #mobile-menu-button-other {
    border-color: rgba(0, 0, 0, 0.25) !important;
}
.ke-header--modern #mobile-menu-button-other svg {
    color: var(--ke-ico-color, #1f2937) !important;
}

/* ── Testata del menu mobile slide-in ───────────────────────────────────────
   Sul tema chiaro il bianco-su-bianco della barra "Menu" sparirebbe:
   usa i colori della barra menu. Il corpo del menu resta bianco/testo scuro. */
.ke-header--modern #mobile-menu > div:first-child {
    background: var(--ke-menu-bg, #f3f4f6) !important;
}
.ke-header--modern #mobile-menu > div:first-child span,
.ke-header--modern #mobile-menu > div:first-child svg {
    color: var(--ke-menu-text, #1f2937) !important;
}