/* JaiMataJi 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;
}

/* Mobile: Top bar adjustment for natural stacking */
@media (max-width: 768px) {
    .top-bar {
        position: relative !important;
        /* Stack naturally within fixed parent */
        top: auto !important;
        z-index: 1 !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 */
    }
}

/* 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;
    }
}

.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;
    background: transparent !important;
    box-shadow: none !important;
}

.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;
    background: transparent !important;
    box-shadow: none !important;
}

.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 !important;
    background: transparent !important;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

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

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

    .offer-slider {
        max-width: 200px;
    }

    .contact-link {
        font-size: 11px;
    }

    .contact-link svg {
        width: 12px !important;
        height: 12px !important;
    }

    .top-links {
        gap: 8px;
    }
}

/* ===== 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;
    /* Fixed on desktop */
    top: 28px !important;
    /* Position below top bar on desktop */
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    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 */
    transition: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateZ(0) !important;
}

/* Mobile: Header bar adjustment for natural stacking */
@media (max-width: 768px) {
    .main-header-bar {
        position: relative !important;
        /* Stack naturally within fixed parent */
        top: auto !important;
        background-color: transparent !important;
        /* Use parent background */
        box-shadow: none !important;
        /* Use parent shadow */
        z-index: 2 !important;
    }
}

/* 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) {

    /* Children of .main-header stack naturally within fixed parent */
    .top-bar,
    .main-header-bar,
    .main-nav {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
    }
}

.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;
}


/* DESKTOP SEARCH POPUP VISIBILITY FIX - ALLOW POPUP TO SHOW */
@media (min-width: 769px) {
    .search-popup-overlay.active {
        display: block !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

.search-bar {
    position: relative;
    width: 300px;
    display: flex;
    align-items: center;
    background: transparent;
    border: 1px solid #000;
    border-radius: 0 !important;
    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,
    .search-bar .search-placeholder-slider {
        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: 1050 !important;
    /* Higher than everything else */
    background: transparent !important;
    box-shadow: none !important;
    width: 100%;
}

/* Mobile: Global sticky header for ALL pages including products */
@media (max-width: 768px) {
    .main-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1050 !important;
        background: #f0eee5 !important;
        /* Match homepage body color */
        height: auto !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: translateZ(0) !important;
        /* Force GPU acceleration */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
        width: 100% !important;
    }

    /* Ensure header stays fixed even when top bar is hidden */
    body.product-page .main-header,
    body.products-page .main-header {
        position: fixed !important;
        top: 0 !important;
    }

    /* Ensure children stack correctly without gaps */
    .top-bar {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        z-index: 1051 !important;
    }

    .main-header-bar {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        z-index: 1050 !important;
        background: transparent !important;
        /* Use parent background */
        box-shadow: none !important;
        /* Use parent shadow */
    }

    .main-nav {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        z-index: 1049 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Remove excessive spacing and gaps */
    .top-bar,
    .main-header-bar,
    .main-nav {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

.main-nav {
    position: fixed !important;
    top: var(--header-above-nav-height, 84px) !important;
    /* Desktop: dynamic top offset */
    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 */
    overflow: visible !important;
    /* allow mega menu to overflow */
}

/* Mobile: Nav adjustment for natural stacking */
@media (max-width: 768px) {
    .main-nav {
        position: relative !important;
        /* Stack naturally within fixed parent */
        top: auto !important;
        background: transparent !important;
        /* Use parent background */
        z-index: 3 !important;
    }
}

/* 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;
}

/* Mobile: Align logo to the left next to hamburger */
@media (max-width: 768px) {
    .logo {
        justify-content: flex-start !important;
        flex: 0 0 auto !important;
        margin-left: 16px !important;
    }
}

.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: -4px !important;
        right: -4px !important;
        background: #ff0000 !important;
        color: white !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: none !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
        z-index: 10 !important;
    }
}

/* ===== SEARCH POPUP OVERLAY STYLES ===== */
.search-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    /* Darker overlay for better focus */
    z-index: 10000001;
    /* above header/nav icons */
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(4px);
    /* Modern blur effect */
}

.search-popup-overlay.active {
    display: flex !important;
    opacity: 1 !important;
    align-items: center !important;
    /* Force vertical centering */
    justify-content: center !important;
    /* Force horizontal centering */
    padding: 20px;
    overflow-y: hidden;
    /* Prevent overlay from scrolling */
}

/* Desktop refinements for search popup */
@media (min-width: 769px) {
    .search-popup-overlay.active {
        padding: 40px 20px;
        /* More space on desktop */
    }

    .search-popup-content {
        width: 90%;
        max-width: 1100px;
        min-height: auto !important;
        max-height: 85vh;
        border-radius: 20px;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    }

    .bestseller-grid {
        grid-template-columns: repeat(3, 1fr);
        /* 3 items per row on desktop */
        gap: 24px;
    }
}

/* 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: 1100px;
    /* Match media query max-width */
    max-height: 85vh;
    /* Limit height for centering */
    margin: 0;
    /* Let flexbox handle it */
    border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: translateY(-20px);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    /* Content body will scroll */
}

.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-content,
.search-popup-header,
.search-input-wrapper {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

.search-input-icon {
    color: #999;
    margin-right: 12px;
    font-size: 16px;
    animation: none !important; /* Disable any involuntary shimmer */
    background: transparent !important;
}

.search-popup-input {
    flex: 1;
    border: none !important;
    outline: none !important;
    background: #ffffff !important; /* Force white background */
    background-color: #ffffff !important;
    font-size: 16px;
    color: #333;
    box-shadow: none !important;
    padding: 0 10px;
}

/* Override browser autofill background */
.search-popup-input:-webkit-autofill,
.search-popup-input:-webkit-autofill:hover,
.search-popup-input:-webkit-autofill:focus,
.search-popup-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important; /* Force white background on autofill */
    -webkit-text-fill-color: #333 !important;
    transition: background-color 5000s ease-in-out 0s;
}

.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: 20px 20px 20px;
    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 8px 0;
}

.recommendation-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.recommendation-list li {
    margin: 0;
}

.recommendation-list a {
    color: #666;
    text-decoration: none;
    font-size: 13px;
    line-height: 1.25;
    display: inline-flex;
    align-items: center;
    padding: 2px 0;
    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: 20px 24px 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 16px 0;
}

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

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

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

.bestseller-item:hover {
    transform: none;
}

.bestseller-item:hover img {
    transform: none;
    filter: none;
    box-shadow: none;
}

.bestseller-item img {
    width: 100%;
    height: 168px;
    object-fit: contain;
    border-radius: 0;
    margin-bottom: 8px;
    filter: none;
    transition: none;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: none;
    will-change: auto;
    box-shadow: none;
}

.bestseller-info {
    background: transparent;
    padding: 0;
}

.bestseller-info h4 {
    font-size: 13px;
    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: 11px;
    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: 20px;
    max-height: 500px;
    overflow-y: auto;
}

.search-results::-webkit-scrollbar {
    width: 4px;
}

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

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

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

@media (min-width: 769px) {
    .search-popup-body .bestseller-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .search-popup-body .bestseller-item img {
        height: 148px;
    }
}

.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: 0;
    align-content: flex-start;
}

.collections-mega-menu .mega-menu-collections-grid .mega-menu-heading {
    margin-bottom: 4px;
}

/* Collections grid: keep icons starting exactly from heading left edge */
.collections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 100px);
    grid-auto-rows: auto;
    column-gap: 20px;
    row-gap: 16px;
    margin-top: 0;
    max-height: none;
    overflow: visible;
    width: 100%;
    justify-content: flex-start;
    justify-items: start;
}

.collection-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 0;
    border-radius: 0;
    cursor: pointer;
    min-height: 0;
    width: 100px;
    transition: transform 0.2s ease;
}

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



.collection-icon {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 0;
    flex-shrink: 0;
}

.collection-name {
    font-size: 12px;
    color: #333;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    display: block;
    width: 100%;
    text-align: center;
}



.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: 2147483647 !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: 2147483647 !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;
        /* Lock page scroll while drawer is open. */
        position: static !important;
        width: 100% !important;
        height: auto !important;
        touch-action: none !important;
    }

    /* Keep mobile drawer above bottom navigation and floating layers. */
    body.mobile-menu-open .bottomNav,
    body.mobile-menu-open .mobile-bottom-nav,
    body.mobile-menu-open [class*="MobileBottomNav_bottomNav"],
    body.mobile-menu-open [class*="bottomNav"] {
        z-index: 1 !important;
        pointer-events: none !important;
    }
}

/* 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: 2147483647 !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: 2147483647 !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 !important;
    font-size: 14px;
    font-weight: 500;
    position: relative;
    text-decoration: none !important;
}

.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 OMNI 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(.product-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(.product-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 positioning - align hamburger, logo, and right icons */
    .main-header-content {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        /* Left align to accommodate hamburger + logo */
        height: 56px !important;
        width: 100% !important;
        overflow: visible !important;
        /* Allow badges to extend beyond header */
        gap: 8px !important;
        /* Proper spacing between elements */
    }

    /* Mobile logo styling - CRITICAL FIX: Positioned to right of hamburger */
    .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: Positioned to right of hamburger */
        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 positioning - align hamburger, logo, and right icons */
    .main-header-content {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        /* Left align to accommodate hamburger + logo */
        height: 56px !important;
        width: 100% !important;
        overflow: visible !important;
        /* Allow badges to extend beyond header */
        gap: 8px !important;
        /* Proper spacing between elements */
    }

    /* Mobile logo styling - CRITICAL FIX: Positioned to right of hamburger */
    .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: Positioned to right of hamburger */
        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: visible !important;
        opacity: 1 !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: 42px; /* Adjusted to align with input text */
    right: 20px;
    height: 24px;
    overflow: hidden;
    pointer-events: none;
    top: 50%;
    transform: translateY(-50%);
    background: #ffffff !important; /* Ensure placeholder area is white */
}

.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.6);
    transform: translate(-50%, -50%);
}

/* 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.7);
}

/* 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;
    }
}

/* ===== FINAL MOBILE HEADER ALIGNMENT OVERRIDE ===== */
@media (max-width: 768px) {
    .main-header-content {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        padding: 0 10px !important;
    }

    .mobile-menu-toggle {
        width: 40px !important;
        min-width: 40px !important;
        margin-right: 6px !important;
    }

    .main-header-content .logo {
        flex: 1 1 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        margin: 0 !important;
        padding: 0 !important;
        max-width: none !important;
    }

    .main-header-content .logo .logo-img,
    .logo-img {
        width: 120px !important;
        max-width: 120px !important;
        height: 45px !important;
        object-fit: contain !important;
        margin: 0 !important;
    }

    .main-header-content .mobile-header-icons {
        flex: 0 0 auto !important;
        margin-left: auto !important;
        padding-right: 0 !important;
        gap: 0 !important;
    }

    .main-header-content .mobile-header-icons>div {
        width: 36px !important;
        min-width: 36px !important;
    }

    body.cart-page .main-header-content .mobile-header-icons,
    body.wishlist-page .main-header-content .mobile-header-icons {
        justify-content: flex-end !important;
    }
}