/* ==========================================================
   VARIABLES
========================================================== */

html.mm-editorial {
    --mm-bg: #0C0E12;
    --mm-surface: #13161B;
    --mm-surface-2: #191C20;
    --mm-text: #F5F7F6;
    --mm-muted: rgba(255,255,255,.62);
    --mm-muted-2: rgba(255,255,255,.46);
    --mm-border: rgba(255,255,255,.09);
}


/* ==========================================================
   PAGE – DARK
========================================================== */

html.mm-editorial.mm-dark,
html.mm-editorial.mm-dark body,
html.mm-editorial.mm-dark main,
html.mm-editorial.mm-dark #content,
html.mm-editorial.mm-dark .site-content,
html.mm-editorial.mm-dark .site-main {
    background: #0C0E12 !important;
    background-color: #0C0E12 !important;
    color: #F5F7F6 !important;
}


/* Common white/light surfaces */

html.mm-editorial.mm-dark .bg-white,
html.mm-editorial.mm-dark .bg-background,
html.mm-editorial.mm-dark .bg-card,
html.mm-editorial.mm-dark .bg-gray-50,
html.mm-editorial.mm-dark .bg-gray-100,
html.mm-editorial.mm-dark .bg-slate-50,
html.mm-editorial.mm-dark .bg-neutral-50,
html.mm-editorial.mm-dark .bg-theme-gray-50,
html.mm-editorial.mm-dark .bg-theme-gray-100 {
    background: #13161B !important;
    background-color: #13161B !important;
}


/* Headings */

html.mm-editorial.mm-dark h1,
html.mm-editorial.mm-dark h2,
html.mm-editorial.mm-dark h3,
html.mm-editorial.mm-dark h4,
html.mm-editorial.mm-dark h5,
html.mm-editorial.mm-dark h6 {
    color: #F5F7F6 !important;
}


/* ==========================================================
   TEXT UTILITIES – ONLY ON NEUTRAL DARK SURFACES

   Viktigt:
   Vi gör INTE längre alla .text-black vita globalt.
   Det förstörde text på färgade "Inspiration"-kort.
========================================================== */

html.mm-editorial.mm-dark
:is(
    .bg-white,
    .bg-background,
    .bg-card,
    .bg-gray-50,
    .bg-gray-100,
    .bg-slate-50,
    .bg-neutral-50,
    .bg-theme-gray-50,
    .bg-theme-gray-100
)
:is(
    .text-black,
    .text-foreground,
    .text-theme-gray-850,
    .text-theme-gray-900,
    .text-theme-gray-950,
    .text-gray-800,
    .text-gray-900,
    .text-slate-800,
    .text-slate-900
) {
    color: #F5F7F6 !important;
}


html.mm-editorial.mm-dark
:is(
    .bg-white,
    .bg-background,
    .bg-card,
    .bg-gray-50,
    .bg-gray-100,
    .bg-slate-50,
    .bg-neutral-50,
    .bg-theme-gray-50,
    .bg-theme-gray-100
)
:is(
    .text-gray-400,
    .text-gray-500,
    .text-gray-600,
    .text-gray-700,
    .text-theme-gray-450,
    .text-theme-gray-500,
    .text-theme-gray-600,
    .text-theme-gray-700
) {
    color: rgba(255,255,255,.60) !important;
}


/* ==========================================================
   ARTICLE TYPOGRAPHY
========================================================== */

html.mm-editorial.mm-dark article,
html.mm-editorial.mm-dark .entry-content,
html.mm-editorial.mm-dark .wp-block-post-content,
html.mm-editorial.mm-dark .prose {
    color: rgba(255,255,255,.78) !important;
}


html.mm-editorial.mm-dark article p,
html.mm-editorial.mm-dark article li,
html.mm-editorial.mm-dark .entry-content p,
html.mm-editorial.mm-dark .entry-content li,
html.mm-editorial.mm-dark .wp-block-post-content p,
html.mm-editorial.mm-dark .wp-block-post-content li,
html.mm-editorial.mm-dark .prose p,
html.mm-editorial.mm-dark .prose li {
    color: rgba(255,255,255,.78) !important;
}


html.mm-editorial.mm-dark article strong,
html.mm-editorial.mm-dark article b,
html.mm-editorial.mm-dark .entry-content strong,
html.mm-editorial.mm-dark .wp-block-post-content strong,
html.mm-editorial.mm-dark .prose strong {
    color: #F5F7F6 !important;
}


html.mm-editorial.mm-dark article a,
html.mm-editorial.mm-dark .entry-content a,
html.mm-editorial.mm-dark .wp-block-post-content a,
html.mm-editorial.mm-dark .prose a {
    color: #F5F7F6;
}


html.mm-editorial.mm-dark article hr,
html.mm-editorial.mm-dark .entry-content hr,
html.mm-editorial.mm-dark .wp-block-post-content hr,
html.mm-editorial.mm-dark .prose hr {
    border-color: rgba(255,255,255,.10) !important;
}


html.mm-editorial.mm-dark article blockquote,
html.mm-editorial.mm-dark .entry-content blockquote,
html.mm-editorial.mm-dark .wp-block-post-content blockquote,
html.mm-editorial.mm-dark .prose blockquote {
    background: #13161B !important;
    color: rgba(255,255,255,.74) !important;
    border-color: rgba(255,255,255,.16) !important;
}


/* Tables */

html.mm-editorial.mm-dark article table,
html.mm-editorial.mm-dark .entry-content table,
html.mm-editorial.mm-dark .wp-block-post-content table {
    color: #F5F7F6 !important;
    border-color: rgba(255,255,255,.10) !important;
}


html.mm-editorial.mm-dark article th,
html.mm-editorial.mm-dark article td,
html.mm-editorial.mm-dark .entry-content th,
html.mm-editorial.mm-dark .entry-content td,
html.mm-editorial.mm-dark .wp-block-post-content th,
html.mm-editorial.mm-dark .wp-block-post-content td {
    border-color: rgba(255,255,255,.10) !important;
}


/* ==========================================================
   ARCHIVE / CARDS / FILTERS
========================================================== */

html.mm-editorial.mm-dark .border,
html.mm-editorial.mm-dark .border-gray-100,
html.mm-editorial.mm-dark .border-gray-200,
html.mm-editorial.mm-dark .border-gray-300,
html.mm-editorial.mm-dark .border-theme-gray-100,
html.mm-editorial.mm-dark .border-theme-gray-200 {
    border-color: rgba(255,255,255,.09) !important;
}


/*
 * Form controls inside the editorial CONTENT only.
 * Header/search excluded so Ajax Search Pro keeps its own layout.
 */

html.mm-editorial.mm-dark
main
button:not(#mm-darkmode-toggle),

html.mm-editorial.mm-dark
main
select,

html.mm-editorial.mm-dark
main
input,

html.mm-editorial.mm-dark
main
textarea {
    border-color: rgba(255,255,255,.10);
}


html.mm-editorial.mm-dark
main
select,

html.mm-editorial.mm-dark
main
input:not([type="submit"]):not([type="button"]),

html.mm-editorial.mm-dark
main
textarea {
    background-color: #191C20 !important;
    color: #F5F7F6 !important;
}


html.mm-editorial.mm-dark
main
input::placeholder,

html.mm-editorial.mm-dark
main
textarea::placeholder {
    color: rgba(255,255,255,.40) !important;
}


/* ==========================================================
   EDITORIAL CHIPS / TAGGAR – EXAKT FRONT-DESIGN

   Dark mode:
   Bakgrund: #13161B
   Text:     #CECFD2
   Ikon:     #85888E
   Border:   ingen

   Viktigt:
   Vi ändrar INTE storlek/padding/font här.
   Originalets Tailwind-klasser får styra formen precis som
   på fronten.
========================================================== */

html.mm-editorial.mm-dark
main
a.mm-editorial-chip,

html.mm-editorial.mm-dark
main
a.bg-theme-light-purple.text-theme-dark-purple {
    background: #13161B !important;
    background-color: #13161B !important;

    color: #CECFD2 !important;
    -webkit-text-fill-color: #CECFD2 !important;

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}


html.mm-editorial.mm-dark
main
a.mm-editorial-chip:hover,

html.mm-editorial.mm-dark
main
a.bg-theme-light-purple.text-theme-dark-purple:hover {
    background: #191C20 !important;
    background-color: #191C20 !important;

    color: #F5F7F6 !important;
    -webkit-text-fill-color: #F5F7F6 !important;

    border: 0 !important;
    box-shadow: none !important;
}


/* Eventuell ikon inne i badge */

html.mm-editorial.mm-dark
main
a.mm-editorial-chip
svg,

html.mm-editorial.mm-dark
main
a.bg-theme-light-purple.text-theme-dark-purple
svg {
    color: #85888E !important;
    fill: #85888E !important;
    stroke: #85888E !important;
}


html.mm-editorial.mm-dark
main
a.mm-editorial-chip
svg path,

html.mm-editorial.mm-dark
main
a.bg-theme-light-purple.text-theme-dark-purple
svg path {
    fill: #85888E !important;
    stroke: #85888E !important;
}


/* ==========================================================
   ARTIKELKORT – TEXT PÅ NEUTRAL DARK SURFACE

   Faktiska kort använder:
   bg-white
   text-theme-gray-550
   text-theme-gray-750
   text-theme-gray-900
========================================================== */

html.mm-editorial.mm-dark
main
.bg-white {
    background: #13161B !important;
    background-color: #13161B !important;
}


html.mm-editorial.mm-dark
main
.bg-white
.text-theme-gray-900 {
    color: #F5F7F6 !important;
    -webkit-text-fill-color: #F5F7F6 !important;
}


html.mm-editorial.mm-dark
main
.bg-white
.text-theme-gray-750 {
    color: #A4A7AE !important;
    -webkit-text-fill-color: #A4A7AE !important;
}


html.mm-editorial.mm-dark
main
.bg-white
.text-theme-gray-550 {
    color: #85888E !important;
    -webkit-text-fill-color: #85888E !important;
}


/* ==========================================================
   MOBIL HJÄLPTEXT – "Svep i sidled..."
========================================================== */

html.mm-editorial.mm-dark
main
.mm-editorial-swipe-help {
    color: #85888E !important;
    -webkit-text-fill-color: #85888E !important;
}


html.mm-editorial.mm-dark
main
.mm-editorial-swipe-help
svg {
    color: #85888E !important;
}


html.mm-editorial.mm-dark
main
.mm-editorial-swipe-help
svg path {
    fill: #85888E !important;
    stroke: #85888E !important;
}


/* "Se alla" ska fortsätta vara en separat knapp, inte en tagg */

html.mm-editorial
main
a.mm-editorial-see-all {
    -webkit-text-fill-color: currentColor !important;
}


/* ==========================================================
   FILTER-RUBRIKER / METADATA
========================================================== */

html.mm-editorial.mm-dark
main
.mm-editorial-filter-label {
    color: #F5F7F6 !important;
}


html.mm-editorial:not(.mm-dark)
main
.mm-editorial-filter-label {
    color: #252A32 !important;
}


/* ==========================================================
   FÄRGADE / BRANDADE KORT

   Behåll deras egna textfärger.
   V3 undviker därför global text-black -> white.
========================================================== */

html.mm-editorial.mm-dark
.mm-editorial-preserve-colors,
html.mm-editorial.mm-dark
.mm-editorial-preserve-colors * {
    -webkit-text-fill-color: initial;
}


/* ==========================================================
   HEADER SEARCH – V23

   DESKTOP:
   - Auth-raden får behålla exakt samma positionering som fronten.
   - Söket tas ur flexflödet och placeras separat TILL VÄNSTER
     om theme / Logga in / Skapa konto.
   - Matchar frontens mörka sökdesign:
     subtil mörk ram, sökikon, muted placeholder och separat Sök-knapp.
   - Behåller samma position och tillgängliga bredd.

   MOBILE:
   - Behåller den fungerande native search-toggle/layouten från V18.
========================================================== */

html.mm-editorial
.js-header
.search-wrapper {
    opacity: 1 !important;
    visibility: visible !important;
}


/* ==========================================================
   DESKTOP POSITION
========================================================== */

@media (min-width: 901px) {

    /*
     * VIKTIGT:
     * Ändra INTE wrappern runt #customer-login.
     * Då använder headern samma naturliga positionering som fronten.
     */

    html.mm-editorial
    .js-header
    .search-wrapper {
        position:
            absolute !important;

        top:
            10px !important;

        right:
            330px !important;

        left:
            auto !important;

        width:
            360px !important;

        max-width:
            360px !important;

        margin:
            0 !important;

        padding:
            0 !important;

        z-index:
            1500 !important;
    }


    html.mm-editorial
    .js-header
    .search-inner,

    html.mm-editorial
    .js-header
    .search-wrapper
    .ajax-search,

    html.mm-editorial
    .js-header
    .search-wrapper
    .asp_w_container {
        width:
            100% !important;

        max-width:
            100% !important;

        margin:
            0 !important;

        padding:
            0 !important;
    }


    /*
     * Desktop V20:
     * Visa ASP:s riktiga Sök-knapp, som på fronten.
     */

    html.mm-editorial
    .js-header
    .search-wrapper
    .promagnifier {
        display:
            inline-flex !important;
    }


    html.mm-editorial
    .js-header
    .search-wrapper
    .probox {
        padding:
            3px !important;
    }

}


/* ==========================================================
   DARK – HEADER SEARCH – V23 HARD OVERRIDE

   Basregler för ASP. Desktop-designen finjusteras längre ned
   i en separat min-width: 901px-sektion så mobilens V18-design
   lämnas helt orörd.

   Viktigt:
   Ajax Search Pro genererar egen CSS med hög specificitet.
   Därför träffar vi den faktiska instansen #ajaxsearchpro1_1.
========================================================== */

/* YTTRE WRAPPERS */

html.mm-editorial.mm-dark
.js-header
.search-wrapper
.search-inner,

html.mm-editorial.mm-dark
.js-header
.search-wrapper
.ajax-search,

html.mm-editorial.mm-dark
.js-header
.search-wrapper
.asp_w_container {
    background:
        transparent !important;

    background-color:
        transparent !important;

    background-image:
        none !important;

    box-shadow:
        none !important;

    filter:
        none !important;

    -webkit-filter:
        none !important;

    opacity:
        1 !important;
}


/* ASP-INSTANS */

html.mm-editorial.mm-dark
.js-header
.search-wrapper
#ajaxsearchpro1_1 {
    background:
        #0C0E12 !important;

    background-color:
        #0C0E12 !important;

    background-image:
        none !important;

    border:
        0 !important;

    box-shadow:
        none !important;

    filter:
        none !important;

    -webkit-filter:
        none !important;

    opacity:
        1 !important;
}


/* SJÄLVA SYNLIGA RUTAN */

html.mm-editorial.mm-dark
.js-header
.search-wrapper
#ajaxsearchpro1_1
.probox {
    background:
        #0C0E12 !important;

    background-color:
        #0C0E12 !important;

    background-image:
        none !important;

    border:
        1px solid
        #FFFFFF !important;

    border-radius:
        8px !important;

    box-shadow:
        none !important;

    filter:
        none !important;

    -webkit-filter:
        none !important;

    opacity:
        1 !important;
}


/* INPUT WRAPPER */

html.mm-editorial.mm-dark
.js-header
.search-wrapper
#ajaxsearchpro1_1
.proinput,

html.mm-editorial.mm-dark
.js-header
.search-wrapper
#ajaxsearchpro1_1
.proinput
form {
    background:
        #0C0E12 !important;

    background-color:
        #0C0E12 !important;

    background-image:
        none !important;

    border:
        0 !important;

    box-shadow:
        none !important;

    opacity:
        1 !important;
}


/* RIKTIGA INPUTEN */

html.mm-editorial.mm-dark
.js-header
.search-wrapper
#ajaxsearchpro1_1
.proinput
input.orig[type="search"] {
    background:
        #0C0E12 !important;

    background-color:
        #0C0E12 !important;

    background-image:
        none !important;

    color:
        #FFFFFF !important;

    -webkit-text-fill-color:
        #FFFFFF !important;

    caret-color:
        #FFFFFF !important;

    border:
        0 !important;

    outline:
        0 !important;

    box-shadow:
        none !important;

    opacity:
        1 !important;

    filter:
        none !important;

    -webkit-filter:
        none !important;

    -webkit-appearance:
        none !important;

    appearance:
        none !important;
}


html.mm-editorial.mm-dark
.js-header
.search-wrapper
#ajaxsearchpro1_1
.proinput
input.orig[type="search"]::placeholder {
    color:
        #FFFFFF !important;

    -webkit-text-fill-color:
        #FFFFFF !important;

    opacity:
        .82 !important;
}


/*
 * ASP:s autocomplete-input ligger i samma lager som original-inputen.
 * På desktop görs den helt transparent så den aldrig kan skapa
 * ett grått lager över sökrutan.
 */

html.mm-editorial.mm-dark
.js-header
.search-wrapper
#ajaxsearchpro1_1
.proinput
input.autocomplete {
    background:
        transparent !important;

    background-color:
        transparent !important;

    background-image:
        none !important;

    color:
        transparent !important;

    -webkit-text-fill-color:
        transparent !important;

    border:
        0 !important;

    outline:
        0 !important;

    box-shadow:
        none !important;

    opacity:
        0 !important;

    pointer-events:
        none !important;
}


/* FOCUS – behåll svart ruta + vit ram */

html.mm-editorial.mm-dark
.js-header
.search-wrapper
.asp_w_container.focus
#ajaxsearchpro1_1,

html.mm-editorial.mm-dark
.js-header
.search-wrapper
.asp_w_container.focus
#ajaxsearchpro1_1
.proinput,

html.mm-editorial.mm-dark
.js-header
.search-wrapper
.asp_w_container.focus
#ajaxsearchpro1_1
.proinput
form,

html.mm-editorial.mm-dark
.js-header
.search-wrapper
.asp_w_container.focus
#ajaxsearchpro1_1
.proinput
input.orig[type="search"] {
    background:
        #0C0E12 !important;

    background-color:
        #0C0E12 !important;

    background-image:
        none !important;

    box-shadow:
        none !important;
}


html.mm-editorial.mm-dark
.js-header
.search-wrapper
.asp_w_container.focus
#ajaxsearchpro1_1
.probox {
    background:
        #0C0E12 !important;

    background-color:
        #0C0E12 !important;

    border:
        1px solid
        #FFFFFF !important;

    box-shadow:
        none !important;
}



/* ==========================================================
   DESKTOP SEARCH – FRONT STYLE V23

   Inspirerad av frontens sökruta:
   - mörk neutral bakgrund
   - subtil ram istället för hård vit ram
   - sökikon till vänster
   - muted placeholder
   - mörk separat "Sök"-knapp
   - mobil påverkas INTE
========================================================== */

@media (min-width: 901px) {

    /* Hela synliga sökrutan */

    html.mm-editorial.mm-dark
    .js-header
    .search-wrapper
    #ajaxsearchpro1_1
    .probox,

    html.mm-editorial.mm-dark
    .js-header
    .search-wrapper
    .asp_w_container.focus
    #ajaxsearchpro1_1
    .probox {
        min-height:
            40px !important;

        height:
            40px !important;

        display:
            flex !important;

        align-items:
            center !important;

        background:
            #0F1115 !important;

        background-color:
            #0F1115 !important;

        background-image:
            none !important;

        border:
            1px solid
            #2A2F37 !important;

        border-radius:
            9px !important;

        padding:
            3px !important;

        box-shadow:
            none !important;

        overflow:
            visible !important;
    }


    /* Inputdelen */

    html.mm-editorial.mm-dark
    .js-header
    .search-wrapper
    #ajaxsearchpro1_1
    .proinput {
        position:
            relative !important;

        height:
            100% !important;

        flex:
            1 1 auto !important;

        margin:
            0 !important;

        padding:
            0 !important;

        background:
            transparent !important;

        background-color:
            transparent !important;
    }


    html.mm-editorial.mm-dark
    .js-header
    .search-wrapper
    #ajaxsearchpro1_1
    .proinput
    form {
        height:
            100% !important;

        margin:
            0 !important;

        padding:
            0 !important;

        background:
            transparent !important;

        background-color:
            transparent !important;
    }


    /* Sökikon */

    html.mm-editorial.mm-dark
    .js-header
    .search-wrapper
    #ajaxsearchpro1_1
    .proinput::before {
        content:
            "" !important;

        position:
            absolute !important;

        left:
            14px !important;

        top:
            50% !important;

        width:
            18px !important;

        height:
            18px !important;

        transform:
            translateY(-50%) !important;

        background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238A9099' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") !important;

        background-repeat:
            no-repeat !important;

        background-position:
            center !important;

        background-size:
            18px 18px !important;

        pointer-events:
            none !important;

        opacity:
            .9 !important;

        z-index:
            3 !important;
    }


    /* Riktig input */

    html.mm-editorial.mm-dark
    .js-header
    .search-wrapper
    #ajaxsearchpro1_1
    .proinput
    input.orig[type="search"] {
        height:
            100% !important;

        min-height:
            32px !important;

        padding:
            0 12px 0 44px !important;

        margin:
            0 !important;

        background:
            transparent !important;

        background-color:
            transparent !important;

        background-image:
            none !important;

        color:
            #F5F7F6 !important;

        -webkit-text-fill-color:
            #F5F7F6 !important;

        caret-color:
            #FFFFFF !important;

        font-size:
            14px !important;

        font-weight:
            500 !important;

        line-height:
            1.2 !important;

        border:
            0 !important;

        outline:
            0 !important;

        box-shadow:
            none !important;
    }


    html.mm-editorial.mm-dark
    .js-header
    .search-wrapper
    #ajaxsearchpro1_1
    .proinput
    input.orig[type="search"]::placeholder {
        color:
            #8A9099 !important;

        -webkit-text-fill-color:
            #8A9099 !important;

        opacity:
            1 !important;
    }


    /* ASP autocomplete ska inte lägga ett eget lager över designen */

    html.mm-editorial.mm-dark
    .js-header
    .search-wrapper
    #ajaxsearchpro1_1
    .proinput
    input.autocomplete {
        background:
            transparent !important;

        background-color:
            transparent !important;

        color:
            transparent !important;

        -webkit-text-fill-color:
            transparent !important;

        opacity:
            0 !important;
    }


    /* SÖK-KNAPP */

    html.mm-editorial.mm-dark
    .js-header
    .search-wrapper
    #ajaxsearchpro1_1
    .promagnifier {
        width:
            72px !important;

        min-width:
            72px !important;

        height:
            32px !important;

        min-height:
            32px !important;

        flex:
            0 0 72px !important;

        display:
            inline-flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        margin:
            0 !important;

        padding:
            0 14px !important;

        background:
            #20242A !important;

        background-color:
            #20242A !important;

        background-image:
            none !important;

        border:
            1px solid
            #363C45 !important;

        border-radius:
            8px !important;

        box-shadow:
            none !important;

        color:
            #F5F7F6 !important;

        -webkit-text-fill-color:
            #F5F7F6 !important;

        opacity:
            1 !important;

        cursor:
            pointer !important;

        transition:
            background-color .16s ease,
            border-color .16s ease !important;
    }


    html.mm-editorial.mm-dark
    .js-header
    .search-wrapper
    #ajaxsearchpro1_1
    .promagnifier
    .asp_text_button {
        display:
            inline !important;

        color:
            #F5F7F6 !important;

        -webkit-text-fill-color:
            #F5F7F6 !important;

        font-size:
            14px !important;

        font-weight:
            650 !important;

        line-height:
            1 !important;

        white-space:
            nowrap !important;
    }


    html.mm-editorial.mm-dark
    .js-header
    .search-wrapper
    #ajaxsearchpro1_1
    .promagnifier:hover {
        background:
            #292E35 !important;

        background-color:
            #292E35 !important;

        border-color:
            #454C57 !important;
    }


    /* Focus: lite tydligare ram, fortfarande samma diskreta formspråk */

    html.mm-editorial.mm-dark
    .js-header
    .search-wrapper
    .asp_w_container.focus
    #ajaxsearchpro1_1
    .probox {
        border-color:
            #414853 !important;

        box-shadow:
            0 0 0 1px rgba(255,255,255,.025) !important;
    }

}


/* ==========================================================
   LIGHT
   Låt originalets ljusa formspråk vara kvar.
========================================================== */

html.mm-editorial:not(.mm-dark)
.js-header
.search-wrapper
.asp_w_container
.asp_m,

html.mm-editorial:not(.mm-dark)
.js-header
.search-wrapper
.asp_w_container
.asp_main_container,

html.mm-editorial:not(.mm-dark)
.js-header
.search-wrapper
.asp_w_container
.probox {
    background:
        #FFFFFF !important;

    background-color:
        #FFFFFF !important;

    background-image:
        none !important;

    border:
        1px solid
        #D9DDE2 !important;

    border-radius:
        8px !important;

    box-shadow:
        none !important;
}


/* ==========================================================
   MOBILE SEARCH-TOGGLE
   Ändra INTE layouten.
========================================================== */

html.mm-editorial.mm-dark
.js-header
.search-wrapper
.search-toggle {
    color:
        #CECFD2 !important;

    filter:
        brightness(0)
        invert(1) !important;

    -webkit-filter:
        brightness(0)
        invert(1) !important;

    opacity:
        .72 !important;
}


html.mm-editorial.mm-dark
.js-header
.search-wrapper
.search-toggle:hover,

html.mm-editorial.mm-dark
.js-header
.search-wrapper
.search-toggle.active {
    opacity:
        1 !important;
}


/* ==========================================================
   MOBILE SEARCH – V18

   Mobil ska fortsätta använda native ASP-layouten:
   - vit sökruta
   - SVART text när användaren skriver
   - mörk placeholder
   - svart Sök-knapp
   - vit text i Sök-knappen
========================================================== */

@media (max-width: 900px) {

    /* Den riktiga Sök-knappen ska finnas kvar på mobil. */

    html.mm-editorial
    .js-header
    .search-wrapper
    .promagnifier {
        display:
            flex !important;
    }


    /* Yttre mobilwrapper */

    html.mm-editorial.mm-dark
    .js-header
    .search-wrapper
    .ajax-search,

    html.mm-editorial.mm-dark
    .js-header
    .search-wrapper
    .ajax-search
    .asp_w_container {
        background:
            transparent !important;

        background-color:
            transparent !important;

        background-image:
            none !important;

        box-shadow:
            none !important;
    }


    /* ASP-instansen får vit bakgrund på mobil. */

    html.mm-editorial.mm-dark
    .js-header
    .search-wrapper
    #ajaxsearchpro1_1 {
        background:
            #FFFFFF !important;

        background-color:
            #FFFFFF !important;

        background-image:
            none !important;

        border:
            0 !important;

        box-shadow:
            none !important;
    }


    /* Själva sökrutan */

    html.mm-editorial.mm-dark
    .js-header
    .search-wrapper
    #ajaxsearchpro1_1
    .probox,

    html.mm-editorial.mm-dark
    .js-header
    .search-wrapper
    .asp_w_container.focus
    #ajaxsearchpro1_1
    .probox {
        background:
            #FFFFFF !important;

        background-color:
            #FFFFFF !important;

        background-image:
            none !important;

        border:
            1px solid
            #D9DDE2 !important;

        border-radius:
            8px !important;

        box-shadow:
            none !important;
    }


    /* Input-wrappern måste också vara vit. */

    html.mm-editorial.mm-dark
    .js-header
    .search-wrapper
    #ajaxsearchpro1_1
    .proinput,

    html.mm-editorial.mm-dark
    .js-header
    .search-wrapper
    #ajaxsearchpro1_1
    .proinput
    form,

    html.mm-editorial.mm-dark
    .js-header
    .search-wrapper
    .asp_w_container.focus
    #ajaxsearchpro1_1
    .proinput,

    html.mm-editorial.mm-dark
    .js-header
    .search-wrapper
    .asp_w_container.focus
    #ajaxsearchpro1_1
    .proinput
    form {
        background:
            #FFFFFF !important;

        background-color:
            #FFFFFF !important;

        background-image:
            none !important;

        border:
            0 !important;

        box-shadow:
            none !important;
    }


    /*
     * VIKTIGT:
     * Skriven text ska vara SVART på mobil.
     */

    html.mm-editorial.mm-dark
    .js-header
    .search-wrapper
    #ajaxsearchpro1_1
    .proinput
    input.orig[type="search"],

    html.mm-editorial.mm-dark
    .js-header
    .search-wrapper
    .asp_w_container.focus
    #ajaxsearchpro1_1
    .proinput
    input.orig[type="search"] {
        background:
            #FFFFFF !important;

        background-color:
            #FFFFFF !important;

        background-image:
            none !important;

        color:
            #111318 !important;

        -webkit-text-fill-color:
            #111318 !important;

        caret-color:
            #111318 !important;

        border:
            0 !important;

        outline:
            0 !important;

        box-shadow:
            none !important;

        opacity:
            1 !important;

        filter:
            none !important;

        -webkit-filter:
            none !important;
    }


    /* Mobil-placeholder */

    html.mm-editorial.mm-dark
    .js-header
    .search-wrapper
    #ajaxsearchpro1_1
    .proinput
    input.orig[type="search"]::placeholder {
        color:
            #6F737A !important;

        -webkit-text-fill-color:
            #6F737A !important;

        opacity:
            1 !important;
    }


    /*
     * Autocomplete-lagret ska inte kunna lägga vitt/grått textlager
     * ovanpå den riktiga svarta texten.
     */

    html.mm-editorial.mm-dark
    .js-header
    .search-wrapper
    #ajaxsearchpro1_1
    .proinput
    input.autocomplete {
        background:
            transparent !important;

        background-color:
            transparent !important;

        background-image:
            none !important;

        color:
            #111318 !important;

        -webkit-text-fill-color:
            #111318 !important;

        caret-color:
            #111318 !important;

        border:
            0 !important;

        outline:
            0 !important;

        box-shadow:
            none !important;

        opacity:
            1 !important;
    }


    /* ======================================================
       MOBIL SÖK-KNAPP
       Svart bakgrund + vit text.
    ====================================================== */

    html.mm-editorial.mm-dark
    .js-header
    .search-wrapper
    #ajaxsearchpro1_1
    button.promagnifier,

    html.mm-editorial.mm-dark
    .js-header
    .search-wrapper
    #ajaxsearchpro1_1
    button.promagnifier:hover,

    html.mm-editorial.mm-dark
    .js-header
    .search-wrapper
    #ajaxsearchpro1_1
    button.promagnifier:focus,

    html.mm-editorial.mm-dark
    .js-header
    .search-wrapper
    #ajaxsearchpro1_1
    button.promagnifier:active {
        background:
            #0C0E12 !important;

        background-color:
            #0C0E12 !important;

        background-image:
            none !important;

        color:
            #FFFFFF !important;

        -webkit-text-fill-color:
            #FFFFFF !important;

        border-color:
            #0C0E12 !important;

        box-shadow:
            none !important;

        text-shadow:
            none !important;

        opacity:
            1 !important;

        filter:
            none !important;

        -webkit-filter:
            none !important;
    }


    html.mm-editorial.mm-dark
    .js-header
    .search-wrapper
    #ajaxsearchpro1_1
    button.promagnifier
    .asp_text_button {
        color:
            #FFFFFF !important;

        -webkit-text-fill-color:
            #FFFFFF !important;

        text-shadow:
            none !important;

        opacity:
            1 !important;
    }

}


/* ==========================================================
   SEARCH BOTTOM BREATHING ROOM – V18

   Lite extra luft under sökrutan på desktop + mobil så
   nederkanten/ramen inte klipps av av ASP/header-wrappers.
========================================================== */

html.mm-editorial
.js-header
.search-wrapper,

html.mm-editorial
.js-header
.search-wrapper
.search-inner,

html.mm-editorial
.js-header
.search-wrapper
.ajax-search,

html.mm-editorial
.js-header
.search-wrapper
.asp_w_container,

html.mm-editorial
.js-header
.search-wrapper
.asp_w,

html.mm-editorial
.js-header
.search-wrapper
.asp_m,

html.mm-editorial
.js-header
.search-wrapper
.asp_main_container {
    overflow:
        visible !important;
}


html.mm-editorial
.js-header
.search-wrapper
.asp_w_container {
    padding-bottom:
        4px !important;
}


@media (max-width: 900px) {

    html.mm-editorial
    .js-header
    .search-wrapper
    .ajax-search {
        padding-bottom:
            4px !important;

        margin-bottom:
            2px !important;
    }

}


/* ==========================================================
   IMAGES / VIDEO
   No inversion.
========================================================== */

html.mm-editorial.mm-dark img,
html.mm-editorial.mm-dark video {
    filter: none !important;
    -webkit-filter: none !important;
}


/* ==========================================================
   HEADER – DARK
========================================================== */

html.mm-editorial.mm-dark body header.js-header,
html.mm-editorial.mm-dark body header.js-header.header,
html.mm-editorial.mm-dark body header.js-header.bg-white,
html.mm-editorial.mm-dark body .js-header {
    background: #0C0E12 !important;
    background-color: #0C0E12 !important;
    color: #FFFFFF !important;
    border-color: rgba(255,255,255,.07) !important;
    box-shadow: none !important;
}


html.mm-editorial.mm-dark body .js-header > nav {
    background: #0C0E12 !important;
    background-color: #0C0E12 !important;
    box-shadow: none !important;
}


html.mm-editorial.mm-dark body .js-header > nav > div,
html.mm-editorial.mm-dark body .js-header > nav > div > div {
    background: transparent !important;
    background-color: transparent !important;
}


/* White Marketmate logo */

html.mm-editorial.mm-dark
.js-header
a.mr-10 {
    width: 150px !important;
    height: 25px !important;
    display: block !important;
    flex: 0 0 150px !important;
    background-image:
        url("https://marketmate-prod-wp-uploads.s3.amazonaws.com/uploads/2024/11/Marketmate-Vit.png") !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: contain !important;
}


html.mm-editorial.mm-dark
.js-header
a.mr-10
> svg {
    opacity: 0 !important;
}


/* Main menu */

html.mm-editorial.mm-dark body .js-header .main-menu,
html.mm-editorial.mm-dark body .js-header .main-menu-hamburger-selector,
html.mm-editorial.mm-dark body .js-header .main-menu-hamburger-selector > div,
html.mm-editorial.mm-dark body .js-header .main-menu .flex-1,
html.mm-editorial.mm-dark body .js-header .main-menu > div,
html.mm-editorial.mm-dark body .js-header .main-menu > div > div,
html.mm-editorial.mm-dark body .js-header .main-menu > div > div > div,
html.mm-editorial.mm-dark body .js-header .main-menu ul:not(.sub-menu),
html.mm-editorial.mm-dark body .js-header .main-menu ul:not(.sub-menu) > li {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}


html.mm-editorial.mm-dark body
.js-header
.main-menu
ul:not(.sub-menu)
> li
> a {
    color: rgba(255,255,255,.73) !important;
    text-decoration: none !important;
}


html.mm-editorial.mm-dark body
.js-header
.main-menu
ul:not(.sub-menu)
> li
> a:hover {
    color: #FFFFFF !important;
}


html.mm-editorial.mm-dark
.js-header
.main-menu
svg {
    color: rgba(255,255,255,.62) !important;
    stroke: currentColor !important;
}


/* Dropdowns */

html.mm-editorial.mm-dark body .js-header .sub-menu {
    background: #13161B !important;
    background-color: #13161B !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    border-radius: 12px !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.32) !important;
}


html.mm-editorial.mm-dark body .js-header .sub-menu li {
    background: transparent !important;
}


html.mm-editorial.mm-dark body .js-header .sub-menu a {
    background: transparent !important;
    color: rgba(255,255,255,.70) !important;
}


html.mm-editorial.mm-dark body .js-header .sub-menu a:hover {
    background: rgba(255,255,255,.05) !important;
    color: #FFFFFF !important;
}


/* ==========================================================
   HEADER – LIGHT
========================================================== */

html.mm-editorial:not(.mm-dark) body,
html.mm-editorial:not(.mm-dark) main,
html.mm-editorial:not(.mm-dark) #content,
html.mm-editorial:not(.mm-dark) .site-content,
html.mm-editorial:not(.mm-dark) .site-main {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    color: #171B22 !important;
}


html.mm-editorial:not(.mm-dark) body header.js-header,
html.mm-editorial:not(.mm-dark) body header.js-header.header,
html.mm-editorial:not(.mm-dark) body header.js-header.bg-white,
html.mm-editorial:not(.mm-dark) body .js-header {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    color: #151922 !important;
    border-color: #E7E9EC !important;
    box-shadow: none !important;
}


html.mm-editorial:not(.mm-dark) body .js-header > nav {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    box-shadow: none !important;
}


html.mm-editorial:not(.mm-dark)
.js-header
a.mr-10 {
    width: 150px !important;
    height: 25px !important;
    display: block !important;
    flex: 0 0 150px !important;
    background-image: none !important;
}


html.mm-editorial:not(.mm-dark)
.js-header
a.mr-10
> svg {
    opacity: 1 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    filter: none !important;
}


html.mm-editorial:not(.mm-dark) body .js-header .main-menu,
html.mm-editorial:not(.mm-dark) body .js-header .main-menu-hamburger-selector,
html.mm-editorial:not(.mm-dark) body .js-header .main-menu-hamburger-selector > div,
html.mm-editorial:not(.mm-dark) body .js-header .main-menu .flex-1,
html.mm-editorial:not(.mm-dark) body .js-header .main-menu > div,
html.mm-editorial:not(.mm-dark) body .js-header .main-menu > div > div,
html.mm-editorial:not(.mm-dark) body .js-header .main-menu > div > div > div,
html.mm-editorial:not(.mm-dark) body .js-header .main-menu ul:not(.sub-menu),
html.mm-editorial:not(.mm-dark) body .js-header .main-menu ul:not(.sub-menu) > li {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}


html.mm-editorial:not(.mm-dark) body
.js-header
.main-menu
ul:not(.sub-menu)
> li
> a {
    color: #454851 !important;
    text-decoration: none !important;
    font-weight: 550 !important;
}


html.mm-editorial:not(.mm-dark) body
.js-header
.main-menu
ul:not(.sub-menu)
> li
> a:hover {
    color: #11151D !important;
}


html.mm-editorial:not(.mm-dark)
.js-header
.main-menu
svg {
    color: #777C86 !important;
    stroke: currentColor !important;
}


html.mm-editorial:not(.mm-dark) body .js-header .sub-menu {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    border: 1px solid #E3E6EA !important;
    border-radius: 12px !important;
    box-shadow: 0 18px 50px rgba(20,25,32,.12) !important;
}


html.mm-editorial:not(.mm-dark) body .js-header .sub-menu li {
    background: transparent !important;
}


html.mm-editorial:not(.mm-dark) body .js-header .sub-menu a {
    background: transparent !important;
    color: #555A63 !important;
}


html.mm-editorial:not(.mm-dark) body .js-header .sub-menu a:hover {
    background: #F5F6F7 !important;
    color: #11151D !important;
}


/* ==========================================================
   HAMBURGER – SAMMA SOM FRONTEN
========================================================== */

html.mm-editorial.mm-dark
.js-header
.hamburger
svg line {
    stroke: #FFFFFF !important;
}


html.mm-editorial:not(.mm-dark)
.js-header
.hamburger
svg line {
    stroke: #171B22 !important;
}


/* ==========================================================
   HEADER AUTH – EXAKT SAMMA DESIGNSPRÅK SOM FRONTEN
========================================================== */

@media (min-width: 901px) {

    html.mm-editorial
    #customer-login {
        margin-left:
            auto !important;

        margin-right:
            0 !important;
    }

}


html.mm-editorial
#customer-login
> .flex {
    height:
        48px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        flex-end !important;

    gap:
        24px !important;

    padding:
        0 !important;
}


/* LAND BORT */

html.mm-editorial
#customer-login
> .flex
> button:nth-of-type(1) {
    display:
        none !important;
}


/* NYHETSBREV BORT */

html.mm-editorial
#customer-login
> .flex
> button:nth-of-type(2) {
    display:
        none !important;
}


/* ==========================================================
   LOGGA IN
   Exakt kompakta mått som på fronten.
========================================================== */

html.mm-editorial
#customer-login
> .flex
> div
> button {
    width:
        auto !important;

    min-width:
        0 !important;

    height:
        48px !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    padding:
        0 !important;

    margin:
        0 !important;

    border:
        0 !important;

    outline:
        0 !important;

    border-radius:
        0 !important;

    background:
        transparent !important;

    background-color:
        transparent !important;

    box-shadow:
        none !important;

    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif !important;

    font-size:
        15px !important;

    line-height:
        1 !important;

    font-weight:
        550 !important;

    text-transform:
        none !important;

    white-space:
        nowrap !important;

    transition:
        color .16s ease !important;
}


html.mm-editorial.mm-dark
#customer-login
> .flex
> div
> button {
    color:
        rgba(255,255,255,.58) !important;
}


html.mm-editorial.mm-dark
#customer-login
> .flex
> div
> button:hover {
    color:
        #FFFFFF !important;

    background:
        transparent !important;
}


html.mm-editorial:not(.mm-dark)
#customer-login
> .flex
> div
> button {
    color:
        #555A64 !important;
}


html.mm-editorial:not(.mm-dark)
#customer-login
> .flex
> div
> button:hover {
    color:
        #11151D !important;

    background:
        transparent !important;
}


/* ==========================================================
   SKAPA KONTO
   Exakta front-mått.
========================================================== */

html.mm-editorial
.mm-header-signup {
    position:
        static !important;

    top:
        auto !important;

    right:
        auto !important;

    bottom:
        auto !important;

    left:
        auto !important;

    z-index:
        auto !important;

    flex:
        0 0 auto !important;

    min-width:
        142px !important;

    width:
        auto !important;

    height:
        48px !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    margin:
        0 !important;

    padding:
        0 22px !important;

    border-radius:
        9px !important;

    box-shadow:
        0 2px 8px
        rgba(0,0,0,.13) !important;

    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif !important;

    font-size:
        15px !important;

    line-height:
        1 !important;

    font-weight:
        650 !important;

    text-decoration:
        none !important;

    white-space:
        nowrap !important;

    transition:
        transform .16s ease,
        background-color .16s ease,
        box-shadow .16s ease !important;
}


html.mm-editorial.mm-dark
.mm-header-signup {
    background:
        #FFFFFF !important;

    color:
        #101214 !important;

    border:
        1px solid
        rgba(0,0,0,.10) !important;
}


html.mm-editorial.mm-dark
.mm-header-signup:hover {
    background:
        #F5F5F3 !important;

    color:
        #101214 !important;

    transform:
        translateY(-1px);

    box-shadow:
        0 7px 20px
        rgba(0,0,0,.19) !important;
}


html.mm-editorial:not(.mm-dark)
.mm-header-signup {
    background:
        #202225 !important;

    color:
        #FFFFFF !important;

    border:
        1px solid
        #202225 !important;
}


/* ==========================================================
   THEME TOGGLE
========================================================== */

html.mm-editorial
#customer-login
> .flex
> span.mm-header-theme-wrap {
    width:
        40px !important;

    height:
        48px !important;

    flex:
        0 0 40px !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    margin:
        0 !important;

    padding:
        0 !important;

    background:
        transparent !important;

    background-color:
        transparent !important;

    border:
        0 !important;

    position:
        relative !important;
}


html.mm-editorial
span.mm-header-theme-wrap
#mm-darkmode-toggle {
    position:
        static !important;

    top:
        auto !important;

    right:
        auto !important;

    bottom:
        auto !important;

    left:
        auto !important;

    z-index:
        2 !important;

    width:
        40px !important;

    min-width:
        40px !important;

    max-width:
        40px !important;

    height:
        40px !important;

    min-height:
        40px !important;

    flex:
        0 0 40px !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;

    outline:
        0 !important;

    border-radius:
        9px !important;

    background:
        transparent !important;

    background-color:
        transparent !important;

    box-shadow:
        none !important;

    cursor:
        pointer !important;

    font-size:
        0 !important;

    line-height:
        1 !important;

    transform:
        none !important;

    opacity:
        1 !important;

    visibility:
        visible !important;

    appearance:
        none !important;

    -webkit-appearance:
        none !important;

    transition:
        color .16s ease,
        background-color .16s ease !important;
}


html.mm-editorial
span.mm-header-theme-wrap
#mm-darkmode-toggle:hover {
    transform:
        none !important;
}


html.mm-editorial
span.mm-header-theme-wrap
#mm-darkmode-toggle
svg {
    width:
        20px !important;

    height:
        20px !important;

    min-width:
        20px !important;

    display:
        block !important;

    flex:
        0 0 20px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        visible !important;

    pointer-events:
        none !important;

    opacity:
        1 !important;

    visibility:
        visible !important;
}


html.mm-editorial
span.mm-header-theme-wrap
#mm-darkmode-toggle
svg path {
    stroke:
        currentColor !important;
}


html.mm-editorial.mm-dark
span.mm-header-theme-wrap
#mm-darkmode-toggle {
    color:
        #A4A7AE !important;
}


html.mm-editorial.mm-dark
span.mm-header-theme-wrap
#mm-darkmode-toggle:hover {
    color:
        #FFFFFF !important;

    background:
        rgba(255,255,255,.06) !important;
}


html.mm-editorial:not(.mm-dark)
span.mm-header-theme-wrap
#mm-darkmode-toggle {
    color:
        #8B9099 !important;
}


html.mm-editorial:not(.mm-dark)
span.mm-header-theme-wrap
#mm-darkmode-toggle:hover {
    color:
        #11151D !important;

    background:
        rgba(15,20,28,.05) !important;
}


/* ==========================================================
   ACCOUNT MENU
========================================================== */

html.mm-editorial.mm-dark #user-menu {
    background: #13161B !important;
    background-color: #13161B !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 10px !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.34) !important;
}


html.mm-editorial.mm-dark #user-menu button {
    color: #FFFFFF !important;
}


html.mm-editorial:not(.mm-dark) #user-menu {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    color: #30343B !important;
    border: 1px solid #E3E6EA !important;
    border-radius: 10px !important;
    box-shadow: 0 18px 50px rgba(20,25,32,.12) !important;
}


html.mm-editorial:not(.mm-dark) #user-menu button {
    color: #30343B !important;
}


/* ==========================================================
   FOOTER
========================================================== */

html.mm-editorial.mm-dark footer,
html.mm-editorial.mm-dark .site-footer,
html.mm-editorial.mm-dark #colophon {
    background: #0C0E12 !important;
    background-color: #0C0E12 !important;
    color: #F5F7F6 !important;
    border-color: rgba(255,255,255,.08) !important;
}


html.mm-editorial.mm-dark footer h1,
html.mm-editorial.mm-dark footer h2,
html.mm-editorial.mm-dark footer h3,
html.mm-editorial.mm-dark footer h4,
html.mm-editorial.mm-dark .site-footer h1,
html.mm-editorial.mm-dark .site-footer h2,
html.mm-editorial.mm-dark .site-footer h3,
html.mm-editorial.mm-dark .site-footer h4 {
    color: #F5F7F6 !important;
}


html.mm-editorial.mm-dark footer p,
html.mm-editorial.mm-dark footer address,
html.mm-editorial.mm-dark .site-footer p,
html.mm-editorial.mm-dark .site-footer address {
    color: rgba(255,255,255,.58) !important;
}


html.mm-editorial.mm-dark footer a,
html.mm-editorial.mm-dark .site-footer a {
    color: rgba(255,255,255,.78);
}


/* ==========================================================
   MARKETMATE – MOBILE MENU FIX
   EXAKT SAMMA LAYOUTSPRÅK SOM FRONTEN

   Endast editorial + mobil.
========================================================== */

@media (max-width: 900px) {


    /* ======================================================
       FULL MOBILMENY
    ====================================================== */

    html.mm-editorial body
    .js-header
    .main-menu-hamburger-selector,

    html.mm-editorial body
    .js-header
    .main-menu-hamburger-selector
    > div,

    html.mm-editorial body
    .js-header
    .main-menu {
        width: 100% !important;
        max-width: none !important;

        box-shadow: none !important;
    }


    /* DARK */

    html.mm-editorial.mm-dark body
    .js-header
    .main-menu-hamburger-selector,

    html.mm-editorial.mm-dark body
    .js-header
    .main-menu-hamburger-selector
    > div,

    html.mm-editorial.mm-dark body
    .js-header
    .main-menu {
        background: #0C0E12 !important;
        background-color: #0C0E12 !important;
    }


    /* WHITE */

    html.mm-editorial:not(.mm-dark) body
    .js-header
    .main-menu-hamburger-selector,

    html.mm-editorial:not(.mm-dark) body
    .js-header
    .main-menu-hamburger-selector
    > div,

    html.mm-editorial:not(.mm-dark) body
    .js-header
    .main-menu {
        background: #FFFFFF !important;
        background-color: #FFFFFF !important;
    }


    /* ======================================================
       HUVUDLISTAN
    ====================================================== */

    html.mm-editorial
    .js-header
    .main-menu
    ul:not(.sub-menu) {
        width: 100% !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    html.mm-editorial
    .js-header
    .main-menu
    ul:not(.sub-menu)
    > li {
        width: 100% !important;

        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
    }


    /* ======================================================
       HUVUDLÄNKAR
    ====================================================== */

    html.mm-editorial
    .js-header
    .main-menu
    ul:not(.sub-menu)
    > li
    > a {
        width: 100% !important;

        min-height: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        margin: 0 !important;

        padding:
            13px
            0 !important;

        font-size: 18px !important;
        line-height: 1.25 !important;

        font-weight: 550 !important;

        background: transparent !important;
    }


    html.mm-editorial.mm-dark
    .js-header
    .main-menu
    ul:not(.sub-menu)
    > li
    > a {
        color:
            rgba(255,255,255,.72) !important;
    }


    html.mm-editorial:not(.mm-dark)
    .js-header
    .main-menu
    ul:not(.sub-menu)
    > li
    > a {
        color:
            #3E434C !important;
    }


    /* ======================================================
       SUBMENYER
    ====================================================== */

    html.mm-editorial
    .js-header
    .main-menu
    .sub-menu {
        position: static !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        transform: none !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        display: block !important;

        margin:
            4px
            0
            12px !important;

        padding: 0 !important;

        border-radius:
            14px !important;

        box-shadow:
            none !important;

        overflow:
            hidden !important;
    }


    html.mm-editorial.mm-dark
    .js-header
    .main-menu
    .sub-menu {
        background:
            #13161B !important;

        background-color:
            #13161B !important;

        border:
            1px solid
            rgba(255,255,255,.09) !important;
    }


    html.mm-editorial:not(.mm-dark)
    .js-header
    .main-menu
    .sub-menu {
        background:
            #F5F6F7 !important;

        background-color:
            #F5F6F7 !important;

        border:
            1px solid
            rgba(17,24,39,.08) !important;
    }


    /* ======================================================
       SUBMENU ITEMS
    ====================================================== */

    html.mm-editorial
    .js-header
    .main-menu
    .sub-menu
    li {
        width: 100% !important;

        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        background:
            transparent !important;
    }


    html.mm-editorial
    .js-header
    .main-menu
    .sub-menu
    a {
        width: 100% !important;

        min-height: 0 !important;

        display: flex !important;
        align-items: center !important;

        margin: 0 !important;

        padding:
            14px
            16px !important;

        border-radius:
            0 !important;

        background:
            transparent !important;

        font-size:
            16px !important;

        line-height:
            1.25 !important;

        font-weight:
            500 !important;
    }


    html.mm-editorial.mm-dark
    .js-header
    .main-menu
    .sub-menu
    a {
        color:
            rgba(255,255,255,.70) !important;
    }


    html.mm-editorial:not(.mm-dark)
    .js-header
    .main-menu
    .sub-menu
    a {
        color:
            #444951 !important;
    }


    html.mm-editorial.mm-dark
    .js-header
    .main-menu
    .sub-menu
    li + li
    > a {
        border-top:
            1px solid
            rgba(255,255,255,.06) !important;
    }


    html.mm-editorial:not(.mm-dark)
    .js-header
    .main-menu
    .sub-menu
    li + li
    > a {
        border-top:
            1px solid
            rgba(17,24,39,.065) !important;
    }


    /* ======================================================
       AUTH-DELEN
       [THEME] [LOGGA IN / KONTO]
    ====================================================== */

    html.mm-editorial
    #customer-login {
        position: static !important;

        width: 100% !important;
        max-width: none !important;

        display: block !important;

        margin:
            18px
            0
            0 !important;

        padding:
            16px
            0
            8px !important;
    }


    html.mm-editorial
    #customer-login
    > .flex {
        width: 100% !important;
        height: auto !important;

        display: flex !important;

        align-items: center !important;
        justify-content: flex-start !important;

        gap: 10px !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* ======================================================
       THEME ICON
    ====================================================== */

    html.mm-editorial
    #customer-login
    > .flex
    > span.mm-header-theme-wrap {
        order: 1 !important;

        width: 40px !important;
        height: 40px !important;

        flex:
            0 0 40px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;
    }


    html.mm-editorial
    #customer-login
    > .flex
    > span.mm-header-theme-wrap
    > #mm-darkmode-toggle {
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;

        height: 40px !important;
        min-height: 40px !important;

        margin: 0 !important;
        padding: 0 !important;

        border-radius:
            10px !important;
    }


    /* ======================================================
       LOGGA IN / KONTO
    ====================================================== */

    html.mm-editorial
    #customer-login
    > .flex
    > div {
        order: 2 !important;

        width: auto !important;

        flex:
            0 0 auto !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    html.mm-editorial
    #customer-login
    > .flex
    > div
    > button {
        width: auto !important;
        min-width: 0 !important;

        height: 40px !important;

        margin: 0 !important;

        padding:
            0
            6px !important;

        display:
            inline-flex !important;

        align-items:
            center !important;

        justify-content:
            flex-start !important;

        font-size:
            16px !important;

        line-height:
            1 !important;

        background: transparent !important;
        background-color: transparent !important;

        border: 0 !important;
        outline: 0 !important;
        border-radius: 0 !important;

        box-shadow: none !important;
    }


    /* ======================================================
       SKAPA KONTO – MOBIL

       Samma som fronten:
       CTA:n visas på desktop, men döljs i mobilheadern.
       Det förhindrar att auth-raden bryts till två rader.
    ====================================================== */

    html.mm-editorial
    .mm-header-signup {
        display:
            none !important;
    }

}


/* ==========================================================
   USER MENU – SAMMA SOM FRONTEN
========================================================== */

html.mm-editorial.mm-dark #user-menu {
    background: #13161B !important;
    background-color: #13161B !important;

    color: #FFFFFF !important;

    border: 1px solid rgba(255,255,255,.10) !important;

    border-radius: 12px !important;

    box-shadow:
        0 18px 45px
        rgba(0,0,0,.38) !important;

    z-index: 99999 !important;
}


html.mm-editorial.mm-dark #user-menu,
html.mm-editorial.mm-dark #user-menu button,
html.mm-editorial.mm-dark #user-menu a,
html.mm-editorial.mm-dark #user-menu span,
html.mm-editorial.mm-dark #user-menu div,
html.mm-editorial.mm-dark #user-menu p {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    opacity: 1 !important;
}


html.mm-editorial:not(.mm-dark) #user-menu {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;

    color: #30343B !important;

    border:
        1px solid
        rgba(17,19,24,.10) !important;

    border-radius: 12px !important;

    box-shadow:
        0 14px 40px
        rgba(0,0,0,.12) !important;
}


html.mm-editorial:not(.mm-dark) #user-menu,
html.mm-editorial:not(.mm-dark) #user-menu button,
html.mm-editorial:not(.mm-dark) #user-menu a,
html.mm-editorial:not(.mm-dark) #user-menu span {
    color: #30343B !important;
    -webkit-text-fill-color: #30343B !important;
}


@media (max-width: 900px) {

    html.mm-editorial
    #user-menu {
        top:
            calc(100% + 10px) !important;

        bottom:
            auto !important;

        left:
            0 !important;

        right:
            auto !important;

        min-width:
            12rem !important;

        width:
            max-content !important;

        max-width:
            calc(100vw - 32px) !important;

        margin:
            0 !important;

        transform:
            none !important;

        z-index:
            999999 !important;
    }


    html.mm-editorial
    #user-menu
    button {
        width:
            100% !important;

        min-height:
            44px !important;

        justify-content:
            flex-start !important;

        margin-left:
            0 !important;

        padding:
            10px 16px !important;

        text-align:
            left !important;
    }

}


/* ==========================================================
   LOGGED IN MOBILE THEME POSITION – SAMMA SOM FRONTEN
========================================================== */

@media (max-width: 900px) {

    html.mm-editorial
    #customer-login.mm-auth-logged-in
    > .flex {
        position: relative !important;
    }


    html.mm-editorial
    #customer-login.mm-auth-logged-in
    > .flex
    > span.mm-header-theme-wrap {
        position: absolute !important;

        width: 38px !important;
        height: 38px !important;

        min-width: 38px !important;

        flex: none !important;

        margin: 0 !important;
        padding: 0 !important;

        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        visibility: visible !important;
        opacity: 1 !important;

        transform: none !important;

        z-index: 30 !important;
    }


    html.mm-editorial
    #customer-login.mm-auth-logged-in
    #mm-darkmode-toggle {
        width: 38px !important;
        height: 38px !important;

        min-width: 38px !important;
        min-height: 38px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        visibility: visible !important;
        opacity: 1 !important;
    }

}


/* ==========================================================
   EDITORIAL – AVSÄNDARE I ARTIKLAR / KORT
   Exempel:
   <span class="text-xs font-medium text-theme-gray-900 truncate">
       David Bagge - Redaktionen
   </span>
========================================================== */

html.mm-editorial.mm-dark
main
span.text-theme-gray-900.font-medium {
    color: #F5F7F6 !important;
    -webkit-text-fill-color: #F5F7F6 !important;
}



/* ==========================================================
   EDITORIAL – VIKTIG INFORMATION – V23

   Dark mode:
   - yttre bakgrund: #0C0E12
   - inre bakgrund: #0C0E12
   - border: #373A41
   - rubrik vit
   - ikon grå enligt Marketmate dark UI
   - brödtext fortsatt muted
========================================================== */


/* YTTRE WRAPPER
   <div class="... bg-[#EFEDE3] ...">
*/
html.mm-editorial.mm-dark
main
div:has(> div > .mm-notice-content) {
    background: #0C0E12 !important;
    background-color: #0C0E12 !important;
}


/* INRE KORT
   <div class="... border border-[#EFEDE3] ... bg-white">
*/
html.mm-editorial.mm-dark
main
div:has(> .mm-notice-content) {
    background: #0C0E12 !important;
    background-color: #0C0E12 !important;

    border-color: #373A41 !important;
}


html.mm-editorial.mm-dark
main
div:has(> .mm-notice-content)
> .flex
.text-zinc-900 {
    color: #F5F7F6 !important;
    -webkit-text-fill-color: #F5F7F6 !important;
}


html.mm-editorial.mm-dark
main
div:has(> .mm-notice-content)
> .flex
svg {
    color: #85888E !important;
}


html.mm-editorial.mm-dark
main
div:has(> .mm-notice-content)
> .flex
svg path {
    stroke: #85888E !important;
}


html.mm-editorial.mm-dark
main
.mm-notice-content {
    color: #A4A7AE !important;
    -webkit-text-fill-color: #A4A7AE !important;
}



/* ==========================================================
   EDITORIAL – ARTIKELBADGES I DARK MODE
   Gäller badges inne i artiklar / artikelheader
   Exempel:
   <div class="py-2 relative flex flex-nowrap md:flex-wrap ...">
       <a ...><span class="... text-theme-dark-purple bg-theme-light-purple ...">...</span></a>
   </div>

   Önskad stil:
   - Bakgrund: #053321
   - Text: #75E0A7
   - Ikon: #17B26A
   - Ingen border
========================================================== */

html.mm-editorial.mm-dark
main
div.py-2.relative.flex.flex-nowrap.md\:flex-wrap.snap-x.snap-mandatory.overflow-x-auto.md\:overflow-hidden.no-scrollbar
a > span.text-theme-dark-purple.bg-theme-light-purple {
    background: #053321 !important;
    background-color: #053321 !important;

    color: #75E0A7 !important;
    -webkit-text-fill-color: #75E0A7 !important;

    border: 0 !important;
    box-shadow: none !important;
}


/* Om badge-texten innehåller eventuell inline-ikon / svg i framtiden */
html.mm-editorial.mm-dark
main
div.py-2.relative.flex.flex-nowrap.md\:flex-wrap.snap-x.snap-mandatory.overflow-x-auto.md\:overflow-hidden.no-scrollbar
a > span.text-theme-dark-purple.bg-theme-light-purple svg,
html.mm-editorial.mm-dark
main
div.py-2.relative.flex.flex-nowrap.md\:flex-wrap.snap-x.snap-mandatory.overflow-x-auto.md\:overflow-hidden.no-scrollbar
a > span.text-theme-dark-purple.bg-theme-light-purple i {
    color: #17B26A !important;
    fill: #17B26A !important;
    stroke: #17B26A !important;
}


/* Behåll länkcontainern ren */
html.mm-editorial.mm-dark
main
div.py-2.relative.flex.flex-nowrap.md\:flex-wrap.snap-x.snap-mandatory.overflow-x-auto.md\:overflow-hidden.no-scrollbar
a.block.whitespace-nowrap.snap-start.last\:mr-4 {
    border: 0 !important;
    box-shadow: none !important;
}



/* ==========================================================
   EDITORIAL – AKTIVT FILTERVAL I DARK MODE

   WordPress byter aktiv kategori/tagg från:
   text-theme-dark-purple bg-theme-light-purple

   till:
   bg-theme-dark-purple text-white

   V9 tar bort den gamla lila active-färgen.

   Inaktiv:
   #13161B / #CECFD2

   Aktiv:
   #191C20 / #F5F7F6

   Ingen border.
========================================================== */

html.mm-editorial.mm-dark
main
.mm-editorial-filter-label
+ div
> a.bg-theme-dark-purple.text-white {
    background: #191C20 !important;
    background-color: #191C20 !important;

    color: #F5F7F6 !important;
    -webkit-text-fill-color: #F5F7F6 !important;

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}


/* Extra säkerhet för aktiva taggar med ?tag=... */

html.mm-editorial.mm-dark
main
a.bg-theme-dark-purple.text-white[href*="/borsanalyser/?tag="] {
    background: #191C20 !important;
    background-color: #191C20 !important;

    color: #F5F7F6 !important;
    -webkit-text-fill-color: #F5F7F6 !important;

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}


/* Eventuell ikon i aktiv badge */

html.mm-editorial.mm-dark
main
.mm-editorial-filter-label
+ div
> a.bg-theme-dark-purple.text-white
svg,

html.mm-editorial.mm-dark
main
a.bg-theme-dark-purple.text-white[href*="/borsanalyser/?tag="]
svg {
    color: #85888E !important;
    fill: #85888E !important;
    stroke: #85888E !important;
}


/* ==========================================================
   V41 SAFE – EDITORIAL ARCHIVES: ALLA BADGES GRÖNA I DARK MODE

   Matchar exakt artikelbadges:
   - Bakgrund: #053321
   - Text:     #75E0A7
   - Ikon:     #17B26A
   - Ingen border

   Scope:
   - /borsanalyser/
   - /category/*
   - /tag/*
   i dark mode.

   "Se alla" lämnas orörd eftersom den redan markeras separat
   som .mm-editorial-see-all och inte är en badge.
========================================================== */

/* Inaktiva kategori-/tagg-badges + badges på artikelkort */
html:is(.mm-borsanalyser-page, .mm-editorial-taxonomy-page).mm-dark
main
a.mm-editorial-chip,

html:is(.mm-borsanalyser-page, .mm-editorial-taxonomy-page).mm-dark
main
a.bg-theme-light-purple.text-theme-dark-purple,

html:is(.mm-borsanalyser-page, .mm-editorial-taxonomy-page).mm-dark
main
a.mm-editorial-chip
> span.bg-theme-light-purple.text-theme-dark-purple,

html:is(.mm-borsanalyser-page, .mm-editorial-taxonomy-page).mm-dark
main
a
> span.text-theme-dark-purple.bg-theme-light-purple {
    background:
        #053321 !important;

    background-color:
        #053321 !important;

    color:
        #75E0A7 !important;

    -webkit-text-fill-color:
        #75E0A7 !important;

    border:
        0 !important;

    outline:
        0 !important;

    box-shadow:
        none !important;
}


/* Hover – behåll samma gröna badgefamilj */
html:is(.mm-borsanalyser-page, .mm-editorial-taxonomy-page).mm-dark
main
a.mm-editorial-chip:hover,

html:is(.mm-borsanalyser-page, .mm-editorial-taxonomy-page).mm-dark
main
a.bg-theme-light-purple.text-theme-dark-purple:hover,

html:is(.mm-borsanalyser-page, .mm-editorial-taxonomy-page).mm-dark
main
a.mm-editorial-chip:hover
> span.bg-theme-light-purple.text-theme-dark-purple,

html:is(.mm-borsanalyser-page, .mm-editorial-taxonomy-page).mm-dark
main
a:hover
> span.text-theme-dark-purple.bg-theme-light-purple {
    background:
        #0A3D29 !important;

    background-color:
        #0A3D29 !important;

    color:
        #82EABC !important;

    -webkit-text-fill-color:
        #82EABC !important;

    border:
        0 !important;

    box-shadow:
        none !important;
}


/* Aktiva filterval ska också vara gröna, inte mörkgrå */
html:is(.mm-borsanalyser-page, .mm-editorial-taxonomy-page).mm-dark
main
.mm-editorial-filter-label
+ div
> a.bg-theme-dark-purple.text-white,

html:is(.mm-borsanalyser-page, .mm-editorial-taxonomy-page).mm-dark
main
a.bg-theme-dark-purple.text-white[href*="/borsanalyser/"] {
    background:
        #053321 !important;

    background-color:
        #053321 !important;

    color:
        #75E0A7 !important;

    -webkit-text-fill-color:
        #75E0A7 !important;

    border:
        0 !important;

    outline:
        0 !important;

    box-shadow:
        none !important;
}


/* Eventuella ikoner i badges */
html:is(.mm-borsanalyser-page, .mm-editorial-taxonomy-page).mm-dark
main
a.mm-editorial-chip
svg,

html:is(.mm-borsanalyser-page, .mm-editorial-taxonomy-page).mm-dark
main
a.mm-editorial-chip
svg path,

html:is(.mm-borsanalyser-page, .mm-editorial-taxonomy-page).mm-dark
main
a.bg-theme-light-purple.text-theme-dark-purple
svg,

html:is(.mm-borsanalyser-page, .mm-editorial-taxonomy-page).mm-dark
main
a.bg-theme-light-purple.text-theme-dark-purple
svg path,

html:is(.mm-borsanalyser-page, .mm-editorial-taxonomy-page).mm-dark
main
a
> span.text-theme-dark-purple.bg-theme-light-purple
svg,

html:is(.mm-borsanalyser-page, .mm-editorial-taxonomy-page).mm-dark
main
.mm-editorial-filter-label
+ div
> a.bg-theme-dark-purple.text-white
svg {
    color:
        #17B26A !important;

    fill:
        #17B26A !important;

    stroke:
        #17B26A !important;
}


/* "Se alla" är en separat CTA och ska inte bli grön */
html:is(.mm-borsanalyser-page, .mm-editorial-taxonomy-page).mm-dark
main
a.mm-editorial-see-all {
    -webkit-text-fill-color:
        currentColor !important;
}