/* ---------------------------------------
   Normal Menu Style
--------------------------------------- */
nav.wp-block-navigation {
    position: static;
}

.wp-block-navigation {
	&.wp-block-navigation__container {
		position: static;

		> .wp-block-navigation-item {
			&.has-child {
				&:hover {
					> .wp-block-navigation-item__content {
                        position: relative;
						&::before {
                            content: '';
                            position: absolute;
                            inset: 0 -16px -40px 0;
                            z-index: 1;
						}
					}
				}

                .wp-block-navigation__submenu-icon {
                    font-size: 18px;
                    margin-left: 9px;
                    margin-top: -3px;
                }
			}
		}
	}

	/* Submenu */
	.wp-block-navigation-item.has-child > .wp-block-navigation-submenu {
		padding: 20px;
		top: calc(100% + 9px);
		overflow: hidden;

		@media (width >= 1200px) {
			border: 1px solid var(--wp--preset--color--neutral-200);
			border-radius: 12px;
		}

		li {
			a {
				display: flex;
				align-items: center;
				padding: 0 15px;
                font-size: 14px;
                font-weight: 500;
                line-height: 22px;

				&:hover {
					background: var(--wp--preset--color--bg-2);
					border-radius: 8px;
				}
			}
		}
	}

	/* Level 2 submenu inside desktop */
	@media (width >= 1200px) {
		.wp-block-navigation-item.has-child > .wp-block-navigation-submenu {
			> .wp-block-navigation-item > .wp-block-navigation-submenu {
				border: 1px solid var(--wp--preset--color--neutral-200);
			}
		}

		.has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container {
			min-width: 280px;
		}

        &.right-0 {
            .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container {
                left: auto;
                right: 0;
            }
        }
	}

    @media (width <= 599px) {

        .wp-block-navigation__responsive-close {
            width: 300px;
        }
    }

    @media (600px <= width <= 1279px) {

        &:not(.wp-block) {

            .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
                display: none;
            }

            .wp-block-navigation__responsive-container-open:not(.always-shown) {
                display: flex;
            }

            .wp-block-navigation__responsive-close {
                width: 400px;
            }
        }
    }

}

.is-style-offcanvas-menu .wp-block-navigation__responsive-container-open.always-shown {
    svg {
        display: none;
    }

    &::before {
        content: "";
        display: block;
        width: 16px;
        height: 13px;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='13' viewBox='0 0 16 13' fill='none'%3E%3Crect width='16' height='1' fill='%230B1220'/%3E%3Crect y='6' width='12' height='1' fill='%230B1220'/%3E%3Crect y='12' width='16' height='1' fill='%230B1220'/%3E%3C/svg%3E");

    }
}

/* ---------------------------------------
   Level 2 Submenu
--------------------------------------- */

@media (width >= 1200px) {
	.wp-block-navigation-submenu .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
		top: -20px;
		left: 100%;
	}

	/* Invisible bridge */
	.wp-block-navigation-submenu .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container::before {
		position: absolute;
		z-index: -1;
		top: 0;
		bottom: 0;
		left: -30px;
		width: 30px;
		background-color: transparent;
		content: '';
	}

	.wp-block-navigation-item.has-child > .wp-block-navigation-submenu {
		overflow: visible;
	}
}


/* ---------------------------------------
   Vertical Menu Style
--------------------------------------- */

@media (min-width: 1200px) {

    nav.is-style-vertical-nav {
        position: relative;

        > .wp-block-navigation__container {
            position: relative;

            > li:first-child {

                > a {
                    position: relative;
                    display: flex;
                    align-items: center;

                    &:after {
                        position: absolute;
                        left: 0;
                        display: block;
                        width: 16px;
                        height: 13px;
                        content: "";
                        background-image: url("data:image/svg+xml,%3Csvg width='16' height='13' viewBox='0 0 16 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='16' height='1' fill='%230B1220'/%3E%3Crect y='6' width='12' height='1' fill='%230B1220'/%3E%3Crect y='12' width='16' height='1' fill='%230B1220'/%3E%3C/svg%3E");
                        background-repeat: no-repeat;
                        background-size: contain;
                    }

                    .wp-block-navigation-item__label {
                        margin-left: 30px;
                    }
                }
            }

            /* SHOP BY CATEGORY */
            > .vertical-menu-container {
                position: relative;

                > .wp-block-navigation-item__content {
                    display: flex;
                    align-items: center;
                    width: 170px;
                    text-decoration: none;

                    .wp-block-navigation-item__label {
                        display: flex;
                        align-items: center;
                        gap: 10px;
                        font-family: inherit, sans-serif;
                    }
                }

                /* LEFT DROPDOWN MENU */
                > .wp-block-navigation__submenu-container.vertical-menu-container {
                    position: absolute !important;
                    top: calc(100% + 18px);
                    left: 0;
                    z-index: 999;

                    display: flex;
                    flex-direction: column;

                    width: 325px;
                    padding: 40px 0;

                    background: #fff;
                    border-top: 1px solid #e4e4e4;

                    opacity: 0;
                    visibility: hidden;
                    border-radius: 0;

                    transform: translateY(10px);

                    transition:
                        opacity .2s ease,
                        visibility .2s ease,
                        transform .2s ease;

                    /* LEFT MENU ITEMS */
                    > .wp-block-navigation-item {
                        position: static;
                        width: 100%;

                        > .wp-block-navigation-item__content {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;

                            width: 100%;
                            padding: 0 15px;

                            font-size: 15px;
                            font-weight: 600;
                            line-height: 1.73;
                            text-decoration: none;

                            transition:
                                background .2s ease,
                                color .2s ease;

                            &:hover {
                                color: var(--wp--preset--color--text-primary);
                                background: var(--wp--preset--color--bg-2);
                            }
                        }

                        /* RIGHT MEGA MENU */
                        > .wp-block-navigation__submenu-container.col-container {
                            position: absolute;

                            top: 0;
                            left: 100%;

                            display: grid;
                            grid-template-columns: repeat(4, minmax(0, 1fr));

                            width: 1078px;
                            min-height: 100%;

                            padding: 40px;

                            column-gap: 40px;
                            row-gap: 30px;

                            background: #fff;
                            border-top: 1px solid #e4e4e4;

                            opacity: 0;
                            visibility: hidden;

                            transition:
                                opacity .2s ease,
                                visibility .2s ease;

                            /* EACH COLUMN */
                            > .wp-block-navigation-item {
                                display: flex;
                                flex-direction: column;
                                align-items: flex-start;

                                .wp-block-navigation__submenu-container {
                                    position: static;

                                    display: flex;
                                    flex-direction: column;
                                    gap: 12px;

                                    width: 100%;
                                    padding: 0;

                                    background: transparent;
                                    border: 0;
                                    box-shadow: none;

                                    opacity: 1;
                                    visibility: visible;

                                    overflow: visible;
                                    pointer-events: auto;

                                    transform: none;

                                    .vertical-menu-title {

                                        .wp-block-navigation-item__content {
                                            font-size: 16px;
                                            font-weight: 600;
                                            line-height: 28px;
                                            pointer-events: none;
                                        }
                                    }

                                    .wp-block-navigation-item__content {
                                        display: flex;
                                        align-items: center;

                                        height: 25px;
                                        padding: 0;

                                        font-size: 14px;
                                        font-weight: 400;
                                        line-height: 1.5;

                                        text-decoration: none;

                                        transition: color .2s ease;

                                        &:hover {
                                            color: var(--wp--preset--color--text-primary);
                                            text-decoration: none;
                                            background: none;
                                        }
                                    }
                                }
                            }
                        }

                        /* SHOW RIGHT MEGA MENU */
                        &:hover {

                            > .wp-block-navigation__submenu-container.col-container {
                                opacity: 1;
                                visibility: visible;
                            }
                        }
                    }
                }

                /* SHOW LEFT MENU */
                &:hover {

                    > .wp-block-navigation__submenu-container.vertical-menu-container {
                        opacity: 1;
                        visibility: visible;
                        transform: translateY(0);
                    }
                }
            }
        }

        .wp-block-navigation__submenu-container.wp-block-navigation-submenu:has(.has-child:hover) {
            border-top-right-radius: 0px;
            border-bottom-right-radius: 0px;
            border-right-color: transparent;

            .is-style-mega-menu.wp-block-navigation__submenu-container {
                opacity: 1;
                visibility: visible;
            }
        }

        &:not(.wp-block) {
            .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container {
                z-index: 3;
            }

            .has-child {
                .wp-block-navigation__submenu-container {
                    li {
                        a {
                            font-size: 15px;
                            font-weight: 600;
                            line-height: 26px;
                            padding: .8em 1em;
                        }
                    }
                    .wp-block-navigation__submenu-icon {
                        padding-right: 18px;
                    }
                }
            }

            .wp-block-navigation-item.has-child.is-style-mega-menu {
                &:hover {
                    background: var(--wp--preset--color--bg-2);
                    border-radius: 8px;

                    a {
                        background: transparent;
                    }
                }
                > .wp-block-navigation__submenu-container {
                    top: 0;
                    padding: 22px 35px;
                    width: clamp(320px, 70vw, 1120px);;
                    border: 1px solid var(--wp--preset--color--neutral-200);
                    border-radius: 0;
                    left: calc(100% - 1px);
                    border-left: 0;
                    border-top-right-radius: 12px;
                    border-bottom-right-radius: 12px;
                    height: 100%;
                    background-color: var(--wp--preset--color--white);

                    .wp-block-navigation__container {
                        width: 100%;
                        gap: 0;
                        li {
                            a {
                                padding: 0;
                                font-weight: 400;
                                line-height: 30px;

                                &:hover {
                                    background: transparent;
                                }
                            }
                        }
                    }

                }
            }
        }
    }
}

@media (min-width: 1200px) {
    nav.is-style-vertical-nav
    .wp-block-navigation__submenu-container.col-container
    .wp-block-navigation-submenu__toggle {
        display: none;
    }
}

@media (min-width: 1200px) {
    .is-style-vertical-nav .wp-block-navigation__submenu-container.vertical-menu-container .wp-block-navigation__submenu-container.col-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
        display: none;
    }
}

/* ---------------------------------------
   Hide Mobile Nav on Desktop
--------------------------------------- */

@media (min-width: 1200px) {
	body:not(.block-editor-page) .wp-block-navigation.is-style-mobile-nav {
		display: none;
	}
}


/* ---------------------------------------
   Mobile Navigation
--------------------------------------- */

@media (width <= 1199px) {
	&:not(.wp-block) {
		.wp-block-navigation__responsive-close {
                background-color: var(--wp--preset--color--white);
                padding: 0;
                margin-left: 0;
                height: 100vh;
			> .wp-block-navigation__responsive-dialog {
                padding: 0 25px;
                background-color: var(--wp--preset--color--white);
				.wp-block-navigation__responsive-container-content {
					.is-responsive {
						> li {
                            a {
    							padding: 0 15px;

    							font-size: 14px;
    							font-weight: 500;
    							line-height: 22px;

    							color: var(--wp--preset--color--text-primary);
                            }

                            &.has-child .wp-block-navigation__submenu-container>.wp-block-navigation-item>.wp-block-navigation-item__content {
                                padding: .5em 2em;
                            }
						}
					}

					.wp-block-navigation-item.has-child > .wp-block-navigation-submenu li {
						a span {
							font-weight: 400;
						}
					}
				}
			}
		}

        .wp-block-navigation__responsive-container-open {
            color:currentColor ;
        }

        .has-background:not(.has-white-background-color) .wp-block-navigation__responsive-container-open{
            color:var(--wp--preset--color--white);
        }

        &:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open,
        .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
            background-color: color-mix(in oklab, #000 50%, transparent);
            padding: 0;
        }

        .wp-block-navigation__responsive-container-close {
            right: 16px;
            color:var(--wp--preset--color--text-primary) ;
        }

        .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
            padding: 10px 0 0 0;
        }
	}
}


/* ---------------------------------------
   Mega Menu
--------------------------------------- */

@media (width >= 1200px) {
	&:not(.wp-block) {
		&,
		.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open),
		.wp-block-navigation__responsive-dialog,
		.wp-block-navigation-item.is-style-mega-menu {
			position: static;
		}

		.is-style-mega-menu {
			.wp-block-navigation-submenu {
				inset-inline: 0;
			}
		}

		.wp-block-navigation
		.wp-block-navigation-item.has-child.is-style-mega-menu
		> .wp-block-navigation__submenu-container {
			top: calc(100% + -10px);
			padding: 0;
			border-radius: 0;
		}

        .wp-block-navigation
		.wp-block-navigation-item.has-child.is-style-mega-menu .is-style-megamenu-list {
            margin-top: 17px;

            a {
                padding: 0;
                height: auto;
                font-weight: 400;

                &:hover {
                    background: none;
                    border-radius: 0;
                }
            }

            &:hover {
                background: none;
                border-radius: 0;
            }
        }
	}
}

.wp-block-navigation .has-child .wp-block-navigation__submenu-container>.wp-block-navigation-item>.wp-block-navigation-item__content {
    padding: .65em 1em;
}

.header-transparent {
    inset-inline: 0;
    position: absolute;
    z-index: 99;
}

.is-style-offcanvas-menu {
    &:not(.wp-block) {

        ul,
        .wp-block-navigation__submenu-container {
            width: 100%;

            > * {
                width: 100%;
            }

            .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container {
                min-width: 100%;
            }
        }

        .wp-block-navigation__responsive-close {
                background-color: var(--wp--preset--color--white);
                padding: 0;
                margin-left: 0;
                height: 100vh;
                width: 300px;

            > .wp-block-navigation__responsive-dialog {
                padding: 0;
                background-color: var(--wp--preset--color--white);
                position: relative;
                
                .wp-block-navigation__container {
                    gap: 0;
                }

                .wp-block-navigation__responsive-container-content {
                    padding: 0;
                    .is-responsive {
                        > li {
                            a {
                                padding: .5em 2em;
                                width: 100%;
                                font-size: 14px;
                                font-weight: 500;
                                line-height: 26px;
                                box-sizing: border-box;
                                color: var(--wp--preset--color--text-primary);
                            }

                            &:hover {
                                background: var(--wp--preset--color--bg-2);
                                border-radius: 8px;
                            }

                            &.has-child .wp-block-navigation__submenu-container>.wp-block-navigation-item>.wp-block-navigation-item__content {
                                padding: .5em 2.5em;
                            }
                        }
                    }

                    .wp-block-navigation-item.has-child > .wp-block-navigation-submenu li {
                        a span {
                            font-weight: 400;
                        }
                    }
                }
            }
        }


        &:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
            background-color: color-mix(in oklab, #000 50%, transparent);
            padding: 0;
        }

        .wp-block-navigation__responsive-container-close {
            right: 16px;
            top: 10px;
        }

        .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
            padding: 0;
        }

        .cat-nav-title.has-3-xl-font-size a{
            font-size: 20px !important;
            padding: .5em 1.5em !important;
            margin-bottom: 10px;
            cursor: pointer;
        }
    }
}
        
.wp-block-navigation__submenu-container.wp-block-navigation-submenu:has(.has-child:hover) { 
    .is-style-mega-menu.wp-block-navigation__submenu-container {
        opacity: 1;
        visibility: visible;
    }
}    
.wp-block-navigation__submenu-container.wp-block-navigation-submenu:has(.has-child:hover) {
        border-top-right-radius: 0px !important;
        border-bottom-right-radius: 0px !important;
        border-right-color: transparent;
}