@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400..800&display=swap');
body {
    margin: 0;
    padding: 0;
    font-size: 100%;
}

#mobile_menu_holder {
    display: none;
}

.top-level-menu,
.second-level-menu,
.third-level-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

@media screen and (min-width: 1025px) {
    .slicknav_menu {
        display: none;
    }

    .mobile_loginText {
        display: none;
    }

    .loginText {
        display: inline-flex;
    }

    .top-level-menu {
        width: 100%;
        display: flex;
        align-items: stretch;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .top-level-menu > li {
        position: relative;
        display: flex;
        align-items: stretch;
        min-height: 56px;
        z-index: 100;
    }

    .top-level-menu a {
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 10px 11px;
    color: #000000;

    font-family: "Manrope", Arial, sans-serif;
    font-size: 16px;
    font-weight: 550;
    letter-spacing: 0.025em;
    line-height: 1.3;

    text-align: left;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;

    transition: background-color 150ms ease, color 150ms ease;
    }

    .top-level-menu > li > a:hover,
    .top-level-menu > li > a:focus-visible,
    .top-level-menu > li:hover > a {
        background: #f5f0e7;
        color: #8b3540;
    }

    .second-level-menu,
    .third-level-menu {
        position: absolute;
        display: none;
        width: 250px;
        border: 1px solid #d9d1c5;
        border-radius: 0 0 8px 8px;
        background: #fffdf9;
        box-shadow: 0 16px 36px rgba(37, 34, 43, 0.14);
    }

    .second-level-menu {
        top: 100%;
        left: 0;
        z-index: 1000;
    }

    .third-level-menu {
        top: -1px;
        left: calc(100% - 2px);
        z-index: 1100;
        border-radius: 0 8px 8px 8px;
    }

    .second-level-menu > li,
    .third-level-menu > li {
        position: relative;
        min-height: 42px;
        background: #fffdf9;
    }

    .second-level-menu > li:first-child,
    .third-level-menu > li:first-child {
        border-radius: inherit;
    }

    .second-level-menu a,
    .third-level-menu a {
        min-height: 42px;
        padding: 10px 15px;
        font-size: 15px;
        font-weight: 500;
        letter-spacing: 0.01em;
        text-transform: none;
        white-space: normal;
    }

    .second-level-menu li + li,
    .third-level-menu li + li {
        border-top: 1px solid #eee7dc;
    }

    .second-level-menu a:hover,
    .second-level-menu a:focus-visible,
    .third-level-menu a:hover,
    .third-level-menu a:focus-visible {
        background: #f5f0e7;
        color: #8b3540;
    }

    .top-level-menu li:hover > .second-level-menu,
    .top-level-menu li:focus-within > .second-level-menu,
    .second-level-menu li:hover > .third-level-menu,
    .second-level-menu li:focus-within > .third-level-menu {
        display: block;
    }
}

@media screen and (max-width: 1024px) {
    #menu_style,
    #menu_style #centerMenu,
    #menu_style #menu {
        display: none !important;
        visibility: hidden !important;
    }

    #mobile_menu_holder {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        width: 48px;
        min-width: 48px;
        margin: 0;
        padding: 0;
        background: transparent;
    }

    .mobile {
        display: none !important;
    }

    .mobile_loginText {
        display: none !important;
    }

    .loginText {
        display: inline-flex;
    }

    #mobile_menu_holder .slicknav_menu {
        display: block !important;
        position: static;
        width: auto;
        margin: 0;
        padding: 0;
        background: transparent !important;
        box-shadow: none;
        font-family: "freight-sans-pro", "Trebuchet MS", Helvetica, Arial, sans-serif;
        font-size: 16px;
    }

    #mobile_menu_holder .slicknav_btn {
        float: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        min-width: 42px;
        height: 42px;
        min-height: 42px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 8px;
        background: #173d35 !important;
        box-shadow: none;
        color: #ffffff;
        text-shadow: none;
    }

    #mobile_menu_holder .slicknav_btn:hover,
    #mobile_menu_holder .slicknav_btn:focus-visible {
        background: #255649 !important;
        outline: none;
    }

    #mobile_menu_holder .slicknav_menutxt {
        display: none !important;
    }

    #mobile_menu_holder .slicknav_icon {
        float: none;
        width: 1.125em;
        height: auto;
        margin: 0;
    }

    #mobile_menu_holder .slicknav_icon-bar {
        background-color: #ffffff;
        box-shadow: none;
    }

    #mobile_menu_holder .slicknav_nav {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        z-index: 1200;
        width: 100%;
        margin: 0;
        padding: 10px 20px 18px;
        border-top: 1px solid #d9d1c5;
        border-bottom: 1px solid #d9d1c5;
        background: #fffdf9 !important;
        box-shadow: 0 16px 36px rgba(37, 34, 43, 0.14);
    }

    #mobile_menu_holder .slicknav_nav a,
    #mobile_menu_holder .slicknav_nav .slicknav_row {
        margin: 0;
        padding: 11px 12px;
        border-radius: 6px;
        color: #25222b;
        font-size: 17px;
        font-weight: 600;
        letter-spacing: 0.005em;
        text-decoration: none;
    }

    #mobile_menu_holder .slicknav_nav a:hover,
    #mobile_menu_holder .slicknav_nav a:focus-visible,
    #mobile_menu_holder .slicknav_nav .slicknav_row:hover,
    #mobile_menu_holder .slicknav_nav .slicknav_row:focus-visible {
        background: #f5f0e7;
        color: #8b3540;
        outline: none;
    }

    #mobile_menu_holder .slicknav_nav .slicknav_arrow {
        color: #173d35;
    }
}

@media screen and (max-width: 640px) {
    #mobile_menu_holder .slicknav_btn {
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
    }

    #mobile_menu_holder .slicknav_nav {
        padding-left: 14px;
        padding-right: 14px;
    }
}

/*
 * ÄNDRING: Användarmenyn har sin presentation här tillsammans med
 * huvudmenyn. Kundvagns- och checkoutregler finns endast i cart.css.
 */
html body #user-menu.no-print {
    display: grid !important;
    width: 100%;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    place-items: center;
    margin: 0;
    padding: 0 !important;
    border-top: 1px solid #ece8e1;
    border-bottom: 1px solid #ece8e1;
    background: #f7f7f7;
    overflow: visible;
    box-sizing: border-box !important;
}

html body #user-menu.no-print > .user-menu__inner {
    display: flex !important;
    width: min(100% - 32px, 760px);
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    gap: 26px;
    align-items: center !important;
    justify-content: center;
    margin: 0;
    padding: 0 !important;
    position: static;
    transform: none;
    box-sizing: border-box !important;
}

html body #user-menu.no-print > .user-menu__inner > a {
    display: flex !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    align-items: center !important;
    justify-content: center;
    margin: 0;
    padding: 0 !important;
    position: static;
    transform: none;
    color: #17231f;
    font-family: "Manrope", Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2 !important;
    text-decoration: none;
    vertical-align: middle;
    white-space: nowrap;
    transition: color 150ms ease;
    box-sizing: border-box !important;
}

html body #user-menu.no-print > .user-menu__inner > a:hover,
html body #user-menu.no-print > .user-menu__inner > a:focus-visible {
    color: #8b3540;
}

html body #user-menu.no-print > .user-menu__inner > a:focus-visible {
    outline: 2px solid #17483c;
    outline-offset: 3px;
}

@media screen and (max-width: 640px) {
    html body #user-menu.no-print {
        overflow-x: auto;
        overscroll-behavior-inline: contain;
    }

    html body #user-menu.no-print > .user-menu__inner {
        width: max-content;
        min-width: 100%;
        gap: 20px;
        justify-content: flex-start;
        padding: 0 16px !important;
    }

    html body #user-menu.no-print > .user-menu__inner > a {
        font-size: 14px;
    }
}

/* ================================================================
   MANOGA – menyfärger för den nuvarande responsiva headern.
   Ursprunglig mobilmeny, dropdown och brytpunkter ovan är bevarade.
   ================================================================ */
@media (min-width: 1025px) {
    .top-level-menu > li > a,
    .top-level-menu > li > a:link,
    .top-level-menu > li > a:visited {
        color: #fff8f4;
        font-family: 'Manrope', Arial, sans-serif;
    }
    .top-level-menu > li > a:hover,
    .top-level-menu > li > a:focus-visible,
    .top-level-menu > li:hover > a {
        background: rgba(255,255,255,.20);
        color: #fff;
    }
    .second-level-menu, .third-level-menu {
        border-color: #e6cfda;
        background: #fffbfd;
    }
    .second-level-menu > li, .third-level-menu > li { background: #fffbfd; }
    .second-level-menu a, .third-level-menu a,
    .second-level-menu a:link, .third-level-menu a:link,
    .second-level-menu a:visited, .third-level-menu a:visited {
        color: #432d3c;
    }
    .second-level-menu a:hover, .third-level-menu a:hover,
    .second-level-menu a:focus-visible, .third-level-menu a:focus-visible {
        color: #783958;
        background: #fbedf3;
    }
    .second-level-menu li + li, .third-level-menu li + li { border-color: #f0e1e8; }
}
@media (max-width: 1024px) {
    #mobile_menu_holder .slicknav_btn { background: #7b405e !important; }
    #mobile_menu_holder .slicknav_btn:hover,
    #mobile_menu_holder .slicknav_btn:focus-visible { background: #66334f !important; }
    #mobile_menu_holder .slicknav_nav {
        background: #fffafc !important;
        border-color: #e9d5df;
    }
    #mobile_menu_holder .slicknav_nav a,
    #mobile_menu_holder .slicknav_nav .slicknav_row { color: #432d3c; }
    #mobile_menu_holder .slicknav_nav a:hover,
    #mobile_menu_holder .slicknav_nav .slicknav_row:hover { background: #faedf2; color: #7c3959; }
    #mobile_menu_holder .slicknav_nav .slicknav_arrow { color: #8c4767; }
}
html body #user-menu.no-print {
    background: #fbf1f5;
    border-color: #ead7e0;
}
html body #user-menu.no-print > .user-menu__inner > a { color: #432d3c; }
html body #user-menu.no-print > .user-menu__inner > a:hover { color: #a65679; }