/* Fix for hero banner spacing */ /* Adjust for mobile */ /* Guarantee consistent gap between associate images */ /* Responsive gap adjustments to maintain visual spacing similar to original grid */ /* Smooth animation, no stuttering */ /* Ensure no user can accidentally reverse or move slider */ touch-action: pan-y pinch-zoom; /* Allow vertical scroll but prevent horizontal panning */ /* Reset / Background styling matching original */ /* Stats boxes (Experts & Satisfied Clients) keep original look */ /* ---------- PURE CSS + JS INFINITE MARQUEE (Right to Left, Auto, No User Controls) ---------- */ /* The track that holds all items - uses flex, no user interaction */ /* No user select to prevent any accidental dragging */ /* But images themselves can have pointer events for hover effect */ /* Responsive avatar sizes (same as original grid scaling) */ /* Pause animation on hover over the container (optional, but good UX) but user cannot move it backward/forward, only pause on hover if needed */ /* No controls visible - no buttons, no indicators that allow user intervention */ /* Ensure no scrollbar interference */ /* Add subtle gradient edges for smooth fade effect (optional, looks professional) */ /* On smaller screens reduce edge effect width */ /* Fix for banner hiding behind header on mobile */ margin-top: -97px; /* Negative of your header's 97px height */ /* Main header should have proper z-index */ /* Mobile-specific fixes */ /* Ensure header doesn't cover content */ /* For very small screens */ /* Product Section Styles */ /* Quick View Modal Styles */ /* Modal Action Buttons */ /* Responsive adjustments */ /* Button hover effects */ /* Product Section Styles */ /* Quick View Modal Styles */ /* Responsive size */ --> --> // Wishlist add (Featured section) // Add to Cart (Featured section) /* Fix for floating label with select dropdown */ /* Make dropdown responsive on mobile */ /* Better dropdown styling */ /* For better visibility on mobile */ --> /* How We Work - Unique Class Names to Avoid Conflicts */ /* Section Header - Unique Names */ /* Process Cards - Unique Names */ /* Arrow connectors between cards (desktop only) */ /* Animation */ /* Grid System */ /* Responsive Design */ /* Utility Classes */ /* Mobile responsive fixes */ /* Utility classes */ // Function to handle email links // Get all email links // Check if device is mobile // Set default mailto href as fallback // For desktop devices, override to open Gmail web // For mobile devices, the default mailto: will work // Initialize email links // Search functionality // Show/hide no results message // Quantity controls // Change main image in modal // Notification function // Wishlist functionality // Update wishlist button state // Add to Cart functionality // Add to Cart event listeners // Main add to cart button // Modal add to cart button // Get selected variants // Close modal after successful add to cart // Wishlist form submissions // Update button state // Associate images array - using same 9 images as original (with duplicates as per your grid) // Associate images array - using your exact paths // OPTIMIZED CONFIGURATION FOR MOBILE speed: 0.6, // Reduced speed for smoother mobile performance // DOM elements // Build marquee with MORE copies for seamless mobile scrolling // More copies on mobile for smoother infinite loop (5-6 copies) // Silent error handling // Keep original path, just log silently // Get accurate width of one complete set // Calculate average item width for accuracy // Ensure enough content for seamless loop // Reset position if needed // Use translate3d for hardware acceleration // Optimized animation with delta time for consistent speed across devices // Calculate time difference for smooth frame-independent movement // Move right to left // Seamless loop reset // Debounced resize handler // Rebuild on mobile orientation change // Event listeners // Disable user interaction on marquee // Performance CSS // Get the message container // Show loading message // Get CSRF token from meta tag // Get the form action URL from the form itself // Show success message // Reset the form // Scroll to message // Auto hide success message after 5 seconds // Show error message