.hot-point-box {
    display: flex;
    gap: 48px;



}

    .hot-point-box.layout-right .hot-point-slider-container {
            order: -1
        }

    .hot-point-box .mobile-view-product {
        display: none;
    }

    .hot-point-box .hot-point-image-container {
        flex: 1;
        min-width: 280px;
        position: relative;
    }

    /* Hot spot hover 效果 */

    .hot-point-box .hot-point-box .carousel-item-card {
            transition: opacity 0.3s ease;
        }

    .hot-point-box .hot-point-slider-container {
        display: flex;
        align-items: center;
    }

    .hot-point-box .hot-point-slider-container .hot-point-content-box {
            width: 100%;
        }

    .hot-point-box .hot-point-slider-container.limit-1 {
            min-width: 280px;
            width: 100%;
            max-width: 360px;
        }

    .hot-point-box .hot-point-slider-container.limit-1 hot-point-carousel .carousel-track {
                    gap: 0;
                }

    .hot-point-box .hot-point-slider-container.limit-1 hot-point-carousel .carousel-track .carousel-item-card {
                        flex-shrink: 0;
                        width: 100%
                    }

    .hot-point-box .hot-point-slider-container.limit-2 {
            min-width: 240px;
            width: 100%;
            max-width: 584px;
        }

    .hot-point-box .hot-point-slider-container.limit-2 hot-point-carousel .carousel-track {
                    gap: var(--genstore-spacing-gap-1200);
                }

    .hot-point-box .hot-point-slider-container.limit-2 hot-point-carousel .carousel-track .carousel-item-card {
                        flex-shrink: 0;
                        width: calc(50% - calc(var(--genstore-spacing-gap-1200) / 2));
                        transition: opacity 0.3s ease-in-out;
                    }

    .hot-point-box .hot-point-slider-container.limit-2 hot-point-carousel .carousel-track .carousel-item-card.de-active {
                            opacity: 0.5
                        }

    .hot-point-box .hot-point-slider-container hot-point-carousel {
            display: flex;
            flex-direction: column;
            gap: var(--genstore-spacing-gap-1200);
            width: 100%;
            overflow: hidden;
        }

    .hot-point-box .hot-point-slider-container hot-point-carousel .mobile-carousel-header {
                display: none;
            }

    .hot-point-box .hot-point-slider-container hot-point-carousel .carousel-indicators {
                position: relative;
                bottom: unset;
            }

    .hot-point-box .hot-point-slider-container hot-point-carousel .carousel-indicators .carousel-indicator {
                    height: 2px;
                    width: 8px;
                    background: var(--genstore-neutral-texticon-250);
                }

    .hot-point-box .hot-point-slider-container hot-point-carousel .carousel-indicators .carousel-indicator.active {
                        background: var(--genstore-neutral-texticon-900);
                    }

    .hot-point-box .hot-point-slider-container hot-point-carousel .carousel-track {
                display: flex;
                transition: transform 0.3s ease-in-out;
            }

    .hot-point-box .hot-spot-container {
        position: absolute;
        top: var(--hot-spot-top);
        left: var(--hot-spot-left);

    }

    .hot-point-box .hot-spot-container .product-popover {
            border-radius: calc(var(--genstore-borderRadius-400) / 2);
            position: fixed;
            background-color: white;
            padding: 6px;
            opacity: 0;
            visibility: hidden;
            z-index: 1000;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            transition: opacity 0.2s ease, visibility 0.2s ease;
            max-width: 200px;
            --arrow-offset: 50%;
            
            /* 移除左右对齐的特殊样式，统一使用动态定位 */
        }

    .hot-point-box .hot-spot-container .product-popover img {
                border-radius: calc(var(--genstore-borderRadius-400) / 2);
                width: 68px;
                height: 68px;
                object-fit: cover;
                position: relative;
            }

    .hot-point-box .hot-spot-container .product-popover .card-link .genstore-text-block {
                    font-size: 12px;
                }

    /* 默认箭头：指向上方（popover在下方时） */

    .hot-point-box .hot-spot-container .product-popover::after {
                content: "";
                position: absolute;
                top: -6px;
                left:50%;
                transform: translateX(-50%);
                width: 0;
                height: 0;
                border-left: 6px solid transparent;
                border-right: 6px solid transparent;
                border-bottom: 6px solid white;
            }

    /* 当 popover 在上方时的箭头样式 */

    .hot-point-box .hot-spot-container .product-popover.popover-above::after {
                top: auto;
                bottom: -6px;
                border-bottom: none;
                border-top: 6px solid white;
            }

    .hot-point-box .hot-spot-container .product-popover.popover-left::after,
            .hot-point-box .hot-spot-container .product-popover.popover-right::after {
                left: var(--arrow-offset);
                transform: translateX(-50%);
            }

    .hot-point-box .hot-spot-container .hot-spot {
            width: 16px;
            height: 16px;
            border-radius: 999px;
            transition: transform .2s ease-in-out;
            background-color: var(--background-color);
            cursor: pointer;
        }

    .hot-point-box .hot-spot-container .hot-spot::after {
                --hot-spot-after-size: calc(var(--hot-spot-size) * 2.5);
                content: " ";
                top: -11.9965px;
                left: -12px;
                width: 40px;
                height: 40px;
                background: radial-gradient(50% 50% at 50% 50%, var(--background-color-1), var(--background-color-2));
                border-radius: 999px;
                animation: 1.5s ease-in-out infinite alternate ping;
                position: absolute;
            }

@keyframes ping {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(.8);
    }
}

@media screen and (pointer: fine) {
            .hot-spot-container:hover .hot-spot {
                transform: scale(1.3);
            }

            .hot-spot-container:hover .product-popover {
                visibility: visible;
                animation: fadeInUp .2s ease-in-out forwards;
            }
}

@media screen and (max-width: 750px) {
        .genstore-hot-point-container.genstore-container {
            padding-right: 1rem;
        }

        .genstore-hot-point-container.expanded {
            position: fixed;
            inset: 0;
            z-index: 100;
            padding: 0 !important;
        }

            .genstore-hot-point-container.expanded .hot-point-title {
                display: none;
            }

            .genstore-hot-point-container.expanded .hot-point-box {
                gap: var(--genstore-spacing-gap-1800);
                height: 100vh;
            }

                .genstore-hot-point-container.expanded .hot-point-box .hot-point-image-container {
                    transform: scale(1.03);
                    transition: transform 0.5s ease-in-out;
                }

                    .genstore-hot-point-container.expanded .hot-point-box .hot-point-image-container .image-gallery-wrapper {
                        padding-top: 0;
                        height: 100%;
                    }

                .genstore-hot-point-container.expanded .hot-point-box .mobile-view-product {
                    display: none;
                }

                .genstore-hot-point-container.expanded .hot-point-box .hot-point-slider-container {
                    display: block;
                    animation: slideUp 0.4s ease-out 0.1s forwards;
                    flex: 1;
                }
                        .genstore-hot-point-container.expanded .hot-point-box .hot-point-slider-container hot-point-carousel .carousel-indicators,.genstore-hot-point-container.expanded .hot-point-box .hot-point-slider-container hot-point-carousel carousel-indicators {
                            display: none;
                        }

                        .genstore-hot-point-container.expanded .hot-point-box .hot-point-slider-container hot-point-carousel .mobile-carousel-header {
                            display: block;
                            margin-bottom: var(--genstore-spacing-gap-800);
                            position: relative;
                        }

                            .genstore-hot-point-container.expanded .hot-point-box .hot-point-slider-container hot-point-carousel .mobile-carousel-header .mobile-carousel-close {
                                position: absolute;
                                right: 16px;
                                top: 0
                            }
                            .genstore-hot-point-container.expanded .hot-point-box .hot-point-slider-container hot-point-carousel .carousel-track .carousel-item-card {
                                padding: 0 88px;
                            }

    .hot-point-box {
        flex-direction: column;
        gap: var(--genstore-spacing-gap-1200);
    }
            .hot-point-box.layout-right .hot-point-slider-container {
                order: 1
            }

        .hot-point-box.expanded {}

        .hot-point-box .hot-point-slider-container {
            display: none;
            transform: translateY(30px);
            opacity: 0;

        }

            .hot-point-box .hot-point-slider-container.limit-1,
            .hot-point-box .hot-point-slider-container.limit-2 {
                max-width: 100%;
                width: 100%;
            }

        .hot-point-box .mobile-view-product {
            display: flex;
        }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-40%, 10%, 0);
        transform: translate3d(-40%, 10%, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(-40%, 0, 0);
        transform: translate3d(-40%, 0, 0)
    }
}