.variable-product-data-container {
    display: flex;
    flex-direction: column;
    gap: 20px;

    * {
        font-family: var(--e-global-typography-text-font-family), Sans-serif;
    }

    .variable-product-switcher {
        display: flex;
        gap: 10px;

        @media(max-width: 767px) {
            flex-direction: column;
        }

        span {
            font-size: 24px;
            font-style: normal;
            font-weight: 700;
            line-height: 120%;
            color: var(--e-global-color-text);
            opacity: .6;
            border-bottom: 1px solid transparent;
            transition: .3s ease-in-out;
            text-transform: uppercase;

            @media(max-width: 1024px) {
                font-size: 18px;
            }

            @media(max-width: 767px) {
                width: fit-content;
            }


            &:hover {
                cursor: pointer;
                opacity: 1;
                border-color: 1px solid var(--e-global-color-text);
            }

            &.active {
                opacity: 1;
                border-color: 1px solid var(--e-global-color-text);
            }
        }
    }

    .variable-product-data {
        display: flex;
        flex-direction: column;
        gap: 20px;

        .variable-product-switch {
            display: flex;
            gap: 3px;
            align-items: center;

            h3 {
                font-size: 24px;
                font-style: normal;
                font-weight: 400;
                line-height: 120%;
                color: var(--e-global-color-text);
                margin: 0;

                @media(max-width: 1024px) {
                    font-size: 18px;
                }

            }

            span {
                font-size: 24px;
                font-style: normal;
                font-weight: 400;
                line-height: 120%;
                color: var(--e-global-color-text);
                display: none;

                @media(max-width: 1024px) {
                    font-size: 18px;
                }


                &.active {
                    display: flex;
                }
            }

        }
    }
}

.variable-product-switch.image {
    img {
        display: none;

        &.active {
            display: flex;
        }
    }
}

.single-product-data {
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 2;
    color: var(--e-global-color-text);

    @media(max-width: 1024px) {
        font-size: 18px;
    }
}

.variable-product-switch.image,
.single-product-switch.image {
    width: 100%;

    img {
        width: 100%;
        max-height: 289px;
        object-fit: contain;
    }
}