@layer utilities {
    .content-auto {
        content-visibility: auto;
    }

    .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .transition-transform-opacity {
        transition-property: transform, opacity;
    }

    .hover-scale {
        transition: transform 0.5s ease;
    }

        .hover-scale:hover {
            transform: scale(1.03);
        }

    .bg-blur {
        backdrop-filter: blur(8px);
    }

    .clip-path-slant {
        clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
    }

    .product-zoom-container {
        overflow: hidden;
        position: relative;
    }

    .product-zoom-image {
        transition: transform 0.3s ease;
    }

    .product-zoom-container:hover .product-zoom-image {
        transform: scale(1.1);
    }

    .zoom-modal {
        background-color: rgba(0, 0, 0, 0.9);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

        .zoom-modal.active {
            opacity: 1;
            visibility: visible;
        }

    .carousel-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #ccc;
        transition: all 0.3s ease;
    }

        .carousel-dot.active {
            background-color: #E50037;
            width: 30px;
            border-radius: 5px;
        }
}

html {
    scrollbar-width: none;
}

/* 针对 IE 和 Edge 的滚动条隐藏 */
body {
    -ms-overflow-style: none;
}