/** Shopify CDN: Minification failed

Line 16:0 Unexpected "<"
Line 118:4 Unexpected "<"
Line 172:18 Expected ":"
Line 174:12 Comments in CSS use "/* ... */" instead of "//"
Line 180:17 Unexpected "nextSlide("
Line 181:24 Expected ":"
Line 182:12 Expected identifier but found "updateSlider("
Line 185:17 Unexpected "prevSlide("
Line 186:24 Expected ":"
Line 187:12 Expected identifier but found "updateSlider("
... and 4 more hidden warnings

**/
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Qimah - متجر قمة</title>
    <style>
        /* Slider Styles */
        .qimah-slider {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            border-radius: 10px;
        }
        
        .slides {
            display: flex;
            transition: transform 0.5s ease;
            height: 500px; /* Adjust based on your needs */
        }
        
        .slide {
            min-width: 100%;
            position: relative;
        }
        
        .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .slide-caption {
            position: absolute;
            bottom: 30px;
            right: 30px;
            background: rgba(14, 75, 123, 0.8); /* Qimah blue with transparency */
            color: #FFD700; /* Gold text */
            padding: 20px;
            border-radius: 5px;
            max-width: 50%;
            text-align: right;
        }
        
        .slide-caption h3 {
            margin: 0 0 10px 0;
            font-size: 24px;
        }
        
        .slide-caption p {
            margin: 0;
            font-size: 16px;
        }
        
        /* Navigation Arrows */
        .slider-nav {
            position: absolute;
            top: 50%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            transform: translateY(-50%);
        }
        
        .slider-nav button {
            background: rgba(255, 215, 0, 0.7);
            color: #0E4B7B;
            border: none;
            padding: 15px;
            cursor: pointer;
            font-size: 20px;
            transition: all 0.3s;
        }
        
        .slider-nav button:hover {
            background: #FFD700;
        }
        
        /* Dots Indicator */
        .slider-dots {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
        }
        
        .slider-dots span {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255, 215, 0, 0.5);
            margin: 0 5px;
            cursor: pointer;
        }
        
        .slider-dots span.active {
            background: #FFD700;
        }
    </style>
</head>
<body>
    <div class="qimah-slider">
        <div class="slides">
            <!-- Slide 1 -->
            <div class="slide">
                <img src="https://example.com/slide1.jpg" alt="عرض خاص">
                <div class="slide-caption">
                    <h3>عرض خاص!</h3>
                    <p>خصومات تصل إلى ٥٠٪؜ على تشكيلتنا الجديدة</p>
                </div>
            </div>
            
            <!-- Slide 2 -->
            <div class="slide">
                <img src="https://example.com/slide2.jpg" alt="تشكيلة جديدة">
                <div class="slide-caption">
                    <h3>تشكيلة ربيع ٢٠٢٥</h3>
                    <p>أحدث صيحات الموضة الآن في متجر قمة</p>
                </div>
            </div>
            
            <!-- Slide 3 -->
            <div class="slide">
                <img src="https://example.com/slide3.jpg" alt="توصيل سريع">
                <div class="slide-caption">
                    <h3>توصيل سريع</h3>
                    <p>توصيل لكافة أنحاء المملكة خلال ٢٤-٤٨ ساعة</p>
                </div>
            </div>
        </div>
        
        <!-- Navigation Arrows -->
        <div class="slider-nav">
            <button onclick="prevSlide()">❮</button>
            <button onclick="nextSlide()">❯</button>
        </div>
        
        <!-- Dots Indicator -->
        <div class="slider-dots">
            <span class="active" onclick="goToSlide(0)"></span>
            <span onclick="goToSlide(1)"></span>
            <span onclick="goToSlide(2)"></span>
        </div>
    </div>

    <script>
        let currentSlide = 0;
        const slides = document.querySelector('.slides');
        const dots = document.querySelectorAll('.slider-dots span');
        const totalSlides = document.querySelectorAll('.slide').length;
        
        function updateSlider() {
            slides.style.transform = `translateX(-${currentSlide * 100}%)`;
            
            // Update dots
            dots.forEach((dot, index) => {
                dot.classList.toggle('active', index === currentSlide);
            });
        }
        
        function nextSlide() {
            currentSlide = (currentSlide + 1) % totalSlides;
            updateSlider();
        }
        
        function prevSlide() {
            currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
            updateSlider();
        }
        
        function goToSlide(index) {
            currentSlide = index;
            updateSlider();
        }
        
        // Auto-slide every 5 seconds
        setInterval(nextSlide, 5000);
    </script>
</body>
</html>
