/* =========================================================
   SHOPSTYLE MEGA MENU V2 2026
   Desktop only
   ========================================================= */

@media (min-width: 980px) {

    /* ===== MENU BAR ===== */

    .back_catsmenu {
        position: relative;
        z-index: 1050;
        background: #ffffff;
        border-top: 1px solid #edf1f5;
        border-bottom: 1px solid #e6ebf0;
        box-shadow: 0 3px 14px rgba(24, 34, 48, .045);
        overflow: visible;
    }

    .back_catsmenu > .container > .row {
        display: flex;
        align-items: center;
        min-height: 58px;
        overflow: visible;
    }

    /* ===== CATEGORIES BUTTON ===== */

    .trigger_cats {
        position: relative;
        flex: 0 0 245px;
        padding-right: 14px;
        z-index: 1100;
    }

    .trigger_cats > a {
        text-decoration: none !important;
    }

    .catshow_btn {
        height: 44px;
        padding: 0 16px;
        display: flex;
        align-items: center;
        gap: 10px;

        background: #102a43;
        color: #ffffff;

        border-radius: 14px;
        box-shadow: 0 7px 20px rgba(16, 42, 67, .16);

        font-size: 13px;
        font-weight: 700;
        letter-spacing: .035em;
        text-transform: uppercase;

        transition:
            background .2s ease,
            box-shadow .2s ease,
            transform .2s ease;
    }

    .catshow_btn::before {
        content: "☰";
        font-size: 17px;
        line-height: 1;
        font-weight: 400;
    }

    .trigger_cats > a:hover .catshow_btn {
        background: #071d2f;
        box-shadow: 0 9px 24px rgba(16, 42, 67, .22);
        transform: translateY(-1px);
    }

    .trig_cats_fa {
        margin-left: auto;
        color: rgba(255,255,255,.8);
    }


    /* =====================================================
       TOP NAVIGATION
       ===================================================== */

    #cssmenu {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        justify-content: flex-end;
        position: relative;
        z-index: 1080;
    }

    #cssmenu .mainmenu,
    #cssmenu .nav-container,
    #cssmenu .nav-inner,
    #cssmenu #menu {
        width: 100%;
    }

    #menu > ul.nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
justify-content: flex-end;
        align-items: center;
        gap: 2px;
    }

    #menu > ul.nav > li {
        position: relative;
        float: none !important;
    }

    #menu > ul.nav > li > a {
        height: 58px;
        line-height: 58px;

        margin: 0 !important;
        padding: 0 13px !important;

        border: 0 !important;
        border-radius: 11px;

        color: #182230 !important;
        background: transparent !important;

        font-size: 13px;
        font-weight: 700;
        letter-spacing: .025em;
        text-transform: uppercase;

        transition:
            color .18s ease,
            background .18s ease;
    }

    #menu > ul.nav > li:hover > a,
    #menu > ul.nav > li.activeLink > a {
        color: #2e8bb0 !important;
        background: #f2f7fa !important;
    }

    #menu > ul.nav > li.activeLink > a::after {
        content: "";
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: 5px;
        height: 2px;
        border-radius: 3px;
        background: #2e8bb0;
    }


    /* =====================================================
       MAIN MEGA PANELS
       ===================================================== */

    #menu .dropdown-menu.megamenu {
        margin-top: 0 !important;

        background: #ffffff !important;
        border: 1px solid #e1e6ec !important;
        border-radius: 18px !important;

        padding: 20px !important;

        box-shadow:
            0 22px 55px rgba(24, 34, 48, .13),
            0 5px 15px rgba(24, 34, 48, .06) !important;

        overflow: visible;
    }

    #menu > ul.nav > li > .megamenu.column1 {
        min-width: 285px;
    }

    #menu > ul.nav > li > .megamenu.column3 {
        width: min(860px, calc(100vw - 50px)) !important;
        max-width: 860px;
    }

    #menu .megamenu.column3 > .dropdown-inner {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(180px, 1fr));
        gap: 18px 24px;
    }

    #menu .megamenu.column1 > .dropdown-inner {
        display: block !important;
    }


    /* ===== COLUMN HEADINGS ===== */

    #menu .megamenu ul.list-unstyled {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        width: auto !important;
    }

    #menu .megamenu ul.childs_1 > li > a.bold,
    #menu .megamenu ul.childs_1 > li.dropdown > a {
        display: block;

        padding: 5px 0 9px !important;
        margin: 0 !important;

        color: #182230 !important;

        font-size: 14px !important;
        font-weight: 800 !important;
        line-height: 1.35;

        border: 0 !important;
        background: transparent !important;
    }

    #menu .megamenu ul.childs_1 > li > a.bold:hover,
    #menu .megamenu ul.childs_1 > li.dropdown > a:hover {
        color: #2e8bb0 !important;
    }


    /* ===== THIRD LEVEL BECOMES PART OF MEGA PANEL ===== */

    #menu .megamenu.column3
    ul.childs_1 > li.dropdown > .dropdown-menu {
        display: block !important;

        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;

        width: auto !important;
        min-width: 0 !important;

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

        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;

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

    #menu .megamenu ul.childs_2 li > a,
    #menu .megamenu.column3
    ul.childs_1 .dropdown-menu ul li > a {
        display: block;

        min-width: 0 !important;
        width: auto !important;

        padding: 5px 0 !important;
        margin: 0 !important;

        border: 0 !important;
        background: transparent !important;

        color: #5c6978 !important;

        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 1.35;

        transition:
            color .16s ease,
            transform .16s ease;
    }

    #menu .megamenu ul.childs_2 li > a:hover,
    #menu .megamenu.column3
    ul.childs_1 .dropdown-menu ul li > a:hover {
        color: #2e8bb0 !important;
        transform: translateX(3px);
    }


    /* ===== SEE ALL ===== */

    #menu .see_more {
        margin-top: 7px;
    }

    #menu .see_more > a,
    .see_more a {
        display: inline-flex !important;
        align-items: center;

        width: auto !important;
        min-width: 0 !important;

        padding: 6px 10px !important;
        margin: 2px 0 0 !important;

        border: 1px solid #d6e3eb !important;
        border-radius: 9px !important;

        background: #f5f9fb !important;
        color: #226f91 !important;

        font-size: 12px !important;
        font-weight: 700 !important;
    }

    #menu .see_more > a:hover,
    .see_more a:hover {
        background: #eaf4f8 !important;
        color: #174f69 !important;
    }


    /* =====================================================
       LEFT "CATEGORIES" DROPDOWN
       ===================================================== */

    .trigger_cats .div_boxlv {
        position: absolute;

        left: 0;
        top: calc(100% + 9px);

        width: 290px;

        background: #ffffff;
        border: 1px solid #e1e6ec;
        border-radius: 18px;

        padding: 9px;

        box-shadow:
            0 22px 55px rgba(24, 34, 48, .14),
            0 5px 15px rgba(24, 34, 48, .06);

        overflow: visible;
    }

    .trigger_cats .div_lev1 {
        position: relative;
        border-radius: 10px;
    }

    .trigger_cats .div_lev1 > .div_link {
        min-height: 42px;

        display: flex;
        align-items: center;

        padding: 9px 11px;

        border-radius: 10px;

        color: #263645;
        text-decoration: none;

        font-size: 13px;
        font-weight: 650;

        transition:
            color .16s ease,
            background .16s ease,
            padding .16s ease;
    }

    .trigger_cats .div_lev1 > .div_link:hover,
    .trigger_cats .div_lev1:hover > .div_link {
        color: #226f91;
        background: #f1f7fa;
        padding-left: 14px;
    }

    .trigger_cats .div_lev1 > .div_link i {
        margin-left: auto;
        color: #8a98a7;
    }


    /* ===== CATEGORY FLYOUT ===== */

    .trigger_cats .div_boxlv2 {
        display: none;

        position: absolute;

        left: calc(100% + 10px);
        top: -9px;

        width: 700px;
        max-width: calc(100vw - 360px);
        max-height: 70vh;

        overflow-y: auto;

        grid-template-columns: repeat(2, minmax(220px, 1fr));
        gap: 8px 26px;

        padding: 19px 21px;

        background: #ffffff;
        border: 1px solid #e1e6ec;
        border-radius: 18px;

        box-shadow:
            0 22px 55px rgba(24, 34, 48, .14),
            0 5px 15px rgba(24, 34, 48, .06);
    }

    .trigger_cats .div_lev1:hover > .div_boxlv2 {
        display: grid;
    }

    .trigger_cats .div_lev2 {
        padding: 5px 0 10px;
        break-inside: avoid;
    }

    .trigger_cats .div_link2 {
        display: block;

        padding: 4px 0 7px;

        color: #182230;
        text-decoration: none;

        font-size: 14px;
        line-height: 1.35;
        font-weight: 800;
    }

    .trigger_cats .div_link2:hover {
        color: #2e8bb0;
    }

    .trigger_cats .div_boxlv3 {
        display: grid;
        gap: 1px;
    }

    .trigger_cats .div_lev3 a {
        display: block;

        padding: 4px 0;

        color: #647180;
        text-decoration: none;

        font-size: 13px;
        line-height: 1.35;
        font-weight: 500;

        transition:
            color .16s ease,
            transform .16s ease;
    }

    .trigger_cats .div_lev3 a:hover {
        color: #2e8bb0;
        transform: translateX(3px);
    }


    /* ===== SMALLER DESKTOPS ===== */

    @media (max-width: 1280px) {

        .trigger_cats {
            flex-basis: 220px;
        }

        #menu > ul.nav > li > a {
            padding-left: 9px !important;
            padding-right: 9px !important;
            font-size: 12px;
        }

        #menu > ul.nav > li > .megamenu.column3 {
            width: min(760px, calc(100vw - 40px)) !important;
        }

        .trigger_cats .div_boxlv2 {
            width: 620px;
        }
    }
}

/* SHOPSTYLE DESKTOP MENU POLISH 2026 START */

@media (min-width: 980px) {

    /* ===== MAIN NAVIGATION BAR ===== */

    .header-bottom {
        background: #ffffff;
        border-top: 1px solid #edf1f4;
        border-bottom: 1px solid #e4e9ee;
        box-shadow: 0 5px 18px rgba(22, 36, 52, 0.055);
    }

    .mainmenu,
    .nav-container,
    .nav-inner {
        position: relative;
        width: 100%;
    }

    #menu {
        position: relative;
        width: 100%;
    }

    #menu > ul.nav.navbar-nav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;

        float: none !important;

        width: 100%;
        margin: 0 !important;
        padding: 7px 0 !important;

        gap: 5px;
    }

    #menu > ul.nav.navbar-nav > li {
        position: relative;
        float: none !important;
        width: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* ===== MAIN LINKS ===== */

    #menu > ul.nav.navbar-nav > li > a {
        position: relative;

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

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

        line-height: 1.2 !important;

        margin: 0 !important;
        padding: 0 15px !important;

        background: transparent !important;
        border: 1px solid transparent !important;
        border-radius: 12px !important;

        color: #172536 !important;

        font-size: 13px !important;
        font-weight: 700 !important;
        letter-spacing: .035em;
        text-transform: uppercase;

        white-space: nowrap;

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

    #menu > ul.nav.navbar-nav > li:hover > a,
    #menu > ul.nav.navbar-nav > li.activeLink > a {
        color: #287fa5 !important;
        background: #f2f7fa !important;
        border-color: #dbe8ef !important;

        transform: translateY(-1px);
    }

    /* remove old theme underline/animations */
    #menu > ul.nav.navbar-nav > li > a::after {
        display: none !important;
    }

    /* ===== TOP LEVEL MEGA PANEL ===== */

    #menu > ul.nav.navbar-nav > li > .dropdown-menu.megamenu {
        margin-top: 8px !important;

        padding: 25px 27px !important;

        background: #ffffff !important;
        border: 1px solid #dfe6ec !important;
        border-radius: 18px !important;

        box-shadow:
            0 24px 55px rgba(18, 33, 49, .15),
            0 4px 12px rgba(18, 33, 49, .04) !important;
    }

    #menu > ul.nav.navbar-nav > li > .megamenu.column3 {
        width: min(880px, calc(100vw - 60px)) !important;
        max-width: none !important;
    }

    #menu > ul.nav.navbar-nav > li > .megamenu.column1 {
        width: 300px !important;
    }

    /* ===== MEGA MENU COLUMNS ===== */

    #menu .megamenu.column3 > .dropdown-inner {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: start;

        gap: 18px 28px;
    }

    #menu .megamenu.column3 > .dropdown-inner > ul.childs_1 {
        display: block !important;
        float: none !important;

        width: auto !important;
        min-width: 0;

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

        border: 0 !important;
    }

    /* ===== CATEGORY HEADINGS ===== */

    #menu .megamenu ul.childs_1 > li.dropdown > a {
        display: block !important;

        min-width: 0 !important;

        margin: 0 0 8px !important;
        padding: 0 0 10px !important;

        color: #142334 !important;

        border: 0 !important;
        border-bottom: 1px solid #e9eef2 !important;
        background: transparent !important;

        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        letter-spacing: .01em;

        transition: color .16s ease !important;
    }

    #menu .megamenu ul.childs_1 > li.dropdown > a:hover {
        color: #287fa5 !important;
    }

    /* ===== SECOND LEVEL ===== */

    #menu .megamenu.column3
    ul.childs_1 > li.dropdown > .dropdown-menu {

        position: static !important;

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

        float: none !important;

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

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

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

        background: transparent !important;
        box-shadow: none !important;

        transform: none !important;
        transition: none !important;
    }

    #menu .megamenu.column3
    ul.childs_1 > li.dropdown > .dropdown-menu > .dropdown-inner {
        display: block !important;
    }

    #menu .megamenu ul.childs_2 {
        display: block !important;
        float: none !important;

        width: 100% !important;

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

    #menu .megamenu ul.childs_2 > li {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    #menu .megamenu ul.childs_2 > li > a {
        position: relative;

        display: block !important;

        min-width: 0 !important;

        padding: 6px 8px !important;
        margin: 1px 0 !important;

        color: #5b6876 !important;
        background: transparent !important;

        border-radius: 8px;

        font-size: 13px !important;
        font-weight: 400 !important;
        line-height: 1.45 !important;

        transition:
            background-color .15s ease,
            color .15s ease,
            padding-left .15s ease !important;
    }

    #menu .megamenu ul.childs_2 > li > a:hover {
        color: #287fa5 !important;
        background: #f3f8fb !important;

        padding-left: 12px !important;
        text-decoration: none !important;
    }

    /* ===== SEE ALL ===== */

    #menu .megamenu li.see_more {
        margin-top: 7px !important;
    }

    #menu .megamenu li.see_more > a {
        display: inline-flex !important;
        align-items: center;

        width: auto !important;

        padding: 6px 10px !important;

        color: #287fa5 !important;
        background: #edf6fa !important;

        border-radius: 999px;

        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: .045em;
        text-transform: uppercase;

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

    #menu .megamenu li.see_more > a:hover {
        color: #ffffff !important;
        background: #287fa5 !important;
    }

    /* ===== MORE / HIDDEN MENU ===== */

    #menu > ul.nav.navbar-nav > li.hiden_menu > .main,
    #menu > ul.nav.navbar-nav > li.hiden_menu > a {
        border-radius: 12px !important;
    }

    /* ===== 980–1280 ===== */

    @media (max-width: 1280px) {

        #menu > ul.nav.navbar-nav {
            gap: 2px;
        }

        #menu > ul.nav.navbar-nav > li > a {
            padding-left: 10px !important;
            padding-right: 10px !important;

            font-size: 12px !important;
        }

        #menu > ul.nav.navbar-nav > li > .megamenu.column3 {
            width: min(780px, calc(100vw - 35px)) !important;
        }

        #menu .megamenu.column3 > .dropdown-inner {
            gap: 16px 20px;
        }
    }
}

/* SHOPSTYLE DESKTOP MENU POLISH 2026 END */

/* SHOPSTYLE MENU TYPOGRAPHY V2 START */

@media (min-width: 980px) {

    /* ===== MAIN CATEGORY HEADINGS ===== */

    #menu .megamenu ul.childs_1 > li.dropdown > a {
        color: #172536 !important;

        font-size: 14px !important;
        font-weight: 750 !important;
        line-height: 1.35 !important;

        letter-spacing: .035em !important;
        text-transform: uppercase !important;
    }


    /* ===== SUBCATEGORY LINKS ===== */

    #menu .megamenu ul.childs_2 > li:not(.see_more) > a {
        color: #687789 !important;

        font-size: 13px !important;
        font-weight: 450 !important;
        line-height: 1.5 !important;

        letter-spacing: .015em !important;
        text-transform: none !important;

        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    #menu .megamenu ul.childs_2 > li:not(.see_more) > a:hover {
        color: #287fa5 !important;
        background: #f4f8fb !important;

        font-weight: 500 !important;
    }


    /* ===== VIEW ALL ===== */

    #menu .megamenu ul.childs_2 > li.see_more {
        margin-top: 8px !important;
    }

    #menu .megamenu ul.childs_2 > li.see_more > a {
        display: inline-flex !important;
        align-items: center !important;

        width: auto !important;

        margin-top: 2px !important;
        padding: 5px 9px !important;

        color: #247b9f !important;
        background: #edf6fa !important;

        border: 1px solid #d6e9f1 !important;
        border-radius: 8px !important;

        font-size: 12px !important;
        font-weight: 650 !important;
        line-height: 1.4 !important;

        letter-spacing: .025em !important;
        text-transform: none !important;

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

    #menu .megamenu ul.childs_2 > li.see_more > a::after {
        content: "›";
        margin-left: 6px;

        font-size: 15px;
        font-weight: 600;
        line-height: 1;
    }

    #menu .megamenu ul.childs_2 > li.see_more > a:hover {
        color: #ffffff !important;
        background: #287fa5 !important;
        border-color: #287fa5 !important;

        padding-left: 9px !important;
        text-decoration: none !important;
    }
}

/* SHOPSTYLE MENU TYPOGRAPHY V2 END */

/* SHOPSTYLE MODORA MENU STRUCTURE START */

@media (min-width: 980px) {

    /* Main MODORA-style panel */

    #menu > ul.nav.navbar-nav > li > .shopstyle-mm-panel {
        width: min(1180px, calc(100vw - 60px)) !important;
        max-width: none !important;

        padding: 26px 28px 30px !important;

        background: #ffffff !important;
        border: 1px solid #dfe6ec !important;
        border-radius: 18px !important;

        box-shadow:
            0 24px 55px rgba(18,33,49,.15),
            0 4px 12px rgba(18,33,49,.04) !important;
    }


    /* Panel heading — same logic as MODORA */

    .shopstyle-mm-panel-head {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 25px;

        margin-bottom: 26px;
        padding-bottom: 18px;

        border-bottom: 1px solid #e9eef2;
    }

    .shopstyle-mm-kicker {
        margin-bottom: 6px;

        color: #2e8bb0;

        font-size: 10px;
        font-weight: 700;
        letter-spacing: .19em;
    }

    .shopstyle-mm-panel-title {
        color: #162535;

        font-size: 25px;
        line-height: 1.1;
        font-weight: 600;
    }

    .shopstyle-mm-view-all {
        color: #287fa5 !important;

        font-size: 12px !important;
        font-weight: 700 !important;
        letter-spacing: .07em;
        text-transform: uppercase;

        white-space: nowrap;
    }

    .shopstyle-mm-view-all:hover {
        color: #185e7c !important;
        text-decoration: none !important;
    }


    /* =====================================================
       MODORA .mm-grid
       ===================================================== */

    .shopstyle-mm-grid {
        display: grid !important;

        grid-template-columns:
            repeat(6, minmax(0, 1fr)) !important;

        gap: 29px 26px !important;

        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }


    .shopstyle-mm-group {
        display: block !important;

        min-width: 0 !important;
        width: auto !important;

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


    /* =====================================================
       MODORA .mm-group-title
       ===================================================== */

    .shopstyle-mm-group-title {
        display: block !important;

        min-width: 0 !important;
        width: auto !important;

        margin: 0 0 11px !important;
        padding: 0 !important;

        color: #223548 !important;
        background: transparent !important;

        border: 0 !important;

        font-size: 14px !important;
        line-height: 1.3 !important;
        font-weight: 700 !important;

        text-transform: none !important;
        letter-spacing: 0 !important;

        white-space: normal !important;
        overflow-wrap: break-word;
        word-break: normal;

        text-decoration: none !important;
    }

    .shopstyle-mm-group-title:hover {
        color: #287fa5 !important;
    }


    /* =====================================================
       MODORA .mm-sub-links
       Reset old ShopStyle UL styles completely
       ===================================================== */

    #menu .shopstyle-mm-sub-links {
        display: block !important;

        float: none !important;

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

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

        list-style: none !important;
    }

    #menu .shopstyle-mm-sub-links > li {
        display: block !important;

        float: none !important;

        width: 100% !important;

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


    #menu .shopstyle-mm-sub-links > li > a {
        display: block !important;

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

        margin: 0 !important;
        padding: 5px 0 !important;

        color: #697786 !important;
        background: transparent !important;

        border: 0 !important;

        font-size: 13px !important;
        line-height: 1.35 !important;
        font-weight: 400 !important;

        text-transform: none !important;
        letter-spacing: 0 !important;

        white-space: normal !important;
        overflow-wrap: break-word;
        word-break: normal;

        text-decoration: none !important;

        transform: none !important;
    }


    #menu .shopstyle-mm-sub-links > li > a:hover {
        color: #287fa5 !important;
        background: transparent !important;

        padding-left: 0 !important;

        transform: none !important;
    }


    /* MODORA "see all" */

    #menu .shopstyle-mm-sub-links .shopstyle-mm-sub-all {
        margin-top: 4px !important;

        color: #287fa5 !important;

        font-weight: 700 !important;
    }

    #menu .shopstyle-mm-sub-links .shopstyle-mm-sub-all:hover {
        color: #185e7c !important;
    }


    /* Slightly narrower desktop */
    @media (max-width: 1399px) {

        .shopstyle-mm-grid {
            grid-template-columns:
                repeat(4, minmax(0, 1fr)) !important;
        }

    }


    @media (max-width: 1099px) {

        .shopstyle-mm-grid {
            grid-template-columns:
                repeat(3, minmax(0, 1fr)) !important;

            gap: 24px 20px !important;
        }

    }
}

/* SHOPSTYLE MODORA MENU STRUCTURE END */

/* SHOPSTYLE SPORT/LIFESTYLE WIDTH FIX 2026 START */

@media (min-width: 980px) {

    #menu .dropdown-menu.megamenu.column3 {
        width: min(1120px, calc(100vw - 40px)) !important;
    }

    #menu .dropdown-menu.megamenu.column3 .dropdown-inner,
    #menu .mm-panel {
        display: grid !important;
        grid-template-columns: 250px minmax(0, 1fr) !important;
        gap: 28px 34px !important;
        align-items: start !important;
    }

    #menu .mm-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(180px, 1fr)) !important;
        gap: 24px 34px !important;
        width: 100% !important;
        align-items: start !important;
    }

    #menu .mm-group,
    #menu .mm-sub-links,
    #menu .mm-sub-links li {
        width: auto !important;
        min-width: 0 !important;
        float: none !important;
    }

    #menu .mm-sub-links {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        column-count: initial !important;
    }

    #menu .mm-group-title {
        display: block !important;
        margin: 0 0 12px !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    #menu .mm-sub-links li {
        margin: 0 0 10px !important;
    }

    #menu .mm-sub-links a {
        display: block !important;
        width: 100% !important;
        font-size: 15px !important;
        font-weight: 400 !important;
        line-height: 1.45 !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    #menu .mm-sub-links .mm-sub-all {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #2e8bb0 !important;
        margin-top: 8px !important;
    }
}

@media (min-width: 980px) and (max-width: 1279px) {

    #menu .dropdown-menu.megamenu.column3 .dropdown-inner,
    #menu .mm-panel {
        grid-template-columns: 220px minmax(0, 1fr) !important;
    }

    #menu .mm-grid {
        grid-template-columns: repeat(2, minmax(190px, 1fr)) !important;
    }
}

/* SHOPSTYLE SPORT/LIFESTYLE WIDTH FIX 2026 END */

/* SHOPSTYLE MODORA 6X5 FIX START */

@media (min-width: 980px) {

    /*
     * ВАЖНО:
     * старият ShopStyle задава grid върху .dropdown-inner.
     * За MODORA структурата wrapper-ът трябва да е BLOCK,
     * а grid да има само при shopstyle-mm-grid.
     */
    #menu > ul.nav.navbar-nav > li >
    .dropdown-menu.megamenu.shopstyle-mm-panel >
    .dropdown-inner {

        display: block !important;

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

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


    /* ===== PANEL ===== */

    #menu > ul.nav.navbar-nav > li >
    .dropdown-menu.megamenu.shopstyle-mm-panel {

        width: min(1180px, calc(100vw - 50px)) !important;
        max-width: none !important;

        padding: 26px 28px 30px !important;
    }


    /* ===== PANEL HEADER ===== */

    .shopstyle-mm-panel-head {
        display: flex !important;

        align-items: flex-end !important;
        justify-content: space-between !important;

        width: 100% !important;

        gap: 30px !important;

        margin: 0 0 26px !important;
        padding: 0 0 18px !important;

        border-bottom: 1px solid #e8edf2 !important;
    }

    .shopstyle-mm-kicker {
        margin: 0 0 6px !important;

        color: #2e8bb0 !important;

        font-size: 10px !important;
        font-weight: 700 !important;
        letter-spacing: .19em !important;

        white-space: nowrap !important;
    }

    .shopstyle-mm-panel-title {
        color: #172536 !important;

        font-size: 25px !important;
        line-height: 1.1 !important;
        font-weight: 600 !important;

        white-space: normal !important;
    }

    .shopstyle-mm-view-all {
        flex: 0 0 auto !important;

        color: #287fa5 !important;

        font-size: 12px !important;
        line-height: 1.3 !important;
        font-weight: 700 !important;

        letter-spacing: .07em !important;
        text-transform: uppercase !important;

        white-space: nowrap !important;
    }


    /* =====================================================
       EXACT MODORA DESKTOP GRID
       6 MAIN CATEGORIES HORIZONTALLY
       ===================================================== */

    #menu .shopstyle-mm-grid {
        display: grid !important;

        grid-template-columns:
            repeat(6, minmax(0, 1fr)) !important;

        column-gap: 26px !important;
        row-gap: 29px !important;

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

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

        align-items: start !important;
    }


    #menu .shopstyle-mm-group {
        display: block !important;

        float: none !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

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

        position: static !important;
    }


    /* ===== MAIN SPORT / LIFESTYLE CATEGORY ===== */

    #menu .shopstyle-mm-group-title {
        display: block !important;

        float: none !important;

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

        margin: 0 0 11px !important;
        padding: 0 !important;

        color: #223548 !important;
        background: none !important;

        border: 0 !important;

        font-size: 14px !important;
        line-height: 1.3 !important;
        font-weight: 700 !important;

        letter-spacing: 0 !important;
        text-transform: none !important;

        white-space: normal !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;

        text-decoration: none !important;
    }

    #menu .shopstyle-mm-group-title:hover {
        color: #287fa5 !important;
    }


    /* ===== FIVE SUBCATEGORIES ===== */

    #menu ul.shopstyle-mm-sub-links {
        display: block !important;

        float: none !important;

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

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

        list-style: none !important;
    }

    #menu ul.shopstyle-mm-sub-links > li {
        display: block !important;

        float: none !important;

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

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


    #menu ul.shopstyle-mm-sub-links > li > a {
        display: block !important;

        float: none !important;

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

        margin: 0 !important;
        padding: 5px 0 !important;

        color: #697786 !important;
        background: none !important;

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

        font-size: 13px !important;
        line-height: 1.35 !important;
        font-weight: 400 !important;

        letter-spacing: 0 !important;
        text-transform: none !important;

        white-space: normal !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;

        transform: none !important;

        text-decoration: none !important;
    }

    #menu ul.shopstyle-mm-sub-links > li > a:hover {
        color: #287fa5 !important;

        background: transparent !important;

        padding-left: 0 !important;

        transform: none !important;
    }


    /* ===== SEE ALL INSIDE ONE CATEGORY ===== */

    #menu ul.shopstyle-mm-sub-links >
    li > a.shopstyle-mm-sub-all {

        margin-top: 4px !important;

        color: #287fa5 !important;

        font-weight: 700 !important;
    }


    /*
     * На по-малък desktop не позволяваме думите
     * да се чупят буква по буква.
     */
    @media (max-width: 1199px) {

        #menu .shopstyle-mm-grid {
            grid-template-columns:
                repeat(3, minmax(0, 1fr)) !important;

            column-gap: 28px !important;
            row-gap: 28px !important;
        }

    }
}

/* SHOPSTYLE MODORA 6X5 FIX END */

/* SHOPSTYLE MEGA PANEL FIXED POSITION START */

@media (min-width: 980px) {

    /*
     * ВАЖНО:
     * dropdown-ът вече НЕ се позиционира спрямо отделния menu item.
     * Всички mega панели използват цялата navbar като координатна система.
     */

    #menu > ul.nav.navbar-nav {
        position: relative !important;
    }

    #menu > ul.nav.navbar-nav > li.top_level.dropdown {
        position: static !important;
    }

    #menu > ul.nav.navbar-nav > li.top_level.dropdown
    > .dropdown-menu.megamenu {

        left: 0 !important;
        right: auto !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

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


    /*
     * Стандартните Жени / Мъже / Деца mega менюта
     */
    #menu > ul.nav.navbar-nav > li.top_level.dropdown
    > .dropdown-menu.megamenu.column3:not(.shopstyle-mm-panel) {

        width: min(880px, calc(100vw - 40px)) !important;
    }


    /*
     * СПОРТ / ЛАЙФСТАЙЛ – широкият MODORA панел
     */
    #menu > ul.nav.navbar-nav > li.top_level.dropdown
    > .dropdown-menu.megamenu.shopstyle-mm-panel {

        width: min(1180px, calc(100vw - 40px)) !important;
    }


    /*
     * Малките dropdown-и – също не трябва да излизат извън екрана
     */
    #menu > ul.nav.navbar-nav > li.top_level.dropdown
    > .dropdown-menu.megamenu.column1 {

        width: 300px !important;
        max-width: calc(100vw - 40px) !important;
    }
}

/* SHOPSTYLE MEGA PANEL FIXED POSITION END */