/*On retire le padding de la row Elementor qui contient e header*/
.elementor-column-gap-default > .elementor-row > .elementor-column > .elementor-element-populated:has(.hc-header-main) {
    padding-bottom: 0;
}

.hc-header-main {

    .header-main__container-mobile {
        display: none;
    }

    .greendot {
        width: 8px;
        height: 8px;
        background: #1FE018;
        border-radius: 99px;
        position: absolute;
        transform: translateX(100%);
    }

    .cart-products-count {
        position: absolute;
        transform: translateX(10px);
        background: #F07A38;
        border-radius: 99px;
        color: #fff;
        padding: 1px 4px;
        font-style: normal;
    }

    /*Container header*/
    .header-main__container {
        display: flex;
        gap: 50px;
        padding: 15px 140px 0px;

        /*Container col 1*/
        .header-main__logo {
            flex: 1 1 120px;
        }

        /*Container col 2*/
        .header-main__menu {

            flex: 1 1 calc(100% - 150px);
            display: flex;
            flex-direction: column;

            /*Row 1*/
            .header-main__top-row {
                display: flex;
                gap: 50px;
            }

            /*Row 2*/
            .header-main__bottom-row {
                position: relative;

                /*clearfix*/
                &:before {
                    content: "";
                    display: block;
                    clear: both;
                }

                .under-search-links {
                    margin-top: 20px;
                    display: flex;
                    gap: 35px;
                    align-items: center;

                    .row2-link {
                        padding-block: 12px;

                        &.trigger-megamenu {
                            padding-inline: 20px;
                            background: #F07A38;
                            cursor: pointer;


                            span {
                                color: #fff;
                            }

                            transition: all .3s linear;
                            &:hover, &:active {
                                background-color: #253237;
                            }

                        }

                    }

                }

            }

        }
    }

    /*Boutons lien*/
    .header-main__links {
        display: flex;

        > .header-main__links-link-item {
            display: flex;
            padding: 10px 10px 10px 10px;
            justify-content: center;
            align-items: center;
            text-align: center;
            background: #F7F7F7;


            a {
                display: flex;
                flex-direction: column;
                align-items: center;
                white-space: nowrap;

                color: #272621;
                font-family: Roboto;
                font-size: 12px;
                font-style: italic;
                font-weight: 600;
                line-height: normal;

                i {
                    font-size: 20px;
                    margin-bottom: 5px;
                }


            }

            .wishlist-top-count, .compare-top-count {
                display: none;
            }

            + .header-main__links-link-item {
                margin-left: 15px;
            }

            transition: all .3s linear;
            * {
                transition: all .3s linear;
            }
            &:hover, &:active {
                background-color: #F07A38;
                * {
                    color: #fff;
                }
            }
        }
    }

    /* BEGIN MEGAMENU */
    .themegamenu {

        .main-menu .pos-menu-horizontal {
            position: absolute;
            width: 100%;
            background: #fff;
            z-index: 10;
            display: none;
            /*display: block;    !*TODO: supprimer hors dev*!*/
            background: #F7F7F7;

            .nos-equipements-title {
                color: #2D2F33;
                text-align: left;
                font-family: "Dirty Headline";
                font-size: 30px;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
                margin-bottom: 20px;
                text-transform: uppercase;
                padding-inline: 35px;
                padding-top: 35px;

                &:before {
                    content: "";
                }
            }

            .menu-content-wrapper {
                display: flex;
                border: 2px solid #F07A38;

                /*Les liens hover de gauche*/
                .menu-content-groups {
                    flex: 0 1 500px;


                    ul {

                        display: flex;
                        flex-direction: column;

                        .menu-item {
                            text-align: left;
                            padding-inline: 35px;

                            + .menu-item {
                                margin-top: 10px;
                            }


                            .img-icon {
                                width: 20px;
                            }

                            /*&:first-child:not(:has(~ :hover)) a {
                                background: #2D2F33;
                                .menu-subtitle {
                                    color: #fff;
                                }
                                .thedropdown {
                                    fill: #fff;
                                }
                            }*/

                            /*&:hover, &:active, */
                            &.isdisplayed {
                                a {
                                    background: #2D2F33;
                                    .menu-subtitle {
                                        color: #fff;
                                    }
                                    .thedropdown {
                                        fill: #fff;
                                    }
                                }
                            }

                            a {
                                margin-left: 0;
                                display: flex;
                                align-items: center;
                                padding: 10px 20px;
                                width: 100%;
                                border-radius: 100px;

                                .thedropdown {
                                    fill: #929395;
                                    position: absolute;
                                    right: 20px;

                                    /*On place ce svg comme ça avec un padding pour pouvoir cliquer dessus au lieu du lien*/
                                    padding: 15px 25px;
                                    box-sizing: content-box;
                                    width: 10px;
                                    position: absolute;
                                    right: -5px;

                                }

                                > * {
                                    display: block;
                                    margin: 0;
                                }

                                .img-icon {
                                    margin-right: 10px;
                                }

                                .menu-subtitle {
                                    color: #929395;
                                    text-align: center;
                                    font-family: Roboto;
                                    font-size: 16px;
                                    font-style: italic;
                                    font-weight: 800;
                                    line-height: normal;
                                    margin-top: 0;
                                    position: static;

                                    &:after {
                                        content: none;
                                    }

                                }

                            }

                        }

                    }
                }

                /*Le bloc de liens de droite*/
                .menu-content-links {
                    flex: 1 1 calc(100% - 500px);
                    background: #fff;
                    padding: 35px 140px 35px 50px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;

                    [data-menu-block-id] {
                        display: none;
                        max-height: 500px;
                        overflow-y: auto;
                        overflow-x: hidden;
                        margin-bottom: 20px;

                        > div {
                            .menu-item {



                                /*le 1er est un cas particulier, sélectionné par défaut*/
                                &:first-child {
                                    display: block;
                                }

                                > .pos-sub-menu {
                                    width: auto !important;

                                    .pos-menu-row {
                                        display: flex;
                                        flex-wrap: wrap;
                                        gap: 60px;

                                        &:after {
                                            display: none;
                                        }

                                        .pos-menu-col {
                                            text-align: left;

                                            .column_title {
                                                color: #000;
                                                font-family: Roboto;
                                                font-size: 18px;
                                                font-style: italic;
                                                font-weight: 800;
                                                line-height: normal;
                                                margin-bottom: 10px;
                                                display: block;
                                                margin-bottom: 10px;

                                            }

                                            a.column_title {
                                                &:hover, &:active {
                                                    color: #f07a38;
                                                }
                                            }

                                            ul {
                                                .submenu-item {
                                                    margin-bottom: 16px;

                                                    a {
                                                        color: #000;
                                                        font-family: Roboto;
                                                        font-size: 16px;
                                                        font-style: normal;
                                                        font-weight: 400;
                                                        line-height: 16px; /* 100% */
                                                    }

                                                    &:hover, &:active {
                                                        a {
                                                            color: #f07a38;
                                                        }
                                                    }
                                                }
                                            }

                                        }

                                    }

                                }
                            }
                        }

                    }

                }


            }

        }

    }

    /*Réassurance dans le block de liens*/
    .menu-reassurance {
        display: flex;
        /*justify-content: space-between;*/
        gap: 10px;

        .menu-reassurance-item {
            display: flex;
            padding: 15px;
            background: #f7f7f7;
            /*max-width: 260px;*/
            flex: 1;

            svg {
                min-width: 35px;
                min-height: 35px;
            }

            .menu-reassurance-content {
                text-align: left;
                margin-left: 15px;

                .thetitle {
                    color: #272621;
                    font-family: Roboto;
                    font-size: 15px;
                    font-style: italic;
                    font-weight: 800;
                    line-height: normal;
                    margin-bottom: 5px;
                }
                .thetext {
                    color: #929395;
                    font-family: Roboto;
                    font-size: 15px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: normal;
                    margin-bottom: 0;
                }
            }

        }
    }

    &:has(.trigger-megamenu:hover, .trigger-megamenu:active, .themegamenu:hover, .themegamenu:active) {
        .themegamenu .main-menu .pos-menu-horizontal {
            display: block;
        }
    }
    /* END MEGAMENU */

    /*Searchbar*/
    .header-main__search {
        display: flex;
        padding: 0px 20px;
        align-items: center;
        gap: 10px;
        flex: 1 0 0;
        align-self: stretch;
        background: #F7F7F7;
        /*background: #333;*/

        .pos-search-wrapper {
            width: 100%;
            height: 100%;

            form {
                height: 100%;
            }
        }

        .pos-search__container {
            height: 100%;
        }

        .search-input-container {
            margin-left: 36px;
            height: 100%;

            .pos-search__input {
                background: transparent;
                height: 100%;
            }

        }



        .pos-search__submit {
            position: absolute;

            background: transparent;
            border-radius: 9999px;
            border: 2px solid rgba(240, 122, 56, 0.5);
            padding: 0;

            i {
                width: 24px;
                height: 24px;
                display: flex;
                justify-content: center;
                align-items: center;
                background: #F07A38;
                border-radius: 9999px;
            }
        }

    }

    /* BEGIN BRAND MEGAMENU */
    .thebrandmegamenu {

        position: absolute;
        width: 100%;
        background: #fff;
        z-index: 10;
        display: none;
        border-bottom: 1px solid #dedede;
        /*display: block; !*Mode dev*!*/

        .thebrands-wrapper {
            display: flex;
            padding: 50px 220px 75px;
            justify-content: space-around;
            gap: 50px;

            .top-brands-wrapper {

                .the-brands-title {
                    color: #2D2F33;
                    font-family: "Dirty Headline";
                    font-size: 30px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: normal;
                    text-transform: uppercase;
                    margin-bottom: 25px;
                }

                .thetopbrands {
                    display: grid;
                    grid-template: repeat(1, 1fr) / repeat(2, 1fr);
                    height: fit-content;
                    gap: 25px;

                    .top-brand {

                        img {
                            max-height: 66px;
                            width: auto;
                        }
                    }
                }


            }

            .all-brands-wrapper {

                .letters-title {
                    color: #2D2F33;
                    font-family: Roboto;
                    font-size: 25px;
                    font-style: italic;
                    font-weight: 800;
                    line-height: normal;
                    text-transform: uppercase;
                    margin-bottom: 23px;
                }

                > ul {
                    display: flex;
                    gap: 80px;

                    > .brand-list {
                        display: flex;
                        flex-direction: column;

                        ul {

                            li {

                                p {
                                    color: #000;
                                    font-family: Roboto;
                                    font-size: 15px;
                                    font-style: normal;
                                    font-weight: 400;
                                    line-height: 20px; /* 133.333% */
                                }

                                + li {
                                    margin-top: 23px;
                                }

                            }
                        }

                    }
                }

            }
        }

    }

    &:has(.trigger-brandmegamenu:hover, .trigger-brandmegamenu:active, .thebrandmegamenu:hover, .thebrandmegamenu:active) {
        .thebrandmegamenu {
            display: block;
        }
    }
    /* END BRAND MEGAMENU */

    .mega-menu-links-header {
        display: flex;
        align-items: center;
        text-align: left;
        margin-bottom: 25px;
        padding-bottom: 25px;
        border-bottom: 1px solid #dfe0e2;

        .icon-wrapper {
            position: relative;

            img {
                width: 64px;
                margin: 0 15px 0 0;
                border-radius: 999px;

                &.the-icon {
                    width: 30px;
                    position: absolute;
                    left: 0;
                    top: 0;
                    transform: translate(50%, 50%);
                }
            }
        }


        .menu-link-title {
            color: #2D2F33;
            font-family: Roboto;
            font-size: 25px;
            font-style: italic;
            font-weight: 800;
            line-height: normal;
            text-transform: uppercase;
            margin-bottom: 5px;
        }

        .menu-link-see-all {
            color: #F07A38;
            text-align: center;
            font-family: Roboto;
            font-size: 16px;
            font-style: italic;
            font-weight: 800;
            line-height: normal;
            display: flex;
            gap: 5px;
            align-items: center;

            .thedropdown {
                fill: #fff;
                background: #f07a38;
                border-radius: 999px;
                width: 10px;
                height: 10px;
                padding: 3px;
                box-sizing: content-box;
            }
        }
    }

    .mobile-search-wrapper {
        display: none;
    }

}

@media screen and (max-width: 1600px) {

    .hc-header-main {
        .header-main__container {
            padding: 15px 30px 0px;
        }

        .themegamenu {
            .main-menu .pos-menu-horizontal {
                .menu-content-wrapper {
                    .menu-content-links {
                        padding-right: 30px;
                    }
                }
            }
        }

        .thebrandmegamenu {
            .thebrands-wrapper {
                padding: 50px 140px 75px;
            }
        }
    }

}

@media screen and (max-width: 1400px) {

    .hc-header-main {
        .themegamenu {
            .main-menu .pos-menu-horizontal {
                .menu-content-wrapper {

                    .menu-content-groups {
                        flex-basis: 300px;

                        .nos-equipements-title {
                            padding-inline: 30px;
                        }

                        ul {
                            .menu-item {
                                padding-inline: 30px;

                                a {
                                    .menu-subtitle {
                                        text-align: left;
                                    }
                                }
                            }
                        }
                    }

                    .menu-content-links {

                        [data-menu-block-id] {
                            > div {
                                .menu-item {
                                    > .pos-sub-menu {
                                        .pos-menu-row {
                                            gap: 30px;
                                        }
                                    }
                                }
                            }
                        }

                        .menu-reassurance {
                            flex-wrap: wrap;
                            justify-content: start;

                            .menu-reassurance-item {
                                flex: 0 1 calc(50% - 10px);
                                max-width: unset;
                            }
                        }
                    }
                }
            }
        }
        .thebrandmegamenu {
            .thebrands-wrapper {
                padding: 50px 70px 75px;

                .top-brands-wrapper {
                    .thetopbrands {
                        .top-brand {
                            img {
                                max-height: 55px;
                            }
                        }
                    }
                }

                .all-brands-wrapper {
                    > ul {
                        gap: 40px;
                    }
                }

            }
        }
    }

}

@media screen and (max-width: 990px) {
    .hc-header-main {
        & .themegamenu {
            & .main-menu .pos-menu-horizontal {
                & .menu-content-wrapper {
                    & .menu-content-links {
                        & [data-menu-block-id] {
                            & > div {
                                & .menu-item {
                                    & > .pos-sub-menu {
                                        & .pos-menu-row {
                                            column-gap: 0px;

                                            & .pos-menu-col {

                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        .header-main__container {
            gap: 30px;

            .header-main__logo {
                flex-basis: 80px;
                align-content: center;
            }

            .header-main__menu {
                .header-main__top-row {
                    gap: 30px;
                }
            }

        }
        .thebrandmegamenu {
            .thebrands-wrapper {
                padding: 50px 35px 75px;

                .top-brands-wrapper {
                    .thetopbrands {
                        grid-template: repeat(1, 1fr) / repeat(1, 1fr);
                    }
                }

                .all-brands-wrapper {
                    > ul {
                        gap: 30px;
                    }
                }

            }
        }
    }
}

@media screen and (max-width: 768px) {
    .hc-header-main {
        .header-main__container {
            display: none;
        }
        .header-main__container-mobile {
            display: flex;
            padding: 10px 15px;
            gap: 15px;

            svg {
                width: 20px;
                height: 20px;
            }
            i {
                font-size: 20px;
            }

            .theleft {
                flex: 1 1 0;
                display: flex;
                justify-content: space-around;
                align-items: center;
                padding-right: 15%;

                .header-main__account {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    white-space: nowrap;
                }

            }

            .thecenter {
                flex: 0 1 50px;
            }

            .theright {
                flex: 1 1 0;
                display: flex;
                justify-content: space-around;
                align-items: center;
                padding-left: 15%;

                .blockcart.cart-preview {

                    a {
                        display: flex;
                        position: relative;
                    }

                    .the-cart-label {
                        display: none;
                    }

                    .cart-products-count {
                        font-size: 10px;
                        line-height: 12px;
                    }
                }

            }
        }

        /*Megamenu en mobile*/
        .themegamenu-mobile {
            position: absolute;
            width: 100%;
            background: #fff;
            padding: 10px 15px;

            /*TODO DEV : a retirer*/
            /*display: block !important;*/

            &.mobile-open {
                display: block;
            }

            .section-item {

                .thelabel {
                    cursor: pointer;
                    padding: 15px 30px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    align-self: stretch;
                    border-radius: 100px;
                    background-color: #f7f7f7;
                    font-family: Roboto;
                    color: #253237;
                    font-size: 14px;
                    font-weight: 800;
                    line-height: normal;
                    transition: all .3s linear;

                    .thedropdown {
                        fill: #253237;
                    }
                }

                .thecontent {
                    display: grid;
                    grid-template-rows: 0fr;
                    transition: grid-template-rows 0.3s linear;
                    overflow: hidden;

                    > * {
                        overflow: hidden;
                    }
                }

                &.active {
                    margin-bottom: 20px;

                    .thelabel {
                        border-radius: 0px;
                    }

                    .thecontent {
                        grid-template-rows: 1fr;
                    }

                    > .thedropdown {
                        transform: rotate(90deg);
                    }

                }

                & + .section-item {
                    margin-top: 10px;
                }

                /*Menu en lui même*/
                .pos-menu-horizontal {
                    border: 1px solid #F07A38;
                    border-top: none;

                    .menu-content {
                        .menu-item {
                            padding-inline: 15px;

                            a {
                                margin-left: 0;
                                display: flex;
                                align-items: center;
                                padding: 10px 20px;
                                width: 100%;
                                border-radius: 100px;
                                background: #f7f7f7;
                                border-bottom: none;

                                .img-icon {
                                    margin: 0px 10px 0px 0px;
                                    max-width: 20px;
                                }

                                span {
                                    color: #272621;
                                    text-align: center;
                                    font-family: Roboto;
                                    font-size: 16px;
                                    font-style: italic;
                                    font-weight: 800;
                                    line-height: normal;
                                }

                            }

                            .icon-drop-mobile {

                                .remove {
                                    display: none;
                                }
                                .add {
                                    display: block;
                                }

                                &.open_menu {
                                    .remove {
                                        display: block;
                                    }
                                    .add {
                                        display: none;
                                    }
                                }

                            }

                            &:first-child {
                                padding-top: 25px;

                                .icon-drop-mobile i {
                                    top: 25px;
                                }
                            }

                            & + .menu-item {
                                margin-top: 15px;
                            }

                            &:last-child {
                                margin-bottom: 25px;
                            }

                        }
                    }

                    /*Le bloc avec les sous menus*/
                    .megamenu-mobile-side-panel {
                        /*display: block; !*Todo dev: a delete*!*/
                        position: absolute;
                        top: 0;
                        bottom: 0;
                        left: 100%;
                        z-index: 10;
                        background: #fff;
                        width: 100%;
                        transition: left .2s linear;

                        &.active {
                            left: 0%;
                        }

                        .pos-sub-inner {
                            padding: 15px;

                            .pos-menu-col {
                                display: flex;
                                flex-direction: row;
                                padding: 15px 30px 15px 30px;
                                flex-direction: row;
                                align-items: center;
                                align-self: stretch;
                                background: #f7f7f7;
                                border-radius: 100px;
                                transition: all .15s linear;
                                flex-wrap: wrap;

                                &:has(.icon-drop-mobile.open_menu) {
                                    border-radius: 2px;
                                }

                                .column_title {
                                    color: #272621;
                                    font-family: Roboto;
                                    font-size: 14px;
                                    font-style: normal;
                                    font-weight: 700;
                                    line-height: normal;
                                    flex: 1 0 0;
                                }

                                & + .pos-menu-col {
                                    margin-top: 10px;
                                }

                                .icon-drop-mobile {
                                    /*position: absolute;
                                    right: 25px;*/
                                    flex: 1 0 24px;
                                    display: flex;
                                    justify-content: right;
                                }

                                .ul-column {
                                    margin-top: 20px;
                                    flex: 1 0 100%;

                                    .submenu-item {

                                        a {
                                            color: #000;
                                            font-family: Roboto;
                                            font-size: 14px;
                                            font-style: normal;
                                            font-weight: 400;
                                            line-height: 16px; /* 114.286% */
                                        }

                                        & + .submenu-item {
                                            margin-top: 15px;
                                        }
                                    }
                                }

                                .icon-drop-mobile {

                                    .remove {
                                        display: none;
                                    }
                                    .add {
                                        display: block;
                                    }

                                    &.open_menu {
                                        .remove {
                                            display: block;
                                        }
                                        .add {
                                            display: none;
                                        }
                                    }

                                }

                            }
                        }

                    }

                }

                &:first-child {
                    .thelabel {
                        color: #fff;
                        background: #F07A38;
                        font-style: italic;
                    }
                    .thedropdown {
                        fill: #fff;
                    }
                }

                /*Le menu marques*/
                .marques-mobile {

                    .marques-mobile-wrapper {
                        padding: 25px 15px;
                        border: 1px solid #eee;
                    }

                    .top-marques {
                        display: grid;
                        grid-template: repeat(1, 1fr) / repeat(3, 1fr);
                        gap: 25px;
                        margin-bottom: 25px;
                    }

                    .marques-list .thelists {
                        display: flex;
                        gap: 20px;

                        .brand-list {
                            flex: 1 0 0;

                            .letters-title {
                                color: #2D2F33;
                                font-family: Roboto;
                                font-size: 18px;
                                font-style: italic;
                                font-weight: 800;
                                line-height: normal;
                                text-transform: uppercase;
                            }

                            .marque-dropdown-icons {
                                display: none;
                            }
                        }
                    }
                }


            }


        }

        .mega-menu-links-header {

            .icon-close-sidemegamenu {
                box-sizing: content-box;
                width: 25px;
                height: 25px;
                padding: 10px;
                border-radius: 100px;
                background: #F7F7F7;
                margin-right: 15px;
                cursor: pointer;
            }

            .icon-wrapper {
                max-width: 50px;
                margin-right: 15px;
            }

        }

        .header-main__links.menu-mobile-meta {
            margin-top: 20px;

            .header-main__links-link-item {
                flex: 1 0 0;
            }
        }

        .menu-reassurance {
            margin-bottom: 20px;

            .menu-reassurance-item {
                &:first-child:last-child {
                    width: 100%;
                    margin-top: 15px;
                    max-width: 100%;
                    justify-content: center;
                }
            }

        }

        .mobile-search-wrapper.active {
            display: block;
            position: absolute;
            width: 100%;
            border-top: 1px solid #cecece;

            .pos-search__input {
                min-height: 64px;
            }

        }

    }

}

@media screen and (max-width: 560px) {
    .hc-header-main {

        .header-main__container-mobile {
            .theleft {
                padding-right: 5%;
            }
            .theright {
                padding-left: 5%;
            }
        }

        .themegamenu-mobile {
            .section-item {
                .marques-mobile {
                    .top-marques {
                        grid-template: repeat(1, 1fr) / repeat(2, 1fr);
                    }
                    .marques-list {
                        .thelists {
                            flex-direction: column;

                            .brand-list {

                                .open {
                                    display: block;
                                }
                                .close {
                                    display: none;
                                }

                                &.opened {
                                    .open {
                                        display: none;
                                    }
                                    .close {
                                        display: block;
                                    }

                                    .brand-list-items {
                                        grid-template-rows: 1fr;
                                    }

                                }

                                .brand-list-items {
                                    display: grid;
                                    grid-template-rows: 0fr;
                                    transition: grid-template-rows 0.3s linear;
                                    overflow: hidden;
                                    > * {
                                        overflow: hidden;
                                    }
                                }

                                .letters-title {
                                    .marque-dropdown-icons {
                                        display: block;
                                        float: right;
                                    }
                                }

                            }
                        }

                    }
                }
            }
        }
    }
}