:root :where(.wp-block-details) {
    &.is-style-details-product-map {
        margin-top: 0;

        summary {
            display: block;
            
            &::before {
                content: "";
                width: 50px;
                height: 50px;
                background-color: var(--wp--preset--color--white);
                border-radius: 9999px;
                display: block;
                font-size: 20px;
                background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.5 8C15.5 8.16576 15.4342 8.32473 15.3169 8.44194C15.1997 8.55915 15.0408 8.625 14.875 8.625H8.625V14.875C8.625 15.0408 8.55915 15.1997 8.44194 15.3169C8.32473 15.4342 8.16576 15.5 8 15.5C7.83424 15.5 7.67527 15.4342 7.55806 15.3169C7.44085 15.1997 7.375 15.0408 7.375 14.875L7.375 8.625L1.125 8.625C0.95924 8.625 0.800269 8.55915 0.683058 8.44194C0.565848 8.32473 0.5 8.16576 0.5 8C0.5 7.83424 0.565848 7.67527 0.683058 7.55806C0.800269 7.44085 0.95924 7.375 1.125 7.375L7.375 7.375L7.375 1.125C7.375 0.95924 7.44085 0.800269 7.55806 0.683058C7.67527 0.565848 7.83424 0.5 8 0.5C8.16576 0.5 8.32473 0.565848 8.44194 0.683058C8.55915 0.800269 8.625 0.95924 8.625 1.125L8.625 7.375L14.875 7.375C15.0408 7.375 15.1997 7.44085 15.3169 7.55806C15.4342 7.67527 15.5 7.83424 15.5 8Z" fill="%2309090B"/></svg>');
                background-repeat: no-repeat;
                background-position: center;
                transition: transform 0.1s ease-in-out;           
            }
        }

        &[open] summary::before {
            transform: rotate(45deg);
            transition: transform 0.1s ease-in-out;
        }

        summary + * {
            position: absolute;
            width: 218px;
            z-index: 1;

            &:after {
                content: "";
                background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="8" viewBox="0 0 16 8" fill="none"><path d="M9.41421 1.41421L16 8L8 8L-9.5399e-08 8L6.58579 1.41421C7.36683 0.633165 8.63316 0.633164 9.41421 1.41421Z" fill="white"/></svg>');
                background-repeat: no-repeat;
                background-position: top right;
                width: 16px;
                height: 16px;
                position: absolute;
                display: block;
            }

            &.down {
                margin-top: 12px;

                &:after {
                    top: -8px;
                    left: 16px;
                    
                }

            }

            &.up {
                bottom: 62px;

                &:after {
                    transform: rotate(180deg);
                    bottom: -8px;
                    left: 18px;
                }
            }

            &.left {
                top: -18px;
                right: 62px;

                &:after {
                    top: 39%;
                    right: -7px;
                    transform: rotate(90deg);
                }
            }

            &.right {
                top: 0;
                left: 62px;

                &:after {
                    top: 18px;
                    left: -8px;
                    transform: rotate(-90deg);
                }
            }
        }

        &.item-1 {
            top:43%;
            left:26%;
        }

        &.item-2 {
            top:74%;
            left:41%;

            summary + * {
                &.down {
                    @media(max-width: 400px) {
                        left: -40px;
                    }

                    @media(max-width: 400px){
                        &:after {
                            left: 54px;  
                        }
                    }
                }
            }
        }

        &.item-3 {
            top: 66%;
            left: 68%;
            summary + * {
                &.left {
                    @media(max-width: 400px) {
                        right: 0;
                        top: 61px;

                        &:after {
                            top: -8px;
                            right: 19px;
                            transform: none;
                        }
                    }
                }
            }
        }

        &.item-4 {
           top:76%;
           left:59%;

           summary + * {
                &.down {

                    @media(max-width: 851px) {
                        left: -100px;
                    }

                    @media(min-width: 852px) and (max-width: 1500px) {
                        left: -100px;
                    }

                    @media(max-width: 1500px) {
                        &:after {
                            left: 115px;  
                        }
                    }
                }
            }
        }

        &.item-5 {
            top:41%;
            left:30%;
            summary + * {
                &.down {
                    @media(min-width: 852px) and (max-width: 1200px) {
                        left: -105px;
                    }

                    @media(min-width: 852px) and (max-width: 1200px){
                        &:after {
                            left: 121px;  
                        }
                    }
                }
            }
        }
    }
}

@media (min-width: 400px) and (max-width: 1023px){
    .product-map {
        &.wp-block-columns:not(.is-not-stacked-on-mobile) {
            flex-wrap: wrap !important;
            > .wp-block-column:nth-child(1),
            > .wp-block-column:nth-child(2) {
                flex-basis: 48% !important;
            }

            > .wp-block-column:nth-child(3) {
                flex-basis: 100% !important;
            }

            figure {
                img {
                    width: 100%;
                }
            }
        }
    }
}

@media ( min-width: 1024px) {
    .product-map {
        &.wp-block-columns:not(.is-not-stacked-on-mobile) {
            .wp-block-column:nth-child(2) {
                order: 3;
            }

            .wp-block-column:nth-child(3) {
                order: 2;

                figure,
                img {
                    height: 100%;
                }
            }
        }
    }
}

.block-editor-block-list__layout {
    .product-map {
        figure.block-editor-block-list__block {
            position: static !important;
        }
        details {
            position: absolute !important;
        }
    }
}