/* ==========================================================================
   MOBILE NAVIGATION STYLES - MOBILE ONLY
   ========================================================================== */

/* ==========================================================================
   MOBILE SIDEBAR NAVIGATION
   ========================================================================== */

/* OLD SIDEBAR SYSTEM DISABLED - Using overlay system instead */
@media (max-width: 1230px) {
    /* DISABLED: Old sidebar transformation system */
    /* All sidebar-active rules have been moved to overlay system */
  }
  
/* ==========================================================================
   MOBILE SIDEBAR MENU
   ========================================================================== */

@media (max-width: 1230px) {
    /* Sidebar menu section */
    .sidebar-menu-section {
  display: none !important;
        width: 100% !important;
        padding: 20px 0 !important;
  }
  
    /* DISABLED: Show sidebar menu only when sidebar is active */
    /* Now using overlay system instead */
  
    /* Sidebar menu title */
    .sidebar-menu-title {
        color: white !important;
        font-family: 'Playfair Display', serif !important;
        font-size: 1.5rem !important;
        font-weight: 700 !important;
        margin-bottom: 20px !important;
        text-align: center !important;
  }
  
    /* Sidebar menu links */
    .sidebar-menu-links {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
        width: 100% !important;
  }
  
    .sidebar-menu-links li {
        margin-bottom: 15px !important;
        width: 100% !important;
  }
  
    .sidebar-menu-links a {
    display: flex !important;
    align-items: center !important;
        padding: 15px 20px !important;
    text-decoration: none !important;
        border-radius: 8px !important;
        transition: all 0.3s ease !important;
        font-size: 1.1rem !important;
        font-weight: 500 !important;
    width: 100% !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
  
    .sidebar-menu-links a:hover {
        background: rgba(255, 255, 255, 0.15) !important;
        transform: translateX(5px) !important;
        border-color: rgba(255, 255, 255, 0.3) !important;
  }
  
    .sidebar-menu-links i {
        margin-right: 15px !important;
    width: 20px !important;
    text-align: center !important;
        font-size: 1.2rem !important;
  }

    /* Close button */
    #close-sidebar-button {
    display: none !important;
        background: transparent !important;
        border: none !important;
        color: white !important;
        font-size: 1.5rem !important;
        cursor: pointer !important;
    position: absolute !important;
        top: 15px !important;
        right: 20px !important;
        z-index: 10001 !important;
        width: 40px !important;
        height: 40px !important;
        align-items: center !important;
    justify-content: center !important;
        border-radius: 50% !important;
        transition: background-color 0.3s ease !important;
  }
  
    /* DISABLED: Close button handled by overlay system */
    /* body.sidebar-active #close-sidebar-button disabled */

    #close-sidebar-button:hover {
        background: rgba(255, 255, 255, 0.1) !important;
}
}

/* ==========================================================================
   MOBILE BOTTOM NAVIGATION
   ========================================================================== */

@media (max-width: 1230px) {
    /* Bottom navigation bar */
  .mobile-bottom-nav {
    display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 60px !important;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        z-index: 99999 !important;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1) !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 15px !important;
        transition: transform 0.3s ease, opacity 0.3s ease !important;
  }
  
    /* DISABLED: Hide bottom nav when sidebar is open */
    /* Now handled by JavaScript in hamburger-animation.js */

    /* Bottom nav items */
  .mobile-bottom-nav-item {
    display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 !important;
        text-decoration: none !important;
        color: #666 !important;
        font-size: 0.7rem !important;
        padding: 8px 0 !important;
                        transition: none !important;
        position: relative !important;
        font-family: 'Libre Baskerville', serif !important;
    }
    
    /* Ensure buttons in mobile nav use same font as links */
    .mobile-bottom-nav-item.macro-panel-trigger-mobile,
    button.mobile-bottom-nav-item {
        font-family: 'Libre Baskerville', serif !important;
        font-weight: 400 !important;
        text-transform: none !important;
    }
    
    /* Ultra-specific selector for the Macros button to override global button styles */
    .mobile-bottom-nav button#openMacroPanelMobile.mobile-bottom-nav-item.macro-panel-trigger-mobile,
    .mobile-bottom-nav #openMacroPanelMobile.mobile-bottom-nav-item,
    button#openMacroPanelMobile.macro-panel-trigger-mobile,
    #openMacroPanelMobile {
        font-family: 'Libre Baskerville', serif !important;
        font-weight: 400 !important;
    }
    
    /* Force span text inside macro button to use correct font */
    .mobile-bottom-nav button#openMacroPanelMobile span,
    #openMacroPanelMobile span {
        font-family: 'Libre Baskerville', serif !important;
        font-weight: 400 !important;
    }
    
    /* Target ALL span text labels in bottom navigation for consistency */
    .mobile-bottom-nav .mobile-bottom-nav-item span,
    .mobile-bottom-nav-item span,
    .mobile-bottom-nav span {
        font-family: 'Libre Baskerville', serif !important;
        font-weight: 400 !important;
        font-size: 0.7rem !important;
        text-transform: none !important;
        letter-spacing: normal !important; /* Fix spacing issue on Macros */
    }

    /* Nuclear option: Target spans by content (excluding badges) */
    .mobile-bottom-nav span:not(.cart-count):not(.wishlist-count) {
        font-family: 'Libre Baskerville', serif !important;
        font-weight: 400 !important;
        text-transform: none !important;
        letter-spacing: normal !important; /* Fix spacing issue on Macros */
    }

    /* Apply consistent styling to ALL mobile bottom nav items */
    .mobile-bottom-nav-item {
        font-family: 'Libre Baskerville', serif !important;
        font-weight: 400 !important;
        text-transform: none !important;
        font-size: 0.7rem !important;
        letter-spacing: normal !important; /* Fix spacing issue on Macros */
    }

    /* Ensure buttons in mobile nav use same font as links */
    .mobile-bottom-nav-item.macro-panel-trigger-mobile,
    button.mobile-bottom-nav-item {
        font-family: 'Libre Baskerville', serif !important;
        font-weight: 400 !important;
        text-transform: none !important;
        letter-spacing: normal !important; /* Fix spacing issue on Macros */
    }

    /* Specific fix for Macros button letter-spacing */
    .macro-panel-trigger-mobile,
    .macro-panel-trigger-mobile span,
    button.macro-panel-trigger-mobile,
    button.macro-panel-trigger-mobile span,
    #openMacroPanelMobile,
    #openMacroPanelMobile span {
        letter-spacing: normal !important;
        word-spacing: normal !important;
    }

    /* Remove box hover effects from ALL mobile bottom nav items */
    .mobile-bottom-nav-item:hover,
    .mobile-bottom-nav a:hover,
    .mobile-bottom-nav button:hover {
        background: rgba(255, 255, 255, 0.15) !important;
        background-color: rgba(255, 255, 255, 0.15) !important;
        border-radius: 0 !important; /* Remove box appearance */
        box-shadow: none !important; /* Remove shadow effects */
        border: none !important;
        transform: none !important;
        transition: none !important;
    }
    
    .mobile-bottom-nav-item i {
        font-size: 1.2rem !important;
        margin-bottom: 4px !important;
        transition: none !important;
    }

    /* HOVER EFFECTS REMOVED per user request - no animations on mobile nav items */
  
  .mobile-bottom-nav-item.active {
        color: #7C0A02 !important;
  }

    .mobile-bottom-nav-item .cart-count.hidden,
    .mobile-bottom-nav-item .wishlist-count.hidden {
    display: none !important;
    }
    
    /* Enhanced luxury styling for mobile bottom nav badges */
    .mobile-bottom-nav-item .cart-count,
    .mobile-bottom-nav-item .wishlist-count {
        /* Override unified styles for mobile bottom nav specific positioning */
        position: absolute !important;
        top: -8px !important; /* Higher for better visibility */
        right: 8px !important; /* Moved closer to icon center */
        background: linear-gradient(135deg, #7C0A02 0%, #5a0701 100%) !important;
        color: #d4af37 !important;
        border: 1px solid rgba(212, 175, 55, 0.4) !important;
        border-radius: 0 !important;
        font-family: 'Playfair Display', serif !important;
        font-weight: 700 !important;
        font-size: 0.7rem !important;
        line-height: 1 !important;
        padding: 3px 6px !important;
        min-width: 18px !important;
        min-height: 16px !important;
    display: flex !important;
    align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 15px rgba(124, 10, 2, 0.3), inset 0 1px 0 rgba(212, 175, 55, 0.2) !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7) !important;
        backdrop-filter: blur(15px) !important;
        z-index: 10 !important;
        pointer-events: none !important;
        transition: none !important;
        letter-spacing: 0.5px !important;
    }
    
    /* NUCLEAR REMOVAL: All hover effects disabled on mobile navigation */
    .mobile-bottom-nav-item:hover,
    .mobile-bottom-nav-item:hover i,
    .mobile-bottom-nav-item:hover .cart-count,
    .mobile-bottom-nav-item:hover .wishlist-count,
    .mobile-bottom-nav-item .cart-count:hover,
    .mobile-bottom-nav-item .wishlist-count:hover,
    .mobile-bottom-nav-item:active,
    .mobile-bottom-nav-item:active i,
    .mobile-bottom-nav-item:active .cart-count,
    .mobile-bottom-nav-item:active .wishlist-count,
    .mobile-bottom-nav-item:focus,
    .mobile-bottom-nav-item:focus i,
    .mobile-bottom-nav-item:focus .cart-count,
    .mobile-bottom-nav-item:focus .wishlist-count {
        transform: none !important;
        transition: none !important;
        background: inherit !important;
        color: inherit !important;
        border: inherit !important;
        box-shadow: inherit !important;
        filter: none !important;
        opacity: inherit !important;
    }
    
    /* ULTRA NUCLEAR: Remove all transitions from mobile nav items and children */
    .mobile-bottom-nav-item,
    .mobile-bottom-nav-item *,
    .mobile-bottom-nav-item i,
    .mobile-bottom-nav-item .cart-count,
    .mobile-bottom-nav-item .wishlist-count {
        transition: none !important;
        -webkit-transition: none !important;
        -moz-transition: none !important;
        -o-transition: none !important;
    }
    
    /* FORCE SPECIFIC HOVER/ACTIVE BEHAVIOR: Icons turn primary color, counts stay same */
    .mobile-bottom-nav-item:hover i,
    .mobile-bottom-nav-item:active i,
    .mobile-bottom-nav-item:focus i {
        color: var(--primary-color) !important;
    }
    
    .mobile-bottom-nav-item:hover .cart-count,
    .mobile-bottom-nav-item:active .cart-count,
    .mobile-bottom-nav-item:focus .cart-count,
    .mobile-bottom-nav-item:hover .wishlist-count,
    .mobile-bottom-nav-item:active .wishlist-count,
    .mobile-bottom-nav-item:focus .wishlist-count {
        background: linear-gradient(135deg, #7C0A02 0%, #5a0701 100%) !important;
        color: #d4af37 !important;
        border: 1px solid rgba(212, 175, 55, 0.4) !important;
    }
  
    /* Hide bottom nav when filters are active */
    .mobile-filters-visible ~ .mobile-bottom-nav,
    body:has(.mobile-filters-visible) .mobile-bottom-nav,
    .mobile-bottom-nav.filter-hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    }
    
    /* Adjust main content for bottom nav */
    main {
        margin-bottom: 60px !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
}

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

@media (max-width: 1230px) {
    /* Search overlay - hidden by default */
  .mobile-search-overlay {
    display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: white !important;
        z-index: 10000 !important;
        flex-direction: column !important;
        transition: transform 0.3s ease-in-out !important;
        transform: translateY(-100%) !important;
    opacity: 0 !important;
        visibility: hidden !important;
  }
  
    /* Active search overlay */
  .mobile-search-overlay.active {
    display: flex !important;
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
    /* Search header - Removed gold gradient */
  .mobile-search-header {
    display: flex !important;
    align-items: center !important;
        padding: 20px 25px !important;
        border-bottom: 2px solid rgba(0, 0, 0, 0.1) !important;
        background: linear-gradient(135deg, #7C0A02 0%, #5a0701 100%) !important; /* Pure burgundy gradient */
        position: sticky !important;
        top: 0 !important;
        z-index: 10001 !important;
        box-shadow: 0 4px 15px rgba(124, 10, 2, 0.3) !important;
  }
  
    /* Search back button - removed hover effects */
  .mobile-search-back {
        background: transparent !important;
        border: none !important;
    color: white !important;
        font-size: 1.2rem !important;
        padding: 10px !important;
        margin-right: 10px !important;
        cursor: pointer !important;
        border-radius: 0 !important; /* Remove circular appearance */
        transition: none !important; /* Remove all transitions */
    }

    /* Removed hover effect per user request */
  
    /* Search input - Fixed width to prevent icon overflow - NUCLEAR OVERRIDE */
  .mobile-search-overlay .mobile-search-input,
  .mobile-search-header .mobile-search-input,
  input.mobile-search-input {
        flex: 1 !important;
        max-width: 70% !important; /* Increased from 60% to fit better */
        min-width: 200px !important; /* Override global.css min-width */
        width: auto !important; /* Override global.css width */
        border: 3px solid rgba(212, 175, 55, 0.5) !important;
        background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(255, 255, 255, 0.2)) !important;
        color: white !important;
        padding: 12px 15px !important; /* Slightly reduced padding */
        border-radius: 25px !important;
        font-size: 14px !important; /* Smaller font for better fit */
        font-family: 'Playfair Display', serif !important;
        font-weight: 500 !important;
        outline: none !important;
        transition: none !important;
        box-shadow: inset 0 3px 12px rgba(0, 0, 0, 0.2), 0 4px 15px rgba(212, 175, 55, 0.2) !important;
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
        letter-spacing: 0.3px !important; /* Further reduced letter spacing */
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  }
  
  .mobile-search-overlay .mobile-search-input:focus,
  .mobile-search-header .mobile-search-input:focus,
  input.mobile-search-input:focus {
        background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(255, 255, 255, 0.2)) !important;
        border-color: rgba(212, 175, 55, 0.6) !important;
        box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2), 0 0 20px rgba(212, 175, 55, 0.3) !important;
        transform: none !important;
        transition: none !important;
    }

    .mobile-search-input::placeholder {
        color: rgba(255, 255, 255, 0.7) !important;
  }
  
    /* Search submit button - removed hover effects */
  .mobile-search-submit {
        background: transparent !important;
        border: none !important;
    color: white !important;
        font-size: 1.2rem !important;
        padding: 10px !important;
        margin-left: 10px !important;
        cursor: pointer !important;
        border-radius: 0 !important; /* Remove circular appearance */
        transition: none !important; /* Remove all transitions */
    }

    /* Removed hover effect per user request */
  
    /* Search results - Luxury container - UPDATED VERSION */
  .mobile-search-results {
        flex: 1 !important;
        overflow-y: auto !important;
        padding: 35px 30px !important; /* Increased padding */
        -webkit-overflow-scrolling: touch !important;
        background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 50%, #eeeeee 100%) !important; /* More distinct gradient */
        position: relative !important;
        border-top: 4px solid rgba(212, 175, 55, 0.3) !important; /* Distinctive border */
  }
  
    /* Add luxury backdrop pattern */
  .mobile-search-results::before {
        content: '' !important;
    position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="luxury-dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="%23d4af37" opacity="0.05"/></pattern></defs><rect width="100" height="100" fill="url(%23luxury-dots)"/></svg>') repeat !important;
    pointer-events: none !important;
        z-index: 1 !important;
  }
  
    /* Luxury Search Result Item */
    .mobile-search-result {
    display: flex !important;
        align-items: center !important;
        padding: 18px 16px !important;
        margin: 6px 0 !important;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(252, 250, 245, 0.95)) !important;
        border: 2px solid rgba(212, 175, 55, 0.2) !important;
        border-radius: 14px !important;
        text-decoration: none !important;
        color: #2C2C2C !important;
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
        position: relative !important;
        z-index: 2 !important;
        overflow: hidden !important;
        box-shadow: 0 6px 20px rgba(124, 10, 2, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
  }

    /* Alternative selector for JavaScript-generated results */
    .mobile-search-results .search-result,
    .mobile-search-results .search-item,
    .mobile-search-results a,
    .mobile-search-results .result-item {
    display: flex !important;
    align-items: center !important;
        padding: 18px 16px !important;
        margin: 6px 0 !important;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(252, 250, 245, 0.95)) !important;
        border: 2px solid rgba(212, 175, 55, 0.2) !important;
        border-radius: 14px !important;
        text-decoration: none !important;
        color: #2C2C2C !important;
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
        position: relative !important;
        z-index: 2 !important;
        overflow: hidden !important;
        box-shadow: 0 6px 20px rgba(124, 10, 2, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
    }
  
    /* Luxury shimmer effect on hover */
    .mobile-search-result::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: -100% !important;
        width: 100% !important;
        height: 100% !important;
        background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.15), transparent) !important;
        transition: left 0.6s ease !important;
        z-index: 1 !important;
    }
  
    .mobile-search-result:hover,
    .mobile-search-results .search-result:hover,
    .mobile-search-results .search-item:hover,
    .mobile-search-results a:hover,
    .mobile-search-results .result-item:hover {
        background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(252, 250, 245, 0.95)) !important;
        border-color: rgba(212, 175, 55, 0.4) !important;
        transform: translateY(-2px) scale(1.02) !important;
        box-shadow: 0 8px 25px rgba(124, 10, 2, 0.15), 0 4px 15px rgba(212, 175, 55, 0.2), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
    }
    
    .mobile-search-result:hover::before,
    .mobile-search-results .search-result:hover::before,
    .mobile-search-results .search-item:hover::before,
    .mobile-search-results a:hover::before,
    .mobile-search-results .result-item:hover::before {
        left: 100% !important;
    }

    .mobile-search-result:last-child {
        margin-bottom: 0 !important;
    }

    .mobile-search-result img,
    .mobile-search-results .search-result img,
    .mobile-search-results .search-item img,
    .mobile-search-results a img,
    .mobile-search-results .result-item img {
        width: 50px !important; /* Much smaller images */
        height: 50px !important;
        max-width: 50px !important; /* Force maximum size */
        max-height: 50px !important;
        object-fit: cover !important;
        border-radius: 8px !important;
        margin-right: 12px !important;
        border: 1px solid rgba(212, 175, 55, 0.2) !important;
        box-shadow: 0 2px 8px rgba(124, 10, 2, 0.1) !important;
        flex-shrink: 0 !important; /* Prevent image from shrinking */
        position: relative !important;
        z-index: 3 !important;
  }
  
    /* Removed hover image scaling per user request */
  
    .mobile-search-result-info {
        flex: 1 !important;
        position: relative !important;
        z-index: 3 !important;
  }
  
  .mobile-search-result-name {
        font-family: 'Playfair Display', serif !important;
        font-weight: 600 !important;
        font-size: 1.1rem !important;
        color: #2C2C2C !important;
        margin-bottom: 8px !important;
        line-height: 1.3 !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
        letter-spacing: 0.3px !important;
        transition: none !important;
  }
  
  .mobile-search-result:hover .mobile-search-result-name {
        color: #7C0A02 !important;
  }
  
  .mobile-search-result-price {
        font-family: 'Playfair Display', serif !important;
        color: #7C0A02 !important;
        font-weight: 700 !important;
        font-size: 1rem !important;
        text-shadow: 0 1px 3px rgba(124, 10, 2, 0.2) !important;
        background: linear-gradient(135deg, #7C0A02, #d4af37) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
        letter-spacing: 0.5px !important;
        position: relative !important;
  }
  
  /* Sale price styling for mobile search results */
  .mobile-search-result-price .original-price {
        color: #6c757d !important;
        text-decoration: line-through !important;
        font-size: 0.85rem !important;
        margin-right: 0.5rem !important;
        background: none !important;
        -webkit-text-fill-color: #6c757d !important;
        display: inline !important;
  }
  
  .mobile-search-result-price .sale-price {
        color: #e74c3c !important;
        font-weight: 700 !important;
        font-size: 1rem !important;
        background: none !important;
        -webkit-text-fill-color: #e74c3c !important;
        display: inline !important;
  }
  
    /* Search states */
    .mobile-search-loading {
        text-align: center !important;
        padding: 40px 20px !important;
        color: #666 !important;
        font-size: 1rem !important;
  }
  
    .mobile-search-empty {
        text-align: center !important;
        padding: 60px 20px !important;
        color: #666 !important;
    }

    .mobile-search-empty i {
        font-size: 3rem !important;
        margin-bottom: 15px !important;
        color: #ddd !important;
  }
  
    .mobile-search-empty h3 {
        margin-bottom: 10px !important;
        color: #666 !important;
        font-size: 1.2rem !important;
  }
  
    /* Search error styles */
  .mobile-search-error {
        color: #dc3545 !important;
        text-align: center !important;
        padding: 20px !important;
  }
  
  .mobile-search-error-btn {
        background: transparent !important;
        border: 2px solid #7C0A02 !important;
        color: #7C0A02 !important;
        padding: 8px 16px !important;
        border-radius: 6px !important;
        font-family: 'Playfair Display', serif !important;
        font-weight: 600 !important;
        font-size: 0.9rem !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        margin-top: 10px !important;
  }
  
  .mobile-search-error-btn:hover {
        background: #7C0A02 !important;
        color: white !important;
  }
  
    /* DISABLE ALL HOVER/ACTIVE/FOCUS EFFECTS ON SEARCH BUTTONS */
    .mobile-search-submit:hover,
    .mobile-search-back:hover,
    .mobile-search-submit:active,
    .mobile-search-back:active,
    .mobile-search-submit:focus,
    .mobile-search-back:focus,
    button.mobile-search-submit:hover,
    button.mobile-search-back:hover,
    body .mobile-search-submit:hover,
    body .mobile-search-back:hover,
    .mobile-search-overlay button:hover,
    .mobile-search-overlay button:active,
    .mobile-search-overlay button:focus {
        background: transparent !important;
        background-color: transparent !important;
        border-radius: 0 !important;
        transform: none !important;
        box-shadow: none !important;
        transition: none !important;
        border: none !important;
        outline: none !important;
        color: white !important;
    }
    
    /* Force all buttons in overlays to have no hover effects */
    .mobile-sidebar-overlay button:hover,
    .mobile-sidebar-overlay button:active,
    .mobile-sidebar-overlay button:focus,
    .mobile-search-overlay button:hover,
    .mobile-search-overlay button:active,
    .mobile-search-overlay button:focus {
        background: transparent !important;
        background-color: transparent !important;
        transform: none !important;
        box-shadow: none !important;
        filter: none !important;
        border-radius: 0 !important;
    }
    
    /* Nuclear option: Remove ALL button styling within overlays */
    body .mobile-search-overlay button,
    body .mobile-sidebar-overlay button,
    html body .mobile-search-overlay button,
    html body .mobile-sidebar-overlay button {
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        transition: none !important;
        box-shadow: none !important;
        transform: none !important;
        filter: none !important;
        outline: none !important;
    }
    
    /* And remove all pseudo-state effects */
    body .mobile-search-overlay button:hover,
    body .mobile-search-overlay button:active,
    body .mobile-search-overlay button:focus,
    body .mobile-sidebar-overlay button:hover,
    body .mobile-sidebar-overlay button:active,
    body .mobile-sidebar-overlay button:focus,
    html body .mobile-search-overlay button:hover,
    html body .mobile-search-overlay button:active,
    html body .mobile-search-overlay button:focus,
    html body .mobile-sidebar-overlay button:hover,
    html body .mobile-sidebar-overlay button:active,
    html body .mobile-sidebar-overlay button:focus {
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        transition: none !important;
        box-shadow: none !important;
        transform: none !important;
        filter: none !important;
        outline: none !important;
    }
    
    /* Hamburger hiding now handled by components/navigation.css with enhanced specificity */
}

/* ==========================================================================
   ULTIMATE FRESH MOBILE SIDEBAR OVERLAY - NO CONFLICTS POSSIBLE
   ========================================================================== */

/* Fixed: 2025-01-11 - Softened hamburger overlay background with elegant muted gradient
   Changed from harsh red (0.95/0.9 opacity) to softer tones (0.65-0.75 opacity)
   Reduces visual harshness while maintaining brand identity */

/* Base overlay - Softer burgundy gradient with elegant muted tones */
.mobile-sidebar-overlay,
#mobile-sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
    background: linear-gradient(135deg, 
        rgba(124, 10, 2, 0.75) 0%, 
        rgba(166, 38, 30, 0.65) 40%, 
        rgba(140, 25, 15, 0.7) 70%, 
        rgba(212, 175, 55, 0.25) 100%) !important;
    background-color: rgba(124, 10, 2, 0.8) !important;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    overflow: hidden;
    padding: 0;
    font-family: 'Libre Baskerville', serif;
}

/* NUCLEAR OVERRIDE: Softer burgundy gradient background with elegant depth */
html body .mobile-sidebar-overlay,
html body #mobile-sidebar-overlay,
html body div.mobile-sidebar-overlay,
html body div#mobile-sidebar-overlay {
    background: linear-gradient(135deg, 
        rgba(124, 10, 2, 0.75) 0%, 
        rgba(166, 38, 30, 0.65) 40%, 
        rgba(140, 25, 15, 0.7) 70%, 
        rgba(212, 175, 55, 0.25) 100%) !important;
    background-color: rgba(124, 10, 2, 0.8) !important;
}
  
/* ==========================================================================
   MOBILE RESPONSIVE ADJUSTMENTS
   ========================================================================== */

/* Mobile search see all button styling - Simple text color change to gold */
.mobile-search-see-all-btn,
.mobile-search-see-all {
    width: 100%;
    padding: 15px 20px;
    background: transparent !important;
    border: 2px solid #7C0A02 !important;
    border-top: 2px solid rgba(212, 175, 55, 0.3) !important;
    color: #7C0A02 !important;
    font-family: 'Playfair Display', serif !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    cursor: pointer !important;
    transition: color 0.3s ease !important;
    border-radius: 0 !important;
    margin-top: 5px !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Override the general overlay button rules with higher specificity */
html body .mobile-search-overlay .mobile-search-see-all-btn:hover,
html body .mobile-search-overlay .mobile-search-see-all:hover,
html body .mobile-search-overlay .mobile-search-see-all-btn:active,
html body .mobile-search-overlay .mobile-search-see-all:active,
html body .mobile-search-overlay .mobile-search-see-all-btn:focus,
html body .mobile-search-overlay .mobile-search-see-all:focus,
.mobile-search-overlay .mobile-search-see-all-btn:hover,
.mobile-search-overlay .mobile-search-see-all:hover,
.mobile-search-overlay .mobile-search-see-all-btn:active,
.mobile-search-overlay .mobile-search-see-all:active,
.mobile-search-overlay .mobile-search-see-all-btn:focus,
.mobile-search-overlay .mobile-search-see-all:focus {
    color: #d4af37 !important; /* Main gold color for text only */
    background: transparent !important;
    border-color: #7C0A02 !important;
}

.mobile-search-see-all-btn:hover,
.mobile-search-see-all:hover,
.mobile-search-see-all-btn:active,
.mobile-search-see-all:active,
.mobile-search-see-all-btn:focus,
.mobile-search-see-all:focus {
    color: #d4af37 !important; /* Main gold color for text only */
    background: transparent !important;
    border-color: #7C0A02 !important;
}

@media (max-width: 768px) {
    /* Smaller screens adjustments */
  .mobile-search-header {
        padding: 18px 20px !important;
  }
  
  .mobile-search-input {
        font-size: 13px !important;
        padding: 10px 12px !important;
        max-width: 65% !important; /* Increased from 55% for better fit */
        letter-spacing: 0.2px !important;
  }
  
  .mobile-search-results {
        padding: 25px 20px !important;
  }
  
    .mobile-search-result {
        padding: 16px 14px !important;
        margin: 6px 0 !important;
        border-radius: 12px !important;
  }
  
    .mobile-search-result img,
    .mobile-search-results img {
        width: 45px !important;
        height: 45px !important;
        max-width: 45px !important;
        max-height: 45px !important;
        margin-right: 12px !important;
  }
  
  .mobile-search-result-name {
        font-size: 1rem !important;
        margin-bottom: 6px !important;
  }
  
  .mobile-search-result-price {
        font-size: 0.95rem !important;
    }

    .sidebar-menu-links a {
        padding: 12px 15px !important;
        font-size: 1rem !important;
    }

    .sidebar-menu-links i {
        font-size: 1.1rem !important;
        margin-right: 12px !important;
    }
}

@media (max-width: 480px) {
    /* Very small screens */
    .mobile-search-header {
        padding: 15px 18px !important;
  }
  
    .mobile-search-input {
        font-size: 12px !important;
        padding: 8px 10px !important;
        max-width: 60% !important; /* Increased from 50% for better fit */
        border-radius: 20px !important;
        letter-spacing: 0.1px !important;
    }
  
  .mobile-search-results {
        padding: 20px 15px !important;
    }
    
    .mobile-search-result {
        padding: 14px 12px !important;
        margin: 5px 0 !important;
        border-radius: 10px !important;
    }
    
    .mobile-search-result img,
    .mobile-search-results img {
        width: 40px !important;
        height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
        margin-right: 10px !important;
        border-radius: 8px !important;
    }
    
    .mobile-search-result-name {
        font-size: 0.95rem !important;
        margin-bottom: 5px !important;
    }
    
    .mobile-search-result-price {
        font-size: 0.9rem !important;
    }

    .mobile-bottom-nav {
        height: 55px !important;
        padding: 0 10px !important;
    }

    .mobile-bottom-nav-item {
        font-size: 0.65rem !important;
        padding: 6px 0 !important;
  }
  
    .mobile-bottom-nav-item i {
        font-size: 1.1rem !important;
        margin-bottom: 3px !important;
    }

    main {
        margin-bottom: 55px !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
  }
  
  .sidebar-menu-section {
        padding: 15px 0 !important;
  }
  
    body.sidebar-active .nav-container {
        padding: 30px 15px 15px 15px !important;
  }
  
    .sidebar-menu-links a {
        padding: 10px 12px !important;
        font-size: 0.95rem !important;
    }
}

/* ==========================================================================
   HIDE DESKTOP ELEMENTS ON MOBILE
   ========================================================================== */

@media (max-width: 1230px) {
    /* Hide desktop-only elements */
    .desktop-only {
        display: none !important;
    }

    /* Show mobile-only elements */
    .mobile-only,
    .truly-mobile-only {
        display: block !important;
    }
    
    /* Mobile search toggle should be visible */
    .mobile-search-toggle {
        display: flex !important;
    }
}

/* ==========================================================================
   SHOW DESKTOP ELEMENTS ON DESKTOP
   ========================================================================== */

@media (min-width: 1231px) {
    /* Hide all mobile elements on desktop */
    .mobile-bottom-nav,
    .mobile-search-overlay,
    .mobile-search-button,
    .mobile-search-toggle,
    .sidebar-menu-section,
    .mobile-sidebar-menu,
    .mobile-sidebar-overlay,
    #mobile-sidebar-overlay,
    .truly-mobile-only,
    .mobile-only {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    pointer-events: none !important;
    }
    
    /* Ensure hamburger is hidden on desktop */
    #open-sidebar-button,
    #close-sidebar-button {
        display: none !important;
    }

    /* Ensure sidebar overlay is hidden */
    #sidebar-overlay {
        display: none !important;
    }
  }

/* ==========================================================================
   EMERGENCY HIDING OF INJECTED MENU ITEMS
   ========================================================================== */

/* Overlay active state */
.mobile-sidebar-overlay.active {
    display: flex;
    visibility: visible;
    opacity: 1;
}

/* Header removed - Menu text moved to nav-container */

/* Content container - Softer burgundy theme with elegant gold accents */
.mobile-sidebar-overlay .mobile-sidebar-content,
#mobile-sidebar-overlay .mobile-sidebar-content {
    background: linear-gradient(145deg, 
        rgba(124, 10, 2, 0.65) 0%, 
        rgba(166, 38, 30, 0.55) 60%, 
        rgba(140, 25, 15, 0.6) 100%) !important;
    border-radius: 0 !important;
    padding: 24px !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
    min-height: 100vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(212, 175, 55, 0.3) !important;
    border: none !important;
    flex: 1 !important;
}

/* Fix hamburger button positioning when inside overlay content - should not be fixed/sticky */
.mobile-sidebar-overlay .mobile-sidebar-content #open-sidebar-button,
#mobile-sidebar-overlay .mobile-sidebar-content #open-sidebar-button {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 0 8px 0 !important;
    width: 60px !important;
    height: 60px !important;
}

/* Scroll hint styling - Updated for dark background */
.mobile-sidebar-scroll-hint {
    text-align: center !important;
    margin-bottom: 15px !important;
    padding: 8px 12px !important;
    color: var(--white) !important;
    font-family: 'Libre Baskerville', serif !important;
    font-size: 0.85rem !important;
    font-style: italic !important;
    opacity: 0.8 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

.mobile-sidebar-scroll-hint i {
    color: var(--secondary-color) !important;
    font-size: 0.8rem !important;
    animation: gentle-bounce 2s ease-in-out infinite !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

@keyframes gentle-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(3px);
    }
}

/* NUCLEAR OVERRIDE for content area - Softer burgundy theme with elegant gold accents */
html body .mobile-sidebar-overlay .mobile-sidebar-content,
html body #mobile-sidebar-overlay .mobile-sidebar-content,
html body div.mobile-sidebar-overlay .mobile-sidebar-content,
html body div#mobile-sidebar-overlay .mobile-sidebar-content {
    background: linear-gradient(145deg, 
        rgba(124, 10, 2, 0.65) 0%, 
        rgba(166, 38, 30, 0.55) 60%, 
        rgba(140, 25, 15, 0.6) 100%) !important;
    background-color: rgba(124, 10, 2, 0.7) !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
    min-height: 100vh !important;
    flex: 1 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(212, 175, 55, 0.2) !important;
}

/* Navigation container */
.mobile-sidebar-overlay .mobile-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 80px;
}

/* Navigation links - Gold/cream cards with white text for dark background */
.mobile-sidebar-overlay .mobile-sidebar-link,
#mobile-sidebar-overlay .mobile-sidebar-link {
    display: flex !important;
    align-items: center !important;
    padding: 18px 20px !important;
    color: var(--white) !important;
    text-decoration: none !important;
    background: linear-gradient(145deg, var(--main-gold), #DAA520) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 12px !important;
    font-family: 'Libre Baskerville', serif !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    min-height: 60px !important;
    -webkit-text-fill-color: var(--white) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.mobile-sidebar-overlay .mobile-sidebar-link:hover,
#mobile-sidebar-overlay .mobile-sidebar-link:hover {
    background: linear-gradient(145deg, #FFD700, var(--main-gold)) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(255, 215, 0, 0.5) !important;
    color: var(--primary-color) !important;
    -webkit-text-fill-color: var(--primary-color) !important;
}

/* NUCLEAR OVERRIDE for links - Gold themed cards with white text */
html body .mobile-sidebar-overlay .mobile-sidebar-link,
html body #mobile-sidebar-overlay .mobile-sidebar-link,
html body div.mobile-sidebar-overlay .mobile-sidebar-link,
html body div#mobile-sidebar-overlay .mobile-sidebar-link {
    background: linear-gradient(145deg, var(--main-gold), #DAA520) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: var(--white) !important;
    -webkit-text-fill-color: var(--white) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    margin-bottom: 12px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* Icons - ABSOLUTE OVERRIDE - Cream color on dark background */
.mobile-sidebar-overlay .mobile-sidebar-link i,
#mobile-sidebar-overlay .mobile-sidebar-link i {
    margin-right: 15px !important;
    width: 24px !important;
    text-align: center !important;
    font-size: 1.3rem !important;
    color: var(--secondary-color) !important;
    flex-shrink: 0 !important;
    -webkit-text-fill-color: var(--secondary-color) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Span text - ABSOLUTE OVERRIDE - White text for readability */
.mobile-sidebar-overlay .mobile-sidebar-link span,
#mobile-sidebar-overlay .mobile-sidebar-link span {
    color: var(--white) !important;
    -webkit-text-fill-color: var(--white) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* Divider */
.mobile-sidebar-overlay .mobile-sidebar-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.2);
    margin: 10px 0;
}

/* Hide unwanted menu elements */
.custom-sidebar-menu,
.mobile-sidebar-menu,
.sidebar-menu-section,
#emergency-sidebar-menu,
#direct-sidebar-menu {
    display: none !important;
}

/* All conflicts removed - clean implementation above */ /* CSS Updated Tue Jul  8 22:53:47 AEST 2025 */

/* EMERGENCY GRAY BACKGROUND FIX - CSS Updated Jul 8 23:15:00 AEST 2025 */

/* CONTENT AREA FIX - CSS Updated Jul 8 23:25:00 AEST 2025 */

/* LINK OVERRIDE FIX - CSS Updated Jul 8 23:35:00 AEST 2025 */

/* DARK ELEGANT THEME FOR WHITE LINKS - CSS Updated Jul 8 23:50:00 AEST 2025 */

/* BRAND COLORS THEME - CSS Updated Jul 9 00:15:00 AEST 2025 */

/* INFINITE LOOP FIXED - CSS Updated Jul 9 00:30:00 AEST 2025 */

/* HEADER GRADIENT REMOVED & CONFLICTS FIXED - CSS Updated Jul 9 00:45:00 AEST 2025 */

/* ALL MOBILE NAV HOVER EFFECTS REMOVED - CSS Updated Jul 9 01:45:00 AEST 2025 */

/* CART HOVER FIXED, SEARCH BAR FIXED, OVERLAY FULL WIDTH, MENU REPOSITIONED - CSS Updated Jul 9 02:00:00 AEST 2025 */

/* ALL FINAL FIXES COMPLETE - SEARCH, CART, OVERLAY, MENU - CSS Updated Jul 9 02:15:00 AEST 2025 */

/* MENU TITLE, INPUT ZOOM, HOVER EFFECTS, BOTTOM NAV - ALL FIXED - CSS Updated Jul 9 02:30:00 AEST 2025 */

/* OBSOLETE FORCED CLASS RULE REMOVED - No longer needed with current implementation */

/* ==========================================================================
   PROMISE SECTION MOBILE ICON FIX - Remove Yellow/Gold Styling
   ========================================================================== */

@media (max-width: 767.98px) {
    /* Nuclear override: Remove all yellow/gold backgrounds and borders from icon wrappers */
    .promise-carousel .icon-wrapper,
    #promiseCarousel .icon-wrapper,
    body #our-promise .d-md-none #promiseCarousel .icon-wrapper,
    body #our-promise div.d-md-none #promiseCarousel.promise-carousel .icon-wrapper,
    html body #our-promise .d-md-none #promiseCarousel .icon-wrapper,
    html body #our-promise div.d-md-none #promiseCarousel.promise-carousel .icon-wrapper {
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
    }
    
    /* Remove pseudo-element borders */
    .promise-carousel .icon-wrapper::before,
    #promiseCarousel .icon-wrapper::before,
    body #our-promise .d-md-none #promiseCarousel .icon-wrapper::before,
    body #our-promise div.d-md-none #promiseCarousel.promise-carousel .icon-wrapper::before,
    html body #our-promise .d-md-none #promiseCarousel .icon-wrapper::before,
    html body #our-promise div.d-md-none #promiseCarousel.promise-carousel .icon-wrapper::before {
        display: none !important;
        content: none !important;
        border: none !important;
        box-shadow: none !important;
        background: none !important;
    }
    
    /* Remove pseudo-element after if it exists */
    .promise-carousel .icon-wrapper::after,
    #promiseCarousel .icon-wrapper::after,
    body #our-promise .d-md-none #promiseCarousel .icon-wrapper::after,
    body #our-promise div.d-md-none #promiseCarousel.promise-carousel .icon-wrapper::after {
        display: none !important;
        content: none !important;
    }
    
    /* Ensure clean icon wrapper styling */
    .promise-carousel .icon-wrapper,
    #promiseCarousel .icon-wrapper {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto 2rem !important;
        position: relative !important;
        overflow: visible !important;
        width: 80px !important;
        height: 80px !important;
    }
}

@media (max-width: 480px) {
    /* Ensure very small screens also have clean styling */
    .promise-carousel .icon-wrapper,
    #promiseCarousel .icon-wrapper,
    body #our-promise .d-md-none #promiseCarousel .icon-wrapper,
    body #our-promise div.d-md-none #promiseCarousel.promise-carousel .icon-wrapper {
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        width: 80px !important;
        height: 80px !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* Remove all pseudo-elements on very small screens */
    .promise-carousel .icon-wrapper::before,
    .promise-carousel .icon-wrapper::after,
    #promiseCarousel .icon-wrapper::before,
    #promiseCarousel .icon-wrapper::after {
    display: none !important;
        content: none !important;
    }
}

/* REMOVED CONFLICTING RULE - Brand colors now handled in layout file override */

/* Mobile specific styles */
@media (max-width: 1230px) {
    /* Hide account text labels in mobile top navigation */
    .navbar-icons .icon-label,
    .icon-with-label .icon-label,
    .account-icon .icon-label,
    .navbar-nav .icon-label {
        display: none !important;
        visibility: hidden !important;
    }

    /* Mobile bottom navigation */
}