.not-active-woocommerce {
    .is-mini-cart {
        display: none;
    }
}

.is-style-header {
    z-index: 999;

    .is-action {
        margin-inline-start: auto;
    }

    .is-brand {
        gap: 16px;
    }
    
    &.v2 {
        padding-bottom: 30px;

        .is-style-vertical .wp-block-navigation__responsive-container-content > .wp-block-navigation__container{
            & > .has-child {
                > .wp-block-navigation-item__content {
                    > .wp-block-navigation-item__label img {
                        filter: invert(1);
                    }
                }
            }
        }

        .wp-block-media-text {
            &.is-style-category-v1 {
                img {
                    filter: invert(1);
                }

                a:hover {
                    &::before {
                        border-bottom-color: var(--wp--preset--color--base);
                    }
                }

                &:hover {
                    color: var(--wp--preset--color--primary);

                    img {
                        filter: invert(98%) sepia(100%) saturate(4740%) hue-rotate(336deg) brightness(101%) contrast(106%);
                    }
                }
            }
        }
    }

    &.v3 {
        z-index: inherit;
        box-shadow: 0 1px 12px 0 rgba(0, 0, 0, 0.1);

        > .wp-block-group:not(.is-bottom-header) {
            z-index: 999;
            padding-block: 6px;
        }

        .wp-block-search__button-inside {
            .wp-block-search__input {
                background-color: var(--wp--preset--color--light);
            }
        }
    }

    &.v2,
    &.v4 {
        .wp-block-woocommerce-customer-account {
            &[data-icon-style="line"] a,
            &.wp-block a:has(> svg[fill="none"]) {
                &::before {
                    filter: invert(1);
                }
            }
        }

        /* This !important for overide style.css when we depiricate then will remove !important */
        .wc-block-mini-cart__badge {
            background-color: var(--wp--preset--color--base) !important;
            color: var(--wp--preset--color--contrast) !important;
        }

        .custom-logo-link img,
        .is-mini-cart .wc-block-mini-cart__quantity-badge::before {
            filter: invert(1);
        }
    }

    &.v4 {
        > .wp-block-group:not(.is-bottom-header) {
            position: relative;
            padding-block: 6px;
            padding-inline: 16px;
        }

        .wp-block-media-text {
            &.is-style-category-v1 {
                a:hover {
                    &::before {
                        border-bottom-color: var(--wp--preset--color--info);
                    }
                }
            }
        }

        .custom-logo-link {
            img {
                filter: invert(1);
            }
        }

        .wp-block-search {
            .wp-block-search__inside-wrapper {
                align-items: center;
            }

            &.wp-block-search__button-inside {
                .wp-block-search__button {
                    margin-right: 5px;
                    width: 40px;
                    height: 40px;
                    align-items: center;
                    justify-content: center;
                    display: flex;
                }

                .wp-block-search__input {
                    padding-inline-start: 26px;
                }

                .search-icon {
                    min-height: 24px;
                    min-width: 24px;
                }
            }
        }
    }
}

.is-bottom-header {
    &:not(.wp-block) {
        display: none; 
    }
}

.is-footer-bottom {
    > .is-layout-flex {
        flex-direction: column;

        > *:is(:first-child, :last-child) {
            flex-basis: auto;
        }
    }
}

.is-footer-main {
    padding: 40px 0;

    > .is-layout-flex {
        flex-direction: column;

        > *:is(:last-child) {
            flex-basis: auto;
        }
    }

    .wp-block-navigation {
        .wp-block-navigation-item:hover {
            text-decoration: underline;
            text-underline-offset: 4px;
        }
    }

    .wp-block-social-links {
        .wp-block-social-link.wp-social-link {
            border-width: 0;

            a {
                padding: 11px;
                border: 1px solid var(--wp--preset--color--gray-300);
                border-radius: 50%;
                transition: 0.3s ease-in-out;
                font-size: 16px;
            }
        }
    }
}

.is-style-banner-content {
    &.is-layout-flex .wp-block-image {
        margin-left: auto;
        align-self: flex-end;
    }

    > .is-vertical {
        padding-block: var(--wp--preset--spacing--30);
    }
}

:root :where(.wp-block-group) {
    &.is-style-footer {
        &.v2 {
            background-color: var(--wp--preset--color--dark);

            .is-footer-bottom {
                background-color: var(--wp--preset--color--gray-500);
            }

            .is-footer-top {
                border-block: 1px solid var(--wp--preset--color--gray-400);
            }

            .is-style-currency {
                .wp-block-navigation__container.wp-block-navigation > .wp-block-navigation-item {
                    background-color: var(--wp--preset--color--gray-600);
                }
            }
        }

        &.v2,
        &.v3 {
            color: var(--wp--preset--color--base);

            .is-style-features img,
            .custom-logo {
                filter: invert(1);
            }

            .wp-block-social-links {
                .wp-block-social-link.wp-social-link a {
                    border-width: 0;
                    padding: 0;
                }
            }

            .is-style-currency {
                .wp-block-navigation__container.wp-block-navigation > .wp-block-navigation-item {
                    border-width: 0;
                }

                .wp-block-navigation__submenu-icon {
                    background-color: transparent;
                }
            }
        }

        &.v3 {
            background-color: var(--wp--preset--color--info);

            .is-footer-bottom {
                background-color: color-mix(in oklab, var(--wp--preset--color--dark) 7%, transparent);
            }

            .is-footer-top {
                border-block: 1px solid color-mix(in oklab, var(--wp--preset--color--base) 10%, transparent);
            }

            .is-style-currency {
                .wp-block-navigation__container.wp-block-navigation > .wp-block-navigation-item {
                    background-color: color-mix(in oklab, var(--wp--preset--color--base) 10%, transparent);
                }
            }
        }
    }
}

.is-full-banner {
    overflow: hidden;
    position: relative;

    > .wp-block-image {
        order: 1;
    }

    > .wp-block-group {
        gap: 30px;
        padding: 30px;
    }
}

.bg-overlay {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 80px);
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 99;
    pointer-events: none;
}

.bg-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

.is-brand-grid {
    padding-block: 20px;
    overflow-x: auto;
    border: 1px solid var(--wp--preset--color--gray-300);
    border-radius: 8px;

    > * {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 110px;
        min-width: 200px;

        &:not(:last-child) {
            border-inline-end: 1px solid var(--wp--preset--color--gray-300);
        }
    }
}

@media (width >= 768px) {
    .is-footer-bottom {
        > .is-layout-flex {
            flex-direction: row;
            flex-wrap: nowrap;

            > *:is(:first-child, :last-child) {
                flex-basis: 250px;
            }
        }
    }

    .is-footer-main {
        padding: 90px 0;

        > .is-layout-flex {
            flex-direction: row;

            > *:is(:last-child) {
                flex-basis: 330px;
            }
        }
    }

    .is-full-banner {
        > .wp-block-group {
            gap: 100px;
        }
    }
}

@media (width >= 1024px) {
    .is-footer-bottom {
        > .is-layout-flex {
            flex-wrap: wrap;
        }
    }

    .is-style-banner-content {
        &.is-layout-flex {
            flex-wrap: nowrap;
        }

        > .is-vertical {
            flex-shrink: 0;
            padding-block: var(--wp--preset--spacing--60);
        }
    }
}

@media (width >= 1280px) {
    .is-brand-grid {
        overflow-x: visible;
    } 

    .not-active-woocommerce {
        .is-action {
            display: none;
        }
    }

    .is-style-header {
        .is-brand {
            gap: 70px;
        }

        &.v3 {
            box-shadow: none;

            > .wp-block-group:not(.is-bottom-header) {
                padding-block: 30px;
            }

            .wp-block-navigation {
                &.is-style-header {
                    > .has-child {
                        &:hover {
                            > .wp-block-navigation-item__content {
                                &::before {
                                    bottom: -66px;
                                }

                                &::after {
                                    inset: 0 -26px -66px 0;
                                }
                            }
                        }

                        > .wp-block-navigation__submenu-container:not(.is-style-mega-menu) {
                            top: calc(100% + 66px);
                        }

                        > .wp-block-navigation__submenu-container.is-style-mega-menu {
                            top: calc(100% + 17px);
                        }
                    }
                }
            }
        }

        &.v4 {
            > .wp-block-group:not(.is-bottom-header) {
                padding-block: 14px;
                padding-inline: 2.375em;
            }

            .is-brand {
                gap: 30px;
            }
        }
    }

    .is-bottom-header {
        > .wp-block-group {
            > .wp-block-group {
                gap: clamp(1.875rem, -1.625rem + 4.375vw, 3.625rem);
                justify-content: space-between;
                width: stretch;
            }

            > .is-style-vertical {
                flex-shrink: 0;
            }
        }

        &:not(.wp-block) {
            display: block; 
        }
    }

    .is-style-header.v4 .is-bottom-header {
        > .wp-block-group {
            > .wp-block-group {
                justify-content: flex-start;
            }
        }
    }

    .is-features.is-layout-grid {
        gap: 60px;
    }

    .is-full-banner {
        > .wp-block-image {
            order: 0;
        }

        > .wp-block-group {
            gap: 60px;
            padding: 0;
        }
    }
}