/**
 * Hi-Kataloog™ - ULTRA MENU PRESETS v4.1
 * 
 * 🎨 12 SUPREME PROFESSIONAL STYLES
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 
 * ✨ What's New in v4.1:
 * • Enhanced gradient hover effects
 * • Premium multi-layer shadows
 * • Advanced active state indicators
 * • Optimized for new v4.1 navigation
 * • Refined color palettes
 * • Smoother transitions
 * 
 * Usage: <div class="hk-navigation-system" data-menu-style="modern">
 * 
 * @package Hi-Kataloog
 * @version 4.1.0
 * @since 2024-12-11
 * @author GitHub Copilot - Ultra Edition
 */

/* ═══════════════════════════════════════════════════════════════════════
   1️⃣ MODERN - Supreme Minimalist (DEFAULT)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Clean lines, gradient hovers, premium shadows
   ⚠️ FORCE APPLY: Using !important to override :root defaults
   ═══════════════════════════════════════════════════════════════════════ */
[data-menu-style="modern"] {
  --hk-nav-color: #475569 !important;
  --hk-nav-bg: #ffffff !important;
  --hk-nav-border-color: #e2e8f0 !important;
  --hk-nav-border-radius: 10px !important;
  --hk-nav-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
  
  --hk-nav-hover-color: #1e293b !important;
  --hk-nav-hover-bg: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
  --hk-nav-hover-border-color: #cbd5e1 !important;
  --hk-nav-hover-shadow: 
    0 4px 8px -2px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
  
  --hk-nav-active-color: #ffffff !important;
  --hk-nav-active-bg: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
  --hk-nav-active-border-color: #4f46e5 !important;
  --hk-nav-active-shadow: 
    0 6px 16px -4px rgba(99, 102, 241, 0.25),
    0 4px 8px -2px rgba(99, 102, 241, 0.15),
    0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   2️⃣ ELEGANT - Ultra-Premium Gradient Experience
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Sophisticated gradients, luxury shadows, refined interactions
   ═══════════════════════════════════════════════════════════════════════ */
[data-menu-style="elegant"] {
  --hk-nav-color: #1e293b;
  --hk-nav-bg: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  --hk-nav-border-color: #cbd5e1;
  --hk-nav-border-radius: 12px;
  --hk-nav-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  
  --hk-nav-hover-color: #0f172a;
  --hk-nav-hover-bg: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  --hk-nav-hover-border-color: #94a3b8;
  --hk-nav-hover-shadow: 
    0 8px 16px rgba(0, 0, 0, 0.12),
    0 4px 8px rgba(0, 0, 0, 0.08);
  
  --hk-nav-active-color: #ffffff;
  --hk-nav-active-bg: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  --hk-nav-active-border-color: #7c3aed;
  --hk-nav-active-shadow: 
    0 10px 25px rgba(139, 92, 246, 0.35),
    0 6px 12px rgba(139, 92, 246, 0.25),
    0 0 0 3px rgba(139, 92, 246, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  
  --hk-nav-font-weight: 500;
  --hk-nav-letter-spacing: -0.02em;
}

/* ═══════════════════════════════════════════════════════════════════════
   3️⃣ MINIMAL - Ultra-Clean Zen Design
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Borderless, subtle gradients, color-only interaction
   ═══════════════════════════════════════════════════════════════════════ */
[data-menu-style="minimal"] {
  --hk-nav-color: #64748b;
  --hk-nav-bg: transparent;
  --hk-nav-border-color: transparent;
  --hk-nav-border-width: 0;
  --hk-nav-border-radius: 8px;
  --hk-nav-shadow: none;
  
  --hk-nav-hover-color: #334155;
  --hk-nav-hover-bg: linear-gradient(135deg, rgba(148, 163, 184, 0.08) 0%, rgba(148, 163, 184, 0.12) 100%);
  --hk-nav-hover-border-color: transparent;
  --hk-nav-hover-shadow: none;
  
  --hk-nav-active-color: #6366f1;
  --hk-nav-active-bg: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(99, 102, 241, 0.15) 100%);
  --hk-nav-active-border-color: transparent;
  --hk-nav-active-shadow: none;
  
  --hk-nav-font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════════
   4️⃣ BOLD - Maximum Impact Design
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Thick borders, bold typography, gradient power
   ═══════════════════════════════════════════════════════════════════════ */
[data-menu-style="bold"] {
  --hk-nav-color: #1e293b;
  --hk-nav-bg: #ffffff;
  --hk-nav-border-color: #334155;
  --hk-nav-border-width: 2px;
  --hk-nav-border-radius: 10px;
  --hk-nav-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  
  --hk-nav-hover-color: #0f172a;
  --hk-nav-hover-bg: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  --hk-nav-hover-border-color: #1e293b;
  --hk-nav-hover-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  
  --hk-nav-active-color: #ffffff;
  --hk-nav-active-bg: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  --hk-nav-active-border-color: #1e293b;
  --hk-nav-active-shadow: 
    0 8px 16px rgba(30, 41, 59, 0.3),
    0 0 0 3px rgba(30, 41, 59, 0.1);
  
  --hk-nav-font-weight: 700;
  --hk-nav-letter-spacing: 0.02em;
  --hk-nav-text-transform: uppercase;
  --hk-nav-font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════════════════
   5️⃣ GLASS - Premium Glassmorphism
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Frosted glass with enhanced blur, gradient overlays
   ═══════════════════════════════════════════════════════════════════════ */
[data-menu-style="glass"] {
  --hk-nav-color: #334155;
  --hk-nav-bg: rgba(255, 255, 255, 0.75);
  --hk-nav-border-color: rgba(255, 255, 255, 0.35);
  --hk-nav-border-radius: 14px;
  --hk-nav-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  
  --hk-nav-hover-color: #1e293b;
  --hk-nav-hover-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.95) 100%);
  --hk-nav-hover-border-color: rgba(255, 255, 255, 0.5);
  --hk-nav-hover-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  
  --hk-nav-active-color: #6366f1;
  --hk-nav-active-bg: linear-gradient(135deg, rgba(238, 242, 255, 0.95) 0%, rgba(224, 231, 255, 0.98) 100%);
  --hk-nav-active-border-color: rgba(99, 102, 241, 0.4);
  --hk-nav-active-shadow: 
    0 0 0 4px rgba(99, 102, 241, 0.15),
    0 8px 24px rgba(99, 102, 241, 0.2);
}

[data-menu-style="glass"] .hk-tab,
[data-menu-style="glass"] .hk-sort-dropdown,
[data-menu-style="glass"] .hk-filter-button {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
}

/* ═══════════════════════════════════════════════════════════════════════
   6️⃣ ROUNDED - Ultra Pill-Shaped Premium
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Fully rounded with gradient effects
   ═══════════════════════════════════════════════════════════════════════ */
[data-menu-style="rounded"] {
  --hk-nav-color: #475569;
  --hk-nav-bg: #f8fafc;
  --hk-nav-border-color: #e2e8f0;
  --hk-nav-border-radius: 100px;
  --hk-nav-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
  
  --hk-nav-hover-color: #1e293b;
  --hk-nav-hover-bg: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  --hk-nav-hover-border-color: #cbd5e1;
  --hk-nav-hover-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  
  --hk-nav-active-color: #ffffff;
  --hk-nav-active-bg: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  --hk-nav-active-border-color: #4f46e5;
  --hk-nav-active-shadow: 
    0 6px 12px rgba(99, 102, 241, 0.3),
    0 0 0 3px rgba(99, 102, 241, 0.1);
  
  --hk-nav-padding-x: 24px;
}

/* ═══════════════════════════════════════════════════════════════════════
   7️⃣ CORPORATE - Ultra-Professional Business
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Conservative with subtle gradient polish
   ═══════════════════════════════════════════════════════════════════════ */
[data-menu-style="corporate"] {
  --hk-nav-color: #374151;
  --hk-nav-bg: #f9fafb;
  --hk-nav-border-color: #d1d5db;
  --hk-nav-border-radius: 4px;
  --hk-nav-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  
  --hk-nav-hover-color: #111827;
  --hk-nav-hover-bg: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  --hk-nav-hover-border-color: #9ca3af;
  --hk-nav-hover-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  
  --hk-nav-active-color: #ffffff;
  --hk-nav-active-bg: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  --hk-nav-active-border-color: #2563eb;
  --hk-nav-active-shadow: 
    0 0 0 3px rgba(59, 130, 246, 0.12),
    0 4px 8px rgba(59, 130, 246, 0.2);
  
  --hk-nav-font-family: 'Segoe UI', system-ui, sans-serif;
  --hk-nav-font-weight: 500;
  --hk-nav-letter-spacing: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   8️⃣ NEON - Supreme Cyberpunk Glow
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Enhanced neon glow with gradient backgrounds
   ═══════════════════════════════════════════════════════════════════════ */
[data-menu-style="neon"] {
  --hk-nav-color: #22d3ee;
  --hk-nav-bg: #0f172a;
  --hk-nav-border-color: #22d3ee;
  --hk-nav-border-width: 2px;
  --hk-nav-border-radius: 8px;
  --hk-nav-shadow: 
    0 0 20px rgba(34, 211, 238, 0.4),
    inset 0 0 10px rgba(34, 211, 238, 0.1);
  
  --hk-nav-hover-color: #06b6d4;
  --hk-nav-hover-bg: linear-gradient(135deg, rgba(34, 211, 238, 0.15) 0%, rgba(6, 182, 212, 0.2) 100%);
  --hk-nav-hover-border-color: #06b6d4;
  --hk-nav-hover-shadow: 
    0 0 30px rgba(6, 182, 212, 0.6),
    inset 0 0 15px rgba(6, 182, 212, 0.2);
  
  --hk-nav-active-color: #0f172a;
  --hk-nav-active-bg: linear-gradient(135deg, #22d3ee 0%, #06b6d4 100%);
  --hk-nav-active-border-color: #22d3ee;
  --hk-nav-active-shadow: 
    0 0 40px rgba(34, 211, 238, 0.7),
    0 0 60px rgba(34, 211, 238, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  
  --hk-nav-font-weight: 600;
  --hk-nav-text-transform: uppercase;
  --hk-nav-letter-spacing: 0.05em;
}

[data-menu-style="neon"] .hk-tab:hover,
[data-menu-style="neon"] .hk-filter-button:hover {
  animation: neon-pulse 1.5s ease-in-out infinite;
}

@keyframes neon-pulse {
  0%, 100% { 
    box-shadow: 
      0 0 20px rgba(34, 211, 238, 0.4),
      inset 0 0 10px rgba(34, 211, 238, 0.1); 
  }
  50% { 
    box-shadow: 
      0 0 40px rgba(34, 211, 238, 0.7),
      0 0 60px rgba(34, 211, 238, 0.4),
      inset 0 0 15px rgba(34, 211, 238, 0.2); 
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   9️⃣ GRADIENT - Ultra-Vibrant Multi-Color Experience
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Premium gradient transitions with enhanced effects
   ═══════════════════════════════════════════════════════════════════════ */
[data-menu-style="gradient"] {
  --hk-nav-color: #ffffff;
  --hk-nav-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --hk-nav-border-color: transparent;
  --hk-nav-border-width: 0;
  --hk-nav-border-radius: 10px;
  --hk-nav-shadow: 
    0 4px 15px rgba(102, 126, 234, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  
  --hk-nav-hover-color: #ffffff;
  --hk-nav-hover-bg: linear-gradient(135deg, #764ba2 0%, #f093fb 50%, #667eea 100%);
  --hk-nav-hover-border-color: transparent;
  --hk-nav-hover-shadow: 
    0 8px 25px rgba(118, 75, 162, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  
  --hk-nav-active-color: #667eea;
  --hk-nav-active-bg: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  --hk-nav-active-border-color: transparent;
  --hk-nav-active-shadow: 
    0 8px 30px rgba(102, 126, 234, 0.4),
    0 0 0 3px rgba(102, 126, 234, 0.15);
  
  --hk-nav-font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════
   🔟 NEUMORPHIC - Premium Soft UI
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Enhanced soft shadows with gradient backgrounds
   ═══════════════════════════════════════════════════════════════════════ */
[data-menu-style="neumorphic"] {
  --hk-nav-color: #64748b;
  --hk-nav-bg: linear-gradient(145deg, #e8eff5 0%, #dae4ed 100%);
  --hk-nav-border-color: transparent;
  --hk-nav-border-width: 0;
  --hk-nav-border-radius: 12px;
  --hk-nav-shadow: 
    8px 8px 16px #cbd5e1, 
    -8px -8px 16px #f8fafc;
  
  --hk-nav-hover-color: #475569;
  --hk-nav-hover-bg: linear-gradient(145deg, #dae4ed 0%, #cbd5e1 100%);
  --hk-nav-hover-border-color: transparent;
  --hk-nav-hover-shadow: 
    4px 4px 8px #cbd5e1, 
    -4px -4px 8px #f8fafc;
  
  --hk-nav-active-color: #6366f1;
  --hk-nav-active-bg: linear-gradient(145deg, #dae4ed 0%, #e8eff5 100%);
  --hk-nav-active-border-color: transparent;
  --hk-nav-active-shadow: 
    inset 4px 4px 8px #cbd5e1, 
    inset -4px -4px 8px #f8fafc,
    0 0 0 2px rgba(99, 102, 241, 0.1);
  
  --hk-nav-font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════════
   1️⃣1️⃣ OUTLINED - Premium Ghost Button Design
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Enhanced outline with gradient hover effects
   ═══════════════════════════════════════════════════════════════════════ */
[data-menu-style="outlined"] {
  --hk-nav-color: #6366f1;
  --hk-nav-bg: transparent;
  --hk-nav-border-color: #6366f1;
  --hk-nav-border-width: 2px;
  --hk-nav-border-radius: 8px;
  --hk-nav-shadow: none;
  
  --hk-nav-hover-color: #4f46e5;
  --hk-nav-hover-bg: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(79, 70, 229, 0.08) 100%);
  --hk-nav-hover-border-color: #4f46e5;
  --hk-nav-hover-shadow: 0 4px 8px rgba(99, 102, 241, 0.12);
  
  --hk-nav-active-color: #ffffff;
  --hk-nav-active-bg: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  --hk-nav-active-border-color: #6366f1;
  --hk-nav-active-shadow: 
    0 6px 12px rgba(99, 102, 241, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  
  --hk-nav-font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════
   1️⃣2️⃣ MATERIAL - Google Material Design 3.0 Enhanced
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Material You with premium gradient polish
   ═══════════════════════════════════════════════════════════════════════ */
[data-menu-style="material"] {
  --hk-nav-color: #1c1b1f;
  --hk-nav-bg: linear-gradient(145deg, #f7f2fa 0%, #ede7f1 100%);
  --hk-nav-border-color: transparent;
  --hk-nav-border-width: 0;
  --hk-nav-border-radius: 28px;
  --hk-nav-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.3), 
    0 1px 3px 1px rgba(0, 0, 0, 0.15);
  
  --hk-nav-hover-color: #1c1b1f;
  --hk-nav-hover-bg: linear-gradient(145deg, #ece6f0 0%, #e0d7eb 100%);
  --hk-nav-hover-border-color: transparent;
  --hk-nav-hover-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.3), 
    0 1px 3px 1px rgba(0, 0, 0, 0.15);
  
  --hk-nav-active-color: #ffffff;
  --hk-nav-active-bg: linear-gradient(135deg, #6750a4 0%, #4a3c7e 100%);
  --hk-nav-active-border-color: transparent;
  --hk-nav-active-shadow: 
    0 4px 8px rgba(103, 80, 164, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  
  --hk-nav-font-family: 'Roboto', sans-serif;
  --hk-nav-font-weight: 500;
  --hk-nav-padding-x: 24px;
  --hk-nav-padding-y: 14px;
}

/* ═══════════════════════════════════════════════════════════════════════
   🎨 PRESET ENHANCEMENTS - Advanced Effects
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Special interactions and animations
   ═══════════════════════════════════════════════════════════════════════ */

/* Slide indicator for active tab */
[data-menu-style="modern"] .hk-tab.active::after,
[data-menu-style="minimal"] .hk-tab.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 3px;
  background: var(--hk-nav-active-border-color);
  border-radius: 2px 2px 0 0;
  animation: slide-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes slide-in {
  from {
    width: 0%;
    opacity: 0;
  }
  to {
    width: 60%;
    opacity: 1;
  }
}

/* Ripple effect for Material preset */
[data-menu-style="material"] .hk-tab {
  position: relative;
  overflow: hidden;
}

[data-menu-style="material"] .hk-tab::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(103, 80, 164, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

[data-menu-style="material"] .hk-tab:active::before {
  width: 200%;
  height: 200%;
}

/* Enhanced hover scale for specific presets */
[data-menu-style="bold"] .hk-tab:hover,
[data-menu-style="gradient"] .hk-tab:hover,
[data-menu-style="neon"] .hk-tab:hover {
  --hk-nav-hover-scale: 1.05;
}

/* Smooth transition override for elegant preset */
[data-menu-style="elegant"] .hk-tab,
[data-menu-style="elegant"] .hk-sort-dropdown,
[data-menu-style="elegant"] .hk-filter-button {
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ═══════════════════════════════════════════════════════════════════════
   📱 RESPONSIVE PRESET ADJUSTMENTS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Mobile-specific preset modifications
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* Reduce padding for mobile */
  [data-menu-style="rounded"] {
    --hk-nav-padding-x: 18px;
  }
  
  [data-menu-style="material"] {
    --hk-nav-padding-x: 20px;
    --hk-nav-padding-y: 12px;
  }
  
  [data-menu-style="bold"] {
    --hk-nav-font-size: 13px;
    --hk-nav-border-width: 1.5px;
  }
  
  /* Reduce glow effects on mobile for performance */
  [data-menu-style="neon"] {
    --hk-nav-shadow: 0 0 10px rgba(34, 211, 238, 0.2);
  }
  
  [data-menu-style="neon"] .hk-tab:hover {
    animation: none;
  }
  
  /* Simplify glassmorphism on mobile */
  [data-menu-style="glass"] .hk-tab,
  [data-menu-style="glass"] .hk-sort-dropdown,
  [data-menu-style="glass"] .hk-filter-button {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   ♿ ACCESSIBILITY FOR PRESETS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ═══════════════════════════════════════════════════════════════════════ */

/* High contrast adjustments */
@media (prefers-contrast: high) {
  [data-menu-style="minimal"],
  [data-menu-style="glass"] {
    --hk-nav-border-width: 1px;
    --hk-nav-border-color: #64748b;
  }
  
  [data-menu-style="gradient"] {
    --hk-nav-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5);
  }
}

/* Reduced motion - disable animations */
@media (prefers-reduced-motion: reduce) {
  [data-menu-style="neon"] .hk-tab:hover {
    animation: none !important;
  }
  
  [data-menu-style="modern"] .hk-tab.active::after,
  [data-menu-style="minimal"] .hk-tab.active::after {
    animation: none !important;
  }
  
  [data-menu-style="material"] .hk-tab::before {
    transition: none !important;
  }
}