.top-bar {
    background: #000;
    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: #cba744 !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 !important;
    display: flex !important;
    justify-content: flex-start !important;
    gap: 15px !important;
    margin: 0 30px !important;
}

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

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

.nav-categories-link::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 0 !important;
    height: 2px !important;
    background: #cba744 !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: #cba744 !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: gold !important;
}

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



/* Search icon specific styling */
.search-icon {
    position: relative !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: #cba744 !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: #cba744;
}

/* 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: #cba744;
        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;
    } 
}
@media (min-width: 991px) and (max-width: 1144px) {
    .nav-categories-link {
        font-size: 13px !important;
        padding: 8px 3px !important;
    }
  
}
		@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: #cba744;
			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{
          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;
        margin-top: 40px !important;

    }

    .header .logo img {
        height: 62px !important;
		display: flex !important;
    	margin-top: -62px !important;
    }


    .search-bar {
        order: 2 !important;
        flex: 1.5 !important;
        margin: 0 10px !important;
    }
	.login-register-section a {
			font-size: x-large !important;
		}
   
    .header .right {
        display: flex !important;
        justify-content: flex-end !important;

    }

    .header .right ul {
		margin-top: -230px !important;
		gap: 8px  !important;
		margin-right: 60px  !important;
    }

    .header .right ul li {
        margin-left: 10px !important;
    }
	.header .right ul li a {
		font-size:x-large !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 {
        display: none !important;
    }

   
    .hamburger-menu {
        display: flex !important;
        font-size: 24px !important;
        cursor: pointer !important;
        margin-left: 15px !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) {
	.header .right ul li a {
		font-size:large !important;
	}
	.header .right ul { 
		gap:1px !important;
	}
	.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: 146px !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 #cba743;
    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:#cba743;
}

/* 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: #cba743;
    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: #cba744 !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: #cba744 !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;
}
 
    @media (max-width: 569px) {
    .right > ul {
        display: none !important;
    }
}

/* 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: 15px 20px;
    font-size: 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    outline: none;
    transition: all 0.3s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

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

.search-modal-icon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    font-size: 20px;
}

/* 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: #cba744;
    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: #cba744;
    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: 768px) {
    .search-modal-content {
        width: 85%;
    }
    
    .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 15px;
        font-size: 15px;
    }
}

.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: #cba744;
    border-radius: 2px;
}

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

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