/* ============================================
   ENTERPRISE NAVIGATION STYLES
   Inti Wasi Global - E-commerce International
   ============================================ */

/* ============================================
   ARCHITECTURE & DESIGN SYSTEM REFERENCE
   ============================================

   Z-INDEX STACKING LAYERS:
   -------------------------
   Layer -1:  999  - .nav-overlay (backdrop behind mobile menu)
   Layer  0: 1000  - .header (base navigation)
   Layer  1: 1001  - .top-bar (above header)
   Layer  2: 1002  - .nav-actions (action buttons)
   Layer  3: 1003  - .nav-toggle (hamburger menu)
   Layer  5: 1005  - .mini-cart (shopping cart sidebar)
   Layer 10: 1010  - .search-overlay (search modal)
   Standard:  100  - .mega-menu, .dropdown-menu (dropdowns)

   ICON SIZES:
   -------------------------
   14px - Small icons (chevrons, check marks)
   16px - Base icons (user, language)
   18px - Medium icons (mega menu items)
   20px - Large icons (action buttons)
   24px - Extra large icons (modal headers)
   32px - 2XL icons (category quick links)
   40px - 3XL icons (featured cards)
   42px - Logo icon (brand)

   RESPONSIVE BREAKPOINTS:
   -------------------------
   1200px - Large tablets/small desktops (3-column mega menu)
   1024px - Tablets landscape (2-column mega menu)
    968px - Tablets portrait (hide secondary top bar items)
    768px - Mobile devices (hamburger menu, hide top bar)
    480px - Small mobile (increased touch targets 44x44px)

   ACCESSIBILITY (WCAG 2.1 Level AA):
   -------------------------
   - Touch targets: Minimum 44x44px on mobile (480px breakpoint)
   - Focus indicators: 2px solid outline with 2px offset
   - Color contrast: All text meets AA standards
   - Keyboard navigation: All interactive elements focusable
   - Screen readers: Semantic HTML with ARIA labels
   - Smooth scroll: -webkit-overflow-scrolling for iOS

   ANIMATION SYSTEM:
   -------------------------
   - Entrance animations: 0.3s - 0.4s ease-out
   - Transform values: -10px (dropdowns), -50px (modals)
   - Transition properties: Specific (not 'all') for performance
   - Mobile accordions: 0.4s cubic-bezier(0.4, 0, 0.2, 1)

   COMPONENT WIDTHS:
   -------------------------
   - Mini cart: 420px (optimal for product thumbnails)
   - Mobile nav: 85% width, max 380px (thumb-reach optimized)
   - Mega menu: min 900px desktop, 90vw responsive
   - Search modal: max 720px (optimal reading line length)
   - Dropdowns: min 200px (comfortable reading)

   INTERACTION STATES:
   -------------------------
   - Hover: background-color, color, transform changes
   - Active: .active class for mobile accordion states
   - Focus: 2px solid outline (keyboard navigation)
   - Disabled: pointer-events: none, reduced opacity

   PERFORMANCE OPTIMIZATIONS:
   -------------------------
   - Transform: Uses GPU-accelerated properties
   - Will-change: Avoided (causes repaints)
   - Transitions: Specific properties only (not 'all')
   - Backdrop-filter: Hardware-accelerated blur
   - Scroll: -webkit-overflow-scrolling for iOS momentum

   BROWSER COMPATIBILITY:
   -------------------------
   - Chrome/Edge: Full support (latest 2 versions)
   - Firefox: Full support (latest 2 versions)
   - Safari: Requires -webkit-backdrop-filter prefix
   - iOS Safari: Requires -webkit-overflow-scrolling
   - IE11: Not supported (modern properties used)

   MOBILE-SPECIFIC FEATURES:
   -------------------------
   - Touch targets: 44x44px minimum (WCAG 2.1 AA)
   - Momentum scrolling: -webkit-overflow-scrolling: touch
   - Viewport optimization: 85% width prevents accidental closes
   - Accordion pattern: max-height transitions (not display)
   - Single-hand use: max-width 380px for thumb reach
   - Tap-to-close: Visible page behind menu (15% gap)

   ============================================ */

/* ============================================
   TOP BAR
   ============================================ */

/* Z-index layer 1: Top bar sits above header
   z-index: var(--z-fixed) + 1 = 1001 (above header's 1000) */
.top-bar {
    background: var(--color-gray-900);
    color: var(--color-gray-300);
    font-size: var(--font-size-sm);
    position: relative;
    z-index: calc(var(--z-fixed) + 1); /* Layer 1: Above header */
}

.top-bar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) 0;
    gap: var(--spacing-xl);
}

.top-bar-left,
.top-bar-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

.top-bar-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
}

.top-bar-item svg {
    width: 14px;
    height: 14px;
    color: var(--color-primary);
}

.top-bar-divider {
    color: var(--color-gray-600);
}

.top-bar-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--color-gray-300);
    transition: color var(--transition-base);
}

.top-bar-link:hover {
    color: var(--color-white);
}

.top-bar-link svg {
    width: 16px;
    height: 16px;
}

/* Selectors (Language & Currency) */
.selector-wrapper {
    position: relative;
}

.selector-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: transparent;
    border: 1px solid var(--color-gray-700);
    border-radius: var(--radius-md);
    color: var(--color-gray-300);
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
    cursor: pointer;
}

.selector-btn:hover {
    background: var(--color-gray-800);
    border-color: var(--color-gray-600);
    color: var(--color-white);
}

.selector-btn:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.selector-btn svg {
    width: 14px;
    height: 14px;
}

.selector-btn .chevron {
    transition: transform var(--transition-base);
}

.selector-btn.active .chevron {
    transform: rotate(180deg);
}

/* Dropdown Menus */
/* Small dropdown menu for selectors (language, currency)
   Gap: 8px spacing from trigger element */
.dropdown-menu {
    position: absolute;
    top: calc(100% + 8px); /* 8px gap below trigger */
    right: 0;
    min-width: 200px; /* Minimum width for comfortable reading */
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--color-gray-200);
    padding: var(--spacing-sm);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px); /* Initial state: 10px up for entrance animation */
    transition: all var(--transition-base);
    z-index: var(--z-dropdown); /* Layer: Standard dropdown (appears above content) */
}

.selector-wrapper:hover .dropdown-menu,
.selector-btn.active + .dropdown-menu,
.dropdown-menu:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--color-gray-700);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-base), color var(--transition-base);
    cursor: pointer;
    gap: var(--spacing-md);
}

.dropdown-item:hover {
    background: var(--color-gray-100);
    color: var(--color-gray-900);
}

.dropdown-item.active {
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary);
    font-weight: 600;
}

.dropdown-item:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.dropdown-item .flag {
    font-size: 1.25rem;
}

.dropdown-item .check-icon {
    width: 16px;
    height: 16px;
    color: var(--color-primary);
}

.dropdown-item:not(.active) .check-icon {
    display: none;
}

/* ============================================
   MAIN HEADER
   ============================================ */

/* Main header positioned below top bar (36px)
   Z-index layer 0: Base fixed navigation layer */
.header {
    position: fixed;
    top: 36px; /* Top bar height: 36px (padding + content) */
    left: 0;
    right: 0;
    z-index: var(--z-fixed); /* Layer 0: Base navigation (1000) */
    background: color-mix(in srgb, var(--color-white) 85%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid color-mix(in srgb, var(--color-black) 5%, transparent);
    transition: background var(--transition-base),
                box-shadow var(--transition-base),
                top 0.15s cubic-bezier(0.4, 0, 0.2, 1); /* Suave y profesional */
}

.header.scrolled {
    top: 0;
    background: color-mix(in srgb, var(--color-white) 95%, transparent);
    box-shadow: var(--shadow-md);
}

.header.scrolled + * {
    margin-top: 0;
}

/* Navigation */
.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md) 0;
    gap: var(--spacing-2xl);
    transition: padding var(--transition-base);
}

/* Compact nav when scrolled - reduces padding for tighter header */
.header.scrolled .nav {
    padding: var(--spacing-sm) 0;
}

/* Brand */
/* Brand logo - relative z-index to stay above nav background effects */
.nav-brand {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    z-index: 2; /* Relative layer: Above nav background */
    transition: transform var(--transition-base);
}

/* Subtle scale on hover for brand logo
   transform: scale() is GPU-accelerated and performs better than width/height
   1.02 = 2% larger, subtle but noticeable */
.nav-brand:hover {
    transform: scale(1.02);
}

.logo-icon {
    width: 42px;
    height: 42px;
    color: var(--color-primary);
    flex-shrink: 0;
}

.brand-text {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.brand-name {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-gray-900);
    line-height: 1;
}

.brand-tagline {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* Navigation Menu */
.nav-menu {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex: 1;
    justify-content: center;
}

.nav-item {
    position: relative;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-700);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-base), color var(--transition-base);
    white-space: nowrap;
}

.nav-link:hover {
    background: var(--color-gray-100);
    color: var(--color-primary);
}

.nav-link.active {
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.nav-link:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.nav-chevron {
    width: 14px;
    height: 14px;
    transition: transform var(--transition-base);
}

.nav-item:hover .nav-chevron {
    transform: rotate(180deg);
}

/* ============================================
   MEGA MENU
   ============================================ */

/* Mega menu positioned below header
   Calculation: top-bar (36px) + header height (~84px) = ~120px */
.mega-menu {
    position: fixed;
    top: 120px;  /* top-bar (36px) + header (~84px) */
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 90vw;
    min-width: min(900px, 90vw); /* Responsive: 900px desktop, 90vw mobile */
    background: var(--color-white);
    border-radius: var(--radius-2xl);
    box-shadow: 0 20px 60px -10px color-mix(in srgb, var(--color-black) 15%, transparent);
    border: 1px solid var(--color-gray-200);
    padding: var(--spacing-2xl);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
    z-index: var(--z-dropdown); /* Layer: Standard dropdown (appears above content) */
}

/* When scrolled, top-bar hides, so mega menu moves up
   Calculation: header height only (~84px, rounded to 80px for aesthetics) */
.header.scrolled ~ * .mega-menu,
body.scrolled .mega-menu {
    top: 80px; /* Header height when top-bar is hidden */
}

/* Invisible bridge to prevent menu closing when mouse moves between nav and menu
   Height: 20px provides smooth UX without gaps */
.mega-menu::before {
    content: '';
    position: absolute;
    top: -20px; /* Bridge height for smooth hover transition */
    left: 0;
    right: 0;
    height: 20px;
    background: transparent;
}

.has-mega-menu:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.mega-menu-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr) 260px;
    gap: var(--spacing-3xl);
}

.mega-menu-section {
    padding: 0;
    min-width: 0;
}

.mega-menu-title {
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--color-gray-200);
}

.mega-menu-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.mega-menu-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--color-gray-600);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast), color var(--transition-fast), padding-left var(--transition-fast);
    font-size: var(--font-size-sm);
}

/* Mega menu link hover with slide-right effect
   Increases left padding to create illusion of movement
   More subtle than transform: translateX() */
.mega-menu-link:hover {
    background: var(--color-gray-100);
    color: var(--color-primary);
    padding-left: var(--spacing-lg); /* Slide right effect */
}

.mega-menu-link:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.mega-menu-link svg {
    width: 18px;
    height: 18px;
    color: var(--color-primary);
    flex-shrink: 0;
}

/* Mega Menu Featured Card */
.mega-menu-featured {
    padding: var(--spacing-md);
    background: linear-gradient(135deg, var(--color-cream) 0%, var(--color-sand) 100%);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-gray-200);
}

.featured-card {
    text-align: center;
}

.featured-image {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    border-radius: var(--radius-xl);
}

.featured-image svg {
    width: 40px;
    height: 40px;
    color: var(--color-white);
}

.featured-title {
    font-size: var(--font-size-base);
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
    color: var(--color-gray-900);
}

.featured-description {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-md);
}

.featured-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    transition: gap var(--transition-base);
}

.featured-link:hover {
    gap: var(--spacing-sm);
}

.featured-link svg {
    width: 14px;
    height: 14px;
}

/* ============================================
   DROPDOWN (Small)
   ============================================ */

.has-dropdown .dropdown-menu {
    min-width: 200px;
    left: 0;
    right: auto;
    transform: translateY(-10px);
}

.has-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ============================================
   NAV ACTIONS
   ============================================ */

/* Navigation action buttons (search, cart, wishlist)
   Z-index layer 2: Above nav and overlays */
.nav-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    position: relative;
    z-index: calc(var(--z-fixed) + 2); /* Layer 2: Above nav (1002) */
}

.nav-action-btn {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-full);
    color: var(--color-gray-700);
    transition: background-color var(--transition-base), color var(--transition-base), transform var(--transition-base);
    cursor: pointer;
}

/* Action button hover state
   scale(1.05) = 5% larger, provides tactile feedback
   Combined with color change for multi-sensory feedback */
.nav-action-btn:hover {
    background: var(--color-gray-100);
    color: var(--color-primary);
    transform: scale(1.05); /* GPU-accelerated scaling */
}

.nav-action-btn:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.nav-action-btn svg {
    width: 20px;
    height: 20px;
}

.action-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 0.625rem;
    font-weight: 700;
    border-radius: var(--radius-full);
    padding: 0 4px;
    border: 2px solid var(--color-white);
}

/* Animated cart badge to draw attention
   2s duration prevents distraction, infinite loop */
.cart-btn .action-badge {
    animation: pulse 2s infinite;
}

/* Pulse animation for cart badge - GPU-accelerated transform
   Uses transform instead of width/height for better performance */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* ============================================
   MOBILE TOGGLE
   ============================================ */

/* Mobile hamburger menu toggle
   Z-index layer 3: Highest in nav hierarchy (always clickable) */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
    z-index: calc(var(--z-fixed) + 3); /* Layer 3: Highest nav element (1003) */
    position: relative;
}

/* Hamburger menu lines - animated into X icon when active
   Uses transform for smooth GPU-accelerated animation */
.hamburger-line {
    width: 100%;
    height: 2px;
    background: var(--color-gray-700);
    border-radius: 2px;
    transition: all var(--transition-base);
}

/* Hamburger to X transformation
   Line 1: Rotates 45deg and moves down to form top part of X
   Line 2: Fades out (middle line disappears)
   Line 3: Rotates -45deg and moves up to form bottom part of X */
.nav-toggle.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translateY(10px);
}

.nav-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0; /* Hide middle line */
}

.nav-toggle.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translateY(-10px);
}

/* ============================================
   SEARCH OVERLAY
   ============================================ */

/* Search modal overlay - covers entire screen
   Z-index layer 10: Above all navigation elements */
.search-overlay {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--color-black) 60%, transparent);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: calc(var(--z-fixed) + 10); /* Layer 10: Modal level (1010) */
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
}

.search-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Search modal container - centered with comfortable reading width
   Max-width: 720px optimal line length for search results */
.search-container {
    max-width: 720px; /* 45-75 characters per line for readability */
    margin: 0 auto;
    padding: var(--spacing-4xl) var(--spacing-lg);
    animation: slideDown 0.4s ease-out; /* 400ms entrance animation */
}

/* Slide down animation for search modal entrance
   Distance: 50px creates noticeable but smooth motion */
@keyframes slideDown {
    from {
        transform: translateY(-50px); /* Start 50px above final position */
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.search-header {
    background: var(--color-white);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-2xl);
    margin-bottom: var(--spacing-xl);
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input-wrapper > svg:first-child {
    position: absolute;
    left: var(--spacing-lg);
    width: 24px;
    height: 24px;
    color: var(--color-gray-400);
}

.search-input {
    flex: 1;
    padding: var(--spacing-md) var(--spacing-3xl);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    font-size: var(--font-size-lg);
    font-family: var(--font-sans);
    transition: all var(--transition-base);
}

.search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.search-close {
    position: absolute;
    right: var(--spacing-md);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gray-100);
    border-radius: var(--radius-full);
    color: var(--color-gray-600);
    transition: background-color var(--transition-base), color var(--transition-base);
    cursor: pointer;
}

.search-close:hover {
    background: var(--color-gray-200);
    color: var(--color-gray-900);
}

.search-close:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.search-content {
    background: var(--color-white);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-xl);
}

.search-label {
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-md);
}

.search-suggestions {
    margin-bottom: var(--spacing-2xl);
}

.search-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.search-tag {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-gray-100);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
    font-weight: 500;
    transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
    cursor: pointer;
}

/* Search tag hover with lift effect
   translateY(-2px) creates illusion of tag lifting off surface
   Combined with color inversion for clear interactive feedback */
.search-tag:hover {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
    transform: translateY(-2px); /* Lift effect */
}

.category-quick-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
}

.category-quick-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    background: var(--color-gray-50);
    border-radius: var(--radius-xl);
    color: var(--color-gray-700);
    transition: background-color var(--transition-base), color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}

/* Category card hover with elevated lift
   translateY(-4px) = larger lift than tags for more prominent effect
   Shadow increases to enhance depth perception */
.category-quick-link:hover {
    background: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-4px); /* Elevated lift effect */
    box-shadow: var(--shadow-lg); /* Enhanced shadow for depth */
}

.category-quick-link svg {
    width: 32px;
    height: 32px;
}

.category-quick-link span {
    font-size: var(--font-size-sm);
    font-weight: 600;
}

/* ============================================
   MINI CART SIDEBAR
   ============================================ */

/* Mini cart sidebar - slides in from right
   Width: 420px optimal for cart items with images
   Z-index layer 5: Above navigation, below modals */
.mini-cart {
    position: fixed;
    top: 0;
    right: -420px; /* Hidden off-screen initially (matches width) */
    width: 420px; /* Optimal width for product cards with thumbnails */
    height: 100vh;
    background: var(--color-white);
    box-shadow: -4px 0 20px color-mix(in srgb, var(--color-black) 10%, transparent);
    z-index: calc(var(--z-fixed) + 5); /* Layer 5: Sidebar level (1005) */
    transition: right var(--transition-base);
    display: flex;
    flex-direction: column;
}

.mini-cart.active {
    right: 0;
}

.mini-cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-xl);
    border-bottom: 1px solid var(--color-gray-200);
}

.mini-cart-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-gray-900);
}

.mini-cart-title svg {
    width: 24px;
    height: 24px;
    color: var(--color-primary);
}

.mini-cart-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gray-100);
    border-radius: var(--radius-full);
    color: var(--color-gray-600);
    transition: background-color var(--transition-base), transform var(--transition-base);
    cursor: pointer;
}

/* Cart close button with rotate animation
   90deg rotation provides playful feedback on hover
   Indicates interactivity and draws attention to close function */
.mini-cart-close:hover {
    background: var(--color-gray-200);
    transform: rotate(90deg); /* Rotate X icon */
}

.mini-cart-close:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.mini-cart-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-xl);
}

.mini-cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--spacing-3xl) var(--spacing-xl);
}

.empty-icon {
    width: 80px;
    height: 80px;
    color: var(--color-gray-300);
    margin-bottom: var(--spacing-lg);
}

.empty-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-sm);
}

.empty-text {
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-xl);
}

.mini-cart-footer {
    padding: var(--spacing-xl);
    border-top: 1px solid var(--color-gray-200);
}

.mini-cart-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-md);
}

.total-amount {
    color: var(--color-primary);
    font-size: var(--font-size-2xl);
}

.shipping-note {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-lg);
}

.shipping-note svg {
    width: 16px;
    height: 16px;
}

.mini-cart-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.btn-block {
    width: 100%;
    justify-content: center;
}

/* ============================================
   OVERLAY
   ============================================ */

/* Navigation backdrop overlay - appears behind mobile nav menu
   Z-index layer -1: Below navigation (999) */
.nav-overlay {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--color-black) 50%, transparent);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: calc(var(--z-fixed) - 1); /* Layer -1: Behind nav (999) */
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
}

.nav-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ============================================
   RESPONSIVE - NAV
   ============================================ */

/* Breakpoint: 1200px - Large tablets and small desktops
   Adjust mega menu to 3 columns, featured card spans full width */
@media (max-width: 1200px) {
    .mega-menu-content {
        grid-template-columns: 1fr 1fr 1fr; /* 3 columns instead of 4 */
    }

    .mega-menu-featured {
        grid-column: 1 / -1; /* Full width featured card */
    }

    .featured-card {
        display: flex;
        align-items: center;
        gap: var(--spacing-xl);
        text-align: left; /* Horizontal layout instead of vertical */
    }

    .featured-image {
        margin: 0;
    }
}

/* Breakpoint: 1024px - Tablets (landscape)
   Compact navigation, reduce mega menu to 2 columns */
@media (max-width: 1024px) {
    .nav-menu {
        gap: var(--spacing-sm); /* Tighter spacing for compact nav */
    }

    .nav-link {
        font-size: var(--font-size-sm);
        padding: var(--spacing-xs) var(--spacing-sm); /* Smaller touch targets for tablet */
    }

    .mega-menu {
        min-width: 600px; /* Narrower mega menu for tablet screens */
    }

    .mega-menu-content {
        grid-template-columns: 1fr 1fr; /* 2 columns layout */
    }
}

/* Breakpoint: 968px - Tablets (portrait)
   Hide less important top bar items to prevent overflow */
@media (max-width: 968px) {
    .top-bar-left .top-bar-item:last-child,
    .top-bar-divider {
        display: none; /* Remove secondary info to save space */
    }
}

/* Breakpoint: 768px - Mobile devices
   Major layout change: hamburger menu, hide top bar, full-height sidebar navigation */
@media (max-width: 768px) {
    /* Hide top bar completely on mobile to maximize screen real estate */
    .top-bar {
        display: none;
    }

    .header {
        top: 0; /* Header moves to top since top bar is hidden */
    }

    /* Mobile Navigation - Show hamburger toggle */
    .nav-toggle {
        display: flex;
    }

    /* Mobile navigation sidebar - slides in from right
       Width: 85% with max 380px for comfortable single-hand use */
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%; /* Hidden off-screen initially */
        width: 85%; /* 85% allows user to see page behind and tap to close */
        max-width: 380px; /* Optimal width for thumb reach on mobile */
        height: 100vh;
        background: var(--color-white);
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: var(--spacing-4xl) var(--spacing-xl);
        box-shadow: -4px 0 20px color-mix(in srgb, var(--color-black) 10%, transparent);
        transition: right var(--transition-base);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* iOS smooth scroll momentum */
        z-index: var(--z-dropdown); /* Layer: Mobile menu (above content, below modals) */
    }

    .nav-menu.active {
        right: 0;
    }

    .nav-item {
        width: 100%;
    }

    .nav-link {
        width: 100%;
        padding: var(--spacing-md);
        justify-content: space-between;
        min-height: 44px; /* WCAG touch target */
        align-items: center;
        font-weight: 600; /* ENTERPRISE FIX: Establish visual hierarchy - L1 (parent nav) heavier than L2 (accordion) */
    }

    /* Mobile: Chevron rotation controlled by .active class
       Desktop uses :hover, mobile uses JavaScript-toggled .active class
       This prevents hover conflicts on touch devices */
    .nav-item.active .nav-chevron {
        transform: rotate(180deg); /* Point up when expanded */
    }

    /* CRITICAL: Disable desktop hover chevron rotation on mobile
       Prevents double-rotation and conflicting states */
    .nav-item:hover .nav-chevron {
        transform: none; /* Override desktop hover behavior */
    }

    /* ===== MOBILE MEGA MENU - ACCORDION PATTERN ===== */

    /* CRITICAL: Disable desktop hover behavior on mobile
       Without this, hover would conflict with click/tap accordion behavior
       pointer-events: none prevents accidental hover triggers on mobile */
    .has-mega-menu:hover .mega-menu {
        opacity: 0;
        visibility: hidden;
        max-height: 0;
        pointer-events: none;
        transform: none; /* CRITICAL FIX: Override desktop translateX(-50%) that was shifting content left */
        transition: none; /* Prevent animation glitches */
    }

    /* Mobile accordion collapsed state (default)
       Uses max-height transition instead of display for smooth animation
       Why max-height?: display: none cannot be animated
       overflow: hidden clips content during transition
       PERFORMANCE: Synchronized transitions prevent flicker */
    .has-mega-menu .mega-menu {
        position: static; /* Remove fixed positioning for mobile */
        width: 100%;
        min-width: auto;
        max-width: none;
        transform: none; /* Remove desktop transforms */
        left: auto;
        top: auto;
        box-shadow: none; /* No shadow in mobile accordion */
        border: none;
        border-radius: 0;
        padding: 0; /* No padding when collapsed */
        margin-top: 0;
        max-height: 0; /* Collapsed: height of 0 */
        overflow: hidden; /* Hide overflowing content during animation */
        opacity: 0;
        visibility: hidden;
        /* GPU acceleration hint for smooth animation */
        will-change: max-height, opacity;
        /* Synchronized transitions: same duration prevents flicker
           Only animate max-height and opacity (padding causes reflow) */
        transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Mobile accordion expanded state
       Triggered by .active class (JavaScript toggles on tap)
       PATTERN 1: Uses nested accordions, so no hardcoded max-height needed
       Container adapts to accordion content height dynamically
       PERFORMANCE: visibility changes instantly, no transition needed */
    .has-mega-menu.active .mega-menu {
        max-height: none; /* ENTERPRISE FIX: No hardcoded height - adapts to nested accordion content */
        padding: var(--spacing-md);
        background: var(--color-gray-50); /* Subtle background to distinguish from parent */
        border-radius: var(--radius-lg);
        margin-bottom: var(--spacing-sm);
        opacity: 1; /* Fully visible */
        visibility: visible; /* Make interactive - changes instantly */
        overflow: visible; /* FIX: Allow nested accordion content to expand fully without clipping */
        transform: none; /* CRITICAL FIX: Ensure no desktop transforms apply (translateX, etc.) */
        pointer-events: auto; /* CRITICAL FIX: Restore click functionality - overrides hover state pointer-events: none */
        will-change: auto; /* Remove GPU hint when expanded to save memory */
    }

    /* Mobile Regular Dropdowns - Accordion Style
       Same optimization as mega menu for consistency */

    /* CRITICAL: Disable desktop hover behavior on mobile for dropdowns
       Without this, hover would conflict with click/tap accordion behavior */
    .has-dropdown:hover .dropdown-menu {
        opacity: 0;
        visibility: hidden;
        max-height: 0;
        pointer-events: none;
        transition: none; /* Prevent animation glitches */
    }

    .has-dropdown .dropdown-menu {
        position: static;
        width: 100%;
        min-width: auto;
        left: auto;
        transform: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding: 0;
        margin-top: var(--spacing-sm);
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        /* GPU acceleration for smooth animation */
        will-change: max-height, opacity;
        /* Synchronized transitions prevent flicker */
        transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Mobile dropdown expanded state
       max-height: 500px sufficient for ~8-10 dropdown items */
    .has-dropdown.active .dropdown-menu {
        max-height: 500px; /* Accommodates ~8-10 menu items */
        padding: var(--spacing-md);
        background: var(--color-gray-50);
        border-radius: var(--radius-lg);
        margin-bottom: var(--spacing-md);
        opacity: 1;
        visibility: visible;
        will-change: auto; /* Release GPU resources when open */
    }

    .has-dropdown .dropdown-item {
        min-height: 44px; /* WCAG touch target */
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .mega-menu-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);  /* Más compacto */
        padding: var(--spacing-sm);  /* FIX: Add padding to prevent flush-left appearance */
    }

    /* ===== OPTIMIZACIONES MEGA MENU MÓVIL ===== */

    /* Ocultar featured card en mobile (exclusivo para desktop) */
    .mega-menu-featured {
        display: none;
    }

    /* ===== PATTERN 1: NESTED ACCORDION ===== */
    /* Each section (Por Categoría, Por Precio, Colecciones) is an independent accordion
       Only one section open at a time for better UX on small screens
       No hardcoded max-height - uses dynamic height calculation */

    /* Accordion item (each section) */
    .mega-menu-section.accordion-item {
        margin-bottom: var(--spacing-sm);
        border: 1px solid var(--color-gray-200);
        border-radius: var(--radius-lg);
        background: var(--color-white);
        overflow: hidden;
    }

    .mega-menu-section.accordion-item:last-child {
        margin-bottom: 0;
    }

    /* Accordion toggle button (section title) */
    .mega-menu-title.accordion-toggle {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--spacing-md);
        background: transparent;
        border: none;
        border-bottom: none; /* Remove old border */
        font-size: 12px; /* ENTERPRISE FIX: L2 hierarchy - 2px smaller than parent (14px) for clear distinction */
        font-weight: 500; /* CRITICAL FIX: Medium weight (500) < parent nav weight (600) for visual hierarchy */
        color: var(--color-gray-900);
        text-align: left;
        cursor: pointer;
        transition: background-color 0.3s ease, color 0.3s ease;
        min-height: 44px; /* WCAG touch target */
        text-transform: none; /* ENTERPRISE FIX: Reset desktop uppercase to appear smaller than parent */
        letter-spacing: normal; /* ENTERPRISE FIX: Reset desktop letter-spacing for visual hierarchy */
    }

    .mega-menu-title.accordion-toggle:hover {
        background: var(--color-gray-50);
        color: var(--color-primary);
    }

    .mega-menu-title.accordion-toggle:focus {
        outline: 2px solid var(--color-primary);
        outline-offset: -2px;
    }

    /* Accordion chevron icon */
    .accordion-chevron {
        width: 14px;  /* ENTERPRISE FIX: Match parent nav chevron size (design system consistency) */
        height: 14px; /* ENTERPRISE FIX: Align with small icon standard (line 23) */
        flex-shrink: 0;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        color: var(--color-gray-600);
    }

    /* Rotate chevron when section is expanded */
    .accordion-item.active .accordion-chevron {
        transform: rotate(180deg);
        color: var(--color-primary);
    }

    /* Accordion content wrapper (collapsed by default) */
    .accordion-content {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Expanded state - content visible */
    .accordion-item.active .accordion-content {
        max-height: none; /* FIXED: Removed 500px limit to show all content */
        opacity: 1;
        overflow: visible; /* FIXED: Prevent any clipping of nested content */
    }

    /* Lista dentro del accordion */
    .accordion-content .mega-menu-list {
        padding: 0 var(--spacing-md) var(--spacing-md) var(--spacing-md);
        gap: 2px;
    }

    /* Links con touch targets adecuados */
    .mega-menu-link {
        padding: var(--spacing-sm) var(--spacing-md);
        min-height: 44px; /* WCAG touch target */
        font-size: var(--font-size-xs); /* ENTERPRISE FIX: L3 hierarchy - 12px (smallest level, still WCAG compliant) */
        font-weight: 500; /* ENTERPRISE FIX: Medium weight for readability at smaller size */
        display: flex;
        align-items: center;
        border-radius: var(--radius-md);
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    .mega-menu-link:hover {
        background: var(--color-gray-100);
        color: var(--color-primary);
    }

    /* Iconos en links */
    .mega-menu-link svg {
        width: 18px;
        height: 18px;
        margin-right: var(--spacing-xs);
        flex-shrink: 0;
    }

    .brand-tagline {
        display: none;
    }

    .nav-actions .nav-action-btn:nth-child(2) {
        display: none; /* Hide wishlist on mobile */
    }

    /* MOBILE FIX: WCAG 2.1 AA - Touch targets minimum 44x44px for all mobile devices */
    .nav-action-btn {
        width: 44px;
        height: 44px;
    }

    .nav-toggle {
        width: 44px;
        height: 44px;
    }

    /* Mobile Mini Cart */
    .mini-cart {
        width: 100%;
        right: -100%;
    }

    /* Mobile Search */
    .search-container {
        padding: var(--spacing-xl) var(--spacing-md);
    }

    .category-quick-links {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Breakpoint: 480px - Small mobile devices
   Further optimizations for very small screens (iPhone SE, etc.) */
@media (max-width: 480px) {
    .nav-actions {
        gap: 0; /* Remove gap to fit all buttons */
    }

    /* WCAG 2.1 AA - Touch targets minimum 44x44px
       Increased from 40px to meet accessibility standards */
    .nav-action-btn {
        width: 44px; /* WCAG 2.1 AA minimum */
        height: 44px;
    }

    .nav-toggle {
        width: 44px; /* WCAG 2.1 AA minimum */
        height: 44px;
    }

    .logo-icon {
        width: 36px; /* Slightly smaller logo for space */
        height: 36px;
    }

    .brand-name {
        font-size: 1.125rem; /* Smaller brand text */
    }

    .category-quick-links {
        grid-template-columns: 1fr; /* Single column on very small screens */
    }
}