/* SabiWear - Mobile Products Layout
   Horizontal scrolling product sections for mobile devices */

@media (max-width: 650px) {
    /* Container for products grid - optimized for bigger cards */
    .products-section {
        position: relative;
        padding: 0;
        margin: 0 -8px; /* Extend slightly for bigger cards */
        margin-bottom: 20px;
    }
    
    /* Convert grid to horizontal scrolling container */
    .products-grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        padding: 1.5rem 12px 2rem;
        margin: 0;
        width: 100%;
        box-sizing: border-box;
        
        /* Hide scrollbar but keep functionality */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
    }
    
    /* Hide scrollbar for Chrome, Safari and Opera */
    .products-grid::-webkit-scrollbar {
        display: none;
    }
    
    /* Product card styling - Bigger and enhanced */
    .product-card {
        flex: 0 0 90%; /* Bigger cards - 90% width */
        width: 90%;
        max-width: 90%;
        min-width: unset;
        margin: 0 5%; /* Center with margins */
        scroll-snap-align: center;
        height: auto;
        box-sizing: border-box;
        padding: 0;
        transform: scale(1.08); /* Make cards bigger */
        transform-origin: center;
        
        /* Enhanced styling */
        background: rgba(31, 31, 44, 0.85);
        border-radius: 18px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        overflow: hidden;
        position: relative;
    }
    
    .product-card:hover {
        transform: scale(1.12);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
        border-color: rgba(255, 255, 255, 0.2);
    }
    
    /* Add subtle top glow effect */
    .product-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, rgba(130, 87, 255, 0.6), transparent);
        opacity: 0;
        transition: opacity 0.4s ease;
    }
    
    .product-card:hover::before {
        opacity: 1;
    }
    
    /* Enhanced product card content */
    .product-card .product-image {
        height: 260px; /* Bigger image */
        border-radius: 15px 15px 0 0;
    }
    
    .product-card .product-info {
        padding: 18px 16px;
    }
    
    .product-card .product-name {
        font-size: 1.05rem;
        font-weight: 600;
        margin-bottom: 6px;
        color: #fff;
    }
    
    .product-card .product-price {
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--accent-primary);
    }
    
    .product-card .product-description {
        font-size: 0.85rem;
        margin: 6px 0;
        color: rgba(255, 255, 255, 0.8);
    }
    
    /* Modern scroll indicators (dots) matching website theme */
    .scroll-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 14px;
        margin-top: 1.8rem;
        padding: 18px 0;
    }
    
    .scroll-dot {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.25);
        border: 2px solid rgba(255, 255, 255, 0.1);
        transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        cursor: pointer;
        position: relative;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
    
    .scroll-dot::before {
        content: '';
        position: absolute;
        top: -4px;
        left: -4px;
        right: -4px;
        bottom: -4px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
        opacity: 0;
        transition: opacity 0.4s ease;
        z-index: -1;
    }
    
    .scroll-dot:hover {
        transform: scale(1.25);
        background: rgba(255, 255, 255, 0.4);
    }
    
    .scroll-dot:hover::before {
        opacity: 0.3;
    }
    
    .scroll-dot.active {
        width: 36px;
        height: 14px;
        border-radius: 7px;
        background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
        border: 2px solid rgba(255, 255, 255, 0.25);
        box-shadow: 0 6px 20px rgba(130, 87, 255, 0.4);
        transform: scale(1.15);
    }
    
    .scroll-dot.active::before {
        opacity: 0;
    }
    
    /* Add enhanced glow effect for active dot */
    .scroll-dot.active::after {
        content: '';
        position: absolute;
        top: -6px;
        left: -6px;
        right: -6px;
        bottom: -6px;
        border-radius: 10px;
        background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
        opacity: 0.25;
        filter: blur(10px);
        z-index: -2;
    }
}