.top-bar {
    background: linear-gradient(135deg, #1c1b5e 0%, #2e2d8c 100%);
    color: #fff;
    font-size: 12px;
    padding: 8px 0;
    text-align: center;
}

.top-bar-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.top-bar-link {
    margin:0;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: opacity 0.3s;
}

.top-bar-link:active {
     opacity: 0.8;
    color: #fff;
    text-decoration: none;
}
.top-bar-link:hover {
    opacity: 0.8;
    color: #fff;
    text-decoration: none;
}

.top-bar-link:focus {
    opacity: 0.8;
    color: #fff;
    text-decoration: none;
}

.user-dropdown {
    position: relative !important;
    margin-left: 15px !important;
    z-index: 1001 !important; /* Higher than other elements */
}

.user-dropdown > a.user-avatar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background-color: white !important;
    color: #333 !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    z-index: 1002 !important;
}

.user-dropdown > a.user-avatar:hover {
    transform: scale(1.05) !important;
}

.user-dropdown .dropdown-menu {
    display:block;
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    width: max-content !important;
    background: white !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
    padding: 12px 0 !important;
    margin-top: 10px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(10px) !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    z-index: 1001 !important;
    pointer-events: none !important;
    padding-top: 10px; /* Transparent area that maintains hover */
}

.user-dropdown .dropdown-menu::before {
    content: '';
    display: block;
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    height: 10px;
}

.user-dropdown:hover .dropdown-menu,
.user-dropdown.open .dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    margin-left: -100px !important;

}

.user-dropdown.open .dropdown-menu a {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

.dropdown-header {
    padding: 0 16px 8px !important;
    margin-bottom: 8px !important;
}

.user-info {
     text-align:center;
    padding: 8px 0 !important;
}

.user-name {
   
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #333 !important;
}

.user-email {
    font-size: 12px !important;
    color: #777 !important;
    margin-top: 2px !important;
}

.dropdown-divider {
    height: 1px !important;
    background-color: rgba(0, 0, 0, 0.08) !important;
    margin: 8px 0 !important;
}

.dropdown-item {
    display: flex !important;
    align-items: center !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    color: #555 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.dropdown-item i {
    margin-right: 12px !important;
    width: 18px !important;
    text-align: center !important;
    color: #888 !important;
    font-size: 15px !important;
}

.dropdown-item:hover {
    background-color: #f9f9f9 !important;
    color: #333 !important;
    padding-left: 22px !important;
}

.dropdown-item:hover i {
    color: #c9a24a !important;
}

.logout-item {
    color: #e74c3c !important;
}

.logout-item:hover {
    background-color: rgba(231, 76, 60, 0.08) !important;
    color: #e74c3c !important;
}

/* Animation for dropdown items */
.dropdown-menu a {
    opacity: 0 !important;
    transform: translateX(-5px) !important;
    transition: all 0.3s ease !important;
}

.user-dropdown:hover .dropdown-menu a {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

.dropdown-menu a:nth-child(1) { transition-delay: 0.1s !important; }
.dropdown-menu a:nth-child(2) { transition-delay: 0.15s !important; }
.dropdown-menu a:nth-child(3) { transition-delay: 0.2s !important; }
.dropdown-menu a:nth-child(4) { transition-delay: 0.25s !important; }
.dropdown-menu a:nth-child(5) { transition-delay: 0.3s !important; }

@media (min-width: 992px) {
  .header {
    background: #fff !important;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08) !important;
    position: relative !important;
    z-index: 1000 !important;
}

.header .inner {
    flex-wrap: wrap;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 auto !important;
    padding: 15px 30px !important;
}

/* Logo Styles */
.logo {
    flex: 0 0 180px !important;
}

.logo img {
    max-height: 60px !important;
    width: auto !important;
    transition: transform 0.3s ease !important;
}

.logo img:hover {
    transform: scale(1.03) !important;
}

/* Navigation Categories */
.nav-categories {
    flex: 1 1 0% !important;
    /* CRITICAL: a flex item defaults to min-width:auto, which means it
       never shrinks below its content's full intrinsic (nowrap) width.
       With a wrapping parent row (.header .inner{flex-wrap:wrap}) that
       forced the ENTIRE row — logo, categories, AND the search/cart/user
       icons on the right — onto a second line once enough categories were
       added, instead of the category row scrolling on its own. min-width:0
       lets this item actually shrink to fit, so only its own content
       scrolls internally and the icons stay put on the same row. */
    min-width: 0 !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 15px !important;
    margin: 0 30px !important;
    /* On narrower desktop/laptop widths there isn't room for every category
       label at full size, and the old fix was a stack of narrow media
       queries shrinking the font down to near-illegible sizes. Instead,
       let the row scroll horizontally (like the mobile sidebar's swipeable
       .tab-buttons strip) so every category stays readable at any width.
       Scrollbar is hidden (matches .tab-buttons) so it reads as a clean
       swipeable strip rather than "a list that got cut off". */
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
    scrollbar-width: none !important;   /* Firefox */
    -ms-overflow-style: none !important; /* old Edge/IE */
}

.nav-categories::-webkit-scrollbar {
    display: none !important; /* Chrome, Safari, Opera */
}

/* Visual hint that the row is scrollable: a soft fade on whichever edge(s)
   still have hidden categories, plus a small chevron on the right edge the
   first time (nudges the user, then gets out of the way once they scroll).
   Classes are toggled by JS only when there's real overflow to hint at —
   never shown when every category already fits on screen. */
.nav-categories-wrap {
    position: relative;
    flex: 1 1 0%;
    min-width: 0;
}
.nav-categories-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 36px;
    pointer-events: none;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.95));
    opacity: 0;
    transition: opacity 0.2s ease;
}
.nav-categories-wrap.has-more-right::after {
    opacity: 1;
}
.nav-categories-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 36px;
    pointer-events: none;
    background: linear-gradient(to left, transparent, rgba(255,255,255,0.95));
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1;
}
.nav-categories-wrap.has-more-left::before {
    opacity: 1;
}
/* Clickable left/right scroll buttons — only shown (and only clickable,
   via pointer-events) on whichever edge(s) actually have hidden categories.
   Mouse users have no swipe gesture, so these are the real way to scroll;
   the fade + pulse from before now lives on the button itself. */
.nav-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #c9a24a;
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    transition: opacity 0.2s ease, background 0.15s ease, transform 0.15s ease;
}
.nav-scroll-btn svg {
    display: block;
    flex-shrink: 0;
}
.nav-scroll-btn:hover {
    background: #b8912e;
    transform: translateY(-50%) scale(1.08);
}
.nav-scroll-btn-right {
    right: 2px;
    animation: navScrollHintPulse 1.4s ease-in-out 3;
}
.nav-scroll-btn-left {
    left: 2px;
}
.nav-categories-wrap.has-more-right .nav-scroll-btn-right,
.nav-categories-wrap.has-more-left .nav-scroll-btn-left {
    opacity: 1;
    pointer-events: auto;
}
@keyframes navScrollHintPulse {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    50% { transform: translateY(-50%) translateX(4px); }
}


.nav-categories-link {
    color: #333 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 10px 5px !important;
    position: relative !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    flex: 0 0 auto !important;
}

.nav-categories-link:hover {
    color: #c9a24a !important;
}

.nav-categories-link::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 0 !important;
    height: 2px !important;
    background: #c9a24a !important;
    transition: width 0.3s ease !important;
}

.nav-categories-link:hover::after {
    width: 100% !important;
}

/* Right Icons Section */
.right {
    flex: 0 0 auto !important;
}

.right ul {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.right ul li {
    position: relative !important;
}

.right ul li a {
    font-size: 20px !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.3s ease !important;
}

.right ul li a:hover {
    transform: translateY(-2px) !important;
}

/* Badges for cart and wishlist */
.cart-count, .wishlist-count {
    position: absolute !important;
    top: -10px !important;
    right: -10px !important;
    background: #c9a24a !important;
    color: white !important;
    border-radius: 50% !important;
    width: 20px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    font-weight: bold !important;
}

/* Points balance style */
.points-balance a {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #333 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.points-balance i {
    color: #c9a24a !important;
}

/* Modern Dropdown Styles */
/* Modern Dropdown Styles - Fixed Version */



/* Search icon specific styling */
.search-icon {
    position: relative !important;
}

/* Browse all products link next to search icon */
.browse-all-icon {
    position: relative !important;
}

.browse-all-icon a {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1c1b5e !important;
    white-space: nowrap !important;
    gap: 8px !important;
    background: #f4f1e7 !important;
    border: 1px solid #e6c878 !important;
    border-radius: 999px !important;
    padding: 6px 14px 6px 6px !important;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease !important;
}

.browse-all-icon-circle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: #1c1b5e !important;
    color: #fff !important;
    flex-shrink: 0 !important;
}

.browse-all-icon-circle i {
    font-size: 12px !important;
    color: #fff !important;
}

.browse-all-icon a:hover {
    background: #c9a24a !important;
    border-color: #c9a24a !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
}

.browse-all-icon a:hover .browse-all-icon-circle {
    background: #1c1b5e !important;
}



.prof-icon::after,.bag-icon::after, .wish-icon::after, .points-balance::after, .search-icon::after {
    content: '' !important;
    position: absolute !important;
    bottom: -5px !important;
    left: 0 !important;
    width: 0 !important;
    height: 2px !important;
    background: #c9a24a !important;
    transition: width 0.3s ease !important;
}

.prof-icon:hover::after, .bag-icon:hover::after,.wish-icon:hover::after, .points-balance:hover::after, .search-icon:hover::after {
    width: 100% !important;
}

}

/* Category Modal Styles */
.category-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 10000;
    overflow-y: auto;
    backdrop-filter:blur(5px);
}

.modal-header-content {
    min-width: 60% ;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 450px !important;
    height: 100% !important;
    background: white !important;
    box-shadow: 2px 0 10px rgba(0,0,0,0.2) !important;
    animation: slideIn 0.3s ease-out !important;
    overflow-y: auto !important;
}

@keyframes slideIn {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

.modal-header {
     padding: 15px 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.modal-header h3 {
    margin: 0;
    font-size: 20px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 15px;
}

.modal-header img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #eee;
}

.close-modal {
    font-size: 28px;
    cursor: pointer;
    color: #666;
}

.close-modal:hover {
    color: #000;
}

.modal-header-body {
    padding: 20px;
}

.modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

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

.modal-section h4 {
    font-size: 16px;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
}

.modal-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.modal-section ul li {
    margin-bottom: 8px;
}

.modal-section ul li a {
    color: #555;
    text-decoration: none;
    transition: color 0.3s;
    display: block;
    padding: 5px 0;
}

.modal-section ul li a:hover {
    color: #c9a24a;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .modal-header-content {
        width: 85%;
    }
}


  /*.search-bar {*/
  /*  display: none !important;*/
  /*}*/
  
   .mega-menu {
        position: absolute;
        left: 0;
        width: 100%;
        background: #fff;
        box-shadow: 0 10px 15px rgba(0,0,0,0.1);
        z-index: 999;
        display: none;
        padding: 20px 0;
        border-top: 1px solid #eee;
    }
    
    /* Show mega menu on hover */
    .nav-categories > a:hover + .mega-menu,
    .mega-menu:hover {
        display: block;
    }
    
    /* Mega Menu Grid Layout */
    .mega-menu-content {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 30px;
        max-width: 95%;
        margin: 0 auto;
        padding: 0 20px;
    }
    
    /* Mid Category Section */
    .mega-menu-section {
        margin-bottom: 15px;
    }
    
    .mega-menu-section h3 {
        font-size: 16px;
        font-weight: 600;
        color: #000;
        margin-bottom: 15px;
        padding-bottom: 8px;
        border-bottom: 1px solid #eee;
    }
    
    /* End Category Links */
    .mega-menu-section ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .mega-menu-section ul li {
        margin-bottom: 8px;
    }
    
    .mega-menu-section ul li a {
        color: #555;
        text-decoration: none;
        font-size: 14px;
        transition: all 0.3s ease;
        display: block;
        padding: 5px 0;
    }
    
    .mega-menu-section ul li a:hover {
        color: #c9a24a;
        padding-left: 5px;
    }
    
    /* Category Link Positioning */
    .nav-categories {
        position: relative;
    }
    
    .nav-categories > a {
        position: relative;
        padding: 15px 10px;
    }
    
   
    .nav-categories > a:hover:after {
        transform: rotate(180deg);
    }
    
 
   .mega-menu-featured {
    grid-column: 1 / -1;
    display: flex;
    gap: 20px;
    margin-top: 20px;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 8px;
    align-items: center;
}

.mega-menu-featured img {
    max-width: 300px;
    width: 100%;
    height: auto;
    border-radius: 4px;
    object-fit: cover;
}

.mega-menu-featured > div:first-child {
    flex: 0 0 40%;
}

.mega-menu-featured > div:last-child {
    flex: 1;
}

.mega-menu-featured h3 {
    margin: 0 0 10px 0;
    font-size: 18px;
    color: #333;
}

.mega-menu-featured p {
    margin: 0 0 15px 0;
    color: #666;
    font-size: 14px;
}

/* Promo Banner in Modal */
.mega-menu-promo {
    grid-column: 1 / -1;
    background: #f0f0f0;
    padding: 15px;
    border-radius: 4px;
    margin-top: 20px;
    text-align: center;
    font-size: 14px;
}

.mega-menu-promo p {
    margin: 0;
}

/* Make sure the modal grid has proper spacing */
.modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px;
}
}
	@media (min-width: 570px) and (max-width: 991px) {
  .header .right ul {
    display: none !important;
  }
}

	
	.top .right ul li a:hover {
    background: #d7d9e6 !important;
	}
		
		@media (min-width:768px) {
			.container {
				width: 750px
			}
		}

		@media (min-width:992px) {
			.container {
				width: 970px
			}
			

		}
@media (min-width: 991px) and (max-width: 1016px) {
      .right ul li a {
        font-size: 12px !important;
    } 
}
@media (min-width: 1017px) and (max-width: 1144px) {
       .right ul li a {
        font-size: 16px !important;
    } 
}
/* .nav-categories-link font-shrink rule removed: .nav-categories now
   scrolls horizontally at any width instead of squeezing labels down. */
		@media (min-width:1200px) {
			.container {
				max-width: 90% !important;
				width: 90% !important
			}

			 
			/* .topBanner {
		max-width: 90% !important;
	} */
		}
.fa {
	margin-right:5px !important ;
}
		.top {
			background: #fff !important;
		}

		.top .left ul li {
			color: black !important;
			font-size: small;
			display: flex
		}


		.top .left ul li i {
			color: black !important;
		}

		.top .right ul li a {
		
			font-size: large;
		}

		.login-register-section a {
			color: black !important;
			font-size: small;
			display: flex

		}

		.scrolling-banner {
			background-color: #c9a24a;
			color: #272b63;
			font-size: 16px;
			font-weight: bold;
			/* padding: 1px 2px; */
			padding-top: 5px;
			margin-top: 10px;
			text-align: center;
			overflow: hidden;
		}


		.menu>ul {
			margin: 0 auto;
			width: 100%;
			list-style: none;
			padding: 0;
			position: relative;
			box-sizing: border-box;
			background-color: #272b63;
		}

		.header {
			background: #fff;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
			padding: 10px 0;
		}

		.header .inner {
			display: flex;
			justify-content: space-between;
			align-items: center;

			margin: 0 auto;
			padding: 0 20px;
		}

	

		/* .hidee {
			margin
		} */
		.header .logo img {
			max-height: 70px;
				margin-left: 0px !important;  
		}

		.search-wrapper {
		    width:150%;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #000;
			padding: 5px 0;
			position: relative;
		}

		.header .search-bar {
			flex: 0.4;
			margin: 0 20px;
			position: relative;
		}
/* .suggestions{
	z-index: 999;
} */
		.search-icon {
			flex-shrink: 0;
			margin-right: 10px;
			font-size: x-large;
			color: #000;
		}

		.search-input {
			border: none;
			outline: none;
			font-size: medium;
			width: 100%;
			background: transparent;
		}

		.search-input::placeholder {
			color: #aaa;
		}

		.header .right ul {
			list-style: none;
			margin: 0;
			padding: 0;
			display: flex;
			align-items: center;
		}

		.header .right ul li {
			margin-left: 20px;
		}

	

		.header .right ul li a i {
			margin-right: 5px;
		}


		


		.menu>ul>li>ul>li>ul>li {
			background: #f0f0f0;
		}

		.topcat {
			background-color: white !important;
		}

		.search-bar:focus-within .search-wrapper {
			border-bottom-color: #333;
			/* Optional: Changes the border color on focus */
		}

	

	
/* Hamburger Menu */
.hamburger-menu {
    display: none;
    font-size: 24px;
    cursor: pointer;
    margin-right: 20px;
}
.hidee {
    display: inline-block; /* or inline if you prefer */
    vertical-align: middle;
    margin: 0; /* Remove any default margins */
}
.move {
    vertical-align: middle;
}

/* Mobile Styles */
@media (max-width: 991px) {
    .nav-categories,
    .nav-categories-wrap {
          display: none;
    }
       .top-bar {
        display: none;
    }
   .hidee,
    .top .left ul,
    .top .right ul {
        display: none !important;
    }
	/* .hamburger-menu {
        display: block;
    } */

	/* .menu-mobile { 
		display :none !important;
	} */
   
	.search-wrapper {
		margin-top: 30px !important;
        margin-bottom: 20px !important;
        width: 190% !important;
}
	.move{
		position:fixed !important;
		margin-top: 11px !important;
	}
   
    .header .logo {
        display: flex !important;
        align-items: center !important;
        margin-top: 0 !important;
    }

    .header .logo img {
        height: 62px !important;
        max-width: 160px !important;
        width: auto !important;
        display: block !important;
        margin-top: 0 !important;
        object-fit: contain !important;
    }


    .search-bar {
        order: 2 !important;
        flex: 1.5 !important;
        margin: 0 10px !important;
    }
	.login-register-section a {
			font-size: x-large !important;
		}
   
    /* The View All pill + search icon flex to fill the space between the
       logo and hamburger and sit centered within it (no overlap). */
    .header .inner {
        position: relative !important;
    }

    .header .right {
        flex: 1 1 auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 !important;
    }

    .header .right ul {
		margin: 0 !important;
		gap: 10px !important;
		justify-content: center !important;
		align-items: center !important;
    }

    .header .right ul li {
        margin-left: 0 !important;
    }
	.header .right ul li.search-icon a {
		font-size: 20px !important;
		color: #1c1b5e !important;
		width: 40px !important;
		height: 40px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		border-radius: 50% !important;
		transition: background 0.2s ease !important;
	}
	.header .right ul li.search-icon a:hover {
		background: #f4f1e7 !important;
	}

	/* On mobile only the search icon stays in the header. View All now lives
	   inside the search panel itself; points, profile, wishlist and cart
	   are reachable from the hamburger menu. */
	.header .right ul li.points-balance,
	.header .right ul li.prof-icon,
	.header .right ul li.wish-icon,
	.header .right ul li.bag-icon,
	.header .right ul li.browse-all-icon {
		display: none !important;
	}

	.header .right ul li.browse-all-icon a {
		font-size: 13px !important;
		padding: 5px 12px 5px 5px !important;
		gap: 7px !important;
		white-space: nowrap !important;
		flex-shrink: 0 !important;
	}
	.header .right ul li.browse-all-icon a span:not(.browse-all-icon-circle) {
		white-space: nowrap !important;
	}
	.center  {
        display: flex !important;
   		justify-content: center !important;
    	gap: 40px !important;
    	margin-top: 9px !important;
    	/* margin-right: 10px  !important; */
    }
	.text-center {
	display: flex !important;
    justify-content: flex-end !important;
    width: max-content !important;
    float: right !important;
    margin-right: 180px !important;
	}
   
    .header .right ul li a span:not(.browse-all-icon-circle) {
        display: none !important;
    }

   
    .hamburger-menu {
        display: flex !important;
        font-size: 24px !important;
        cursor: pointer !important;
        margin-left: 6px !important;
		justify-content: right !important;
    }

   
    .menu ul {
        flex-direction: column !important;
    }

    .menu ul li {
        margin: 0 !important;
        border-bottom: 1px solid #ddd !important;
    }

    .menu ul li a {
        padding: 10px 20px !important;
    }
}
@media (max-width: 430px) {
	.login-register-section a {
			font-size: large !important;
		}
		.center {
			gap:30px !important;
		}

 }
/* Tablet Styles */
@media (min-width: 790px) and (max-width: 991px) {
	
			.header .logo .img {
				height:50px !important;
			}
/* .text-center {
	margin-top: 30px;
    margin-right: 150px !important;
}*/
}
@media (min-width: 781px) and (max-width: 790px) {
	
	.header .logo .img {
		height:50px !important;
	}
	.login-register-section  {
		margin-top: 30px !important;
		}
		/* 
.text-center {
margin-top: 30px !important;
margin-right: 170px !important;


}*/
}

@media (max-width: 486px) {
    .header .logo img {
        max-width: 120px !important;
        height: 42px !important;
    }
}

@media (max-width: 380px) {
    .header .logo img {
        max-width: 105px !important;
        height: 36px !important;
    }
    .hamburger-menu {
        font-size: 22px !important;
        margin-left: 4px !important;
    }
    /* Tighten the View All pill and search so everything fits on tiny phones */
    .header .right ul {
        gap: 6px !important;
    }
    .header .right ul li.browse-all-icon a {
        font-size: 11px !important;
        padding: 4px 9px 4px 4px !important;
        gap: 5px !important;
    }
    .header .right ul li.browse-all-icon .browse-all-icon-circle {
        width: 20px !important;
        height: 20px !important;
    }
    .header .right ul li.search-icon a {
        width: 34px !important;
        height: 34px !important;
        font-size: 18px !important;
    }
}


.sidebar {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: white;
    color: black;
    overflow-y: auto;  /* Allow vertical scrolling */
    transition: left 0.3s ease-in-out;
    z-index: 1000;
    padding: 50px 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

/* Make the tab content scrollable if it's too tall */
.tab-content {
    max-height: 80vh;  /* Set a maximum height */
    overflow-y: auto;  /* Enable scrolling if content exceeds this height */
}

/* Sidebar Links */
.menu {
    list-style: none;
    padding: 0;
}

.menu li {
    margin-bottom: 10px;
}

/* Mid Categories */
.mid-category {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    font-size: 20px;
    padding: 10px;
    color: black;
    text-decoration: none;
}

/* End Category List */
#end-category-list {
    display: block;
    margin-top: 20px;
    max-height: 80vh; /* Limit height of end categories list */
    overflow-y: auto; /* Allow scrolling for end category list */
}

/* End Category List Styling */
#end-category-menu {
    list-style-type: none; /* Remove default bullets */
    padding: 0;
}

#end-category-menu li {
    margin-bottom: 15px; /* Margin between items */
}

#end-category-menu li a {
    text-decoration: none;
    color: black;
    font-size: 18px;
    padding: 10px;
    display: block;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

#end-category-menu li a:hover {
    background-color: #f0f0f0; /* Hover effect */
}

/* Sidebar Close Button */
/* Close Button in Top Icons */
.close-btn {
    font-size: 40px;
    cursor: pointer;
    color: black;
    margin-right: 20px; /* Space between close button and other icons */
}

/* Tabs Container */
.tab-container {
    display: flex;
    flex-direction: column;
}

/* Tab Buttons */
.tab-buttons {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    border-bottom: 2px solid #ddd;
    padding-bottom: 5px;
    margin-bottom: 10px;

    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* IE 10+ */
}

.tab-buttons::-webkit-scrollbar {
    display: none;                /* Chrome, Safari and Opera */
}


.tab-button {
    background: none;
    border: none;
    padding: 10px 20px;
    font-size: 18px;
    cursor: pointer;
    color: black;
    transition: background 0.3s;
}
.offer-tab-link:hover {
    color:black;
}
.tab-button.active {
    border-bottom: 3px solid #c9a24a;
    font-weight: bold;
}

/* Tab Content */
.tab-content {
    display: flex;
    flex-direction: column;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

/* Toggle Icon */
.toggle-icon {
    font-size: 20px;
    color:#c9a24a;
}

/* Back Button */
.back-btn {
    background-color: transparent;
    border: none;
    
    font-size: 20px;
    cursor: pointer;
    color: #333;
    position: absolute;
    top: 168px;
    left: 19px;
    padding: 5px 10px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.back-btn:hover {
    color: #c9a24a;
    transform: translateX(-3px);
}
/* Icons at the Top */
.top-icons {
    display: flex;
    justify-content: space-between; /* Evenly space out the icons */
    align-items: center;
    width: 100%; /* Ensure the container takes up the full width */
    margin-bottom: 20px;
}

/* Icon Links */
.icon-link {
    font-size: 24px;
    color: black;
    text-decoration: none;
    position: relative;
}


.icon-link::after {
    color:black;
    content: '' !important;
    position: absolute !important;
    bottom: -5px !important;
    left: 0 !important;
    width: 0 !important;
    height: 2px !important;
    background: #c9a24a !important;
    transition: width 0.3s ease !important;
}

.mid-category:hover {
     color:black;
     background-color: #0000000f;
}
.icon-link:hover {
    color:black;
}
.icon-link:hover::after {
    color:black;
    width: 100% !important;
}



/* Cart Count Badge */
.icon-link .cart-count {
    position: absolute !important;
    top: -10px !important;
    right: -10px !important;
    background: #c9a24a !important;
    color: white !important;
    border-radius: 50% !important;
    width: 20px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    font-weight: bold !important;
}

/* Prevent scrolling on the body when the sidebar is open */
body.no-scroll {
    overflow: hidden !important;
}

.point-balance {
  display: inline-block;
  font-weight: bold;
  color: #333;
  margin-right: 10px;
  font-size: x-large;
}

/* Hide on screens less than 960px */
@media (max-width: 991px) {
    .onDesktop {
        display: none !important;
    }
}

@media (min-width: 961px) {
    .onDesktop {
        display: flex;
		p{
			margin: 0px !important;
		}
		a{
			margin-left: 10px !important;
		}
    }
    .onMobile {
        display: none;
    }
    @media (min-width: 991px) {
    .logo {
    
         justify-content: center;
    }
}

}


 @media (max-width: 991px) {
    .onDesktop {
        display: none;
    }
    .onMobile {
        display: none; /* Mobile header hidden by default */
    }
    .nowde {
        display:none;
    }
    
}

/* Optionally, add a class that is toggled when mobile header is active */
.mobile-active .onMobile {
    display: block;
}

/* Promo Banner */
.promo-bannerr {
    background: #f5f5f5;
    padding: 10px 0;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
}

.promo-bannerr strong {
    color: #f00;
}

.closeeee {
    margin-left:480px;
}


/* Updated Search Modal Styles - Right Side Version */
.search-modal {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 10000;
    overflow-y: auto;
    backdrop-filter: blur(5px);
}

.search-modal-content {
    position: fixed;
    right: 0;
    top: 0;
    width: 40%;
    height: 100%;
    background: white;
    box-shadow: -2px 0 10px rgba(0,0,0,0.2);
    animation: slideInRight 0.3s ease-out;
    overflow-y: auto;
}
@keyframes slideOutRight {
    from { transform: translateX(0); }
    to { transform: translateX(100%); }
}

.search-modal-content.closing {
    animation: slideOutRight 0.3s ease-in-out forwards !important;
}

@keyframes slideInRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@keyframes slideOutLeft {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

.modal-header-content.closing {
    animation: slideOutLeft 0.3s ease-in-out forwards !important;
}

.search-modal-header {
    padding: 20px;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.search-modal-header h3 {
    margin: 0;
    font-size: 22px;
    color: #333;
    font-weight: 600;
}

.close-search-modal {
    font-size: 28px;
    cursor: pointer;
    color: #888;
    transition: color 0.2s;
}

.close-search-modal:hover {
    color: #333;
}

.search-modal-body {
    padding: 0 20px 20px;
}

/* Modern Search Bar */
.search-modal-bar {
    position: relative;
    margin-bottom: 20px;
}

.search-modal-input {
    width: 100%;
    padding: 14px 130px 14px 20px;
    font-size: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 999px;
    outline: none;
    transition: all 0.3s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.search-modal-input:focus {
    border-color: #c9a24a;
    box-shadow: 0 2px 12px rgba(203, 167, 68, 0.2);
}

.search-modal-actions {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-modal-viewall {
    color: #555;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.search-modal-viewall:hover {
    color: #1c1b5e;
    text-decoration: none;
}

.search-modal-divider {
    width: 1px;
    height: 18px;
    background: #ddd;
    display: inline-block;
}

.search-modal-icon.search-modal-icon {
    position: static;
    transform: none;
    color: #555;
    font-size: 16px;
}

/* Suggestions Dropdown */
#suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    max-height: 400px;
    overflow-y: auto;
    z-index: 100;
    display: none;
}

.suggestion-item {
    padding: 12px 20px;
    font-size: 15px;
    color: #333;
    cursor: pointer;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    align-items: center;
    transition: all 0.2s;
}

.suggestion-item:hover {
    background: #f9f9f9;
}

.suggestion-item img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    margin-right: 15px;
    border-radius: 4px;
    border: 1px solid #eee;
}

.suggestion-content {
    flex: 1;
}

.suggestion-title {
    font-weight: 600;
    margin-bottom: 3px;
    color: #333;
}

.suggestion-price {
    font-size: 14px;
    color: #c9a24a;
    font-weight: 600;
}

.suggestion-desc {
    font-size: 13px;
    color: #777;
    margin-top: 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.view-all-btn {
    padding: 15px;
    text-align: center;
    background: #f8f8f8;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 600;
    color: #555;
}

.view-all-btn:hover {
    background: #f0f0f0;
    color: #333;
}

.view-all-btn div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.view-all-btn i {
    margin-left: 8px;
    font-size: 14px;
}

/* Popular Products Section */
.popular-products {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
}

.popular-products h4 {
    font-size: 18px;
    margin-bottom: 20px;
    color: #333;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.popular-products h4:before {
    content: "";
    display: block;
    width: 4px;
    height: 18px;
    background: #c9a24a;
    margin-right: 10px;
    border-radius: 2px;
}

.popular-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 20px;
}

.popular-product {
    text-align: center;
    transition: all 0.3s;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.popular-product:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.popular-product-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.popular-product-img-container {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: #f9f9f9;
    padding-top: 100%; /* 1:1 Aspect Ratio */
}

.popular-product-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.popular-product:hover .popular-product-img {
    transform: scale(1.05);
}

.popular-product-info {
    padding: 12px 5px 0;
}

.popular-product h5 {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.popular-product .price {
   font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
    font-variant-numeric: tabular-nums;
    -webkit-font-variant-numeric: tabular-nums;
    font-weight: 800 !important;
    letter-spacing: 0.6px;
    color: #0f1720 !important;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .search-modal-content {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .popular-products-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 15px;
    }
    
    .suggestion-item {
        padding: 10px 15px;
    }
    
    .suggestion-item img {
        width: 40px;
        height: 40px;
        margin-right: 12px;
    }
}

@media (max-width: 480px) {
    .popular-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .search-modal-header h3 {
        font-size: 18px;
    }

    .search-modal-input {
        padding: 12px 95px 12px 15px;
        font-size: 14px;
    }

    .search-modal-actions {
        right: 14px;
        gap: 8px;
    }

    .search-modal-viewall {
        font-size: 12px;
    }
}

.popular-products h4 {
    font-size: 18px;
    margin-bottom: 20px;
    color: #333;
    font-weight: 600;
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 15px;
}

.popular-products h4:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #c9a24a;
    border-radius: 2px;
}

@media (max-width: 991px) {
    .nav-categories-link {
        pointer-events: none;
        opacity: 0.5;
    }
    
    .category-modal {
        display: none !important;
    }
}

@media (min-width: 992px) {
    .nav-categories-link {
        pointer-events: auto;
        opacity: 1;
    }
}