/* Tile Mega Menu — Luxury Gold Edition */

/* Design Tokens - Updated to Luxury Gold Palette */
:root {
  --mm2-bg: #FDFBF7;
  --mm2-surface: #FFFFFF;
  --mm2-surface-elevated: rgba(253, 251, 247, 0.98);
  --mm2-muted: #F5F4F0;
  --mm2-border: #E6D8B8;
  --mm2-border-strong: #D4AF37;
  --mm2-accent: #D4AF37;
  --mm2-accent-hover: #B58529;
  --mm2-accent-10: rgba(212, 175, 55, 0.10);
  --mm2-accent-20: rgba(212, 175, 55, 0.20);
  --mm2-fg: #1A1814;
  --mm2-fg-muted: #736F66;
  --mm2-fg-light: #A39171;
  
  /* Shadows adjusted for warmer tones */
  --mm2-shadow-sm: 0 2px 8px rgba(26, 24, 20, 0.06);
  --mm2-shadow-md: 0 8px 24px rgba(26, 24, 20, 0.10);
  --mm2-shadow-lg: 0 20px 60px rgba(26, 24, 20, 0.14);
  --mm2-shadow-xl: 0 32px 80px rgba(26, 24, 20, 0.18);
  --mm2-shadow-hover: 0 16px 40px rgba(212, 175, 55, 0.15);
  
  --mm2-radius-xl: 20px;
  --mm2-radius-lg: 16px;
  --mm2-radius-md: 12px;
  --mm2-radius-sm: 10px;
  
  --mm2-z: 60;
  --mm2-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Trigger Button */
.mm2-trigger {
  border: 1.5px solid var(--mm2-border);
  background: var(--mm2-surface);
  color: var(--mm2-fg);
  font-weight: 600;
}
.mm2-trigger:hover { 
  border-color: var(--mm2-accent); 
  background: var(--mm2-muted);
}

/* Panel - Glassmorphism Gold */
.mm2-panel {
  background: var(--mm2-surface-elevated);
  border: 1.5px solid var(--mm2-border-strong);
}

/* Cards & Icons */
.mm2-card {
  border: 1.5px solid var(--mm2-border);
  color: var(--mm2-fg);
}
.mm2-card:hover { 
  border-color: var(--mm2-accent);
  background: linear-gradient(135deg, #FFFFFF, #F5F4F0);
  box-shadow: var(--mm2-shadow-hover);
}

.mm2-card .mm2-ico {
  background: linear-gradient(135deg, #FDFBF7, #E6D8B8);
  border: 1.5px solid var(--mm2-border-strong);
  color: var(--mm2-accent-hover);
}
.mm2-card:hover .mm2-ico {
  box-shadow: 0 4px 16px rgba(181, 133, 41, 0.2);
}

/* Sub-navigation Active State */
.mm2-subitem::before { background: var(--mm2-accent); }

.mm2-subitem.active {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.08), rgba(212, 175, 55, 0.04));
  border-color: var(--mm2-accent-20);
  color: var(--mm2-accent-hover);
}

/* Links & Thumbnails */
.mm2-link {
  border: 1.5px solid var(--mm2-border);
}
.mm2-link:hover { 
  border-color: var(--mm2-accent);
}

.mm2-thumb {
  border: 1.5px solid var(--mm2-border);
}
.mm2-link:hover .mm2-thumb {
  border-color: var(--mm2-accent);
  box-shadow: 0 4px 10px rgba(181, 133, 41, 0.15);
}

/* "See all" highlight */
.mm2-seeall {
  border: 2px dashed var(--mm2-accent);
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.08), rgba(212, 175, 55, 0.02));
}
.mm2-seeall:hover {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.14), rgba(212, 175, 55, 0.06));
}

/* Mobile Adjustments */
@media (max-width: 960px) {
  .mm2-mobile-close {
    border: 1px solid rgba(230, 216, 184, 0.6);
    background: rgba(253, 251, 247, 0.95);
  }
  .mm2-mobile-close:hover {
    background: rgba(254, 242, 242, 0.95);
    border-color: rgba(220, 38, 38, 0.8);
    color: #B91C1C;
  }
  .mm2-subitem.active {
    background: linear-gradient(135deg, var(--mm2-accent), var(--mm2-accent-hover));
    color: white;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
  }
}