/* ========== HEADER WRAPPER ========== */
body.scrolled {
 padding-top: 70px;
}

.header-wrapper {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 z-index: 10000;
 background: transparent;
}

/* ========== TOP HEADER ========== */
.top-header {
 background: #131921;
 color: #fff;
 padding: 0.5rem 0;
 font-size: 14px;
 max-height: 50px;
 transition: all 0.3s ease;
}

.header-wrapper.scrolled .top-header {
 max-height: 0;
 padding: 0;
 opacity: 0;
 overflow: hidden;
}

/* ========== MAIN NAVBAR ========== */
.main-navbar {
 background: #232f3e;
 position: relative;
 z-index: 10001;
}

.brand-logo {
 height: 50px;
 transition: all 0.3s ease;
}

.header-wrapper.scrolled .brand-logo {
 height: 40px;
}

.brand-name {
 color: #fff;
 font-weight: 900;
}

.brand-name .thestl {
 color: #ff9900;
}

/* ========== SEARCH BAR ========== */
.search-bar input:focus {
 outline: 3px solid #ff9900;
 box-shadow: none;
}

.btn-search {
 background: #febd69;
 border: none;
}

/* ========== NAV ACTIONS ========== */
.navbar-actions {
 display: flex;
 align-items: center;
 gap: 0.5rem;
}

/* ========== BOTTOM NAVBAR ========== */
.bottom-navbar {
 background: #37475a;
 position: relative;
 z-index: 10001;
}

.header-wrapper.scrolled .bottom-navbar {
 max-height: 0;
 padding: 0;
 opacity: 0;
 overflow: hidden;
}

/* ========== MEGA MENU (FIXED) ========== */
.categories-dropdown {
 position: relative;
}

.mega-menu {
 position: fixed;
 width: auto;
 background: #fff;
 padding: 1.5rem;
 box-shadow: 0 12px 40px rgba(0,0,0,0.25);
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
 transform: translateY(-10px);
 transition: all 0.25s ease;
 z-index: 999998;
 scroll-behavior: smooth;
 scrollbar-width: thin;
 scrollbar-color: #c7c7c7 #f1f1f1;
 max-height: calc(100vh - 200px);
 max-width: 90%;
 overflow-y: auto;
 overscroll-behavior: contain;

}

/* JS-controlled state */
.mega-menu.show {
 opacity: 1;
 visibility: visible;
 pointer-events: auto;
 transform: translateY(0);
}

.mega-menu-item {
 color: #111;
 text-decoration: none;
 padding: 0.5rem;
}

.mega-menu-item:hover {
 background: #f3f3f3;
 color: #ff9900;
}

/* ========== SLIDER SAFETY ========== */
.hero-slider-section,
.swiper {
 position: relative;
 z-index: 1;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 992px) {
 body { padding-top: 120px; }
 .mega-menu-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
 body { padding-top: 100px; }
 .user-info { display: none; }
}

.categories-dropdown:hover .mega-menu {
 opacity: 1;
 visibility: visible;
 pointer-events: all;
 transform: translateY(0);
}
/* =========================================
   MEGA MENU SCROLL SUPPORT (NO UI CHANGE)
   ========================================= */


/* Nice scrollbar (Chrome / Edge / Safari) */
.mega-menu::-webkit-scrollbar {
 width: 8px;
}

.mega-menu::-webkit-scrollbar-track {
 background: #f1f1f1;
}

.mega-menu::-webkit-scrollbar-thumb {
 background: #c7c7c7;
 border-radius: 4px;
}

.mega-menu::-webkit-scrollbar-thumb:hover {
 background: #a8a8a8;
}

.categories-dropdown:hover .mega-menu {
 opacity: 1;
 visibility: visible;
 pointer-events: all;
 transform: translateY(0);
}


/*OLD content-visibility*/
/* ========== HEADER WRAPPER ========== */
body {
 padding-top: 160px;
 transition: padding-top 0.3s ease;
}

body.scrolled {
 padding-top: 70px;
}

.header-wrapper {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 z-index: 9999 !important;
 transition: all 0.3s ease;
}

/* ========== TOP HEADER (AMAZON DARK) ========== */
.top-header {
 background: #131921;
 color: #fff;
 padding: 0.5rem 0;
 font-size: 14px;
 transition: all 0.3s ease;
 overflow: hidden;
 max-height: 50px;
 opacity: 1;
 z-index: 10000;
 position: relative;
}

.header-wrapper.scrolled .top-header {
 max-height: 0;
 padding: 0;
 opacity: 0;
}

.top-header a {
 color: #fff;
 text-decoration: none;
 padding: 0.5rem 1rem;
 display: inline-block;
 transition: all 0.2s;
}

.top-header a:hover {
 color: #ff9900;
}

.top-header .social-icons {
 display: flex;
 gap: 8px;
 align-items: center;
}

.top-header .social-icon {
 width: 30px;
 height: 30px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 background: rgba(255, 255, 255, 0.15);
 color: #fff;
 text-decoration: none;
 transition: all 0.3s ease;
 font-size: 14px;
}

.top-header .social-icon:hover {
 background: #ff9900;
 color: #131921;
 transform: translateY(-2px);
}

/* ========== MAIN NAVBAR (AMAZON BLUE) ========== */
.main-navbar {
 background: #232f3e;
 padding: 0;
 box-shadow: 0 2px 5px rgba(0,0,0,0.1);
 transition: all 0.3s ease;
 z-index: 9999;
 position: relative;
}

.header-wrapper.scrolled .main-navbar {
 box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.navbar-brand {
 padding: 0.5rem 1rem;
 background: #232f3e;
 border: 2px solid transparent;
 transition: all 0.3s ease;
}

.navbar-brand:hover {
 /*border-color: #fff;*/
}

.brand-logo {
 height: 50px;
 width: auto;
 transition: all 0.3s ease;
}

.header-wrapper.scrolled .brand-logo {
 height: 40px;
}

.brand-name {
 font-family: 'Arial Black', sans-serif;
 font-size: 24px;
 font-weight: 900;
 color: #fff;
 letter-spacing: -1px;
 transition: all 0.3s ease;
}

.header-wrapper.scrolled .brand-name {
 font-size: 20px;
}

.brand-name .thestl {
 color: #ff9900;
}

/* Search Bar */
.search-bar {
 flex: 1;
 max-width: 800px;
 margin: 0 1rem;
}

.search-bar .input-group {
 border-radius: 4px;
 overflow: hidden;
}

.search-bar input {
 border: none;
 padding: 0.75rem 1rem;
 font-size: 15px;
 transition: all 0.3s ease;
}

.header-wrapper.scrolled .search-bar input {
 padding: 0.6rem 1rem;
 font-size: 14px;
}

.search-bar input:focus {
 box-shadow: none;
 outline: 3px solid #ff9900;
}

.search-bar .btn-search {
 background: #febd69;
 border: none;
 padding: 0 1.5rem;
 color: #111;
 font-weight: 600;
 transition: all 0.2s;
}

.search-bar .btn-search:hover {
 background: #ff9900;
}

/* Navbar Actions */
.navbar-actions {
 display: flex;
 align-items: center;
 gap: 0.5rem;
}

.nav-action-item {
 color: #fff;
 text-decoration: none;
 padding: 0.5rem 1rem;
 border: 2px solid transparent;
 border-radius: 2px;
 transition: all 0.2s;
 position: relative;
 display: flex;
 flex-direction: column;
 align-items: center;
 min-width: 80px;
}

.header-wrapper.scrolled .nav-action-item {
 flex-direction: row;
 min-width: auto;
 padding: 0.4rem 0.8rem;
}

.nav-action-item:hover {
 /*border-color: #fff;*/
 color: #fff;
}

.nav-action-item .label-top {
 font-size: 12px;
 line-height: 1;
 margin-bottom: 2px;
 transition: all 0.3s ease;
}

.header-wrapper.scrolled .nav-action-item .label-top {
 display: none;
}

.nav-action-item .label-bottom {
 font-size: 14px;
 font-weight: 700;
 line-height: 1;
}

.nav-action-item i {
 font-size: 24px;
 margin-bottom: 2px;
 transition: all 0.3s ease;
}

.header-wrapper.scrolled .nav-action-item i {
 font-size: 20px;
 margin-bottom: 0;
 margin-right: 5px;
}

.nav-badge {
 position: absolute;
 top: 5px;
 right: 10px;
 background: #ff9900;
 color: #111;
 border-radius: 50%;
 min-width: 20px;
 height: 20px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 11px;
 font-weight: 700;
 padding: 0 5px;
}

/* ========== USER DROPDOWN ========== */

/* =========================================
   USER DROPDOWN – FORCE SHOW STATE (FIX)
   ========================================= */

   .user-dropdown .dropdown-menu.show {
    display: block;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    z-index: 1000000 !important;
   }

   .user-dropdown {
    top: 100%;
    /*position: relative;*/
    z-index: 100000 !important;
   }

   .user-profile-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: 2px solid transparent;
    padding: 0.5rem 1rem;
    border-radius: 2px;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    z-index: 100001;
   }

   .header-wrapper.scrolled .user-profile-btn {
    padding: 0.4rem 0.8rem;
   }

   .user-profile-btn:hover {
    /*border-color: #fff;*/
   }

   .user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
   }

   .header-wrapper.scrolled .user-avatar {
    width: 32px;
    height: 32px;
   }

   .user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
   }

   .user-greeting {
    font-size: 11px;
    opacity: 0.9;
    line-height: 1;
   }

   .user-name {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
   }

/* User Dropdown Menu */
.user-dropdown_delme .dropdown-menu {
 position: absolute;
 top: 100%;
 right: 0;
 background: #fff;
 border-radius: 4px;
 box-shadow: 0 8px 30px rgba(0,0,0,0.3);
 min-width: 280px;
 margin-top: 8px;
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
 transform: translateY(-10px);
 transition: all 0.3s ease;
 z-index: 999999 !important;
 border: 1px solid #ddd;
}

.user-dropdown_delme:hover .dropdown-menu {
 opacity: 1;
 visibility: visible;
 pointer-events: all;
 transform: translateY(0);
}

.dropdown-header {
 padding: 15px 20px;
 border-bottom: 1px solid #ddd;
 background: #f7f7f7;
 border-radius: 4px 4px 0 0;
}

.dropdown-header .user-name-full {
 font-weight: 700;
 color: #111;
 font-size: 16px;
 margin-bottom: 3px;
}

.dropdown-header .user-email {
 font-size: 13px;
 color: #666;
 margin-bottom: 5px;
}

.dropdown-header .user-role-badge {
 display: inline-block;
 background: #ff9900;
 color: #111;
 padding: 4px 12px;
 border-radius: 12px;
 font-size: 11px;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.5px;
}

.dropdown-item {
 padding: 12px 20px;
 color: #111;
 text-decoration: none;
 display: flex;
 align-items: center;
 gap: 12px;
 transition: all 0.2s ease;
 border-left: 3px solid transparent;
}

.dropdown-item:hover {
 background: #f3f3f3;
 border-left-color: #ff9900;
 color: #111;
}

.dropdown-item i {
 width: 20px;
 text-align: center;
 font-size: 16px;
}

.dropdown-divider {
 height: 1px;
 background: #ddd;
 margin: 5px 0;
}

.dropdown-item.logout {
 color: #c45500;
 border-top: 1px solid #ddd;
}

.dropdown-item.logout:hover {
 background: #fff3e0;
 border-left-color: #c45500;
}

/* ========== BOTTOM NAVBAR (AMAZON GRAY) ========== */
.bottom-navbar {
 background: #37475a;
 padding: 0.5rem 0;
 transition: all 0.3s ease;
 overflow: hidden;
 max-height: 50px;
 opacity: 1;
 z-index: 9998;
 position: relative;
}

.header-wrapper.scrolled .bottom-navbar {
 max-height: 0;
 padding: 0;
 opacity: 0;
}

.bottom-navbar .nav {
 display: flex;
 align-items: center;
 gap: 0.5rem;
}

.bottom-navbar .nav-link {
 color: #fff;
 padding: 0.5rem 1rem;
 font-size: 14px;
 font-weight: 500;
 border: 2px solid transparent;
 border-radius: 2px;
 transition: all 0.2s;
}

.bottom-navbar .nav-link:hover {
 /*border-color: #333;*/
}

.bottom-navbar .nav-link i {
 margin-right: 5px;
}

/* ========== CATEGORIES MEGA MENU ========== */
.categories-dropdown {
 position: relative;
 z-index: 100000 !important;
}

.categories-dropdown:hover .mega-menu {
 opacity: 1;
 visibility: visible;
 pointer-events: all;
 transform: translateY(0);
}

.mega-menu-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 0.2rem;
 max-width: 100%;
 max-height: 155px;
}

.mega-menu-item {
 padding: 0.5rem;
 color: #111;
 text-decoration: none;
 border-radius: 4px;
 transition: all 0.2s;
 display: block;
}

.mega-menu-item:hover {
 background: #f0f0f0;
 color: #ff9900;
}

.mega-menu-item i {
 margin-right: 8px;
 color: #ff9900;
}

/* ========== FIX SLIDER Z-INDEX ========== */
.hero-slider-section {
 position: relative;
 z-index: 1 !important;
}

.swiper {
 z-index: 1 !important;
}

.swiper-button-next,
.swiper-button-prev,
.swiper-pagination {
 z-index: 10 !important;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 992px) {
 body {
  padding-top: 120px;
 }

 body.scrolled {
  padding-top: 60px;
 }

 .search-bar {
  max-width: 100%;
  margin: 1rem 0;
 }

 .navbar-actions {
  width: 100%;
  justify-content: space-around;
 }

 .mega-menu {
  min-width: 100%;
 }

 .mega-menu-grid {
  grid-template-columns: repeat(2, 1fr);
 }

 .bottom-navbar .nav {
  flex-wrap: wrap;
 }
}

@media (max-width: 768px) {
 .user-info {
  display: none;
 }

 .nav-action-item .label-bottom {
  display: none;
 }

 .nav-action-item {
  min-width: auto;
  padding: 0.5rem;
 }

 .top-header .social-icons {
  display: none;
 }
}

@media (max-width: 576px) {
 body {
  padding-top: 100px;
 }

 .brand-name {
  font-size: 18px;
 }

 .brand-logo {
  height: 40px;
 }
}

.prod_img{
 object-fit:contain; 
 aspect-ratio: 1 / 1;
}