.main-header {
                                /* Existing styles remain... */
                                position: relative; /* Keep it relative by default */
                                /* Ensure a smooth transition if it moves/sticks */
                                transition: top 0.3s ease-out, position 0.3s ease-out; 
                                /* Adding box shadow for visual separation when it becomes sticky/scrolled */
                                box-shadow: 0 0px 0px rgba(0, 0, 0, 0.0); /* Default: no shadow */
                                z-index: 10; /* Ensure it stays above other content */
                            }

                            /* When scrolled, make the main header sticky */
                            body.scrolled .main-header {
                                /* Use 'fixed' position to stick it to the top of the viewport */
                                position: fixed;
                                top: 0;
                                left: 0;
                                right: 0;
                                /* Add a subtle shadow to lift it off the content */
                                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
                            }
                            .top-bar a {
                                color: var(--color-supporting);
                                font-weight: 600;
                                border-bottom: 1px solid var(--color-supporting);
                            }
                            .secondary-nav {
                                background-color: var(--color-accent-light);
                                text-align: right;
                                position: relative;
                                padding: 8px 30px;
                                font-size: 0.85rem;
                                border-bottom: 1px solid var(--color-accent-dark);
                            }

                            .secondary-nav a {
                                color: var(--color-secondary);
                                margin-left: 15px;
                                opacity: 0.9;
                            }

                            .secondary-nav a:hover {
                                color: var(--color-primary);
                                opacity: 1;
                            }

                
                            .main-header {
                                display: flex;
                                /* Arranges nav, logo (placeholder), and icons */
                                justify-content: space-between;    
                                align-items: center;
                                height: 60px; /* fixed header height */
                                z-index: 101;

                                padding: 20px 30px;    
                                background-color: var(--color-supporting);
                                /* Essential for absolute positioning of the logo */
                                position: relative;    
                            }

                            .logo img {
                                height: 90px; /* increase only this */
                                width: auto;
                                display: block;
                                margin-right: 50px;
                            }


                            /* --- LEFT NAVIGATION LINKS (.main-nav) --- */
                            .main-nav {
                                display: flex;
                                gap: 25px;
                                /* Forces this group to stay on the left */
                                flex-shrink: 0;    
                            }

                            /* --- RIGHT GROUP (Navigation Links + Icons) - NEW CONTAINER --- */
                            .right-group {
                                display: flex;
                                align-items: center;
                                gap: 25px; /* Spacing between right-nav links and the icon group */
                                flex-shrink: 0;
                            }

                            /* --- RIGHT NAVIGATION LINKS (.right-nav) - NEW ELEMENT --- */
                            .right-nav {
                                display: flex;
                                gap: 25px;
                            }


                            /* --- Shared Link Styles (main-nav and right-nav) --- */
                            .main-nav a,
                            .right-nav a {
                                font-size: 0.95rem;
                                font-weight: 600;
                                color: var(--color-secondary);
padding: 5px var(--nav-link-horizontal-padding); /* e.g., padding: 5px 15px; */                                position: relative;
                            }

                            .main-nav a:hover,
                            .right-nav a:hover {
                                color: var(--color-primary);
                            }

                            
                            /* "Hot" links (Red Text) */
                            .hot-link {
                                color: var(--color-primary) !important;
                            }

                            /* --- Header Icons (Search, User, Heart, Cart, Menu) --- */
                .icons {
                    display: flex;
                    align-items: center;
                    gap: 20px;
                }

                .icon-img {
                    /* Base Size */
                    width: 24px; 
                    height: 24px;

                    /* 1. Set Image Color to BLACK (Invert 0% / Brightness 0%) */
                    filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%);

                    display: block;
                    /* Smooth transition for the filter effect */
                    transition: filter 0.2s ease-in-out; 
                }

                /* 2. Set Hover Color to #E60000 Red */
                .icons a:hover .icon-img {
                    /* Filter values specifically calculated for #E60000 */
                    filter: invert(12%) sepia(97%) saturate(7400%) hue-rotate(357deg) brightness(90%) contrast(110%);
                }

                /* Retain the base anchor styles */
                .icons a {
                    position: relative;
                }
                            
                        

                            
                            .mobile-menu-toggle .menu-icon:hover i {
                                color: var(--color-primary); /* Changes icon color to red on hover */
                            }
                            /* --- NEW: Mobile Menu Toggle Styles (Hidden on Desktop) --- */
                            .mobile-menu-toggle {
                                display: none;    
                            }
                

                        /* === NEW: Wishlist Count Badge === */
                        .wishlist-count {
                            position: absolute;
                            /* Adjust these values to position the badge on the Wishlist icon */
                            top: -8px; 
                            right: -10px;
                            background-color: var(--color-primary); /* Red color */
                            color: var(--color-supporting); /* White text */
                            
                            /* Perfect Circle and Centering */
                            width: 20px; 
                            height: 20px;
                            border-radius: 50%;
                            
                            /* Centering the count number inside the circle */
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            
                            font-size: 0.7rem;
                            font-weight: 500;
                            line-height: 1;
                        }

                        /* === Existing Cart Count Styles (Included for completeness/comparison) === */
                        .cart-count {
                            position: absolute;
                            top: -8px;
                            right: -10px;
                            background-color: var(--color-primary);
                            color: var(--color-supporting);
                            
                            width: 20px;
                            height: 20px;
                            border-radius: 50%;
                            
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            
                            font-size: 0.7rem;
                            font-weight: 500;
                            line-height: 1;
                        }

                
                            @media (max-width: 1118px) {
                                /* 1. Hide Desktop Navigation */
                                .secondary-nav {
                                    display: none; /* Hide the top secondary links (ABOUT US, BLOG, etc.) */
                                }
                            
                                .main-nav,    
                                .right-nav {
                                    display: none; /* Hide main shopping links (HOME, SHOP, CATEGORIES, TOP DEALS, ELEMENTS) */
                                }

                                /* 2. Redefine Main Header Layout */
                                .main-header {
                                    /* Remove horizontal padding to use full width */
                                    padding: 15px 15px;
                                        height: 40px; /* fixed header height */

                                }
                            /* --- Top Bar (Red Strip) --- */
                            .top-bar {
                                
                                font-size: 0.7rem;
                            
                            }.top-bar p a {
                                display: block;    
                                margin-top: 2px;
                                border-bottom: none;
                                text-decoration: underline;
                                }
                                /* 3. Adjust Logo Size */
                                .logo img {
                                    /* Make the logo much smaller for mobile view */
                                    height: 60px;    
                                    /* Reset margin added for desktop */
                                    margin-right: 0;    
                                }

                                /* 4. Display Menu Toggle Icon on Left */
                                .mobile-menu-toggle {
                                    /* Make the menu icon visible */
                                    display: block;    
                                    /* Ensure it's on the far left */
                                    order: -1;    
                                    /* Align icon to center with logo */
                                    align-self: center;
                                    margin-right: 15px;
                                }

                                .mobile-menu-toggle .menu-icon i {
                                    font-size: 1.5rem; /* Make the icon a little bigger */
                                }

                                /* 5. Group and Align Right Icons */
                                .right-group {
                                    /* Remove the gap since we hid the right-nav links */
                                    gap: 0;    
                                    /* Ensure the icons remain on the far right */
                                    margin-left: auto;
                                }

                                /* Adjust icon spacing for mobile */
                                .icons {
                                    gap: 15px;    
                                }
                                
                                .icon-img {
                                /* Base Size */
                                width: 22px; 
                                height: 22px;

                                /* 1. Set Image Color to BLACK (Invert 0% / Brightness 0%) */
                                filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%);

                                display: block;
                                /* Smooth transition for the filter effect */
                                transition: filter 0.2s ease-in-out; 
                            }
                
                                .wishlist-count {
                        
                        
                            width: 18px; 
                            height: 18px;
                        
                            
                            font-size: 0.7rem;
                        }

                        /* === Existing Cart Count Styles (Included for completeness/comparison) === */
                        .cart-count {
                    
                            
                            width: 18px;
                            height: 18px;
                            
                            
                            font-size: 0.7rem;
                        }
                .cart-count, 
                    .wishlist-count {
                        top: -5px;
                        right: -8px;
                    }
                                
                            }


                           /* ------------------------------------------- */
/* --- MOBILE DROPDOWN STYLES (Revised) --- */
/* ------------------------------------------- */

/* Wrapper for the collapsible section */
.mobile-dropdown-toggle {
    display: flex;
    flex-direction: column;
}

/* Style for the main link (e.g., CATEGORIES) */
.mobile-dropdown-toggle .mobile-main-link {
     display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    border-bottom: 1px solid var(--color-accent-light);
    color: var(--color-primary);
}

 /* Targets the main link and the logout icon link */
.user-link, .logout-link {
    text-decoration: none;
}

/* 1. Makes the entire "Welcome, [username]!" text red */
.user-link.red-text {
    color: var(--color-primary); 
    font-weight: 500;
}

/* 2. Makes the logout icon black (by targeting the <a> or <i> tag) */
/* Targeting the <a> tag is often enough if no other styles override the <i> tag */
.logout-link.black-text,
.logout-link.black-text i {
    color:var(--color-secondary);
}

/* The actual sub-menu container - crucial for collapsing */
.mobile-sub-menu {
    /* Hide by setting max-height to 0 and hiding content */
    max-height: 1500px; /* Increased from 500px to ensure long product lists fit */
    overflow: hidden;
    transition: max-height 0.4s ease-in-out; /* Slightly slower transition for better visibility */
    background-color: var(--color-accent-lightest, #f8f8f8);
    /* Prevent internal scrolling; rely on the parent side-menu-panel scroll */
    overflow-y: auto;
}

/* Class applied by JS to expand the sub-menu */
.mobile-sub-menu:not(.open) {
    max-height: 0; /* Ensures it starts closed */
}

/* Rotate the icon when the menu is open */
.mobile-dropdown-toggle .mobile-main-link.active .mobile-icon-toggle {
    transform: rotate(180deg);
    transition: transform 0.3s;
}
.mobile-icon-toggle {
    transition: transform 0.3s;
}

/* Sub-Menu Links (Categories List) */
.mobile-sub-item {
     display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 30px; 
    font-size: 0.85rem;
    color: var(--color-secondary);
    border-bottom: 1px dashed var(--color-accent-light);
}
.mobile-sub-item:last-of-type {
    border-bottom: none;
}

/* Products Sub-Menu Styling (Category Header) */
.mobile-sub-header {
     display: block;
    padding: 12px 30px 5px 30px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-primary);
    border-top: 1px solid var(--color-accent-light);
    border-bottom: 1px solid var(--color-accent-light);
    text-decoration: none;
}
.mobile-sub-product {
    font-weight: 500;
}
.mobile-sub-product {
     display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 40px; 
    font-size: 0.5rem;
    color: var(--color-text-faint, #666);
    text-decoration: none;
    border-bottom: 1px dotted var(--color-accent-light); /* Added dotted line for clarity */
}
/* Remove border from the last product link in a category (optional) */
.mobile-sub-menu > .mobile-sub-product:last-of-type {
    border-bottom: none; 
}


.mobile-item-price {
    font-weight: 600;
}

.mobile-sub-view-all {
    display: block;
    text-align: right;
    padding: 10px 20px 10px 0;
    font-weight: 600;
    color: var(--color-primary);
    border-top: 1px solid var(--color-accent-light); /* Added line above View All */
}


/* ------------------------------------------- */
/* --- MOBILE SIDE MENU STYLES (No change needed for scroll) --- */
/* ------------------------------------------- */

/* 1. Overlay */
.side-menu-overlay {
     position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
        backdrop-filter: blur(2px); 
    background-color: rgba(var(--color-secondary-rgb), 0.7);
    z-index: 99;
    display: none; 
}

/* 2. Menu Panel - This is what needs to scroll the content */
.side-menu-panel {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 300px; 
    background-color: var(--color-supporting);
    box-shadow: 4px 0 10px rgba(var(--color-secondary-rgb), 0.2);
    z-index: 100;
    /* *** CRITICAL FOR SCROLLING: overflow-y: auto; is already here, which is correct. *** */
    overflow-y: auto; 
    transition: transform 0.3s ease-out;
    transform: translateX(-100%); 
 }

/* 3. Class to show the panel */
.side-menu-panel.open {
    transform: translateX(0);
}

/* 4. Menu Content Styles */
.menu-header {
    /* ... (styles unchanged) */
    display: flex;
    justify-content: flex-end;
    padding: 15px 15px;
    border-bottom: 1px solid var(--color-accent-light);
}

/* --- REVISED CLOSE BUTTON STYLES --- */
.close-btn {
  /* Existing styles */
  font-size: 3rem;
  font-weight: 300;
  color: #000000;

  /* Required for smooth rotation */
  display: inline-block;

  /* --- CHANGE: Animation removed from default state --- */
  /* animation: rotate-stop-rotate 3s infinite; <-- REMOVED */
}

/* --- NEW: Class to apply the rotation animation (only when menu is open) --- */
.animate-close-btn {
    animation: rotate-stop-rotate 3s infinite;
}

/* Define the animation sequence (Keep as is) */
@keyframes rotate-stop-rotate {
  /* Start rotating (0% to 25% of the duration) */
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(180deg); /* Rotates 180 degrees */
  }

  /* Stop and hold the rotation (25% to 75% of the duration) */
  26% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(180deg);
  }

  /* Rotate again (75% to 100% of the duration) */
  76% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg); /* Finishes a full rotation */
  }
}

/* --- Ensure the close button is visible when the panel is open (if needed) --- */
/* (Assuming side-menu-panel gets the 'open' class) */
.side-menu-panel.open .close-btn {
    /* Add any necessary styles here to ensure it is visible/correctly positioned */
}
.mobile-nav-links {
     display: flex;
    flex-direction: column;
    padding: 10px 0;
}

.mobile-nav-links a {
    /* ... (styles unchanged) */
    padding: 12px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    border-bottom: 1px solid var(--color-accent-light);
}

.mobile-nav-links a:hover {
    background-color: var(--color-accent-light);
}

.mobile-nav-links .hot-link {
    color: var(--color-primary) !important;
}




                /* --- CSS VARIABLES (MUST BE AT THE TOP OR DEFINED IN YOUR GLOBAL STYLES) --- */
                :root {
                    /* Main Colors - Assuming these from your previous context */
                    --color-primary: #E60000;
                    --color-secondary: #000000;
                    --color-supporting: #FFFFFF;
                    --color-accent-light: #F2F2F2;
                    --color-accent-dark: #808080;
                    
                    /* Fallback values used below if global variables are missing */
                    --color-primary-dark: #c0392b; 
                }

                /* Basic Styling for the Sidebar Cart */
                .cart-sidebar {
                    position: fixed;
                    top: 0;
                    right: 0;
                    width: 400px; /* Adjust width as needed */
                    height: 100%;
                    background: var(--color-supporting, #fff);
                    box-shadow: -5px 0 15px rgba(var(--color-secondary-rgb, 0, 0, 0), 0.1);
                    transform: translateX(100%); /* Start off-screen to the right */
                    transition: transform 0.3s ease-in-out;
                    z-index: 1000; /* Ensure it's on top of everything */
                    display: flex;
                    flex-direction: column;
                }

                .cart-sidebar.open {
                    transform: translateX(0); /* Slide in */
                }

                /* Overlay for background dimming */
                .cart-overlay {
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: rgba(var(--color-secondary-rgb, 0, 0, 0), 0.5);
                    z-index: 999;
                    opacity: 0;
                    visibility: hidden;
                    transition: opacity 0.3s ease-in-out, visibility 0.3s;
                }

                .cart-overlay.open {
                    opacity: 1;
                    visibility: visible;
                }

                /* Cart Header Styling */
                .cart-header {
                    padding: 15px 20px;
                    border-bottom: 1px solid var(--color-accent-light, #eee);
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }

                .cart-header h3 {
                    margin: 0;
                    font-size: 1.2em;
                    color: var(--color-secondary, #333);
                }

                /* 1. CLOSE BUTTON (REFINED) */
                .close-cart-btn {
                    background: none;
                    border: none;
                    font-size: 2em; /* Bigger 'X' */
                    color: var(--color-secondary, #333); /* Dark text */
                    padding: 5px 10px;
                    line-height: 1;
                    cursor: pointer;
                    transition: color 0.2s, background-color 0.2s;
                    border-radius: 50%; 
                }

                .close-cart-btn:hover {
                    color: var(--color-primary, #E60000); /* Primary color on hover */
                    background-color: var(--color-accent-light, #f0f0f0);
                }

                /* Cart Items Container Styling */
                .cart-items {
                    flex-grow: 1;
                    overflow-y: auto;
                    padding: 20px;
                }

                #emptyCartMessage {
                    text-align: center;
                    color: var(--color-accent-dark, #777);
                    margin-top: 50px;
                }

                /* Single Cart Item Styling */
                .cart-item {
                    display: flex;
                    margin-bottom: 15px;
                    padding-bottom: 15px;
                    border-bottom: 1px dashed var(--color-accent-light, #eee);
                    gap: 15px;
                }

                .cart-item-image img {
                    width: 80px;
                    height: 80px;
                    object-fit: cover;
                    border-radius: 4px;
                }

                .cart-item-details {
                    flex-grow: 1;
                }

                .cart-item-details h4 {
                    margin: 0 0 5px 0;
                    font-size: 0.95em;
                    font-weight: 600;
                }

                .cart-item-price {
                    font-size: 0.9em;
                    color: var(--color-primary, #E60000); /* Use primary color */
                    font-weight: bold;
                    margin-bottom: 5px;
                }

                /* Container for Quantity and Remove button (requires HTML adjustment) */
                .item-actions {
                    display: flex;
                    justify-content: flex-start; /* Keep controls on the left */
                    align-items: center;
                    gap: 20px; /* Spacing between Qty and Remove button */
                    margin-top: 5px;
                }

                /* 2. QUANTITY (QTY) PART (REFINED) */
                .qty-controls {
                    /* Wrapper for quantity items */
                    display: flex;
                    align-items: center;
                    border: 1px solid var(--color-accent-dark, #ddd);
                    border-radius: 4px;
                    overflow: hidden; 
                }

                .qty-btn {
                    /* Styles for the + and - buttons */
                    background-color: var(--color-accent-light, #f8f8f8);
                    border: none;
                    padding: 5px 10px;
                    cursor: pointer;
                    font-size: 1em;
                    font-weight: bold;
                    color: var(--color-secondary, #333);
                    transition: background-color 0.2s;
                    line-height: 1;
                    height: 30px; 
                }

                .qty-btn:hover {
                    background-color: var(--color-accent-dark, #ddd);
                }

                .cart-item-quantity input {
                    /* Styling the quantity input field */
                    width: 50px; 
                    text-align: center;
                    border: none; 
                    padding: 0;
                    font-size: 0.9em;
                    height: 30px;
                    box-sizing: border-box;
                    /* Remove default focus outline if using the .qty-controls border */
                    outline: none; 
                }

                /* 3. REMOVE BUTTON (REFINED) */
                .remove-item-btn {
                    background: none;
                    border: none;
                    color: var(--color-primary, #E60000); 
                    cursor: pointer;
                    font-weight: 600;
                    text-transform: uppercase;
                    font-size: 0.75em;
                    padding: 0;
                    margin: 0;
                    transition: color 0.2s;
                    text-decoration: none; /* Removed default underline */
                }

                .remove-item-btn:hover {
                    color: var(--color-secondary, #000); 
                    text-decoration: underline; /* Add underline on hover */
                }


                /* Cart Footer Styling */
                .cart-footer {
                    padding: 20px;
                    border-top: 1px solid var(--color-accent-light, #eee);
                }

                .cart-summary {
                    display: flex;
                    justify-content: space-between;
                    font-size: 1.2em;
                    font-weight: bold;
                    margin-bottom: 15px;
                }

                .checkout-btn, .view-cart-btn {
                    width: 100%;
                    padding: 12px;
                    border: none;
                    border-radius: 0px;
                    font-weight: 550;
                    cursor: pointer;
                    margin-top: 8px;
                    transition: background-color 0.2s;
                }

                .checkout-btn {
                    background-color: var(--color-primary, #000000ff);
                    color: var(--color-supporting, white);
                }

                .checkout-btn:hover:not(:disabled) {
                    background-color: var(--color-primary-dark, #b81200ff);
                }

                .checkout-btn:disabled, .view-cart-btn:disabled {
                    background-color: var(--color-accent-dark, #ccc);
                    cursor: not-allowed;
                }

                .view-cart-btn {
                    background-color: var(--color-accent-light, #f0f0f0);
                    color: var(--color-secondary, #333);
                    border: 1px solid var(--color-accent-dark, #ddd);
                }

                .view-cart-btn:hover:not(:disabled) {
                    background-color: var(--color-accent-dark, #e0e0e0);
                }

                /* Mobile Adjustments for Sidebar (Optional, based on your prior context) */
                @media (max-width: 400px) {
                    .cart-sidebar {
                        width: 90%; /* Full screen width on very small devices */
                    }
                } 
                /* Define the progress bar color (Gold/Yellow from the image) */
                :root {
                    --color-progress: #FFC107;
                    /* Define a color for the stripe effect, slightly darker or lighter */
                    --color-stripe: rgba(0, 0, 0, 0.1); 
                }

                /* 1. Define the animation */
                @keyframes progress-stripe {
                    from {
                        background-position: 1rem 0; /* Start position for stripes */
                    }
                    to {
                        background-position: 0 0; /* End position for stripes, creating movement */
                    }
                }

                .delivery-progress-container {
                    /* Reduced padding */
                    padding: 10px 15px; 
                    background-color: var(--color-supporting, #fff);
                    border-top: 1px solid var(--color-accent-light, #eee);
                    border-bottom: 1px solid var(--color-accent-light, #eee);
                    text-align: center;
                }

                .progress-bar-wrap {
                    /* Reduced height */
                    height: 6px; 
                    background-color: var(--color-accent-light, #f0f0f0);
                    border-radius: 3px;
                    /* Reduced margin */
                    margin-bottom: 10px; 
                    position: relative;
                    overflow: hidden;
                }

                .progress-bar {
                    height: 100%;
                    background-color: var(--color-progress, #FFC107);
                    border-radius: 3px;
                    transition: width 0.5s ease-out;
                    position: absolute;
                    left: 0;
                    top: 0;
                    /* Ensure the stripes cover the bar */
                    overflow: hidden; 
                }

                /* 2. Add the striped animation effect */
                .progress-bar::after {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    
                    /* Create the diagonal stripe pattern */
                    background-image: linear-gradient(
                        -45deg,
                        var(--color-stripe) 25%,
                        transparent 25%,
                        transparent 50%,
                        var(--color-stripe) 50%,
                        var(--color-stripe) 75%,
                        transparent 75%,
                        transparent
                    );
                    
                    /* Set the size of the stripe pattern */
                    background-size: 1rem 1rem; 
                    
                    /* Apply the animation */
                    animation: progress-stripe 1s linear infinite;
                    
                    /* Add a slight opacity for subtlety */
                    opacity: 0.7; 
                }

                /* Optional: Pause the animation when complete */
                .delivery-progress-container.complete .progress-bar::after {
                    animation: none;
                    opacity: 0; /* Hide the stripes when complete */
                }

                .delivery-icon {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -100%);
                    z-index: 2;
                    
                    /* Reduced circle size */
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    background-color: var(--color-supporting, #fff);
                    border: 1px solid var(--color-progress, #FFC107); /* Reduced border */
                    color: var(--color-progress, #FFC107);
                    
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    /* Reduced font size */
                    font-size: 0.7rem; 
                    font-weight: 600;
                }

                .progress-message {
                    /* Reduced font size */
                    font-size: 0.8rem; 
                    color: var(--color-secondary, #333);
                    margin: 0;
                    line-height: 1.3; /* Slightly reduced line height */
                }

                .highlight-amount {
                    color: var(--color-primary, #E60000);
                    font-weight: 700;
                }

                /* Optional: Style for when delivery is achieved */
                .delivery-progress-container.complete .progress-message {
                    color: var(--color-progress, #008000);
                    font-weight: 600;
                }

                .delivery-progress-container.complete .highlight-amount {
                    color: var(--color-progress, #008000);
                }
/**
 * =========================================
 * 1. Global Mega Dropdown Container & Toggle
 * =========================================
 */

/* Parent container for BOTH mega dropdowns (general styles) */
.nav-mega-dropdown,
.products-mega-dropdown {
    position: relative;
    /* Ensure the dropdown menu appears above other elements */
    z-index: 20;
}

/* The clickable element that toggles the menu (e.g., "CATEGORIES" or "PRODUCTS" link) */
.nav-mega-toggle,
.products-mega-toggle {
    padding: 5px 0;
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* Invisible hover bridge for BOTH menus.
   Prevents menu from disappearing when moving the mouse from the toggle to the menu. */
.nav-mega-dropdown::after,
.products-mega-dropdown::after {
    content: "";
    position: absolute;
    /* Crucial: Starts exactly below the toggle link */
    top: 100%;
    left: 0;
    width: 100%;
    height: 30px; /* Invisible hover bridge height */
    background: transparent;
}


/**
 * =========================================
 * 2. Categories Mega Menu (JS Driven, Two-Column)
 * =========================================
 * This section is designed for a menu where category hover/click loads products.
 */

.nav-mega-menu-content {
    /* 1. HIDE IT BY DEFAULT */
    display: none;

    position: absolute;
    /* Ensure it drops exactly below the toggle link */
    top: 190%;
    left: 0;

    width: 800px; /* Mega menu fixed width */
    background-color: var(--color-supporting, #fff);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--color-accent-light, #eee);
    padding: 20px;

    /* ADD MAX-HEIGHT AND SCROLLING */
    max-height: 400px;
    overflow-y: auto;
}

/* 3. SHOW THE DROPDOWN MENU ONLY WHEN HOVERING OVER THE PARENT .nav-mega-dropdown */
.nav-mega-dropdown:hover .nav-mega-menu-content {
    /* Set display to flex to reveal the menu and apply the column layout */
    display: flex;
}

/* Wrapper for the Category List and Product Sub-Menu */
.nav-mega-content-wrapper {
    display: flex;
    width: 100%;
    gap: 20px; /* Space between the two columns */
}

/* --- 2a. Category List (Left Column) --- */

.nav-mega-category-list {
    flex-basis: 40%;
    border-right: 1px solid var(--color-accent-light, #f0f0f0);
    padding-right: 20px;
}

.nav-mega-list-title {
    font-size: 1.1em;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--color-primary, #E60000);
}

.nav-mega-category-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    text-decoration: none;
    color: var(--color-secondary, #333);
    transition: background-color 0.2s, color 0.2s;
    border-radius: 4px;
    cursor: pointer;
}

/* Style for hover and the actively selected category (controlled by JavaScript) */
.nav-mega-category-item:hover,
.nav-mega-category-item.nav-active {
    background-color: var(--color-accent-light, #f0f0f0);
    color: var(--color-primary, #E60000);
}

.nav-mega-category-name {
    font-weight: 500;
}

.nav-mega-product-count {
    font-size: 0.8em;
    color: var(--color-text-faint, #999);
}

/* Ensure product count color updates on hover/active state */
.nav-mega-category-item:hover .nav-mega-product-count,
.nav-mega-category-item.nav-active .nav-mega-product-count {
    color: inherit;
}

/* --- 2b. Product Sub-Menu (Right Column - JS controlled) --- */

.nav-mega-product-sub-menu {
    flex-basis: 60%;
    padding-left: 20px;
}

/* Individual product lists (one for each category) */
.nav-mega-product-list {
    display: none; /* Hide all product lists by default, managed by JS */
}

.nav-mega-product-list.nav-show {
    display: block; /* Show the active product list, controlled by JS */
}

/**
 * =========================================================
 * 3. Products Mega Menu (Static, Multi-Column Grid)
 * =========================================================
 * This section displays all categories and their top products simultaneously.
 */

.products-mega-menu-content {
    /* 1. HIDE IT BY DEFAULT */
    display: none;

    position: absolute;
    /* Ensure it drops exactly below the toggle link */
    top: 190%;
    left: 0;

    /* Wider than the categories menu to fit multiple columns */
    width: 960px;

    background-color: var(--color-supporting, #fff);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--color-accent-light, #eee);
    padding: 20px;

    max-height: 400px;
    overflow-y: auto;
}

/* SHOW THE DROPDOWN MENU ONLY WHEN HOVERING OVER THE PARENT .products-mega-dropdown */
.products-mega-dropdown:hover .products-mega-menu-content {
    display: block;
}

/* --- The Main Grid Container (3 Columns) --- */
.products-category-grid {
    display: grid;
    /* Define 3 columns with equal width (1 fraction unit each) */
    grid-template-columns: repeat(3, 1fr);
    gap: 25px; /* Spacing between grid columns */
}

/* --- Category/Product Column Container --- */
.products-mega-list {
    /* Each category takes up one grid column */
}

/* --- Category Title (Link to Category Shop Page) --- */
.products-mega-list-title {
    font-size: 1.1em;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 10px;
}

.products-mega-list-title a {
    color: var(--color-primary, #E60000);
    text-decoration: none;
}

.products-mega-list-title a:hover {
    text-decoration: underline;
}

/* --- Product List Styling --- */
.products-list {
    list-style: none; /* Remove bullet points */
    padding: 0;
    margin: 0 0 10px 0;
}

.products-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    font-size: 0.95em;
    border-bottom: 1px solid var(--color-accent-lightest, #fafafa);
}

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

.products-list-item a {
    color: var(--color-secondary, #333);
    text-decoration: none;
    flex-grow: 1; /* Allow link text to take up most of the space */
    font-weight: 500;
}

.products-list-item a:hover {
    color: var(--color-primary, #E60000);
}

.product-price {
    font-size: 0.9em;
    font-weight: 600;
    color: var(--color-text-faint, #999);
    margin-left: 10px;
}

/* --- View More Link (Per Category) --- */
.products-view-more {
    display: block;
    font-size: 0.9em;
    font-weight: 500;
    color: var(--color-primary, #E60000);
    text-decoration: none;
    margin-top: 5px;
}

.products-view-more:hover {
    text-decoration: underline;
}

/* --- Footer / Global View All Link --- */
.products-mega-footer {
    border-top: 1px solid var(--color-accent-light, #eee);
    padding-top: 15px;
    margin-top: 20px;
    text-align: right;
}

.products-view-all {
    display: inline-block;
    font-weight: 600;
    color: var(--color-primary, #E60000);
    text-decoration: none;
}

/**
 * =========================================
 * 4. GLOBAL NAV LINKS ALIGNMENT FIX
 * =========================================
 */
.main-header .main-nav a {
    display: flex;
    align-items: center;
    gap: 4px;
}



/*
 * =========================================================
 * 3. Products Mega Menu (CSS Updates for Circular Image)
 * =========================================================
 */

.products-list-item {
    /* Change from space-between to start for the new layout */
    display: flex; 
    justify-content: flex-start; /* Aligns content to the start */
    align-items: center;
    padding: 8px 0; /* Slightly more vertical padding for the image */
    font-size: 0.95em;
    border-bottom: 1px solid var(--color-accent-lightest, #fafafa);
    /* 💥 NEW: Add a smooth transition for the background color and the image transform */
    transition: background-color 0.2s ease-in-out;
}

/* 1. NEW: The Circular Image Wrapper */
.product-image-circle {
    /* Define the size of the circle */
    width: 40px; 
    height: 40px;
    
    /* Make it circular */
    border-radius: 50%; 
    
    /* Hide parts of the image that extend outside the circle */
    overflow: hidden; 
    
    /* MODIFIED: Add a 2px solid red border */
    border: 2px solid red; 
    
    /* Spacing between the image and the text */
    margin-right: 10px; 
    
    /* Ensure the image container does not shrink */
    flex-shrink: 0; 

    /* 💥 NEW: Add a smooth transition for the transform property */
    transition: transform 0.7s ease-out;
}

/* 💥 NEW: Hover state for the circle (When hovering over the parent list item) */
.products-list-item:hover .product-image-circle {
    /* Scale the circle up by 10% */
    transform: scale(1.5); 
    
    /* You could also add a drop shadow here: filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.5)); */
}
/* 💥 MODIFIED: Hover state for the circle (When hovering over the parent list item) */
 
/* 2. Style the Image inside the wrapper */
.product-image-circle img {
    /* Ensure the image fills the container and crops nicely */
    width: 100%;
    height: 100%;
    object-fit: cover; /* This is key for maintaining aspect ratio while covering the area */
    display: block;
}

/* 3. Wrap the text elements to manage layout */
.product-details-wrap {
    display: flex;
    flex-direction: column; /* Stack the name and price */
    flex-grow: 1;
}

/* 4. Adjustments for text alignment */
.products-list-item a {
    /* Remove the flex-grow: 1 and margin-left from here as it's now in .product-details-wrap */
    flex-grow: 0;
    margin-left: 0;
    /* Ensure name is bold and readable */
    font-weight: 500;
}

/* 5. Adjustments for price alignment */
.product-price {
    /* Remove the margin-left that was used for positioning */
    margin-left: 0; 
    /* Make the price display as a block/full-width element */
    width: 100%;
    /* Subtle color for price */
    color: var(--color-text-faint, #999);
}

/* 6. Clean up the hover background */
.products-list-item:hover {
    background-color: var(--color-accent-lightest, #fafafa);
}

/*
 * =========================================================
 * 4. Featured Products Sub-Menu (CSS for nav-mega-product-sub-menu)
 * =========================================================
 */

.nav-mega-product-sub-menu {
    padding: 15px; /* Padding for the entire sub-menu panel */
    background-color: var(--color-background-secondary, #fff); /* Light background */
    border-left: 1px solid var(--color-border, #eee);
    /* Set dimensions appropriate for the sub-menu */
    width: 250px; 
    /* You might need 'height: 100%' or a fixed height depending on your layout */
}

.nav-mega-list-title {
    font-size: 1.1em;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--color-primary, #333);
}

.nav-mega-product-list {
    display: none; /* Hidden by default, shown by JavaScript hover state */
}

/* Ensure the initial/default state is shown if categories are empty */
.nav-products-empty.nav-show {
    display: block; 
}


/* 1. Style for each product item (Flex container) */
.nav-product-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-accent-lightest, #fafafa);
    /* 💥 NEW: Add a smooth transition for the background color and the image transform */
    transition: background-color 0.2s ease-in-out;
}

.nav-product-item:last-child {
    border-bottom: none; /* No border on the last item */
}

.nav-product-item:hover {
    background-color: var(--color-accent-lightest, #fafafa);
}


/* 2. Product Image Styling (Reusing the circular concept) */
.nav-product-image {
    /* Define the size of the circle - slightly smaller than the main list */
    width: 35px;
    height: 35px;
    
    /* Make it circular */
    border-radius: 50%;
    
    /* Hide parts of the image that extend outside the circle */
    overflow: hidden;
    
    /* MODIFIED: Add a prominent 2px solid red border */
    border: 2px solid red; 
    
    /* Spacing between the image and the text */
    margin-right: 8px;
    
    /* Ensure the image container does not shrink */
    flex-shrink: 0;

    /* 💥 NEW: Add a smooth transition for the transform property */
    transition: transform 0.7s ease-out;
}

/* 💥 NEW: Hover state for the circle (When hovering over the parent list item) */
.nav-product-item:hover .nav-product-image {
    /* Scale the circle up by 10% */
    transform: scale(1.5); 
}

.nav-product-image img {
    /* Ensure the image fills the container and crops nicely */
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
}


.hidden-element {
    display: none !important;
}



/* --- CSS VARIABLES (Place near the top of your stylesheet) --- */
:root {
    /* Ensure these variables are defined for the tags to work */
    --color-primary: #E60000;      /* Typically Red (for HOT!) */
    --color-supporting: #FFFFFF;   /* Typically White text */
    --color-tag-new: #28a745;      /* Green color (for NEW) */
}


/* ------------------------------------------------ */
/* --- OPTIMIZED NAVIGATION TAG STYLES (HOT/NEW) --- */
/* ------------------------------------------------ */

/* 1. Base Tag Styling (Shared properties for both tags) */
.nav-tag,
.new-tag {
    position: absolute;
    /* Positioning above and slightly right of the link element */
    top: -14px;
    right: 0; /* Changed from -10px to 0 for better positioning control */
    
    padding: 3px 5px;
    border-radius: 5000px;
    font-size: 0.65rem;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 1;
    
    /* Tags always have white text */
    color: var(--color-supporting) !important;
}

/* 2. Specific Tag Colors */
.nav-tag {
    /* HOT! Tag (Uses primary color for background) */
    background-color: var(--color-primary); 
}

.new-tag {
    /* NEW Tag (Uses defined green color for background) */
    background-color: var(--color-tag-new);
}


/* 3. Positioning Context and Link Padding */
/* Apply 'position: relative' and ensure space on the right for the tag */
.main-nav a.has-tag,
.main-nav a.has-new-tag,
.right-nav a.has-tag,
.right-nav a.has-new-tag {
    position: relative;
    /* This padding creates the space where the tag sits when 'right: 0' is used */
    padding-right: 15px; 
}


/* 4. Mobile Hide (Applies to both tags) */
@media (max-width: 768px) {
    .nav-tag,
    .new-tag {
        display: none !important;
    }
}




/* --- MOBILE MENU TAG FIX --- */

/* 1. Ensure the mobile link is positionable for the tag */
.mobile-nav-links a.has-tag,
.mobile-nav-links a.has-new-tag {
    position: relative;
    /* Ensure there is enough padding on the right for the tag */
    padding-right: 60px; /* Increased padding for the tag */
}

/* 2. Override the display:none rule for tags inside the mobile menu */
.mobile-nav-links .nav-tag,
.mobile-nav-links .new-tag {
    display: inline-block !important; /* Force visibility */
    
    /* Repositioning for Mobile Menu (aligns to the right side of the panel) */
    right: 20px; /* Aligns to the right padding of the mobile link */
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Adjust for vertical center */
    
    /* Reset visual styles if needed (optional) */
    font-size: 0.7rem; 
    padding: 3px 6px;
}

 

/* Optional: Add a subtle color change to the lightning bolt */
.nav-tag .fa-bolt {
    color: #ffffff; /* Default white text */
    animation: flash-color 1.5s infinite ease-in-out;
    
}

/* ---------------- Keyframes ---------------- */

/* 1. Scale/Pulse Animation for the entire HOT tag */
@keyframes pulse-hot {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05); /* Slightly enlarge the tag */
        opacity: 0.95;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* 2. Subtle Color Flash for the Lightning Bolt */
@keyframes flash-color {
    0%, 100% {
        color: var(--color-supporting); /* White */
    }
    50% {
        color: #ffcc00; /* Bright yellow/gold at peak pulse */
    }
}

/* --- Shake Animation for the Bell Icon (MODIFIED) --- */
.new-tag .fa-bell {
    /* Decreased time from 2s to 1.5s for faster shaking */
    animation: fa-shake-continuous 1.5s infinite cubic-bezier(.4, 0, .2, 1);
    display: inline-block;
}

/* Define the keyframes for the continuous shake (MODIFIED) */
@keyframes fa-shake-continuous {
    0% {
        transform: rotate(0deg);
    }
    /* Increased rotation from 10deg to 15deg for a wider shake */
    5% {
        transform: rotate(15deg); 
    }
    10% {
        transform: rotate(-15deg); 
    }
    15% {
        transform: rotate(15deg); 
    }
    20% {
        transform: rotate(0deg);
    }
    /* Still holds stable for the rest of the cycle (20% to 100%) */
    100% {
        transform: rotate(0deg);
    }
}