/**
 * Rootways megamenu fixes for Hyvä.
 * Hyvä Tailwind defines .grid { display: grid } which breaks Masonry columns.
 */

/* Restore Masonry/block layout inside megamenu only */
.rootmenu .grid {
    display: block !important;
}

@media (min-width: 769px) {
    .rootmenu > .rootmenu-list > li > .megamenu {
        width: 100%;
        text-align: left;
    }

    .rootmenu > .rootmenu-list .grid-item-1,
    .rootmenu > .rootmenu-list .grid-item-2,
    .rootmenu > .rootmenu-list .grid-item-3,
    .rootmenu > .rootmenu-list .grid-item-4,
    .rootmenu > .rootmenu-list .grid-item-5,
    .rootmenu > .rootmenu-list .grid-item-6,
    .rootmenu > .rootmenu-list .grid-item-70,
    .rootmenu > .rootmenu-list .grid-item-75 {
        float: left;
        box-sizing: border-box;
        padding: 10px;
    }

    .rootmenu > .rootmenu-list .grid-item-1 { width: 100%; }
    .rootmenu > .rootmenu-list .grid-item-2 { width: 48%; }
    .rootmenu > .rootmenu-list .grid-item-3 { width: 32%; }
    .rootmenu > .rootmenu-list .grid-item-4 { width: 24%; }
    .rootmenu > .rootmenu-list .grid-item-5 { width: 19%; }
    .rootmenu > .rootmenu-list .grid-item-6 { width: 15%; }
    .rootmenu > .rootmenu-list .grid-item-70 { width: 65%; }
    .rootmenu > .rootmenu-list .grid-item-75 { width: 74%; }

    .rootmenu > .rootmenu-list .root-col-4,
    .rootmenu > .rootmenu-list .root-col-3,
    .rootmenu > .rootmenu-list .root-col-2,
    .rootmenu > .rootmenu-list .root-col-1 {
        float: left;
        box-sizing: border-box;
        padding: 10px;
    }

    .rootmenu > .rootmenu-list .root-col-4 { width: 25%; }
    .rootmenu > .rootmenu-list .root-col-3 { width: 33.333333%; }
    .rootmenu > .rootmenu-list .root-col-2 { width: 50%; }
    .rootmenu > .rootmenu-list .root-col-1 { width: 100%; }

    .rootmenu .catproductimg img {
        max-width: 80%;
        width: 100px;
    }

    .rootmenu > .rootmenu-list > li > a {
        font-size: 14px;
    }

    .rootmenu .title a {
        font-size: 18px !important;
    }

    .rootmenu > .rootmenu-list > li .categoriesmenu {
        font-size: 16px;
    }

    .rootmenu > .rootmenu-list .rootmenu-submenu li a {
        font-size: 16px !important;
    }
}

.rootmenu .has-sub-cat:after {
    color: #000 !important;
    border: solid #000 !important;
    border-width: 0 1px 1px 0 !important;
}

.rootmenu-list > li:hover > a,
.rootmenu-list > li > a:hover {
    background: #ddd;
}

.rootmenu > .rootmenu-list .menu_form input[type="submit"],
.rootmenu > .rootmenu-list .menu_form input[type="button"] {
    background-color: #1e2a4f;
}

@media (max-width: 1023px) {
    .rootmenu > .rootmenu-list .grid-item-1,
    .rootmenu > .rootmenu-list .grid-item-2,
    .rootmenu > .rootmenu-list .grid-item-3,
    .rootmenu > .rootmenu-list .grid-item-4,
    .rootmenu > .rootmenu-list .grid-item-5,
    .rootmenu > .rootmenu-list .grid-item-6,
    .rootmenu > .rootmenu-list .grid-item-70,
    .rootmenu > .rootmenu-list .grid-item-75,
    .rootmenu > .rootmenu-list > li {
        width: 100% !important;
        float: none;
        box-sizing: border-box;
        padding-left: 0;
        padding-right: 0;
        transform: none !important;
    }
}