/* Lavya Jewels - Header Styles */

/* ===== TOP BAR STYLES ===== */
.top-bar {
    background-color: #000000 !important; /* Pure black background */
    color: #fff;
    font-size: var(--text-xs); /* Use typography system */
    font-family: var(--font-primary) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999999 !important;
    height: 28px !important; /* More compact height */
    display: flex !important;
    align-items: center;
    margin: 0 !important;
    box-sizing: border-box;
    border-bottom: 1px solid #333;
    width: 100% !important;
}

/* Show topbar on desktop for all pages */
.top-bar.desktop-only {
    display: flex !important;
}

@media (max-width: 768px) {
    .top-bar.desktop-only {
        display: none !important; /* Hide on mobile for non-home pages */
    }
    
    /* CRITICAL FIX: Hide topbar on categories page */
    body.categoriesPage .top-bar {
        display: none !important;
    }
    
    /* CRITICAL FIX: Position header at top when topbar is hidden */
    body.categoriesPage .main-header-bar {
        top: 0 !important;
    }
}

/* Hide topbar completely on specific mobile pages (no topbar UX) */
@media (max-width: 768px) {
    /* Hide the top bar */
    body.cart-page .top-bar,
    body.wishlist-page .top-bar,
    body.category-page .top-bar,
    body.categoriesPage .top-bar,
    body.orders-page .top-bar,
    body.track-order-page .top-bar,
    body.product-page .top-bar {
        display: none !important;
    }
    
    /* CRITICAL FIX: Remove top bar gap AND ensure header stays fixed for products page */
    body.cart-page .main-header-bar,
    body.wishlist-page .main-header-bar,
    body.category-page .main-header-bar,
    body.categoriesPage .main-header-bar,
    body.orders-page .main-header-bar,
    body.track-order-page .main-header-bar,
    body.product-page .main-header-bar,
    body.products-page .main-header-bar,
    body:has(.productsPage) .main-header-bar,
    body:has(.productsMain) .main-header-bar,
    body[data-page="products"] .main-header-bar {
        top: 0 !important; /* CRITICAL FIX: No top bar on products page mobile */
        position: fixed !important; /* CRITICAL FIX: Always fixed to prevent scrolling with content */
        z-index: 10000 !important; /* CRITICAL FIX: Above filter bar (9999) */
        transform: translateZ(0) !important; /* Force GPU acceleration */
        backface-visibility: hidden !important; /* Prevent flickering */
        -webkit-backface-visibility: hidden !important; /* iOS Safari fix */
        will-change: auto !important; /* Remove will-change to prevent scroll issues */
    }
}

.top-bar .container {
    width: 100%;
    padding: 0 12px; /* More compact padding */
    max-width: none !important;
    margin: 0 !important;
}

.top-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.contact-info {
    flex: 1;
    display: flex;
    justify-content: flex-start;
}

.animated-offers {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    overflow: hidden;
}

.top-links {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    gap: 20px;
}

.contact-link {
    color: #fff !important;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: color 0.3s ease;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important; /* Consistent spacing between icon and text */
}

.contact-link:hover {
    color: #FFFC00 !important;
}

.contact-link i {
    color: #fff !important;
    margin-right: 5px;
    font-size: 12px;
    transition: color 0.3s ease;
}

.contact-link:hover i {
    color: #FFFC00 !important;
}

/* Heroicons for top bar - already filled/solid and properly aligned */
.contact-link svg {
    color: currentColor !important; /* Heroicons use color, not fill */
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important; /* Prevent icon from shrinking */
}

.contact-link:hover svg {
    color: #FFFC00 !important;
}

/* Ensure hover effects work on all elements */
.contact-link:hover,
.contact-link:hover i,
.top-links a:hover {
    color: #FFFC00 !important;
    transition: color 0.3s ease;
}

/* ===== ANIMATED OFFERS STYLES ===== */
.offer-slider {
    position: relative;
    height: 20px;
    width: 100%;
    max-width: 400px;
}

.offer-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px; /* Match contact links font size for consistency */
  font-weight: 500;
  color: #fff;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease;
}

.offer-text.active {
    opacity: 1;
    transform: translateY(0);
}

/* Mobile: Smaller animated text for better fit */
@media (max-width: 768px) {
    .offer-text {
        font-size: 11px; /* Smaller font size for mobile */
    }
    
    .offer-slider {
        max-width: 200px; /* Smaller max width for mobile */
    }
}

/* ===== ORDER TRACKING STYLES ===== */
.order-tracking {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #fff;
    cursor: pointer;
    transition: color 0.3s ease;
}

.order-tracking:hover {
    color: #FFFC00;
}

.order-tracking:hover .truck-icon {
    color: #FFFC00 !important;
}

.truck-icon {
    width: 16px !important;
    height: 16px !important;
    color: #fff !important;
    transition: color 0.3s ease;
}

/* ===== CUSTOMER CARE & STORE LOCATOR STYLES ===== */
.customer-care,
.store-locator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
    cursor: pointer;
}

.customer-care:hover,
.store-locator:hover {
    color: #FFFC00 !important;
}

.customer-care:hover .care-icon,
.store-locator:hover .store-icon {
    color: #FFFC00 !important;
}

.care-icon,
.store-icon {
    width: 16px !important;
}

.main-header-bar {
    background-color: #f0eee5 !important; /* Match homepage body color */
    font-family: var(--font-primary) !important;
    position: fixed !important; /* CRITICAL FIX: Always fixed on mobile */
    top: 28px !important; /* Position below top bar by default */
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important; /* CRITICAL FIX: Above filter bar (9999) */
    height: 56px !important; /* Mobile height */
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center;
    border-bottom: none !important; /* Remove divider line */
    width: 100% !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important; /* Compact 4px elevation on mobile */
    transition: none !important; /* CRITICAL FIX: Disable transitions to prevent scroll interference */
    margin: 0 !important; /* CRITICAL: Remove all margins */
    padding: 0 !important; /* CRITICAL: Remove all padding (content padding handled separately) */
    transform: translateZ(0) !important; /* CRITICAL FIX: Force GPU acceleration */
    backface-visibility: hidden !important; /* CRITICAL FIX: Prevent flickering */
    -webkit-backface-visibility: hidden !important; /* iOS Safari fix */
    will-change: auto !important; /* CRITICAL FIX: Remove will-change to prevent scroll issues */
}

/* Desktop: Bigger header with larger logo */
@media (min-width: 769px) {
    .main-header-bar {
        top: 28px !important; /* Position below compact top bar on desktop */
        height: 80px !important; /* Increased height for desktop */
        background-color: #ffffff !important; /* WHITE background for desktop */
        box-shadow: none !important; /* FIXED: Remove elevation from header on desktop */
    }
}

/* Mobile: Position header at top when topbar is hidden (e.g., on categories page) */
@media (max-width: 768px) {
    body.categoriesPage .main-header-bar {
        top: 0 !important; /* CRITICAL FIX: Position at top when topbar is hidden */
    }
}

.main-header-bar .container {
    width: 100%;
    padding: 0 16px; /* More compact side padding */
    max-width: none !important;
    margin: 0 !important;
}

.main-header-content {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    height: 56px !important; /* Mobile height */
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* Desktop: Bigger content height */
@media (min-width: 769px) {
    .main-header-content {
        height: 80px !important; /* Match desktop header height */
    }
}

/* Desktop: Bigger content height */
@media (min-width: 769px) {
    .main-header-content {
        height: 80px !important; /* Match desktop header height */
    }
}

/* ===== HOMEPAGE CAROUSEL NAVIGATION (ensure loaded on all pages) ===== */
.carousel-container { position: relative; display: flex; align-items: center; gap: 16px; overflow: visible; width: 100%; }
.carousel-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 40px !important; height: 40px !important; border: none; border-radius: 0; background: #000000; color: #fff; box-shadow: none; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; font-size: 14px !important; }
.carousel-nav-btn:hover { background: #000000; box-shadow: none; transform: translateY(-50%); }
.carousel-nav-prev { left: -10px !important; }
.carousel-nav-next { right: -10px !important; }
.carousel-nav-btn.hidden { opacity: 0; pointer-events: none; transform: translateY(-50%) scale(0.8); }
.carousel-nav-btn.visible { opacity: 1; pointer-events: auto; transform: translateY(-50%) scale(1); }

/* Hide arrows when at start/end of carousel */
.carousel-nav-btn.at-start { opacity: 0.3; pointer-events: none; }
.carousel-nav-btn.at-end { opacity: 0.3; pointer-events: none; }
.carousel-nav-btn.at-start:hover,
.carousel-nav-btn.at-end:hover { 
  background: rgba(0,0,0,0.7); 
  transform: translateY(-50%) scale(1); 
}
@media (max-width: 768px) { 
  .carousel-nav-btn { 
    width: 24px !important; 
    height: 24px !important; 
    font-size: 10px !important; 
  } 
  .carousel-nav-prev { 
    left: -10px !important; /* Closer positioning */
  } 
  .carousel-nav-next { 
    right: -10px !important; /* Closer positioning */
  } 
}

/* Ensure track can slide and cards keep width */
.carousel-container .carousel-track { overflow: visible; }
.carousel-track { display: flex; gap: 8px; transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); width: max-content; min-width: 100%; }
.carousel-track .product-card { flex-shrink: 0; width: 280px; min-width: 280px; }

/* Mobile carousel adjustments */
@media (max-width: 768px) {
  .carousel-track { 
    gap: 8px; /* Maintain 8px gap on mobile */
    padding: 0 8px; /* Add padding for proper spacing */
  }
  .carousel-track .product-card { 
    width: calc(100vw - 24px); /* Full width minus padding (8px each side) */
    min-width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
  }
}

/* Extra small mobile adjustments */
@media (max-width: 480px) {
  .carousel-track .product-card { 
    width: calc(100vw - 16px); /* Even tighter on small screens */
    min-width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
  }
  .carousel-track { 
    padding: 0 4px; /* Reduced padding on small screens */
  }
}

/* ===== SEARCH SECTION STYLES ===== */
.search-section {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    position: relative;
}

.search-bar {
    position: relative;
    width: 300px;
    display: flex;
    align-items: center;
    background: transparent;
    border: 1px solid #000;
    border-radius: 0;
    padding: 8px 12px;
    box-shadow: none;
    cursor: pointer;
}

/* Desktop: Show only search icon, hide input text */
@media (min-width: 769px) {
    .search-bar {
        width: 40px !important;
        padding: 8px !important;
        justify-content: center !important;
        border: none !important; /* Remove black border */
        background: transparent !important;
    }
    
    .search-bar .search-input {
        display: none !important;
    }
    
    .search-bar .search-icon {
        display: block !important;
        width: 20px !important; /* Match other icons */
        height: 20px !important; /* Match other icons */
        color: #333 !important; /* Dark gray to match other icons */ /* Match other icons */
        stroke: #333 !important; /* Match other icons */
        fill: none !important;
    }
    
    .search-bar:hover {
        background: transparent !important;
        color: #333 !important; /* Dark gray to match other icons */
    }
    
    .search-bar:hover .search-icon {
        color: #333 !important; /* Dark gray to match other icons */
        stroke: #333 !important;
    }
}

.search-icon {
    width: 20px !important; /* Match other icons */
    height: 20px !important; /* Match other icons */
        color: #333 !important; /* Dark gray to match other icons */ /* Match other icons */
    stroke: #333 !important; /* Match other icons */
    fill: none !important;
    margin-right: 8px;
    flex-shrink: 0;
}

.search-placeholder-slider {
    position: absolute;
    left: 42px;
    right: 12px;
    height: 20px;
    overflow: hidden;
    pointer-events: none;
    top: 50%;
    transform: translateY(-50%);
}

.search-placeholder-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #999;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-placeholder-text.active {
    opacity: 1;
    transform: translateY(0);
}

.search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: #333;
    font-size: 14px;
    padding: 0;
    z-index: 1;
    box-shadow: none;
}

.search-input:focus {
    outline: none;
    box-shadow: none;
}

.search-input:focus + .search-placeholder-slider {
    display: none;
}

/* ===== HEADER ICONS STYLES ===== */
.customer-care-icon,
.mobile-search-icon {
    display: none !important; /* hide mobile-only icons on desktop */
}
.header-icons {
    flex: 1;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    justify-content: flex-end !important;
    position: relative;
    padding: 0 !important;
    margin: 0 !important;
}

.header-icons .nav-icon {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
        color: #333 !important; /* Dark gray to match other icons */
    text-decoration: none !important;
    transition: color 0.3s ease !important;
    padding: 0 !important;
    margin: 0 !important;
}

.header-icons .nav-icon:hover {
    color: #00bcd4 !important;
}

/* DESKTOP HEADER BADGES - Flush to top-right corner of icon - NO BORDER/OUTLINE */
.header-icons .icon-badge {
    position: absolute !important;
    /* FIXED: Position at top-right edge of icon (not container) */
    top: 0px !important;
    right: 0px !important;
    background: #ff0000 !important; /* Bright red background */
    color: white !important;
    border-radius: 50% !important;
    min-width: 16px !important; /* Slightly larger for better visibility */
    width: 16px !important;
    height: 16px !important;
    border: none !important; /* NO border */
    outline: none !important; /* NO outline */
    box-shadow: none !important; /* NO shadow - clean minimal design */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 9px !important; /* Smaller font for smaller badge */
    font-weight: 700 !important;
    line-height: 1 !important;
    padding: 0 !important;
    z-index: 10 !important;
    text-align: center !important;
    transform: none !important; /* Use top/right positioning */
}

/* ===== MAIN HEADER STYLES ===== */
.main-header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    width: 100%;
}

.main-nav {
    position: fixed !important;
    top: var(--header-above-nav-height, 84px) !important; /* Mobile: dynamic top offset (topbar + header) */
    left: 0 !important;
    right: 0 !important;
    height: auto !important; /* Use natural height based on text + padding */
    background: #f0eee5 !important; /* Match homepage body color */
    font-family: 'Lato', sans-serif !important;
    border-bottom: none !important; /* Remove divider line */
    z-index: 1000 !important; /* Lower z-index to prevent overlap on full screen */
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important; /* Remove shadow on mobile to prevent interference with filter bar */
    overflow: visible !important; /* allow mega menu to overflow */
}

/* Desktop: Position below bigger header - FIXED: Compact navbar height */
@media (min-width: 769px) {
    .main-nav {
        top: var(--header-above-nav-height, 108px) !important; /* Desktop: dynamic top offset (topbar + header) */
        height: auto !important; /* Use natural height based on text + padding */
        background: #ffffff !important; /* WHITE background for desktop */
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important; /* FIXED: Add elevation to navbar on desktop */
    }
}

/* Desktop/laptop: attach nav to header bar exactly (28px topbar + 80px header) */
@media (min-width: 769px) {
  .main-nav {
    top: var(--header-above-nav-height, 108px) !important; /* No gap between header and nav */
  }
  /* Slightly increase side breathing room for centered logo & icons */
  .main-header-bar .container {
    padding: 0 20px !important;
  }
}

/* Override global container styles for header */
.main-nav .container {
    max-width: none !important;
    margin: 0 !important;
    width: 100% !important;
    padding: 0 20px; /* uniform 20px side padding */
}

.nav-content {
    display: flex !important;
    align-items: center !important; /* Center items so 8px padding is equal top/bottom */
    height: auto !important; /* Shrink to fit text + padding */
    padding: 0 !important; /* Use container padding instead */
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important; /* Center horizontally */
    gap: 0 !important; /* Remove gap for compact design */
    position: relative !important;
    z-index: 1 !important; /* FIXED: Reduced from 9999999 to 1 so mega menu can appear below navbar */
    flex-wrap: nowrap !important;
    overflow: visible !important;
    line-height: 1 !important; /* CRITICAL FIX: Remove extra line-height to prevent bottom gap */
}

/* Desktop: Match bigger nav height - FIXED: Updated for compact navbar */
@media (min-width: 769px) {
    .nav-content {
        height: auto !important; /* Natural height on desktop too */
        line-height: 1 !important; /* CRITICAL FIX: Remove extra line-height to prevent bottom gap */
    }
}

/* ===== LOGO STYLES ===== */
.logo {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.logo-img {
    height: 50px !important; /* Mobile height */
    width: 200px !important; /* Mobile width */
    max-width: 250px !important; /* Mobile max width */
    object-fit: contain !important;
    padding-top: 0 !important;
    margin: 0 auto !important; /* center within logo container */
    display: block !important;
}

/* Desktop: Bigger logo */
@media (min-width: 769px) {
    .logo-img {
        height: 75px !important; /* Bigger height for desktop */
        width: 500px !important; /* Increased width significantly */
        max-width: 600px !important; /* Allow even wider rendering */
    }
}

/* ===== NAVIGATION MENU STYLES ===== */
.nav-menu {
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important; /* Remove gap to allow even distribution */
    flex-shrink: 0 !important;
    flex-wrap: nowrap !important; /* Prevent wrapping */
    align-items: center !important; /* Center for symmetrical top/bottom spacing */
    flex: 1 1 auto !important; /* Allow menu to expand and use available space */
    justify-content: center !important; /* Center the navigation items */
    overflow: visible !important; /* allow full visibility */
    max-width: none !important; /* Use all available space between logo and icons */
    line-height: 1 !important; /* Prevent vertical centering via line-height */
    width: 100% !important; /* Use full available width */
}

/* Desktop: Match bigger nav height */
@media (min-width: 769px) {
    .nav-menu {
        line-height: 1 !important; /* Ensure no vertical centering */
    }
}

.nav-item {
    position: relative;
    height: auto !important; /* Shrink to fit link height */
    display: flex;
    align-items: center; /* Center vertically */
    flex: 0 0 auto; /* Fixed width, don't expand */
    justify-content: center; /* Center the link horizontally */
    margin: 0 8px; /* Add regular spacing between items */
    min-width: 0; /* Allow items to shrink if needed */
    padding: 0 !important; /* CRITICAL FIX: Remove any padding that creates gaps */
    line-height: 1 !important; /* CRITICAL FIX: Remove extra line-height to prevent bottom gap */
}

.main-header .nav-link,
.nav-menu .nav-link,
.nav-item .nav-link {
    color: #333;
    text-decoration: none !important;
    font-size: 14px; /* Optimized font size for desktop/laptop screens */
    font-weight: 400 !important; /* Regular font weight, not bold */
    font-family: 'Lato', sans-serif !important;
    padding: 12px 12px !important; /* EXACT: 8px top/bottom, 12px side padding */
    transition: color 0.3s ease;
    text-transform: capitalize;
    white-space: nowrap;
    height: auto !important; /* Let link height be text + padding */
    display: flex !important;
    align-items: center !important; /* Center text within 8px padding */
    position: relative;
    border: none !important;
    outline: none !important;
    width: auto; /* Auto width based on content */
    justify-content: center; /* Center text horizontally */
    margin: 0 !important; /* CRITICAL FIX: Remove any margin that creates gaps */
    line-height: 1 !important; /* CRITICAL FIX: Remove extra line-height to prevent bottom gap */
}

.main-header .nav-link:hover,
.nav-menu .nav-link:hover,
.nav-item .nav-link:hover {
    color: #333;
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
    font-weight: 400 !important; /* Maintain regular font weight on hover */
}

.main-header .nav-link:focus,
.nav-menu .nav-link:focus,
.nav-item .nav-link:focus {
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
    font-weight: 400 !important; /* Maintain regular font weight on focus */
}

.main-header .nav-link:active,
.nav-menu .nav-link:active,
.nav-item .nav-link:active {
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
    font-weight: 400 !important; /* Maintain regular font weight on active */
}

/* Enforce: No hover backgrounds for all top-level nav items and mega menu links */
.main-header .nav-item:hover,
.main-header .nav-item:focus,
.main-header .nav-menu a:hover,
.main-header .nav-menu a:focus,
.main-header .nav-menu a:active,
.mega-menu .mega-menu-list a:hover,
.mega-menu .mega-menu-list a:focus {
  background: transparent !important;
  box-shadow: none !important;
        color: #333 !important; /* Dark gray to match other icons */
  text-decoration: none !important;
}

/* REMOVED: Ugly navigation item hover effects */

/* ===== NAVIGATION SEARCH ICON STYLES ===== */
.nav-search {
    flex: 0 0 auto !important;
    margin: 0 !important; /* Remove extra margin for uniform spacing with other icons */
    flex-shrink: 0 !important;
}

.search-icon-btn {
    background: none !important;
    border: none !important;
        color: #333 !important; /* Dark gray to match other icons */
    font-size: 18px !important;
    cursor: pointer !important;
    padding: 0 !important; /* FIXED: Remove padding for proper alignment */
    border-radius: 0 !important; /* rectangular preference */
    transition: none !important; /* no hover animations */
    width: 40px !important; /* FIXED: Ensure consistent width */
    height: 40px !important; /* FIXED: Ensure consistent height */
    display: flex !important; /* FIXED: Ensure flex display */
    align-items: center !important; /* FIXED: Center alignment */
    justify-content: center !important; /* FIXED: Center alignment */
}

.search-icon-btn:hover,
.search-icon-btn:focus,
.search-icon-btn:active {
        color: #333 !important; /* Dark gray to match other icons */
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ===== CLEAN REACT ICONS SYSTEM ===== */
/* Using React Lucide icons only - no FontAwesome needed */

/* Custom icon containers - PERFECT uniform sizing and alignment for all navigation icons */
.nav-icon.search-icon,
.nav-icon.wishlist-icon,
.nav-icon.cart-icon,
.nav-icon.profile-icon,
.nav-icon.search-icon-btn {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important; /* Ensure transparent background */
    border: none !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    line-height: 40px !important;
    /* FIXED: Perfect baseline alignment */
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    align-self: center !important;
    /* FIXED: Ensure consistent box model */
    box-sizing: border-box !important;
    /* FIXED: Prevent any text baseline issues */
    font-size: 0 !important;
    text-align: center !important;
    /* OVERRIDE: Any conflicting styles from other CSS files */
        color: #333 !important; /* Dark gray to match other icons */
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

/* REMOVED: CSS pseudo-element icons to prevent double icons with React icons */

/* ===== NAVIGATION ICONS STYLES ===== */
.nav-icons {
    display: flex !important;
    align-items: center !important; /* vertical centering */
    gap: 16px !important; /* Uniform spacing between all header icons */
    flex: 0 0 auto !important; /* Fixed size, don't grow or shrink */
    position: relative !important;
    z-index: 9999999 !important;
    height: 60px !important; /* Match navigation bar height */
    box-sizing: border-box !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    /* Remove line-height/vertical-align to avoid baseline drift */
}

/* Collision guard: ensure header search icon uses flex flow (not absolute) */
.nav-icons .nav-icon.search-icon,
.nav-icons #search-icon-btn.search-icon-btn {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important; /* remove any extra right spacing */
}

/* Normalize spacing for all header icons */
.nav-icons > .nav-icon,
.nav-icons > a.nav-icon,
.nav-icons > button.nav-icon {
    margin: 0 !important; /* rely on gap for spacing */
    padding: 0 !important;
    align-self: center !important; /* vertical centering inside 70px header */
}


/* FontAwesome CSS removed - using React icons everywhere */


/* Ensure each icon box aligns identically */
.nav-icons .nav-icon,
.nav-icons .icon-badge {
    line-height: 1 !important;
}

/* Enforce consistent gap-only spacing and center alignment at all sizes */
@media (max-width: 1199.98px) {
  .nav-icons { gap: 14px !important; height: 64px !important; line-height: 64px !important; }
}
/* ===== DESKTOP STYLES ===== */
@media (min-width: 768px) {
    /* Ensure desktop icons are visible on desktop */
    .nav-icons {
        display: flex !important;
    }
    
    .nav-icon {
        display: flex !important;
    }
    
    .header-icons {
        display: flex !important;
    }
}

@media (max-width: 767.98px) {
  .nav-icons { gap: 12px !important; height: 56px !important; line-height: 56px !important; }
}

/* FontAwesome regular CSS removed - using React icons */

/* CRITICAL: Override any conflicting styles from other CSS files */
.nav-icons .nav-icon,
.nav-icons .search-icon,
.nav-icons .wishlist-icon,
.nav-icons .cart-icon,
.nav-icons .profile-icon {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
        color: #333 !important; /* Dark gray to match other icons */
    font-size: 18px !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
    /* Ensure perfect alignment */
    line-height: 1 !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
    align-self: center !important;
    /* OVERRIDE: Any conflicting styles from other CSS files */
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
}

/* Ensure search button has same styling as other nav icons */
.nav-icon.search-icon-btn,
.nav-icon.search-icon {
    background: transparent !important; /* Ensure transparent background */
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: none !important; /* Remove all transitions */
    /* OVERRIDE: Any conflicting styles from other CSS files */
        color: #333 !important; /* Dark gray to match other icons */
    font-size: 18px !important;
    /* CRITICAL: Remove any background colors */
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    /* Remove all hover effects */
    outline: none !important;
    /* Force remove any button styling */
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

/* Remove all hover effects from search icon */
.nav-icon.search-icon:hover,
.nav-icon.search-icon-btn:hover {
    background: transparent !important;
        color: #333 !important; /* Dark gray to match other icons */
    transform: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Additional overrides for search icon button element */
.nav-icon.search-icon button,
.nav-icon.search-icon-btn button,
.nav-icon.search-icon .nav-icon-btn,
.nav-icon.search-icon-btn .nav-icon-btn {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
        color: #333 !important; /* Dark gray to match other icons */
    font-size: 18px !important;
    transition: none !important;
    transform: none !important;
}

/* Make close icon appear as outline */
.search-popup-close i {
    font-weight: 400 !important; /* Make it lighter like outline */
        color: #333 !important; /* Dark gray to match other icons */
}

.nav-icon {
    position: relative !important;
        color: #333 !important; /* Dark gray to match other icons */
    font-size: 18px !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9999999 !important;
    width: 40px !important;
    height: 40px !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: none !important;
    overflow: visible !important; /* allow badge to overlap outside */
}

/* Ensure React icons inherit the correct color, remain outlined, and are properly sized */
.nav-icon svg {
        color: #333 !important; /* Dark gray to match other icons */
    stroke: #333 !important;
    fill: none !important; /* Keep navigation icons outlined */
    width: 20px !important;
    height: 20px !important;
    display: block !important; /* avoid baseline gaps */
    flex-shrink: 0 !important; /* Prevent icon from shrinking */
}

/* Ensure link/button inside icon box fills and centers for perfect baseline */
.nav-icon > a,
.nav-icon > button,
.nav-icon > .nav-icon-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

.nav-icon a {
        color: #333 !important; /* Dark gray to match other icons */
}

.nav-icon button {
        color: #333 !important; /* Dark gray to match other icons */
}

.nav-icon:hover {
        color: #333 !important; /* Dark gray to match other icons */
}

.wishlist-icon i,
.cart-icon i,
.profile-icon i {
    font-size: 18px !important;
    display: block !important;
    line-height: 1 !important;
    width: 18px !important;
    height: 18px !important;
    text-align: center !important;
}

/* REMOVED ALL DUPLICATE BADGE RULES - Using .header-icons .icon-badge as single source */

/* Ensure wishlist icon has perfect alignment with other icons */
.nav-icon.wishlist-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ===== WISHLIST ICONS (NO WHITE CIRCLE) ===== */
.product-wishlist, .wishlist-btn, .add-to-wishlist { background: transparent !important; border-radius: 0 !important; box-shadow: none !important; }
.product-wishlist:hover, .wishlist-btn:hover, .add-to-wishlist:hover { background: transparent !important; box-shadow: none !important; transform: none !important; }

@media (max-width: 480px) {
  .icon-badge { 
    width: 14px !important; 
    height: 14px !important; 
    min-width: 14px !important; 
    font-size: 9px !important; 
    font-weight: bold !important;
    top: -2px !important;
    right: -2px !important;
    background: #ff4444 !important;
    color: white !important;
    border: none !important; /* Remove border to match bottom nav */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important; /* Match bottom nav shadow exactly */
  }
}

/* ===== SEARCH POPUP OVERLAY STYLES ===== */
.search-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000001; /* above header/nav icons */
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.search-popup-overlay.active {
    display: flex;
    opacity: 1;
    align-items: flex-start;
    justify-content: center;
    padding: 50px 20px 20px 20px;
    overflow-y: auto;
}

/* Custom scrollbar for popup overlay */
.search-popup-overlay::-webkit-scrollbar {
    width: 6px;
}

.search-popup-overlay::-webkit-scrollbar-track {
    background: transparent;
}

.search-popup-overlay::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.search-popup-overlay::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

.search-popup-content {
    background: white;
    width: 95%;
    max-width: 1000px;
    max-height: calc(100vh - 80px);
    min-height: 600px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    transform: translateY(-20px);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
}

.search-popup-overlay.active .search-popup-content {
    transform: translateY(0);
}

/* Search popup hint animations */
@keyframes searchHintPulse {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

@keyframes searchHintSlide {
    0% { transform: translateX(-10px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

@keyframes searchHintFade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.search-popup-overlay.active .search-popup-input {
    animation: searchHintPulse 2s ease-in-out infinite;
}

.search-popup-overlay.active .search-recommendations {
    animation: searchHintSlide 0.5s ease-out;
}

.search-popup-overlay.active .search-bestsellers {
    animation: searchHintSlide 0.5s ease-out 0.2s both;
}

.search-popup-overlay.active .recommendation-list li {
    animation: searchHintFade 0.3s ease-out;
    animation-fill-mode: both;
}

.search-popup-overlay.active .recommendation-list li:nth-child(1) { animation-delay: 0.1s; }
.search-popup-overlay.active .recommendation-list li:nth-child(2) { animation-delay: 0.2s; }
.search-popup-overlay.active .recommendation-list li:nth-child(3) { animation-delay: 0.3s; }
.search-popup-overlay.active .recommendation-list li:nth-child(4) { animation-delay: 0.4s; }
.search-popup-overlay.active .recommendation-list li:nth-child(5) { animation-delay: 0.5s; }

/* Ensure animations work on all elements */
.search-popup-overlay.active .bestseller-item {
    animation: searchHintFade 0.3s ease-out;
    animation-fill-mode: both;
}

.search-popup-overlay.active .bestseller-item:nth-child(1) { animation-delay: 0.3s; }
.search-popup-overlay.active .bestseller-item:nth-child(2) { animation-delay: 0.4s; }
.search-popup-overlay.active .bestseller-item:nth-child(3) { animation-delay: 0.5s; }
.search-popup-overlay.active .bestseller-item:nth-child(4) { animation-delay: 0.6s; }
.search-popup-overlay.active .bestseller-item:nth-child(5) { animation-delay: 0.7s; }
.search-popup-overlay.active .bestseller-item:nth-child(6) { animation-delay: 0.8s; }

/* Search popup header */
.search-popup-header {
    display: flex;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #f0f0f0;
}

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

.search-input-icon {
    color: #999;
    margin-right: 12px;
    font-size: 16px;
}

.search-popup-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
    color: #333;
    background: transparent;
}

.search-popup-input::placeholder {
    color: #999;
}

.search-popup-close {
    background: transparent;
    border: none;
    color: #666;
    font-size: 18px;
    cursor: pointer;
    padding: 8px;
    border-radius: 0;
    transition: none;
}

.search-popup-close:hover {
    background: transparent;
    color: #666;
}

/* Search popup body */
.search-popup-body {
    display: flex;
    min-height: 500px;
    flex: 1;
    overflow: hidden;
    width: 100%;
    max-width: none;
}

/* Recommendations section - sticky */
.search-recommendations {
    flex: 0 0 250px;
    padding: 24px;
    border-right: 1px solid #f0f0f0;
    position: sticky;
    top: 0;
    height: fit-content;
    max-height: 500px;
    overflow-y: auto;
}

.search-recommendations h3 {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0 0 16px 0;
}

.recommendation-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.recommendation-list li {
    margin-bottom: 8px;
}

.recommendation-list a {
    color: #666;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
}

.recommendation-list a:hover {
    color: #333;
}

/* Suggestion skeleton loading */
.suggestion-skeleton {
    height: 16px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: 4px;
    margin: 4px 0;
}

/* Bestsellers section */
.search-bestsellers {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
    max-height: 500px;
}

/* Custom scrollbar for bestsellers section */
.search-bestsellers::-webkit-scrollbar {
    width: 4px;
}

.search-bestsellers::-webkit-scrollbar-track {
    background: transparent;
}

.search-bestsellers::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
}

.search-bestsellers::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

.search-bestsellers h3 {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0 0 20px 0;
    position: sticky;
    top: 0;
    background: white;
    z-index: 1;
    padding: 10px 0 10px 0;
    margin-left: -24px;
    margin-right: -24px;
    padding-left: 24px;
    padding-right: 24px;
    border-bottom: 1px solid #f5f5f5;
}

.bestseller-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.bestseller-item {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: none;
}

.bestseller-item a {
    text-decoration: none !important;
    color: inherit;
}

.bestseller-item:hover {
    transform: translateY(-2px);
}

.bestseller-item:hover img {
    transform: translateZ(0) scale(1.02);
    filter: contrast(1.3) brightness(1.15) saturate(1.2) hue-rotate(0deg) blur(0px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.bestseller-item img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 12px;
    /* Enhanced image rendering for maximum clarity */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    image-rendering: high-quality;
    image-rendering: auto;
    /* Improved filter for better clarity and vibrancy */
    filter: contrast(1.25) brightness(1.12) saturate(1.15) hue-rotate(0deg) blur(0px);
    /* Smooth transitions */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s ease, box-shadow 0.3s ease;
    /* Hardware acceleration for smoother performance */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform, filter;
    /* Subtle shadow for depth */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.bestseller-info h4 {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin: 0 0 4px 0;
    line-height: 1.3;
    text-decoration: none !important; /* Remove underlines */
}

.bestseller-info p {
    font-size: 12px;
    color: #666;
    margin: 0;
    line-height: 1.3;
    text-decoration: none !important; /* Remove underlines */
    /* Single line with ellipsis for long descriptions */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Skeleton loading styles */
.bestseller-skeleton {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.skeleton-image {
    width: 100%;
    height: 160px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: 0;
}

.skeleton-text {
    height: 14px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: 4px;
}

.skeleton-text.short {
    width: 70%;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Search Results Styles */
.search-results {
    flex: 1;
    padding: 24px;
}

.search-results h3 {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0 0 20px 0;
}

.search-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: #666;
}

.loading-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #333;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 12px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.no-results {
    text-align: center;
    padding: 40px 20px;
}

.no-results h3 {
    font-size: 16px;
    color: #666;
    margin: 0 0 20px 0;
    font-weight: 600;
}

.no-results p {
    font-size: 16px;
    color: #666;
    margin-bottom: 30px;
}

/* New Collection Mobile Carousel */
.new-collection-mobile {
    margin-top: 30px;
}

.new-collection-mobile .carouselSection {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.new-collection-mobile .carouselWrapper {
    min-height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
}

.new-collection-mobile .carouselTitle {
    font-size: 12px !important;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    text-align: left;
}

.new-collection-mobile .carouselContainer {
    max-width: none !important;
    width: 100% !important;
    min-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.new-collection-mobile .carouselTrackWrapper {
    max-width: none !important;
    width: 100% !important;
    min-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.new-collection-mobile .carouselTrack {
    gap: 8px !important;
    width: 100% !important;
    min-width: 100% !important;
}

.new-collection-mobile .carouselItem {
    flex: 0 0 calc(50% - 4px) !important;
    min-width: calc(50% - 4px) !important;
    max-width: calc(50% - 4px) !important;
    width: calc(50% - 4px) !important;
}

.new-collection-mobile .carouselItem .productCard {
    height: auto !important;
    min-height: auto !important;
}

.new-collection-mobile .carouselItem .productCard .imageContainer {
    height: 80px !important;
    min-height: 80px !important;
}

.new-collection-mobile .carouselItem .productCard .productImage {
    height: 80px !important;
    min-height: 80px !important;
}

.new-collection-mobile .carouselItem .productCard .productImage img {
    height: 80px !important;
    min-height: 80px !important;
    object-fit: cover !important;
}

.new-collection-mobile .carouselNav {
    width: 24px !important;
    height: 24px !important;
    font-size: 12px !important;
}

.new-collection-mobile .carouselNavPrev {
    left: -12px !important;
}

.new-collection-mobile .carouselNavNext {
    right: -12px !important;
}

/* Product card skeleton for loading state */
.product-card-skeleton {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
}

.product-card-skeleton .skeleton-image {
    width: 100%;
    height: 120px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: 0;
}

.product-card-skeleton .skeleton-text {
    height: 12px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: 4px;
}

.product-card-skeleton .skeleton-text.short {
    width: 60%;
}

/* ===== MEGA MENU STYLES ===== */
.has-mega-menu {
    position: relative;
}

.mega-menu {
    position: fixed;
    top: var(--header-total-height, 134px) !important; /* Mobile: dynamic (topbar + header + nav) */
    left: 0 !important;
    right: 0 !important;
    background: #fff !important; /* White background for mega menu */
    border: none !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
    border-radius: 0;
    padding: 0 !important;
    width: 100vw !important; /* Full viewport width */
    min-width: 100vw !important; /* Ensure minimum full width */
    max-width: 100vw !important; /* Force full viewport width */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 10000 !important; /* FIXED: Above all page content including wishlist icons (1000) */
    box-sizing: border-box !important;
    margin: 0 !important; /* Remove any margins */
    overflow: visible !important;
    pointer-events: none; /* Prevent interaction when hidden */
}

/* Desktop: Position below bigger header and nav - FIXED: Updated for compact navbar */
@media (min-width: 769px) {
    .mega-menu {
        top: var(--header-total-height, 158px) !important; /* Desktop: dynamic (topbar + header + nav) */
    }
}

/* Ensure nav-item with mega menu has proper positioning */
.nav-item.has-mega-menu {
    position: relative;
}

/* Ensure mega menu doesn't get cut off */

.has-mega-menu:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto !important; /* Enable interaction when visible */
    margin-top: 0 !important; /* align flush to nav bottom */
    /* REMOVED: top override - use media query values above */
    display: block !important;
}

/* Desktop: Ensure mega menu stays at correct position on hover - FIXED: Updated for compact navbar */
@media (min-width: 769px) {
    .has-mega-menu:hover .mega-menu {
        top: var(--header-total-height, 158px) !important; /* Desktop: dynamic (topbar + header + nav) */
    }
}

/* Mega menu z-index and pointer events handled in main .mega-menu definition above */

/* Add border below the hovered nav item instead of on the mega menu */
.has-mega-menu:hover .nav-link {
    border-bottom: 2px solid #000;
}

.mega-menu-container {
    display: grid;
    grid-template-columns: 1fr auto; /* left content takes remaining space + auto-sized promo area */
    padding: 30px 40px; /* FIXED: Reduced from 60px to 40px for less side padding */
    gap: 60px; /* good gap between left content and right promo images */
    width: 100% !important;
    max-width: 100% !important; /* Use full available width */
    margin: 0 !important; /* No margin */
    min-height: 400px;
    max-height: 550px;
    box-sizing: border-box !important;
    overflow: hidden; /* prevent overlap */
    position: relative;
    text-align: left;
    align-items: start; /* Align content to top */
    justify-items: start; /* Align content to left */
    background: transparent !important; /* Transparent - parent has white background */
    box-shadow: none !important; /* No shadow - parent has shadow */
}

/* Trending Mega Menu - Reduce gap to give more space to promotional images */
.trending-mega-menu .mega-menu-container {
    gap: 40px; /* consistent gap */
}

/* Collections Mega Menu - FIXED: Different layout for collections grid */
.collections-mega-menu .mega-menu-container {
    grid-template-columns: auto 1fr; /* FIXED: Left categories auto-width, right collections take remaining space */
    gap: 40px; /* FIXED: Comfortable gap between left and right */
}

/* Collections Mega Menu - Left categories should be minimal width */
.collections-mega-menu .mega-menu-categories {
    width: auto !important; /* FIXED: Only take needed width, not full width */
    flex: 0 0 auto !important; /* FIXED: Don't grow or shrink */
}

/* Left Side - Categories */
.mega-menu-categories {
    display: flex; /* Use flexbox instead of grid for better inline control */
    flex-direction: row; /* Arrange columns horizontally */
    flex-wrap: nowrap; /* Prevent wrapping to next line */
    gap: 40px; /* horizontal gap between columns */
    min-width: 0;
    text-align: left;
    align-items: flex-start; /* Align all columns to top */
    justify-content: flex-start; /* Align all columns to left */
    width: 100%; /* Use full available width */
}

/* Trending Mega Menu categories styles - Removed conflicting overrides */

/* Collections Mega Menu - Right Side Container - FIXED: Use full available width */
.mega-menu-collections-grid {
    flex: 1; /* FIXED: Take all remaining space after left categories */
    width: 100%; /* FIXED: Use full available width */
    max-width: 100%; /* FIXED: No width constraint */
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Collections Grid Styles - FIXED: Flexible columns to fill available width */
.collections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* FIXED: Flexible columns that adapt to width */
    grid-auto-rows: auto; /* FIXED: Auto rows instead of fixed 3 rows */
    gap: 12px; /* FIXED: Increased gap for better spacing */
    margin-top: 0; /* FIXED: Remove top margin */
    max-height: none; /* FIXED: Remove height constraint */
    overflow: visible; /* FIXED: Show all items */
    width: 100%; /* FIXED: Use full width */
}

.collection-item {
    display: flex;
    align-items: center;
    gap: 12px; /* Reduced gap for compact layout */
    padding: 8px; /* Reduced padding for compact fit */
    border-radius: 4px;
    cursor: pointer;
    min-height: 60px; /* Smaller height for better fit */
    transition: background-color 0.2s ease;
}

.collection-item:hover {
    background-color: #f8f9fa; /* Light hover effect */
}



.collection-icon {
    width: 48px; /* Reduced size for compact layout */
    height: 48px; /* Reduced size for compact layout */
    object-fit: cover;
    border-radius: 4px; /* Slightly rounded */
    flex-shrink: 0; /* Prevent shrinking */
}

.collection-name {
    font-size: 16px; /* Increased from 15px */
    color: #666;
    font-family: 'Lato', sans-serif;
    font-weight: 500; /* Increased weight for better visibility */
    display: block; /* Ensure only one text appears */
}



.mega-menu-column {
    min-width: 160px; /* minimum column width */
    max-width: 200px; /* prevent columns from being too wide */
    flex: 0 0 auto; /* Don't grow or shrink, use natural width */
    text-align: left; /* Ensure text is left-aligned */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align content to left */
    justify-content: flex-start; /* Align content to top */
}

.mega-menu-heading {
    color: #000;
    font-size: 15px; /* slightly smaller for better fit */
    font-weight: 600;
    margin-bottom: 10px; /* spacing below heading */
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px; /* Better letter spacing */
    line-height: 1.3; /* Better line height */
    white-space: nowrap; /* prevent heading from wrapping */
}

.mega-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left; /* Ensure list items are left-aligned */
    width: 100%;
}

.mega-menu-list li {
    margin-bottom: 6px; /* comfortable spacing between items */
    text-align: left; /* Ensure list items are left-aligned */
    line-height: 1.4;
}

.mega-menu-list a {
    color: #333;
    text-decoration: none;
    font-size: 14px; /* Restored original font size */
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    transition: color 0.3s ease;
    display: flex; /* Flex display for proper icon alignment */
    align-items: center; /* Center align icons with text */
    padding: 4px 0; /* Proper padding for clickability */
    line-height: 1.4; /* Better line height for readability */
    text-align: left; /* Ensure left alignment */
}

/* Mega menu hover effects - make text semi-bold */
.mega-menu-list a:hover {
  background: transparent !important;
        color: #333 !important; /* Dark gray to match other icons */
  transform: none !important;
  font-weight: 600 !important;
}

/* Mega menu hover effects removed */

.mega-menu-active {
    font-weight: 700 !important;
        color: #333 !important; /* Dark gray to match other icons */
}

/* Icons for Metal & Stone */
.mega-menu-list i {
    font-size: 12px;
    width: 16px;
    text-align: center;
}

.mega-menu-icon {
    width: 20px !important; /* Larger icon size */
    height: 20px !important; /* Larger icon size */
    margin-right: 8px; /* Proper margin */
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
    object-fit: contain;
    border-radius: 2px;
    background: transparent !important; /* Make background transparent */
    padding: 0; /* Remove padding */
}

.diamond-icon {
    color: #b9f2ff;
}

.swarovski-icon {
    color: #c0c0c0;
}

.pearl-icon {
    color: #f0f0f0;
}

.navratna-icon {
    color: #ff6b6b;
}

.gemstone-icon {
    color: #4ecdc4;
}

.beads-icon {
    color: #ffb6c1;
}

.platinum-icon {
    color: #e5e4e2;
}

.gold-icon {
    color: #ffd700;
}

.rose-gold-icon {
    color: #e8b4b8;
}

.yellow-gold-icon {
    color: #ffd700;
}

.white-gold-icon {
    color: #f5f5dc;
}

.silver-icon {
    color: #c0c0c0;
}

/* Right Side - Promotional Images - FIXED: Flexible width instead of fixed */
.mega-menu-promotions {
    display: grid;
    grid-template-columns: 1fr 1fr; /* two equal promos side by side */
    grid-template-rows: 1fr; /* single row to fill available height */
    gap: 20px; /* gap between the two promo images */
    width: auto; /* FIXED: Auto width to use available space */
    min-width: 600px; /* FIXED: Increased minimum width for better visibility */
    max-width: 900px; /* FIXED: Increased max-width to wrap available width */
    height: 100%;
    min-height: 450px; /* Increased minimum height */
    max-height: 550px; /* Increased maximum height */
    align-content: stretch;
    justify-content: stretch;
    align-items: stretch;
    overflow: hidden;
    box-sizing: border-box;
    flex-shrink: 0; /* Prevent shrinking */
}

/* Collections Mega Menu Specific Styles - Removed conflicting overrides */

/* Trending Mega Menu Specific Styles - Removed conflicting overrides */

/* Collections promo item styles - Removed conflicting overrides */

/* Collections promo image styles - Removed conflicting overrides */

.promo-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    height: 100%; /* fill full available height */
    min-height: 450px; /* FIXED: Match parent min-height */
    max-height: 550px; /* FIXED: Match parent max-height */
    box-sizing: border-box;
    cursor: pointer;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: flex; /* FIXED: Use flex to ensure child fills */
    flex-direction: column; /* FIXED: Stack children vertically */
}

.promo-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.promo-item a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    flex: 1 !important; /* FIXED: Fill available space */
}

/* Trending Mega Menu promo item styles - Removed conflicting overrides */

.promo-image {
    width: 100% !important; /* Override fixed width from JSX */
    height: 100% !important; /* Override fixed height from JSX */
    object-fit: cover !important; /* Maintain aspect ratio while filling space */
    object-position: center !important; /* Center the image */
    border-radius: 8px; /* FIXED: Match container border radius */
    display: block !important; /* Ensure proper display */
    min-width: 100% !important; /* Ensure minimum width */
    min-height: 100% !important; /* Ensure minimum height */
    max-width: none !important; /* FIXED: Allow image to fill full available width */
    max-height: none !important; /* FIXED: Allow image to fill full available height */
    position: absolute !important; /* FIXED: Position absolutely to fill parent */
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    flex-shrink: 0 !important; /* Prevent image shrinking */
}

/* Trending Mega Menu promo image styles - Removed conflicting overrides */

.promo-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(146, 0, 19, 0.9); /* Changed from purple to brand red #920013 */
    color: white;
    padding: 4px 8px; /* Reduced padding for more compact button text */
    font-size: 11px; /* Slightly smaller font size */
    font-weight: 600;
    font-family: 'Lato', sans-serif;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.3px; /* Reduced letter spacing */
    border-radius: 0; /* Make button edges flat */
    line-height: 1.2; /* Tighter line height for compact text */
}

/* Hover effects for promotional items */
.promo-item:hover {
    transform: none !important;
    transition: none !important;
}

.promo-item:hover .promo-label {
    background: rgba(146, 0, 19, 0.9) !important; /* Changed from purple to brand red #920013 */
}


/* Responsive adjustments - FIXED: Updated for compact navbar */
@media (max-width: 1200px) and (min-width: 769px) {
    .mega-menu {
        position: fixed !important;
        top: 158px !important; /* FIXED: Desktop: 28px topbar + 80px header + 50px nav = 158px */
        width: 100vw !important; /* Maintain full viewport width */
        min-width: 100vw !important; /* Ensure minimum full width */
        max-width: 100vw !important; /* Force full viewport width */
    }

    .mega-menu-promotions {
        min-width: 550px !important; /* FIXED: Increased for medium screens */
        max-width: 800px !important;
    }
}

@media (max-width: 768px) {
    .mega-menu {
        top: 134px !important; /* Mobile: 28px topbar + 56px header + 50px nav */
    }

    .mega-menu-container {
        padding: 25px 40px !important; /* Slightly reduced padding */
        gap: 45px !important; /* Slightly reduced gap */
    }

    .mega-menu-categories {
        gap: 35px !important; /* Maintain proper horizontal gap between columns */
        flex-wrap: nowrap !important; /* Keep all columns inline */
    }

    .mega-menu-column {
        min-width: 150px !important; /* Maintain column width */
        flex: 0 0 auto !important; /* Don't grow or shrink */
    }

    .mega-menu-promotions {
        width: auto !important; /* FIXED: Flexible width for medium screens */
        min-width: 450px !important; /* FIXED: Reduced min-width */
        max-width: 650px !important; /* FIXED: Added max-width */
        min-height: 420px !important;
    }
}

@media (max-width: 992px) and (min-width: 769px) {
    .mega-menu {
        position: fixed !important;
        top: 158px !important; /* FIXED: Desktop: 28px topbar + 80px header + 50px nav = 158px */
        width: 100vw !important; /* Maintain full viewport width */
        min-width: 100vw !important; /* Ensure minimum full width */
        max-width: 100vw !important; /* Force full viewport width */
    }

    .mega-menu-container {
        padding: 20px 30px !important; /* Slightly reduced padding */
        gap: 35px !important; /* Maintain reasonable gap */
    }

    .mega-menu-categories {
        gap: 28px !important; /* Maintain proper horizontal gap between columns */
        flex-wrap: nowrap !important; /* Keep all columns inline */
    }

    .mega-menu-column {
        min-width: 135px !important; /* Maintain column width */
        flex: 0 0 auto !important; /* Don't grow or shrink */
    }

    .mega-menu-promotions {
        width: auto !important; /* FIXED: Flexible width for tablet screens */
        min-width: 400px !important; /* FIXED: Reduced min-width */
        max-width: 600px !important; /* FIXED: Added max-width */
        min-height: 400px !important;
    }
}

@media (max-width: 768px) {
    /* Hide desktop nav strip on mobile */
    .main-nav { 
        display: none !important; 
    }
    .mega-menu {
        position: fixed;
        top: 158px; /* Maintain consistent positioning */
        width: 100vw; /* Maintain full viewport width */
        min-width: 100vw; /* Ensure minimum full width */
        max-width: none; /* Remove max-width restriction */
    }

    .mega-menu-container {
        flex-direction: column;
        padding: 10px 12px; /* More compact padding */
        gap: 10px; /* More compact gap */
    }

    .mega-menu-categories {
        flex-wrap: wrap;
        gap: 8px; /* More compact gap */
    }

    .mega-menu-column {
        min-width: 90px; /* More compact column width */
        flex: 1;
    }

    /* Mobile responsive promotional styles - Removed conflicting overrides */
    
    /* Mobile trending mega menu categories - Removed conflicting overrides */
    
    /* Mobile trending mega menu styles - Removed conflicting overrides */
}

/* ===== MOBILE MENU TOGGLE ===== */
.mobile-menu-toggle {
    display: none !important;
    flex-direction: column !important;
    cursor: pointer !important;
    padding: 5px !important;
    z-index: 9999999 !important;
}

/* Show mobile menu toggle on small screens */
@media (max-width: 768px) {
    /* show mobile-only icons on mobile */
    .mobile-menu-toggle {
        display: flex !important;
    }
}

.mobile-menu-toggle span {
    width: 25px;
    height: 3px;
    background: #333 !important; /* Dark gray to match other icons */
    margin: 3px 0;
    transition: 0.3s;
}

/* ===== MOBILE NAVIGATION OVERLAY - PURPLE THEME ===== */
.mobile-nav-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0,0,0,0.5) !important;
    z-index: 9999999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease !important;
}

.mobile-nav-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 9999999 !important;
}

/* FIXED ISSUE 4: Prevent body scroll when mobile menu is open - MOBILE ONLY */
@media (max-width: 768px) {
    body.mobile-menu-open {
        overflow: hidden !important; /* FIXED ISSUE 4: Disable body scroll on mobile when drawer is open */
        position: fixed !important; /* FIXED ISSUE 4: Prevent scroll completely */
        width: 100% !important;
        height: 100% !important; /* FIXED ISSUE 4: Lock height */
    }
}

/* Desktop: No body scroll lock needed */
@media (min-width: 769px) {
    body.mobile-menu-open {
        overflow: auto !important; /* Allow normal scrolling on desktop */
        width: 100% !important;
    }
}

/* Mobile nav container fullscreen positioning - FIXED */
.mobile-nav-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    background: #fff !important;
    transform: translateX(-100%) !important; /* Start off-screen */
    transition: transform 0.3s ease !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 10001 !important;
    box-sizing: border-box !important;
    padding: 0 !important; /* Remove all padding */
    margin: 0 !important; /* Remove all margins */
    display: flex !important; /* FIXED: Changed from none to flex */
    flex-direction: column !important;
}

.mobile-nav-overlay.active .mobile-nav-container {
    transform: translateX(0) !important;
    z-index: 9999999 !important;
}

/* Header Section */
.mobile-nav-header {
    background: #EA1F3A !important; /* Red background */
    padding: 20px 12px !important; /* FIXED: Increased padding for more height */
    position: relative;
    min-height: auto !important; /* Remove fixed height */
    flex-shrink: 0;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important; /* FIXED: Center align for better icon alignment */
}

/* Scrollable content area */
.mobile-nav-content {
    height: auto !important; /* Auto height for flexible layout */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 16px 0 0 0 !important; /* FIXED: Increased top gap from 8px to 16px */
    margin: 0 !important; /* Remove all margins */
    flex: 1 !important; /* Take remaining space */
}

/* Hide scrollbar for webkit browsers */
.mobile-nav-content::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for Firefox */
.mobile-nav-content {
    scrollbar-width: none;
}

/* Collapsible section styles */
.collapsible-section {
    background: #920013 !important; /* Dark red background */
    color: white !important;
    padding: 6px 12px !important; /* Ultra-compact padding */
    border-bottom: none !important;
    margin-top: 0 !important;
}

.collapsible-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 !important;
    transition: all 0.2s ease !important;
    width: 100% !important;
}

.collapsible-text-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

.collapsible-title {
    font-size: 14px !important; /* Smaller font */
    font-weight: 600 !important;
    color: white !important;
    margin: 0 0 1px 0 !important;
    line-height: 1.1 !important;
}

.collapsible-subtitle {
    font-size: 11px !important; /* Smaller font */
    color: rgba(255, 255, 255, 0.8) !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.update-button {
    background: #6B0A1A !important; /* Darker red */
    color: white !important;
    border: none !important;
    border-radius: 0 !important; /* Flat edges */
    padding: 4px 8px !important; /* Ultra-compact padding */
    font-size: 10px !important; /* Smaller font */
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
}

.welcome-section {
    margin-bottom: 0 !important; /* Remove bottom margin */
    transition: opacity 0.2s ease; /* FIXED ISSUE 4: Add smooth transition for click feedback */
}

/* FIXED ISSUE 4: Add visual feedback when welcome section is clickable */
.welcome-section:active {
    opacity: 0.7;
}

.welcome-title {
    color: white !important;
    font-size: 16px !important; /* Smaller font */
    font-weight: bold !important;
    margin: 0 0 12px 0 !important; /* FIXED ISSUE 1: Increased bottom margin from 6px to 12px for better spacing */
    line-height: 1.2 !important; /* Slightly increased for better readability */
    font-family: 'Lato', sans-serif !important;
}

.welcome-subtitle {
    color: white !important;
    font-size: 11px !important; /* Smaller font */
    margin: 0 !important;
    opacity: 0.9 !important;
    line-height: 1.5 !important; /* FIXED ISSUE 1: Increased line height from 1.3 to 1.5 for better readability */
    font-family: 'Lato', sans-serif !important;
}


.mobile-close {
    background: none !important;
    border: none !important;
    color: white !important; /* Force white color */
    cursor: pointer !important;
    padding: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    right: 12px !important;
    z-index: 10 !important;
}


/* Feature Cards Grid */
.feature-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 0 12px !important; /* 12px padding on both sides */
    background: #fff;
    width: 100% !important; /* Use full width */
    box-sizing: border-box !important;
}

.feature-card {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 16px 12px;
    text-align: left !important; /* FIXED: Left align text */
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease;
    display: flex !important; /* FIXED: Use flexbox for consistent sizing */
    flex-direction: column !important;
    min-height: 110px !important; /* FIXED: Ensure all cards same height */
}

.feature-card:hover {
    transform: translateY(-2px);
}

.orders-card {
    background: #FCE7F3;
}

.points-card {
    background: #FEF3C7;
}

.scan-card {
    background: #DBEAFE;
}

.try-home-card {
    background: #E9D5FF;
}

.card-icon {
    margin-bottom: 8px;
    display: flex;
    justify-content: flex-start !important; /* FIXED: Left align icon */
    background: transparent !important; /* FIXED ISSUE 3: Remove white background from icons */
    border: none !important; /* FIXED ISSUE 3: Remove any borders */
    padding: 0 !important; /* FIXED ISSUE 3: Remove padding that might create background effect */
}

.card-icon svg {
    background: transparent !important; /* FIXED ISSUE 3: Ensure SVG has no background */
    border: none !important;
}

.orders-card .card-icon {
    color: #EC4899;
    background: transparent !important; /* FIXED ISSUE 3: Remove white background */
}

.points-card .card-icon {
    color: #F59E0B;
    background: transparent !important; /* FIXED ISSUE 3: Remove white background */
}

.scan-card .card-icon {
    color: #3B82F6;
    background: transparent !important; /* FIXED ISSUE 3: Remove white background */
}

.try-home-card .card-icon {
    color: #8B5CF6;
    background: transparent !important; /* FIXED ISSUE 3: Remove white background */
}

.card-title {
    font-size: 14px;
    font-weight: bold;
    color: #1F2937;
    margin: 0 0 4px 0;
    font-family: 'Lato', sans-serif;
    text-align: left !important; /* FIXED: Left align */
}

.card-description {
    font-size: 10px;
    color: #6B7280;
    margin: 0;
    line-height: 1.3;
    font-family: 'Lato', sans-serif;
    text-align: left !important; /* FIXED: Left align */
    white-space: nowrap !important; /* FIXED: Single line only */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* New Feature Sections */
.new-feature-sections {
    background: #fff;
    padding: 0 0 16px 0;
}

.new-feature-sections .feature-item {
    display: flex;
    align-items: center;
    padding: 12px !important; /* 12px padding on all sides */
    border-bottom: none !important; /* FIXED: Remove border - use custom divider */
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin: 0 !important; /* No margin - use padding for alignment */
}

/* FIXED: Add custom divider with 12px padding on both sides */
.new-feature-sections .feature-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 12px !important;
    right: 12px !important;
    height: 1px;
    background: #E5E7EB;
}

.new-feature-sections .feature-item {
    position: relative;
}

.new-feature-sections .feature-item:hover {
    background-color: #f9fafb;
}

/* Menu List Items */
.menu-list {
    background: #fff;
    padding: 0;
    margin: 0;
}

.menu-item {
    display: flex;
    align-items: center;
    padding: 12px !important; /* 12px padding on all sides */
    border-bottom: none !important; /* FIXED: Remove border - use custom divider */
    cursor: pointer;
    transition: background-color 0.2s ease;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    position: relative;
}

.menu-item:hover {
    background-color: #f9fafb;
}

/* FIXED: Add custom divider with 12px padding on both sides */
.menu-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 12px !important;
    right: 12px !important;
    height: 1px;
    background: #E5E7EB;
}

.menu-item:last-child::after {
    display: none; /* Hide divider on last item */
}

/* About Section - Match Mobile Homepage Footer */
.about-section {
    background: #fff;
    padding: 20px 12px !important; /* 12px padding on both sides */
    text-align: center;
    border-top: 1px solid #E5E7EB;
}

.logout-btn {
    background: #f8f9fa;
    color: #333;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 16px;
    width: 100%;
    max-width: 200px;
}

.logout-btn:hover {
    background: #e9ecef;
    border-color: #d0d0d0;
}

.app-version {
    color: #666;
    font-size: 12px;
    margin-bottom: 20px;
    font-weight: 500;
}

.follow-section {
    margin-bottom: 20px;
}

.follow-title {
    color: #333;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 12px 0;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 10px; /* FIXED: Increased gap slightly for better spacing */
    margin-bottom: 20px;
}

.social-icon-link {
    width: 36px; /* FIXED: Reduced from 40px to 36px for mobile */
    height: 36px; /* FIXED: Reduced from 40px to 36px for mobile */
    border-radius: 6px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 14px; /* FIXED: Reduced from 16px to 14px for mobile */
    line-height: 1;
}

.social-icon-link.instagram {
    background: #E4405F;
}

.social-icon-link.facebook {
    background: #1877F2;
}

.social-icon-link.youtube {
    background: #FF0000;
}

.social-icon-link.pinterest {
    background: #BD081C;
}

.social-icon-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.company-logo {
    margin-bottom: 16px;
}

.logo-image {
    height: auto; /* FIXED ISSUE 3: Allow height to scale with width */
    width: auto;
    max-width: 180px !important; /* FIXED ISSUE 3: Increased from 120px to 180px */
    opacity: 0.9;
}

.copyright {
    color: #666;
    font-size: 11px; /* FIXED: Slightly smaller for mobile */
    line-height: 1.5; /* FIXED: Better line height */
    margin: 0;
    text-align: center;
}

.copyright p {
    margin: 0 0 6px 0; /* FIXED: Add spacing between lines */
}

.copyright p:last-child {
    margin-bottom: 0;
}

/* FIXED: Powered by DeepDigitalWare styling - Same color as parent text */
.powered-by {
    font-size: 10px !important;
    color: #999 !important;
}

.deepdigitalware-link {
    color: #999 !important; /* FIXED ISSUE 2: Same gray color as "Powered by" text */
    text-decoration: none !important;
    font-weight: normal !important; /* FIXED ISSUE 2: Remove bold styling */
    transition: color 0.2s ease !important;
}

.deepdigitalware-link:hover {
    color: #666 !important; /* FIXED ISSUE 2: Slightly darker gray on hover */
    text-decoration: underline !important;
}

.new-feature-sections .feature-icon {
    color: #1F2937;
    margin-right: 16px;
    flex-shrink: 0;
    background: transparent !important; /* FIXED ISSUE 5: Transparent background */
}

/* FIXED: Bank/UPI icon container and styling */
.bank-upi-icon-container {
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
    padding: 0 !important;
}

.bank-upi-icon {
    background: transparent !important;
    border: none !important;
    object-fit: contain !important;
    color: #1F2937 !important;
}

/* FIXED: Remove divider below payment section only */
.payment-section-no-divider .feature-item::after {
    display: none !important; /* Remove divider below payment section */
}

.new-feature-sections .feature-content {
    flex: 1;
}

.new-feature-sections .feature-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.new-feature-sections .feature-title {
    font-size: 14px;
    font-weight: bold;
    color: #1F2937;
    margin: 0;
    font-family: 'Lato', sans-serif;
}

.new-feature-sections .new-badge {
    background: #EF4444;
    color: white;
    font-size: 8px;
    font-weight: bold;
    padding: 1px 4px;
    border-radius: 3px;
    text-transform: uppercase;
}

.new-feature-sections .feature-description {
    font-size: 12px;
    color: #6B7280;
    margin: 0;
    font-family: 'Lato', sans-serif;
}

.new-feature-sections .feature-arrow {
    color: #1F2937;
    font-size: 16px;
    font-weight: bold;
    margin-left: 16px;
}

/* Coupons & Discounts Section */
.coupons-section {
    display: none !important; /* FIXED: Hide coupons section */
    background: #FAF3E0 !important; /* FIXED ISSUE 1: Changed to light cream/beige color */
    padding: 16px 0 !important; /* No side padding - use full width */
    margin: 0;
    width: 100% !important; /* Use full width */
}

.coupons-header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    padding: 0 12px !important; /* 12px padding on both sides */
}

.coupons-icon {
    margin-right: 12px;
    color: #1F2937;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.coupons-title {
    font-size: 16px;
    font-weight: bold;
    color: #1F2937;
    margin: 0;
    font-family: 'Lato', sans-serif;
}

.coupons-slider {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 0 12px 8px 12px !important; /* 12px padding on both sides */
    -webkit-overflow-scrolling: touch;
}

.coupons-slider::-webkit-scrollbar {
    display: none;
}

.coupons-slider {
    scrollbar-width: none;
}

.coupon-card {
    background: #F9FAFB;
    border-radius: 6px;
    min-width: 240px;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: none; /* Remove elevation shadow */
}

.coupon-content {
    padding: 8px 12px; /* Reduced top/bottom padding for compact design */
}

.coupon-discount {
    font-size: 18px;
    font-weight: bold;
    color: #1F2937;
    margin-bottom: 4px; /* Reduced margin for compact design */
    font-family: 'Lato', sans-serif;
}

.coupon-description {
    font-size: 12px;
    color: #1F2937;
    margin-bottom: 6px; /* Reduced margin for compact design */
    line-height: 1.3;
    font-family: 'Lato', sans-serif;
}

.coupon-divider {
    height: 1px;
    background: #D1D5DB;
    border: none;
    margin: 8px 0; /* FIXED ISSUE 3: Reduced from 12px to 8px */
    border-style: dashed;
    border-width: 1px 0 0 0;
    border-color: #9CA3AF;
}

.coupon-code-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0; /* FIXED ISSUE 3: Removed padding completely */
    margin: 2px 0; /* FIXED ISSUE 3: Reduced from 4px to 2px */
}

.coupon-code {
    font-size: 14px;
    font-weight: bold;
    color: #1F2937;
    font-family: 'Lato', sans-serif;
    letter-spacing: 0.3px;
}

.copy-btn {
    background: none;
    border: none;
    color: #6B7280;
    cursor: pointer;
    padding: 1px 2px; /* Ultra-minimal padding for compact design */
    border-radius: 2px;
    transition: all 0.2s ease;
}

.coupon-footer {
    background: #DC2626;
    padding: 6px 8px; /* Increased padding for better vertical centering */
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 24px; /* Ensure minimum height for proper centering */
}

.coupon-validity {
    color: white;
    font-size: 12px;
    font-weight: 500;
    font-family: 'Lato', sans-serif;
    line-height: 1.2; /* Better line height for vertical centering */
    margin: 0; /* Remove any default margins */
}

/* Menu List */
.menu-list {
    background: #fff;
    padding: 0;
    margin: 0;
}

/* Duplicate menu-item rules removed - using the first definition */

/* About Section */
.about-section {
    background: #fff;
    padding: 20px;
    text-align: center;
}

/* Contact Options */
.contact-options {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 30px;
}

.contact-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.contact-icon {
    width: 24px;
    height: 24px;
    color: #1F2937;
}

.contact-text {
    font-size: 12px;
    color: #1F2937;
    font-weight: 400;
    font-family: 'Lato', sans-serif;
}

/* Logout Button */
.logout-btn {
    background: #F3F4F6;
    color: #1F2937;
    border: none;
    border-radius: 6px;
    padding: 12px 40px;
    font-size: 14px;
    font-weight: bold;
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    cursor: pointer;
    margin-bottom: 20px;
    transition: background-color 0.2s ease;
}

.logout-btn:hover {
    background: #E5E7EB;
}

/* App Version */
.app-version {
    font-size: 12px;
    color: #6B7280;
    font-family: 'Lato', sans-serif;
    margin-bottom: 30px;
}

/* Follow Us Section */
.follow-section {
    margin-bottom: 30px;
}

.follow-title {
    font-size: 14px;
    font-weight: bold;
    color: #1F2937;
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    margin: 0 0 16px 0;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.social-icon {
    width: 24px;
    height: 24px;
    color: #9CA3AF;
    cursor: pointer;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-icon:hover {
    color: #6B7280;
}

.social-icon img {
    width: 24px;
    height: 24px;
    filter: grayscale(100%) brightness(0.6);
    transition: filter 0.2s ease;
}

.social-icon:hover img {
    filter: grayscale(0%) brightness(1);
}

/* Company Logo */
.company-logo {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-image {
    height: auto; /* FIXED ISSUE 3: Allow height to scale with width */
    width: auto;
    max-width: 180px !important; /* FIXED ISSUE 3: Increased from 120px to 180px */
}

/* Copyright */
.copyright {
    font-size: 12px;
    color: #1F2937;
    font-family: 'Lato', sans-serif;
    margin-bottom: 20px;
}

/* Feature List */
.feature-list {
    background: #fff;
    padding: 0 16px 16px;
}

.feature-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #E5E7EB;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.feature-item:hover {
    background-color: #f9fafb;
}

.feature-item:last-child {
    border-bottom: none;
}

.feature-icon {
    margin-right: 16px;
    color: #8B5CF6;
    flex-shrink: 0;
}

.feature-content {
    flex: 1;
}

.feature-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.feature-title {
    font-size: 14px;
    font-weight: bold;
    color: #1F2937;
    margin: 0;
    font-family: 'Lato', sans-serif;
}

.new-badge {
    background: #EF4444;
    color: white;
    font-size: 8px;
    font-weight: bold;
    padding: 1px 4px;
    border-radius: 3px;
    text-transform: uppercase;
}

.feature-description {
    font-size: 12px;
    color: #6B7280;
    margin: 0;
    font-family: 'Lato', sans-serif;
}

.feature-arrow {
    color: #1F2937;
    font-size: 16px;
    font-weight: bold;
    margin-left: 8px;
}

.mobile-logo {
    height: 30px;
}

.mobile-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #333;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.mobile-close:hover {
    background-color: #f5f5f5;
}

/* Mobile Search Bar */
.mobile-search-wrap {
    padding: 20px;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
}

.mobile-search-box {
    position: relative;
    display: flex;
    align-items: center;
    background: #f8f9fa;
    border-radius: 8px;
    padding: 12px 16px;
    border: 1px solid #e9ecef;
}

.mobile-search-icon {
    width: 20px;
    height: 20px;
    color: #6c757d;
    margin-right: 12px;
}

.mobile-search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 16px;
    color: #333;
    outline: none;
}

.mobile-search-input::placeholder {
    color: #6c757d;
}

/* Quick Chips Grid */
.mobile-quick-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 20px;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
}

.quick-chip {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 12px 8px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quick-chip:hover {
    background: #e9ecef;
    border-color: #dee2e6;
}

.mobile-nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #fff;
}

.mobile-nav-item {
    border-bottom: 1px solid #f0f0f0;
}

.mobile-nav-item:last-child {
    border-bottom: none;
}

.mobile-nav-item a {
    display: block;
    padding: 16px 20px;
    color: #333;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.mobile-nav-item a:hover {
    background-color: #f8f9fa;
    color: #000;
}

/* More Jewellery Button */
.mobile-more-jewellery {
    padding: 20px;
    background: #fff;
    border-top: 1px solid #f0f0f0;
}

.mobile-more-jewellery-btn {
    width: 100%;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 16px;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mobile-more-jewellery-btn:hover {
    background: #e9ecef;
    border-color: #dee2e6;
}

/* Mobile responsive adjustments */
@media (max-width: 480px) {
    .mobile-quick-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    .quick-chip {
        font-size: 13px;
        padding: 10px 6px;
    }
}

/* Mobile menu visibility - only show on mobile */
@media (min-width: 769px) {
  .mobile-nav-overlay {
    display: none !important;
  }
}

/* Fullscreen on small devices */
@media (max-width: 768px) {
  .mobile-nav-container { 
    width: 100% !important; 
  }
}

/* ===== RESPONSIVE STYLES ===== */
@media (max-width: 768px) {
    /* Ensure main header bar is always visible */
    .main-header-bar {
        display: flex !important;
        visibility: visible !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        opacity: 1 !important;
        z-index: 10000 !important; /* CRITICAL FIX: Changed from 9999998 to 10000 for consistency */
        height: 56px !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important; /* Compact 4px elevation */
        background: #f0eee5 !important;
        transition: none !important; /* CRITICAL FIX: Remove transition to prevent scroll issues */
        transform: translateZ(0) !important; /* CRITICAL FIX: Force GPU acceleration for fixed positioning */
        will-change: auto !important; /* CRITICAL FIX: Remove will-change to prevent scroll issues */
        backface-visibility: hidden !important; /* CRITICAL FIX: Prevent flickering on scroll */
        -webkit-backface-visibility: hidden !important; /* iOS Safari fix */
        margin-bottom: 0 !important; /* CRITICAL: Remove any bottom margin */
        padding-bottom: 0 !important; /* CRITICAL: Remove any bottom padding */
        border-bottom: none !important; /* CRITICAL: Remove bottom border by default */
    }
    
    /* For pages where top bar is visible (homepage) */
    body.home-page .main-header-bar {
        top: 28px !important;
    }
    
    /* Home page with topbar - position below topbar (match when header does NOT hide topbar) */
    body:has(.main-header:not(.hide-topbar-mobile)) .main-header-bar {
        top: 28px !important; /* 28px topbar + header below */
    }
    
    .main-header-bar .container {
        padding: 0 !important; /* No container padding, handled by content */
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .main-header-content {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 12px 0 12px !important; /* FIXED: 12px padding on both sides for symmetry */
        height: 56px !important; /* Full mobile header height */
        overflow: visible !important; /* Allow badges to extend beyond header */
        width: 100% !important;
        max-width: 100% !important;
        gap: 8px !important; /* Better gap for alignment */
    }
    
    /* Right side icons container - ensure proper inline alignment */
    .main-header-content > div:last-child,
    .header-right-icons {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important; /* Optimal gap for perfect alignment */
        height: 56px !important;
        flex-shrink: 0 !important;
        overflow: visible !important; /* Allow badges to extend */
    }
    
    /* Ensure all header elements are vertically centered */
    .mobile-menu-toggle,
    .logo,
    .customer-care-icon,
    .mobile-search-icon,
    .mobile-wishlist-icon,
    .mobile-cart-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 56px !important; /* Match header height */
    }
    
    /* Mobile hamburger menu - ensure proper alignment */
    .mobile-menu-toggle {
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        flex-shrink: 0 !important; /* Prevent shrinking */
    }
    
    /* Customer care and search icons - match header height for alignment */
    .customer-care-icon,
    .mobile-search-icon {
        width: 40px !important; /* Same as mobile wishlist/cart */
        height: 56px !important; /* Full header height for perfect inline alignment */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        position: relative !important; /* For badge positioning */
        flex-shrink: 0 !important; /* Prevent shrinking */
    }
    
    /* Logo container - aligned to left after hamburger */
    .logo {
        flex: 0 0 auto !important; /* CRITICAL FIX: Don't expand, fixed size only */
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important; /* FIXED: Left align logo after hamburger */
        height: 56px !important;
        margin: 0 !important;
        padding: 0 !important; /* FIXED: Remove all padding */
        max-width: 140px !important; /* CRITICAL FIX: Limit logo width to prevent icon overflow */
    }
    
    /* Mobile header icons container - CRITICAL: Must have flex-shrink 0 and proper width */
    .mobile-header-icons {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 4px !important; /* Compact gap between icons */
        height: 56px !important;
        flex-shrink: 0 !important; /* CRITICAL: Prevent shrinking */
        flex: 0 0 auto !important; /* CRITICAL: Fixed size, don't expand */
        overflow: visible !important; /* Allow badges to extend */
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Hide wishlist and cart when bottom nav is visible - use CSS to hide properly */
    .mobile-header-icons .mobile-wishlist-icon,
    .mobile-header-icons .mobile-cart-icon {
        display: flex !important; /* Always render in DOM */
    }

    /* On pages with bottom nav, hide wishlist/cart from header */
    body:not(.orders-page):not(.track-order-page):not(.cart-page):not(.wishlist-page):not([data-page="products"]) .mobile-header-icons .mobile-wishlist-icon,
    body:not(.orders-page):not(.track-order-page):not(.cart-page):not(.wishlist-page):not([data-page="products"]) .mobile-header-icons .mobile-cart-icon {
        display: none !important; /* Hide when bottom nav is present */
        width: 0 !important; /* Remove width */
        margin: 0 !important; /* Remove margin */
        padding: 0 !important; /* Remove padding */
        overflow: hidden !important; /* Hide overflow */
    }

    /* Mobile header icon SVGs - proper sizing */
    .mobile-notification-icon svg,
    .mobile-search-icon svg,
    .mobile-wishlist-icon svg,
    .mobile-cart-icon svg {
        width: 20px !important;
        height: 20px !important;
        flex-shrink: 0 !important;
    }
    
    /* Mobile Notification and Search icons - ALWAYS VISIBLE */
    .mobile-notification-icon,
    .mobile-search-icon {
        display: flex !important;
        visibility: visible !important;
        position: relative !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important; /* FIXED: Slightly smaller for space */
        height: 56px !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }

    /* Mobile wishlist and cart icons - Show on products page */
    .mobile-wishlist-icon,
    .mobile-cart-icon {
        display: flex !important; /* CRITICAL FIX: Always show on mobile */
        visibility: visible !important;
        position: relative !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important; /* FIXED: Slightly smaller for space */
        height: 56px !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
        overflow: visible !important; /* Allow badge to extend */
    }

    /* Mobile header icon badges - clean minimal design */
    .mobile-notification-icon .icon-badge,
    .mobile-wishlist-icon .icon-badge,
    .mobile-cart-icon .icon-badge {
        position: absolute !important;
        top: 12px !important;
        right: 4px !important;
        background: #ef4444 !important; /* Red background */
        color: white !important;
        border-radius: 50% !important;
        min-width: 14px !important; /* Smaller for mobile */
        width: 14px !important;
        height: 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important; /* No border for clean look */
        outline: none !important;
        z-index: 10 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
        text-align: center !important; /* Center text */
        left: auto !important; /* Ensure right positioning only */
    }
    
    .mobile-wishlist-icon a:hover,
    .mobile-cart-icon a:hover {
        color: #333 !important; /* Dark gray to match other icons */
    }
    
    .search-bar {
        width: 200px !important;
    }
    
    /* Search section and header icons now use flexbox layout */
    
    .logo-img {
        height: 45px !important; /* CRITICAL FIX: Smaller logo for mobile */
        width: auto !important; /* FIXED: Auto width based on aspect ratio */
        max-width: 120px !important; /* CRITICAL FIX: Strict limit to prevent overflow */
        object-fit: contain !important;
        margin-left: 15px !important; /* CRITICAL FIX: 15px gap after hamburger */
    }
    
    /* Hide search section and header icons on mobile */
    .search-section {
        display: none !important;
    }
    
    .header-icons {
        display: none !important;
    }
    
    /* Hide desktop navigation icons on mobile */
    .nav-icons {
        display: none !important;
    }
    
    /* Hide desktop nav-icon elements on mobile */
    .nav-icon {
        display: none !important;
    }
    
    /* Hide desktop header icons container on mobile */
    .header-icons {
        display: none !important;
    }
    
    /* Hide desktop wishlist and cart icons on mobile */
    .nav-icon.wishlist-icon,
    .nav-icon.cart-icon {
        display: none !important;
    }
    
    /* Mobile contact icon */
    .mobile-contact-icon,
    .mobile-search-icon,
    .mobile-wishlist-icon,
    .mobile-cart-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        width: 36px !important; /* CRITICAL: Smaller width */
        height: 56px !important; /* FIXED: Full header height for perfect vertical alignment */
        padding: 0 !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }

    /* CRITICAL: Ensure mobile icons container doesn't add extra space */
    .main-header-content > div:last-child {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 2px !important; /* CRITICAL: Minimal gap */
        height: 56px !important;
        flex-shrink: 0 !important;
        flex: 0 0 auto !important; /* CRITICAL: Fixed size */
    }

    /* Mobile customer care icon */
    .customer-care-icon {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important; /* CRITICAL: Smaller width */
        height: 56px !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        color: #333 !important;
        transition: color 0.3s ease !important;
        flex-shrink: 0 !important;
    }

    .customer-care-icon button {
        color: #333 !important; /* Dark gray to match other icons */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        text-decoration: none !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        cursor: pointer !important;
    }

    .customer-care-icon svg {
        color: #333 !important; /* Dark gray to match other icons */
        stroke: #333 !important;
        fill: none !important;
        width: 22px !important; /* FIXED: Larger icon for better visibility */
        height: 22px !important;
    }

    .customer-care-icon:hover {
        color: #333 !important; /* Dark gray to match other icons */
    }

    .customer-care-icon:hover svg {
        color: #333 !important; /* Dark gray to match other icons */
    }
    
    .mobile-search-icon {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important; /* CRITICAL: Smaller width */
        height: 56px !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        color: #333 !important;
        transition: color 0.3s ease !important;
        flex-shrink: 0 !important;
    }

    .mobile-search-icon a {
        color: #333 !important; /* Dark gray to match other icons */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        text-decoration: none !important;
    }
    
    .mobile-search-icon svg {
        color: #333 !important; /* Dark gray to match other icons */
        stroke: #333 !important;
        fill: none !important;
        width: 22px !important; /* FIXED: Larger icon for better visibility */
        height: 22px !important;
    }
    
    .mobile-search-icon:hover {
        color: #333 !important; /* Dark gray to match other icons */
    }
    
    .mobile-search-icon:hover svg {
        color: #333 !important; /* Dark gray to match other icons */
    }
    
    /* Ensure all mobile header icons are perfectly aligned */
    .main-header-content {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: 56px !important;
        width: 100% !important;
        overflow: visible !important; /* Allow badges to extend beyond header */
        gap: 8px !important; /* Reduced gap between icons */
        flex-wrap: nowrap !important; /* Keep everything in a single line */
    }
    
    /* Mobile header right side icons container */
    .main-header-content > div:last-child {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important; /* Reduced gap between icons */
    }
    
    .main-header-content > * {
        display: flex !important;
        align-items: center !important;
        height: 56px !important;
    }
    
    /* Fix mobile icon vertical alignment and reduce gaps */
    .mobile-wishlist-icon,
    .mobile-cart-icon,
    .mobile-search-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 56px !important;
        line-height: 1 !important;
        vertical-align: middle !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Fix gap between mobile header and banner slider */
    .main-header {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .main-header-bar {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* Remove any gaps between header and content */
    .main-header + * {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Fix any remaining gaps */
    .header-container {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .main-header-content {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* Ensure no gaps between header and banner */
    .main-header-bar + * {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Reduce gaps between mobile header icons */
    .main-header-content {
        gap: 2px !important; /* Minimal gap between icons */
    }
    
    /* Mobile header right side icons container */
    .main-header-content > div:last-child {
        display: flex !important;
        align-items: center !important;
        gap: 2px !important; /* Minimal gap between icons */
        justify-content: flex-end !important;
    }
    
    /* Ensure mobile icons are properly positioned and aligned */
    .mobile-search-icon,
    .mobile-wishlist-icon,
    .mobile-cart-icon {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
        vertical-align: middle !important;
        line-height: 1 !important;
    }
    
    /* Fix bag icon alignment specifically */
    .mobile-cart-icon {
        align-items: center !important;
        justify-content: center !important;
        display: flex !important;
        vertical-align: middle !important;
        height: 56px !important;
        line-height: 56px !important;
    }
    
    /* Ensure all mobile icons have same alignment */
    .mobile-search-icon,
    .mobile-wishlist-icon,
    .mobile-cart-icon {
        height: 56px !important;
        line-height: 56px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Ensure mobile icons are tightly packed */
    .main-header-content > div:last-child {
        display: flex !important;
        align-items: center !important;
        gap: 2px !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
    }
    
    /* Fix mobile logo centering and size */
    .main-header-content {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: 56px !important;
        width: 100% !important;
        overflow: visible !important; /* Allow badges to extend beyond header */
        gap: 2px !important;
    }
    
    /* Mobile logo styling - CRITICAL FIX: Left aligned */
    .main-header-content .logo {
        flex: 0 0 auto !important; /* CRITICAL: Don't expand */
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important; /* CRITICAL: Left align */
        max-width: 130px !important; /* CRITICAL: Limit width */
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Fix mobile search bar height and padding for small screens */
    .search-bar {
        height: 36px !important;
        padding: 6px 12px !important;
        margin: 0 !important;
        border-radius: 18px !important; /* Proper rounded corners */
    }
    
    .search-bar input {
        height: 24px !important;
        padding: 2px 8px !important;
        margin: 0 !important;
        font-size: 14px !important;
        border: none !important;
        background: transparent !important;
        pointer-events: none !important; /* Disable text input */
        cursor: pointer !important;
    }
    
    .search-bar button {
        height: 24px !important;
        width: 24px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        background: transparent !important;
    }
    
    /* Make search bar clickable for mobile */
    .search-bar {
        cursor: pointer !important;
        pointer-events: auto !important;
    }
    
    .search-bar:hover {
        background-color: rgba(0, 0, 0, 0.05) !important;
    }
    
    .search-bar:active {
        background-color: rgba(0, 0, 0, 0.1) !important;
    }
    
    
    /* Hide profile icon on mobile */
    .nav-icon.profile-icon {
        display: none !important;
    }
    
    /* Mobile header badges - EXACTLY match bottom nav badges */
    .mobile-wishlist-icon .icon-badge,
    .mobile-cart-icon .icon-badge {
        position: absolute !important;
        /* Overlap the 22px icon inside a 40x56 container */
        top: 6px !important;
        right: 10px !important;
        background: #ff4444 !important;
        color: white !important;
        border-radius: 50% !important;
        width: 14px !important;
        height: 14px !important;
        min-width: 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 8px !important; /* Same as bottom nav */
        font-weight: bold !important;
        line-height: 1 !important;
        border: 2px solid white !important; /* Same white ring as bottom nav */
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
        padding: 0 !important;
        z-index: 1000 !important;
        text-align: center !important;
        font-variant-numeric: tabular-nums !important;
        letter-spacing: 0 !important;
    }
    
    /* Old rules removed - moved to end of media query */
    
    
    /* Hamburger button styling to match bottom nav icons */
    .mobile-menu-toggle {
        background: none !important;
        border: none !important;
        padding: 8px !important;
        color: #333 !important; /* Dark gray to match other icons */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        cursor: pointer !important;
        border-radius: 8px !important;
        transition: background-color 0.2s ease !important;
    }
    
    .mobile-menu-toggle:hover {
        background-color: rgba(0, 0, 0, 0.05) !important;
    }
    
    .mobile-menu-toggle:active {
        background-color: rgba(0, 0, 0, 0.1) !important;
        transform: scale(0.95) !important;
    }
    
    .nav-content {
        gap: 10px !important;
        padding: 0 !important; /* Use container padding instead */
        justify-content: space-between !important;
        z-index: 9999999 !important;
    }

    .nav-menu {
        display: none !important;
    }

    .nav-search {
        flex: 0 0 auto !important;
        margin: 0 !important; /* Consistent with desktop - no extra margin */
    }
    
    /* Enhanced mobile menu toggle */
    .mobile-menu-toggle {
        display: flex !important;
        /* Enhanced touch target for mobile */
        min-height: 44px;
        min-width: 44px;
        padding: 8px;
        border-radius: 8px;
        transition: background-color 0.2s ease;
    }
    
    .mobile-menu-toggle:active {
        background-color: rgba(0, 0, 0, 0.1);
        transform: scale(0.95);
    }
    
    /* Mobile app-like header adjustments */
    .header-main {
        padding: 8px 0;
    }
    
    .header-icons .nav-icon {
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        transition: background-color 0.2s ease;
    }
    
    .header-icons .nav-icon:active {
        background-color: rgba(0, 0, 0, 0.1);
        transform: scale(0.95);
    }

    /* Search popup responsive */
    .search-popup-content {
        width: 95%;
        margin: 20px;
        max-height: calc(100vh - 60px);
    }

    .search-popup-body {
        flex-direction: column;
        min-height: auto;
    }

    .search-recommendations {
        flex: none;
        border-right: none;
        border-bottom: 1px solid #f0f0f0;
        padding: 16px 20px;
    }

    .search-bestsellers {
        padding: 16px 20px;
    }

    .bestseller-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .mobile-menu-toggle {
        display: flex !important;
        z-index: 9999999 !important;
        /* Enhanced touch target for mobile */
        min-height: 44px;
        min-width: 44px;
        padding: 8px;
        border-radius: 8px;
        transition: background-color 0.2s ease;
    }
    
    .mobile-menu-toggle:active {
        background-color: rgba(0, 0, 0, 0.1);
        transform: scale(0.95);
    }

    .nav-icons {
        gap: 15px !important;
        z-index: 9999999 !important;
    }

    .nav-icon {
        font-size: 16px !important;
        z-index: 9999999 !important;
    }

    /* Hide contact options on mobile - keep only animated offers */
    .contact-info {
        display: none !important;
    }

    .top-links {
        display: none !important;
    }

    /* Center the animated offers on mobile */
    .top-bar-content {
        justify-content: center !important;
    }

    .animated-offers {
        flex: none !important;
        width: 100% !important;
        max-width: none !important;
    }

    .logo-img {
        height: 60px !important; /* Increased height for better visibility */
        width: 200px !important; /* Reduced width for left alignment */
        max-width: 250px !important;
        object-fit: contain !important;
    }
    
    /* CRITICAL: Hide wishlist/cart icons on mobile - MUST BE LAST to override all other rules */
    .mobile-wishlist-icon,
    .mobile-cart-icon,
    .header-icons .mobile-wishlist-icon,
    .header-icons .mobile-cart-icon,
    .nav-icons .mobile-wishlist-icon,
    .nav-icons .mobile-cart-icon {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
    }
    
    /* Only show when bottom nav is hidden */
    body.hide-bottom-nav .mobile-wishlist-icon,
    body.hide-bottom-nav .mobile-cart-icon,
    body.hide-bottom-nav .header-icons .mobile-wishlist-icon,
    body.hide-bottom-nav .header-icons .mobile-cart-icon,
    body.hide-bottom-nav .nav-icons .mobile-wishlist-icon,
    body.hide-bottom-nav .nav-icons .mobile-cart-icon {
        display: flex !important;
        visibility: visible !important;
        width: 40px !important;
        height: 40px !important;
        opacity: 1 !important;
        transition: all 0.3s ease !important;
    }
}

/* Specific 430px mobile header badge fixes */
@media (max-width: 430px) {
    /* Ensure header container allows badge overflow */
    .main-header-content {
        overflow: visible !important;
        padding: 0 !important; /* Edge-to-edge: remove side padding on small mobile */
    }
    
    /* CRITICAL: Default - attach to top on 430px */
    .main-header-bar {
        top: 0 !important; /* Default: attach to top for 430px screens */
    }
    
    /* Home page with topbar - position below topbar (header without hide-topbar-mobile) */
    body:has(.main-header:not(.hide-topbar-mobile)) .main-header-bar {
        top: 28px !important; /* Home page only on 430px */
    }
    
    .mobile-wishlist-icon .icon-badge,
    .mobile-cart-icon .icon-badge {
        position: absolute !important;
        top: 6px !important;
        right: 10px !important;
        background: #ff4444 !important;
        color: white !important;
        border-radius: 50% !important;
        min-width: 14px !important; /* Slightly larger for 430px */
        width: 14px !important;
        height: 14px !important;
        font-size: 8px !important;
        font-weight: bold !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        border: none !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
        padding: 0 !important;
        z-index: 1000 !important;
    }
}

@media (max-width: 768px) {
  /* Mobile logo - increase size for better visibility */
  .logo-img {
    height: 50px !important; /* Reduced height for mobile */
    width: 150px !important; /* Reduced width for mobile */
    max-width: 200px !important;
    object-fit: contain !important;
  }
}

@media (max-width: 480px) {
    /* Mobile logo - increase size for better visibility */
    .logo-img {
        height: 60px !important; /* Increased height for better visibility */
        width: 180px !important; /* Reduced width for smaller screens */
        max-width: 220px !important;
        object-fit: contain !important;
    }
    
    /* Wishlist and cart icons - KEEP HIDDEN (bottom nav shows them) */
    .mobile-wishlist-icon,
    .mobile-cart-icon {
        display: none !important; /* Keep hidden - no override */
    }
    
    /* Header content - maintain tight spacing */
    .main-header-content {
        padding: 0 10px !important; /* Even tighter on small screens */
        gap: 2px !important; /* Minimal gap */
    }
    
    /* CRITICAL: Pages without topbar - attach header to top (override 768px rule) */
    body.cart-page .main-header-bar,
    body.wishlist-page .main-header-bar,
    body.category-page .main-header-bar,
    body.orders-page .main-header-bar,
    body.track-order-page .main-header-bar,
    body.product-page .main-header-bar,
    body.products-page .main-header-bar,
    body:has(.productsPage) .main-header-bar,
    body:has(.productsMain) .main-header-bar,
    body[data-page="products"] .main-header-bar {
        top: 0 !important; /* Attach to top when no topbar */
        position: fixed !important; /* FIXED: Ensure sticky header */
        z-index: 10000 !important; /* CRITICAL FIX: Changed from 9999998 to 10000 for consistency */
    }

    /* FIXED: Product page specific - show wishlist and cart icons */
    body.product-page .mobile-wishlist-icon,
    body.product-page .mobile-cart-icon {
        display: flex !important;
        visibility: visible !important;
    }
    
    .mobile-wishlist-icon:hover,
    .mobile-cart-icon:hover {
        background: transparent !important;
        color: #333 !important; /* Dark gray to match other icons */
    }
    
    .mobile-wishlist-icon:active,
    .mobile-cart-icon:active {
        background: transparent !important;
        color: #333 !important; /* Dark gray to match other icons */
        transform: none !important;
    }
    
    /* Ensure mobile icons have same color as other header icons */
    .mobile-wishlist-icon svg,
    .mobile-cart-icon svg {
        color: #333 !important; /* Dark gray to match other icons */
        stroke: #333 !important;
        fill: none !important;
        width: 20px !important;
        height: 20px !important;
    }
    
    
    /* Hide search bar completely on mobile */
    .search-section {
        display: none !important;
    }
    
    .search-bar {
        display: none !important;
    }
    
    .logo-img {
        height: 60px !important; /* Increased height for better visibility */
        width: 200px !important; /* Reduced width for 430px screens */
        max-width: 250px !important;
        object-fit: contain !important;
    }
    
    /* Hide search section and header icons on mobile */
    .search-section {
        display: none !important;
    }
    
    .header-icons {
        display: none !important;
    }
    
    /* Hide desktop navigation icons on mobile */
    .nav-icons {
        display: none !important;
    }
    
    /* Hide desktop nav-icon elements on mobile */
    .nav-icon {
        display: none !important;
    }
    
    /* Hide desktop header icons container on mobile */
    .header-icons {
        display: none !important;
    }
    
    /* Hide desktop wishlist and cart icons on mobile */
    .nav-icon.wishlist-icon,
    .nav-icon.cart-icon {
        display: none !important;
    }
    
    /* Show only contact us and search icons on mobile */
    .customer-care-icon {
        display: flex !important;
        margin-left: auto !important;
    }
    
    .customer-care-icon {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        color: #333 !important; /* Dark gray to match other icons */
        transition: color 0.3s ease !important;
    }
    
    .customer-care-icon a {
        color: #333 !important; /* Dark gray to match other icons */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        text-decoration: none !important;
    }
    
    .customer-care-icon svg {
        color: #333 !important; /* Dark gray to match other icons */
        stroke: #333 !important;
        fill: none !important;
        width: 20px !important;
        height: 20px !important;
    }
    
    .customer-care-icon:hover {
        color: #333 !important; /* Dark gray to match other icons */
    }
    
    .customer-care-icon:hover svg {
        color: #333 !important; /* Dark gray to match other icons */
    }
    
    .mobile-search-icon {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        color: #333 !important; /* Dark gray to match other icons */
        transition: color 0.3s ease !important;
    }
    
    .mobile-search-icon a {
        color: #333 !important; /* Dark gray to match other icons */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        text-decoration: none !important;
    }
    
    .mobile-search-icon svg {
        color: #333 !important; /* Dark gray to match other icons */
        stroke: #333 !important;
        fill: none !important;
        width: 20px !important;
        height: 20px !important;
    }
    
    .mobile-search-icon:hover {
        color: #333 !important; /* Dark gray to match other icons */
    }
    
    .mobile-search-icon:hover svg {
        color: #333 !important; /* Dark gray to match other icons */
    }
    
    /* Ensure all mobile header icons are perfectly aligned */
    .main-header-content {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: 56px !important;
        width: 100% !important;
        overflow: visible !important; /* Allow badges to extend beyond header */
        gap: 8px !important; /* Reduced gap between icons */
    }
    
    /* Mobile header right side icons container */
    .main-header-content > div:last-child {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important; /* Reduced gap between icons */
    }
    
    .main-header-content > * {
        display: flex !important;
        align-items: center !important;
        height: 56px !important;
    }
    
    /* Fix mobile icon vertical alignment and reduce gaps */
    .mobile-wishlist-icon,
    .mobile-cart-icon,
    .mobile-search-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 56px !important;
        line-height: 1 !important;
        vertical-align: middle !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Fix gap between mobile header and banner slider */
    .main-header {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .main-header-bar {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* Remove any gaps between header and content */
    .main-header + * {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Fix any remaining gaps */
    .header-container {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .main-header-content {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* Ensure no gaps between header and banner */
    .main-header-bar + * {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Reduce gaps between mobile header icons */
    .main-header-content {
        gap: 2px !important; /* Minimal gap between icons */
    }
    
    /* Mobile header right side icons container */
    .main-header-content > div:last-child {
        display: flex !important;
        align-items: center !important;
        gap: 2px !important; /* Minimal gap between icons */
        justify-content: flex-end !important;
    }
    
    /* Ensure mobile icons are properly positioned and aligned */
    .mobile-search-icon,
    .mobile-wishlist-icon,
    .mobile-cart-icon {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
        vertical-align: middle !important;
        line-height: 1 !important;
    }
    
    /* Fix bag icon alignment specifically */
    .mobile-cart-icon {
        align-items: center !important;
        justify-content: center !important;
        display: flex !important;
        vertical-align: middle !important;
        height: 56px !important;
        line-height: 56px !important;
    }
    
    /* Ensure all mobile icons have same alignment */
    .mobile-search-icon,
    .mobile-wishlist-icon,
    .mobile-cart-icon {
        height: 56px !important;
        line-height: 56px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Ensure mobile icons are tightly packed */
    .main-header-content > div:last-child {
        display: flex !important;
        align-items: center !important;
        gap: 2px !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
    }
    
    /* Fix mobile logo centering and size */
    .main-header-content {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: 56px !important;
        width: 100% !important;
        overflow: visible !important; /* Allow badges to extend beyond header */
        gap: 2px !important;
    }
    
    /* Mobile logo styling - CRITICAL FIX: Left aligned */
    .main-header-content .logo {
        flex: 0 0 auto !important; /* CRITICAL: Don't expand */
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important; /* CRITICAL: Left align */
        max-width: 130px !important; /* CRITICAL: Limit width */
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Fix mobile search bar height and padding for small screens */
    .search-bar {
        height: 36px !important;
        padding: 6px 12px !important;
        margin: 0 !important;
        border-radius: 18px !important; /* Proper rounded corners */
    }
    
    .search-bar input {
        height: 24px !important;
        padding: 2px 8px !important;
        margin: 0 !important;
        font-size: 14px !important;
        border: none !important;
        background: transparent !important;
        pointer-events: none !important; /* Disable text input */
        cursor: pointer !important;
    }
    
    .search-bar button {
        height: 24px !important;
        width: 24px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        background: transparent !important;
    }
    
    /* Make search bar clickable for mobile */
    .search-bar {
        cursor: pointer !important;
        pointer-events: auto !important;
    }
    
    .search-bar:hover {
        background-color: rgba(0, 0, 0, 0.05) !important;
    }
    
    .search-bar:active {
        background-color: rgba(0, 0, 0, 0.1) !important;
    }
    
    
    /* Hide profile icon on mobile */
    .nav-icon.profile-icon {
        display: none !important;
    }
    
    /* Mobile header badge positioning - overlap top-right corner - NO BORDER */
    .mobile-wishlist-icon .icon-badge,
    .mobile-cart-icon .icon-badge {
        position: absolute !important;
        top: 6px !important;
        right: 10px !important;
        background: #ff0000 !important;
        color: white !important;
        border-radius: 50% !important;
        min-width: 16px !important;
        width: 16px !important;
        height: 16px !important;
        font-size: 9px !important;
        font-weight: bold !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        border: none !important; /* NO border */
        outline: none !important; /* NO outline */
        box-shadow: 0 2px 4px rgba(0,0,0,0.25) !important; /* Subtle shadow only */
        padding: 0 !important;
        z-index: 1000 !important;
        transform: translate(25%, -25%) !important; /* Move to overlap top-right corner */
    }
    
    /* Old rules removed - moved to end of media query */
    
    
    /* Hamburger button styling to match bottom nav icons */
    .mobile-menu-toggle {
        background: none !important;
        border: none !important;
        padding: 8px !important;
        color: #333 !important; /* Dark gray to match other icons */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        cursor: pointer !important;
        border-radius: 8px !important;
        transition: background-color 0.2s ease !important;
    }
    
    .mobile-menu-toggle:hover {
        background-color: rgba(0, 0, 0, 0.05) !important;
    }
    
    .mobile-menu-toggle:active {
        background-color: rgba(0, 0, 0, 0.1) !important;
        transform: scale(0.95) !important;
    }
    
    /* Search section and header icons now use flexbox layout */
    .header-icons {
        gap: 15px !important;
    }
    
    .top-bar .container {
        padding: 0 20px !important;
    }

    .nav-content {
        padding: 0 !important; /* Use container padding instead */
        z-index: 9999999 !important;
    }

    .nav-search {
        margin: 0 !important;
    }

    /* Extra small screen search popup */
    .bestseller-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .search-popup-header {
        padding: 16px 20px;
    }

    .search-recommendations,
    .search-bestsellers {
        padding: 12px 16px;
    }

    .nav-icons {
        gap: 10px !important;
        z-index: 9999999 !important;
    }

    .nav-icon {
        font-size: 14px !important;
        padding: 6px !important;
        z-index: 9999999 !important;
    }
}

/* Override global navigation styles from styles.css */
.nav-menu a {
    text-decoration: none !important;
        color: #333 !important; /* Dark gray to match other icons */
    font-weight: 500 !important;
    transition: color 0.3s !important;
    position: relative !important;
    border: none !important;
    outline: none !important;
}

.nav-menu a:hover {
        color: #333 !important; /* Dark gray to match other icons */ /* Consistent with other hover colors */
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
}

/* Remove global ::after pseudo-element */
.nav-menu a::after {
    display: none !important;
    content: none !important;
}

.nav-menu a:hover::after {
    display: none !important;
    content: none !important;
}

/* ===== CONSOLIDATED HEADER STYLES - SINGLE SOURCE OF TRUTH ===== */

/* Override any conflicting styles from globals.css */

.main-nav .container {
    max-width: none !important;
    margin: 0 !important;
    width: 100% !important;
    padding: 0 50px !important;
}


/* Logo Styles */

/* Navigation Menu */
.nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 40px;
    flex: 1;
    justify-content: space-between;
}

.nav-item {
    position: relative;
}

/* Duplicate nav-link styles removed - using main definition above */

/* Header Shrink Animation */
.main-header.header-shrink .main-nav {
    height: auto !important; /* Use natural height when header shrinks too */
}


.main-header.header-shrink .logo-img {
    height: 48px !important; /* Slightly smaller when header shrinks */
    width: 320px !important;
    max-width: 400px !important;
    object-fit: contain !important;
}

/* Responsive Navigation Styles */
@media (max-width: 1200px) {
    .nav-menu {
        gap: 20px;
    }
    
    .main-header .nav-link,
    .nav-menu .nav-link,
    .nav-item .nav-link {
        font-size: 15px !important;
        font-weight: 600 !important;
        padding: 12px 12px !important; /* Maintain 8px vertical padding */
    }
}

@media (max-width: 1024px) {
    .nav-menu {
        gap: 15px;
    }

    .main-header .nav-link,
    .nav-menu .nav-link,
    .nav-item .nav-link {
        font-size: 14px !important;
        font-weight: 600 !important;
        padding: 12px 10px !important; /* Maintain 8px vertical padding */
    }
    
    .main-nav .container {
        padding: 0 30px !important;
    }
}

@media (max-width: 900px) {
    .nav-menu {
        gap: 10px;
    }
    
    .main-header .nav-link,
    .nav-menu .nav-link,
    .nav-item .nav-link {
        font-size: 13px !important;
        padding: 8px 8px !important; /* Maintain 8px vertical padding */
    }
    
    .main-nav .container {
        padding: 0 20px !important;
    }
}

@media (max-width: 768px) {

    .nav-menu {
        display: none;
    }

    /* Hide search bar completely on mobile and tablet */
    .search-section {
        display: none !important;
    }
    
    .search-bar {
        display: none !important;
    }

    .nav-icons {
        gap: 15px;
    }

    .nav-icon {
        font-size: 16px;
        padding: 8px;
    }

    .logo-img {
        height: 50px !important; /* Keep height within header */
        width: 320px !important; /* Increased width for tablet */
        max-width: 380px !important;
        object-fit: contain !important;
    }
}

@media (max-width: 480px) {

    .nav-icons {
        gap: 10px;
    }

    .nav-icon {
        font-size: 14px;
        padding: 6px;
    }

    .logo-img {
        height: 48px !important; /* Slightly smaller for very small screens */
        width: 240px !important;
        max-width: 280px !important;
        object-fit: contain !important;
    }
    
    /* CRITICAL: Pages without topbar - attach header to top (override all previous rules) */
    body.cart-page .main-header-bar,
    body.wishlist-page .main-header-bar,
    body.category-page .main-header-bar,
    body.orders-page .main-header-bar,
    body.track-order-page .main-header-bar,
    body.product-page .main-header-bar,
    body.products-page .main-header-bar,
    body:has(.productsPage) .main-header-bar,
    body:has(.productsMain) .main-header-bar,
    body[data-page="products"] .main-header-bar {
        top: 0 !important; /* Attach to top when no topbar */
        position: fixed !important; /* FIXED: Ensure sticky header */
        z-index: 10000 !important; /* CRITICAL FIX: Changed from 9999998 to 10000 for consistency */
    }

    /* FIXED: Product page specific - show wishlist and cart icons */
    body.product-page .mobile-wishlist-icon,
    body.product-page .mobile-cart-icon {
        display: flex !important;
        visibility: visible !important;
    }
    
    /* FIXED: Show wishlist/cart icons on mobile for product page */
    .mobile-wishlist-icon,
    .mobile-cart-icon {
        display: flex !important;
        visibility: visible !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
    }

    /* FIXED: Ensure icons are properly sized and aligned */
    .header-icons .mobile-wishlist-icon,
    .header-icons .mobile-cart-icon,
    .nav-icons .mobile-wishlist-icon,
    .nav-icons .mobile-cart-icon {
        display: flex !important;
        visibility: visible !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
    }
    
    /* Only show when bottom nav is hidden */
    body.hide-bottom-nav .mobile-wishlist-icon,
    body.hide-bottom-nav .mobile-cart-icon,
    body.hide-bottom-nav .header-icons .mobile-wishlist-icon,
    body.hide-bottom-nav .header-icons .mobile-cart-icon,
    body.hide-bottom-nav .nav-icons .mobile-wishlist-icon,
    body.hide-bottom-nav .nav-icons .mobile-cart-icon {
        display: flex !important;
        visibility: visible !important;
        width: 40px !important;
        height: 40px !important;
        opacity: 1 !important;
        transition: all 0.3s ease !important;
    }
}

/* ===== MOBILE TOPBAR/OFFSET CORRECTION - ENSURE NO GAP ON NON-HOME PAGES ===== */
@media (max-width: 768px) {
 /* On non-home mobile pages, Header adds class 'hide-topbar-mobile' → remove offset */
 .main-header.hide-topbar-mobile .main-header-bar {
   top: 0 !important;
   position: fixed !important; /* Ensure it remains fixed */
 }
 
 /* Hide top bar on mobile for non-home pages */
 .main-header.hide-topbar-mobile .top-bar {
   display: none !important;
 }

 /* On home page, keep header below topbar */
  .main-header:not(.hide-topbar-mobile) .main-header-bar {
    top: 28px !important;
  }
}

/* ===== MEGA MENU SPACING OVERRIDES - HIGH SPECIFICITY ===== */
/* Override any conflicting styles with maximum specificity */
.mega-menu .mega-menu-list,
.mega-menu .mega-menu-list li {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important; /* Balanced line height */
}

/* FINAL DESKTOP MEGA MENU OVERRIDES: FULL-WIDTH FIXED PANEL, FLUSH TO NAV */
@media (min-width: 769px) {
  .nav-item.has-mega-menu { position: relative !important; }
  .nav-item.has-mega-menu > .mega-menu {
    position: fixed !important;        /* full-width overlay panel */
    top: var(--header-total-height, 158px) !important;             /* Attach flush to navbar bottom */
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    min-width: 100vw !important;
    margin: 0 !important;
    opacity: 0;
    visibility: hidden;
    z-index: 2147483646 !important;    /* above everything */
  }
  .nav-item.has-mega-menu:hover > .mega-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Desktop: Checkout page (no topbar) — attach header to top and move nav below */
  body:has(.checkoutPage) .main-header-bar {
    top: 0 !important; /* Attach header to very top */
    position: fixed !important; /* Ensure sticky */
  }
  body:has(.checkoutPage) .main-nav {
    top: var(--header-above-nav-height, 80px) !important; /* Dynamic when no topbar */
  }
}

/* Specific mega menu list item spacing */
.mega-menu .mega-menu-list li {
  margin-bottom: 6px !important; /* Reduced spacing */
  padding: 0 !important;
}

/* Specific mega menu link spacing */
.mega-menu .mega-menu-list a {
  padding: 6px 0 !important; /* Increased padding to match HTML */
  margin: 0 !important;
  line-height: 1.4 !important; /* Increased line height */
  font-size: 14px !important; /* Restored original font size */
  gap: 10px !important; /* Increased gap for better icon spacing */
  display: flex !important; /* Flex display for proper icon alignment */
  align-items: center !important; /* Center align icons with text */
}

/* Mega menu column spacing */
.mega-menu .mega-menu-column {
  margin: 0 !important;
  padding: 0 !important;
}

/* Mega menu heading spacing */
.mega-menu .mega-menu-heading {
  margin-bottom: 8px !important; /* Reduced heading spacing */
  padding: 0 !important;
  line-height: 1.3 !important;
  font-size: 16px !important; /* Restored original font size */
}

/* Mega menu container spacing - REMOVED CONFLICTING OVERRIDES */
/* These styles are now defined in the main .mega-menu-container section above */

/* Ensure no extra spacing from any source */
.mega-menu * {
  box-sizing: border-box !important;
}

/* Override any potential conflicting styles */
.mega-menu .mega-menu-list li:last-child {
  margin-bottom: 0 !important;
}

.mega-menu .mega-menu-list a:last-child {
  margin-bottom: 0 !important;
}

/* Ensure icons are properly visible and sized */
.mega-menu-list a img.mega-menu-icon,
.mega-menu-list a .mega-menu-icon {
  width: 20px !important;
  height: 20px !important;
  margin-right: 8px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  object-fit: contain !important;
}

/* Force promotional images to fill available space completely */
.mega-menu-promotions .promo-item img[class*="promo-image"],
.mega-menu-promotions .promo-item .promo-image {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* Large Promotional Image Styling */
.large-promo {
  position: relative;
  width: 350px;
  height: 400px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.large-promo .promo-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 8px;
}

.promo-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  color: white;
  padding: 20px;
  text-align: left;
}

.promo-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 12px 0;
  line-height: 1.3;
}

.promo-button {
  background: #007bff;
  color: white !important;
  padding: 8px 16px;
  border-radius: 4px;
  text-decoration: none !important;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  display: inline-block;
  transition: background 0.3s ease;
}

.promo-button:hover {
  background: #0056b3;
  color: white !important;
}

/* Hide mobile wishlist and cart icons on desktop */
@media (min-width: 769px) {
    .mobile-wishlist-icon,
    .mobile-cart-icon {
        display: none !important;
    }
}
/* --- Visibility rules to prevent duplicate icons --- */
@media (max-width: 768px) {
  /* Hide desktop header icons on mobile */
  .header-icons {
    display: none !important;
  }

  /* Mobile header right-side icons container */
  .mobile-header-icons {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0px !important; /* FIXED: Remove gap between icons */
    height: 56px !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
    margin-left: auto !important; /* push to right */
    padding-right: 0 !important; /* FIXED: Remove right padding */
  }

  .mobile-header-icons > div {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 56px !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  .mobile-icon-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    text-decoration: none !important;
    color: #333 !important;
  }

  /* Ensure notification bell uses neutral color (not blue) */
  .mobile-notification-icon svg {
    color: #333 !important;
    stroke: #333 !important;
    fill: none !important;
    width: 22px !important;
    height: 22px !important;
  }
}

/* CRITICAL: Hide mobile-only icons on desktop to avoid duplication */
@media (min-width: 769px) {
  .mobile-header-icons,
  .mobile-notification-icon,
  .mobile-search-icon,
  .mobile-wishlist-icon,
  .mobile-cart-icon {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    pointer-events: none !important;
  }
}

/* ADDITIONAL: Ensure mobile header icons are never visible on desktop */
.mobile-header-icons {
  display: none !important;
}

@media (max-width: 768px) {
  .mobile-header-icons {
    display: flex !important;
  }
}

/* ===== SEARCH POPUP PLACEHOLDER SLIDER STYLES ===== */
/* Search popup placeholder slider */
.search-popup-placeholder-slider {
  position: absolute;
  left: 52px; /* 20px icon + 12px gap + 20px padding = 52px */
  right: 20px;
  height: 24px;
  overflow: hidden;
  pointer-events: none;
  top: 50%;
  transform: translateY(-50%);
}

.search-popup-placeholder-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 16px;
  line-height: 1.5;
  color: #999;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: var(--font-primary);
}

.search-popup-placeholder-text.active {
  opacity: 1;
  transform: translateY(0);
}

/* ===== VIDEO THUMBNAIL STYLES ===== */
/* Media display container for video thumbnails */
.media-display-container {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Video play overlay */
.video-play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  pointer-events: none;
  z-index: 2;
}

.bestseller-item:hover .video-play-overlay {
  background: rgba(0, 0, 0, 0.8);
  transform: translate(-50%, -50%) scale(1.1);
}

/* Video indicator badge */
.video-indicator {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
  pointer-events: none;
  z-index: 2;
  font-family: var(--font-primary);
  letter-spacing: 0.5px;
}

/* Enhanced hover effects for video thumbnails */
.bestseller-item:hover .video-indicator {
  background: rgba(0, 0, 0, 0.9);
}

/* Responsive video overlay sizes */
@media (max-width: 768px) {
  .video-play-overlay {
    padding: 6px;
  }
  
  .video-indicator {
    font-size: 9px;
    padding: 1px 4px;
    top: 6px;
    right: 6px;
  }
}