/* Mobile-first responsive styles */
        @media (max-width: 640px) {
            .main-image-wrapper {
                height: 300px !important;
                max-height: 70vh;
            }

            .thumbnail-img {
                width: 60px !important;
                height: 60px !important;
            }

            .modal-content {
                max-width: 95% !important;
                max-height: 70vh !important;
            }

            .modal-nav {
                width: 40px !important;
                height: 40px !important;
                font-size: 1rem !important;
            }

            .modal-prev {
                left: 10px !important;
            }

            .modal-next {
                right: 10px !important;
            }
        }

        /* Base styles */
        .image-container {
            width: 100%;
            max-width: 100%;
            margin: 0 auto;
        }

        .main-image-wrapper {
            position: relative;
            background: #f8fafc;
            border-radius: 12px;
            width: 100%;
            height: auto;
            min-height: 300px;
            max-height: 500px;
        }

        /* Thumbnail styles */
        .thumbnail-active {
            border: 3px solid #3b82f6 !important;
            opacity: 1 !important;
        }

        .thumbnail-inactive {
            border: 2px solid #e2e8f0;
            opacity: 0.8;
            transition: all 0.2s ease;
        }

        .thumbnail-inactive:hover {
            opacity: 1;
            border-color: #94a3b8;
        }

        /* Modal styles */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.95);
            z-index: 9999;
            align-items: center;
            justify-content: center;
            padding: 1rem;
        }

        .modal-content {
            position: relative;
            width: auto;
            max-width: 90%;
            max-height: 80vh;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .modal-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            color: white;
            border: none;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 1.25rem;
            z-index: 100;
        }

        .modal-nav:hover {
            background: rgba(255, 255, 255, 0.25);
            transform: translateY(-50%) scale(1.1);
        }

        .modal-prev {
            left: 1rem;
        }

        .modal-next {
            right: 1rem;
        }

        .modal-close {
            position: absolute;
            top: 1.5rem;
            right: 1.5rem;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            color: white;
            border: none;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 1rem;
            z-index: 100;
        }

        /* Loading animation */
        .image-loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 40px;
            height: 40px;
            border: 3px solid #e2e8f0;
            border-top: 3px solid #3b82f6;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            display: none;
        }

        @keyframes spin {
            0% { transform: translate(-50%, -50%) rotate(0deg); }
            100% { transform: translate(-50%, -50%) rotate(360deg); }
        }

        /* Product card hover */
        .related-product-card {
            transition: all 0.3s ease;
        }

        .related-product-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }

        /* Line clamp for descriptions */
        .line-clamp-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* Responsive text sizes */
        @media (max-width: 768px) {
            .responsive-text {
                font-size: 0.875rem !important;
            }

            .responsive-heading {
                font-size: 1.5rem !important;
            }

            .responsive-price {
                font-size: 1.75rem !important;
            }
        }

        /* Touch-friendly buttons */
        .touch-button {
            min-height: 44px;
            min-width: 44px;
        }