:root :where(.wp-block-details) {
    &.is-style-details-product-map {
        a {
            text-decoration: none;
        }

        summary {
            display: grid;
            place-content: center;
            height: 32px;
            width: 32px;
            border-radius: 999px;
            background-color: #fff;
            font-size: 0;
            transition-duration: .2s;
            transition-property: all;
            box-shadow: rgba(225, 225, 225, 0.10) 0px 0px 0px 6px;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            animation: dot-map 1.5s infinite;

            &:hover {
                scale: 1.1;
            }

            &::before {
                content: "";
                width: 12px;
                height: 12px;
                display: inline-block;
                background-image: url('data:image/svg+xml,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 6C12 6.13261 11.9473 6.25979 11.8536 6.35355C11.7598 6.44732 11.6326 6.5 11.5 6.5L6.5 6.5L6.5 11.5C6.5 11.6326 6.44732 11.7598 6.35355 11.8536C6.25979 11.9473 6.13261 12 6 12C5.86739 12 5.74021 11.9473 5.64645 11.8536C5.55268 11.7598 5.5 11.6326 5.5 11.5L5.5 6.5L0.5 6.5C0.367392 6.5 0.240215 6.44732 0.146447 6.35355C0.0526785 6.25979 0 6.13261 0 6C0 5.86739 0.0526785 5.74021 0.146447 5.64645C0.240215 5.55268 0.367392 5.5 0.5 5.5L5.5 5.5L5.5 0.5C5.5 0.367392 5.55268 0.240215 5.64645 0.146447C5.74021 0.0526785 5.86739 0 6 0C6.13261 0 6.25979 0.0526785 6.35355 0.146447C6.44732 0.240215 6.5 0.367392 6.5 0.5L6.5 5.5L11.5 5.5C11.6326 5.5 11.7598 5.55268 11.8536 5.64645C11.9473 5.74021 12 5.86739 12 6Z" fill="%230C0A09"/></svg>');
            }
        }	

        &[open] {
            summary {
                &::before {
                    width: 10px;
                    height: 10px;
                    background-image: url('data:image/svg+xml,<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.85355 9.14608C9.9 9.19253 9.93685 9.24768 9.96199 9.30838C9.98713 9.36907 10.0001 9.43412 10.0001 9.49981C10.0001 9.56551 9.98713 9.63056 9.96199 9.69125C9.93685 9.75195 9.9 9.80709 9.85355 9.85355C9.80709 9.9 9.75195 9.93685 9.69125 9.96199C9.63056 9.98713 9.56551 10.0001 9.49981 10.0001C9.43412 10.0001 9.36907 9.98713 9.30838 9.96199C9.24768 9.93685 9.19253 9.9 9.14608 9.85355L5.00003 5.70687L0.853986 9.85355C0.760171 9.94736 0.632929 10.0001 0.500254 10.0001C0.367578 10.0001 0.240337 9.94736 0.146521 9.85355C0.0527051 9.75973 2.61535e-09 9.63249 0 9.49981C-2.61535e-09 9.36714 0.0527051 9.2399 0.146521 9.14608L4.29319 5.00003L0.146521 0.853986C0.0527051 0.760171 0 0.632929 0 0.500254C0 0.367578 0.0527051 0.240337 0.146521 0.146521C0.240337 0.0527051 0.367578 0 0.500254 0C0.632929 0 0.760171 0.0527051 0.853986 0.146521L5.00003 4.29319L9.14608 0.146521C9.2399 0.0527051 9.36714 -2.61535e-09 9.49981 0C9.63249 2.61535e-09 9.75973 0.0527051 9.85355 0.146521C9.94736 0.240337 10.0001 0.367578 10.0001 0.500254C10.0001 0.632929 9.94736 0.760171 9.85355 0.853986L5.70687 5.00003L9.85355 9.14608Z" fill="%230C0A09"/></svg>');
                }
            }
        }

        & > *:not(summary) {
            position: absolute;
            width: max-content;
            bottom: -32px;
            left: 50px;
            z-index: 1;

            @media (width <= 1023px) {
                width: 220px;
            }

            .wp-block-image {
                flex-shrink: 0;
            }

            &::before {
                content: "";
                width: 8px;
                height: 19px;
                left: -8px;
                position: absolute;
                background-image: url('data:image/svg+xml,<svg width="9" height="20" viewBox="0 0 9 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.41421 8.58579L9 2V10V18L2.41421 11.4142C1.63317 10.6332 1.63316 9.36684 2.41421 8.58579Z" fill="white"/><path d="M8.5 15.3936L4.16797 11.0615C3.58218 10.4757 3.58218 9.52524 4.16797 8.93945L8.5 4.60742V15.3936Z" stroke="white"/></svg>');
            }
        }

        &.block-editor-block-list__layout > .block-editor-block-list__block {
            position: absolute;
        }

        @media (width >= 1024px) {
            .bottom {
                bottom: calc(-100% + -80px);
                left: -100%;

                &::before {
                    top: -14px;
                    left: 44px;
                    transform: rotate(90deg);
                }
            }

            .top {
                bottom: 54px;
                left: -100%;

                &::before {
                    bottom: -12px;
                    transform: rotate(-90deg);
                    left: 40px;
                }
            }

            .left {
                left: auto;
                right: calc(100% + 22px);

                &::before {
                    right: -8px;
                    transform: rotate(180deg);
                    left:auto;
                }
            }
        }

        @media (width <= 1023px) {
            .md-bottom {
                bottom: calc(-100% + -80px);
                left: -100%;

                &::before {
                    top: -14px;
                    left: 44px;
                    transform: rotate(90deg);
                }
            }

            .md-bottom-right {
                bottom: calc(-100% + -80px);
                right: -40px;
                left: auto;

                &::before {
                    top: -14px;
                    left: auto;
                    right: 50px;
                    transform: rotate(90deg);
                }
            }

            .md-top {
                bottom: 54px;
                left: -100%;

                &::before {
                    bottom: -12px;
                    transform: rotate(-90deg);
                    left: 40px;
                }
            }

            .md-left {
                left: auto;
                right: calc(100% + 22px);

                &::before {
                    right: -8px;
                    transform: rotate(180deg);
                    left:auto;
                }
            }
        }        
    }
}

.product-map {
    position: relative;

	@media (min-width:1024px) and (max-width:1279px) {
		padding: 0 !important;
    	margin-left: -90px !important;
	}

    .wp-block-details {
        position: absolute;
    }

    > .wp-block-group {
        width: 32px;
        height: 32px;
    }

    &.v1 {
        .item-2 .wp-block-details {
            top: 160%;
            left: 180%;
        }

        .item-3 .wp-block-details {
            top: -360%;
            
            @media (width >= 768px) {
                top: -500%;
            }
        }
    }

    &.v2 {
        .item-1 .wp-block-details{
            top: 430%;
            left: -130%;

            @media (width >= 768px) {
                left: -250%;
            }

            @media (width >= 1024px) {
                top: 880%;
                left: -600%;
            }
        }

        .item-2 .wp-block-details{
            left: -200%;
            top: 230%;

            @media (width >= 1024px) {
                left: -370%;
                top: 430%;
            }
        }

        .item-3 .wp-block-details{
            left: -180%;
            top: 100%;

            @media (width >= 1024px) {
                left: -290%;
                top: 600%;
            }
        }

        .item-4 .wp-block-details{
            left: -150%;
            top: 180%;

            @media (width >= 1024px) {
                top: 450%;
            }
        }

        .item-5 .wp-block-details{
            top: 0;
            left: -100%;

            @media (width >= 1024px) {
                left: 0;
            }
        }
    }
}

@keyframes dot-map {
    0%   { 
        outline:10px solid #ffffff33;
    }

    100% { 
        outline:18px solid #ffffff00;
    }
}