#product-container {
            position: relative;
            width: 100%;
            aspect-ratio: 1/1;
            border-radius: 16px;
            overflow: hidden;
            background: linear-gradient(160deg, #f8f2e8 0%, #f3ece2 100%);
            border: 1px solid var(--line);
            contain: layout paint;
            box-shadow:
                0 12px 28px rgba(0, 0, 0, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
            margin-bottom: 12px;
        }

        .product-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
            backface-visibility: hidden;
            image-rendering: auto;
            filter: saturate(1) contrast(1);
            transition:
                opacity 260ms var(--motion-soft),
                filter 340ms var(--motion-soft);
            pointer-events: none;
            user-select: none;
            -webkit-user-select: none;
            -webkit-user-drag: none;
            -webkit-touch-callout: none;
        }

        .product-layer.is-source-transitioning {
            opacity: 0.72;
            filter: saturate(0.97) contrast(0.99);
        }

        .layer-highlight {
            filter: brightness(1.3);
        }

        #base-layer {
            pointer-events: none;
        }

        #product-container {
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
            -webkit-touch-callout: none;
            user-select: none;
            -webkit-user-select: none;
            transition: box-shadow 0.2s ease, border-color 0.2s ease;
            padding: 2.5%;
        }

        #preview-interaction-layer {
            position: absolute;
            inset: 0;
            z-index: 2;
            background: transparent;
            cursor: pointer;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
        }

        #product-container:hover {
            border-color: #cfbea8;
            box-shadow:
                0 14px 30px rgba(40, 28, 18, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.42),
                inset 0 0 0 1px rgba(111, 78, 55, 0.12);
        }

        #product-container.is-guide-highlighted {
            position: relative;
            z-index: 72;
            border-color: #cab498;
            box-shadow:
                0 16px 34px rgba(40, 28, 18, 0.16),
                inset 0 1px 0 rgba(255, 255, 255, 0.42),
                inset 0 0 0 1px rgba(111, 78, 55, 0.2);
        }

        .guide-preview-target {
            position: absolute;
            top: 52%;
            left: 50%;
            width: 132px;
            height: 132px;
            transform: translate(-50%, -50%);
            pointer-events: none;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.2s var(--motion-soft), visibility 0.2s var(--motion-soft);
            z-index: 4;
        }

        .guide-preview-target.is-visible {
            opacity: 1;
            visibility: visible;
        }

        .guide-preview-target-ring {
            position: absolute;
            inset: 0;
            border-radius: 999px;
            border: 3px solid rgba(255, 255, 255, 0.96);
            background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.04) 48%, rgba(255, 255, 255, 0) 72%);
            box-shadow:
                0 0 0 12px rgba(255, 255, 255, 0.14),
                0 10px 24px rgba(40, 28, 18, 0.18);
            animation: guide-target-ring-pulse 1.55s var(--motion-soft) infinite;
        }

        .guide-preview-target-ring::after {
            content: '';
            position: absolute;
            inset: -12px;
            border-radius: 999px;
            border: 2px solid rgba(255, 255, 255, 0.72);
            animation: guide-target-ring-ripple 1.55s var(--motion-soft) infinite;
        }

        .guide-preview-target-dot {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 24px;
            height: 24px;
            border-radius: 999px;
            transform: translate(-50%, -50%);
            background: rgba(255, 255, 255, 0.98);
            border: 2px solid rgba(255, 255, 255, 1);
            box-shadow: 0 6px 14px rgba(40, 28, 18, 0.22);
            animation: guide-target-dot-pulse 1.55s var(--motion-soft) infinite;
        }

        @keyframes guide-target-ring-pulse {
            0% {
                transform: scale(0.84);
                opacity: 0.62;
            }
            58% {
                transform: scale(1);
                opacity: 1;
            }
            100% {
                transform: scale(1.14);
                opacity: 0.7;
            }
        }

        @keyframes guide-target-ring-ripple {
            0% {
                transform: scale(0.86);
                opacity: 0.86;
            }
            100% {
                transform: scale(1.34);
                opacity: 0;
            }
        }

        @keyframes guide-target-dot-pulse {
            0%,
            100% {
                transform: translate(-50%, -50%) scale(1);
            }
            50% {
                transform: translate(-50%, -50%) scale(1.18);
            }
        }

        #product-container.is-loading-initial {
            cursor: progress;
        }

        #product-container.is-loading-initial .product-layer {
            opacity: 0;
        }

        #product-container.is-loading-runtime .product-layer {
            opacity: 0.78;
        }

        #product-container.is-lqip-active .product-layer:not(#base-layer) {
            filter: saturate(0.992) contrast(0.995);
        }

        .preview-loading-state {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            background: linear-gradient(160deg, rgba(248, 242, 232, 0.92) 0%, rgba(243, 236, 226, 0.92) 100%);
            color: var(--text-soft);
            font-size: 0.9rem;
            letter-spacing: 0.01em;
            transform: translateY(0);
            filter: blur(0);
            transition: opacity 0.22s var(--motion-soft), visibility 0.22s var(--motion-soft), transform 0.22s var(--motion-soft), filter 0.22s var(--motion-soft);
            z-index: 3;
        }

        .preview-loading-state.is-runtime {
            justify-content: flex-end;
            align-items: flex-end;
            padding: 14px;
            background: transparent;
            font-size: 0.78rem;
        }

        .preview-loading-indicator {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 7px 12px;
            border-radius: 999px;
            border: 1px solid rgba(111, 78, 55, 0.18);
            background: rgba(255, 252, 247, 0.86);
            color: #6c6152;
            font-weight: 500;
            letter-spacing: 0.015em;
            backdrop-filter: blur(8px);
            transform: translateY(0);
            transition: opacity 0.2s var(--motion-soft), transform 0.2s var(--motion-soft), box-shadow 0.2s var(--motion-soft), background-color 0.2s var(--motion-soft);
        }

        .preview-loading-state.is-runtime .preview-loading-indicator {
            box-shadow: 0 10px 20px rgba(40, 28, 18, 0.12);
        }

        .preview-loading-state.is-hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transform: translateY(4px);
            filter: blur(1.8px);
        }

        .preview-loading-state.is-hidden .preview-loading-indicator {
            opacity: 0;
            transform: translateY(4px);
        }

        .preview-loading-spinner {
            width: 18px;
            height: 18px;
            border-radius: 999px;
            border: 2px solid rgba(111, 78, 55, 0.2);
            border-top-color: rgba(111, 78, 55, 0.65);
            animation: preview-loading-spin 0.95s linear infinite;
        }

        @keyframes preview-loading-spin {
            to {
                transform: rotate(360deg);
            }
        }