/* =============== setup them ============== */
 :root[data-theme="light"] {
     /* Backgrounds */
     --bg-primary: #ffffff;
     --bg-secondary: #f8f9fa;
     --bg-tertiary: #e9ecef;

     /* Text */
     --text-primary: #0C4A4F;
     /* darkened teal for readable text */
     --text-secondary: #6D7B8A;
     --text-muted: #9aa3ad;

     /* Brand Colors */
     --accent-primary: #00959B;
     /* teal from logo */
     --accent-secondary: #3DB54A;
     /* green from logo */

     /* Borders + effects */
     --border-color: rgba(0, 149, 155, 0.28);
     --shadow-color: rgba(0, 149, 155, 0.14);
     --shadow-color-strong: rgba(0, 149, 155, 0.25);

     /* Gradients */
     --gradient-primary: linear-gradient(135deg, #00959B 0%, #3DB54A 100%);
     --gradient-bg: linear-gradient(165deg, #ffffff 0%, #f8f9fa 30%, #e9ecef 100%);

     /* =============== FOOTER SPECIFIC VARIABLES ============== */
     --footer-bg: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
     --footer-border: rgba(47, 164, 231, 0.1);
     --footer-text: #2fa4e7;
     --footer-text-muted: #6c757d;
     --footer-accent: #007bff;
     --footer-glow: rgba(47, 164, 231, 0.1);
     --footer-card-bg: rgba(255, 255, 255, 0.8);
     --footer-card-border: rgba(47, 164, 231, 0.2);
     --footer-shadow: 0 8px 32px rgba(47, 164, 231, 0.08);
     --footer-divider: linear-gradient(90deg, transparent 0%, rgba(47, 164, 231, 0.2) 50%, transparent 100%);
     --footer-particle: rgba(47, 164, 231, 0.05);



 }

 :root[data-theme="dark"] {
     /* Backgrounds */
     --bg-primary: #0C1A1C;
     --bg-secondary: #102326;
     --bg-tertiary: #1a2c30;

     /* Text */
     --text-primary: #E8FBFE;
     --text-secondary: #9FB2B8;
     --text-muted: #6c757d;

     /* Brand Colors */
     --accent-primary: #2CD1D8;
     /* lighter teal for dark UI */
     --accent-secondary: #71E285;
     /* lighter green */

     /* Borders + effects */
     --border-color: rgba(44, 209, 216, 0.3);
     --shadow-color: rgba(0, 0, 0, 0.4);
     --shadow-color-strong: rgba(0, 0, 0, 0.65);

     /* Gradients */
     --gradient-primary: linear-gradient(135deg, #2CD1D8 0%, #71E285 100%);
     --gradient-bg: linear-gradient(165deg, #0C1A1C 0%, #102326 35%, #1a2c30 100%);

     /* Best Neutral Glass Colors - Dark Mode */
     --glass-bg: rgba(12, 26, 28, 0.95);
     --glass-border: rgba(255, 255, 255, 0.08);
     --glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);


     /* =============== FOOTER SPECIFIC VARIABLES ============== */
     --footer-bg: linear-gradient(180deg, #0a0a0f 0%, #1a1d23 100%);
     --footer-border: rgba(47, 164, 231, 0.15);
     --footer-text: #f8f9fa;
     --footer-text-muted: #adb5bd;
     --footer-accent: #4dabf7;
     --footer-glow: rgba(47, 164, 231, 0.15);
     --footer-card-bg: rgba(255, 255, 255, 0.05);
     --footer-card-border: rgba(47, 164, 231, 0.25);
     --footer-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
     --footer-divider: linear-gradient(90deg, transparent 0%, rgba(47, 164, 231, 0.3) 50%, transparent 100%);
     --footer-particle: rgba(47, 164, 231, 0.08);

 }




 /* ================================== */
 :root {
     --font-base: clamp(calc(100% - 25%), 1vw + 0.5rem, calc(100% - 85%)) !important;

     --sidebar-heading-mult: 0.94;
     --accordion-header-mult: 1.06;
     --subcategory-name-mult: 1.03;
     --product-title-mult: 0.92;
     --product-description-mult: 0.88;
     --price-mult: 1.06;
     --button-text-mult: 1;
 }

 :root {
     /* Fluid Responsive Font Scale */
     --fs-xxs: clamp(0.7rem, 0.65rem + 0.2vw, 0.8rem);
     --fs-xs: clamp(0.8rem, 0.75rem + 0.3vw, 0.95rem);
     --fs-sm: clamp(0.9rem, 0.85rem + 0.4vw, 1.05rem);
     --fs-md: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
     --fs-lg: clamp(1.2rem, 1rem + 0.8vw, 1.8rem);
     --fs-xl: clamp(1.5rem, 1.2rem + 1vw, 2.2rem);
     --fs-xxl: clamp(2rem, 1.5rem + 1.5vw, 3rem);
 }




















 /* =============== ULTRA PREMIUM ENHANCEMENTS ============== */
 /* =============== REFINED PREMIUM ENHANCEMENTS ============== */


 :root {
     --premium-glow: 0 8px 32px rgba(47, 164, 231, 0.12);
     --premium-glow-strong: 0 12px 48px rgba(47, 164, 231, 0.18);
     --morphism-blur: blur(20px);
     --premium-timing: cubic-bezier(0.25, 0.46, 0.45, 0.94);


     /* =============== FOOTER ANIMATION VARIABLES ============== */
     --footer-glow-speed: 8s;
     --footer-particle-speed: 20s;
     --footer-logo-rotate: -5deg;
     --footer-hover-lift: -2px;
     --footer-hover-slide: -8px;




 }

 /* =============== REFINED BODY & LAYOUT ============== */
 html {
     overflow-x: hidden;
     -webkit-text-size-adjust: 100%;

 }

 .body {
     background: var(--bg-primary);
     position: relative;
     overflow-x: hidden;
     font-size: clamp(14px, 1.2vw, 18px);

 }

 .body-main {
     background: var(--bg-secondary);
 }

 .body::before {
     content: '';
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background:
         radial-gradient(circle at 20% 80%, rgba(47, 164, 231, 0.03) 0%, transparent 50%),
         radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.02) 0%, transparent 50%);
     pointer-events: none;
     z-index: -1;
 }














 /* ================================== Top header style 2 ===================== */

 /* =============== PREMIUM ENHANCED HEADER STYLING ============== */
 .top-header {
     background: var(--accent-primary);
     border-bottom: 1px solid;
     border-image: linear-gradient(90deg,
             transparent 0%,
             var(--border-color) 50%,
             transparent 100%) 1;
     backdrop-filter: blur(40px) saturate(180%);

     position: sticky;
     top: 0;
     z-index: 1000;
     transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     will-change: transform, backdrop-filter;
 }

 /* Header scroll effect */
 .top-header.scrolled {
     background: rgba(255, 255, 255, 0.12);
     backdrop-filter: blur(50px) saturate(200%);

     box-shadow:
         0 8px 32px rgba(0, 0, 0, 0.12),
         inset 0 1px 0 rgba(255, 255, 255, 0.1);
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }

 .top-header-div {
     display: grid;
     grid-template-columns: auto 1fr auto;
     align-items: center;
     gap: 2.5rem;
     padding: 0.0rem 1.5rem;
     position: relative;
 }

 /* Premium gradient border effect */
 .top-header::before {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 1px;
     background: linear-gradient(90deg,
             transparent 0%,
             var(--accent-primary) 50%,
             transparent 100%);
     opacity: 0.3;
     pointer-events: none;
 }

 /* =============== PREMIUM LOGO SECTION ============== */
 .logo-div {
     display: flex;
     align-items: center;
     gap: 0.25rem;
     padding: 0.5rem 0.3rem 0.5rem 0.3rem;
     position: relative;
     flex-direction: column;
     height: 75px;
     background: var(--footer-divider);
 }

 .the_logo {
     height: 60px;
     width: 100%;
 }

 .the_logo-image {
     display: flex;
     align-items: center;
     transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
     padding: calc(100vw - 99.6vw);
     border-radius: 16px;
     background: #fff;
     box-shadow:
         var(--shadow-color),
         0 8px 32px rgba(47, 164, 231, 0.2);
     position: relative;
     overflow: hidden;
 }

 .the_logo-image::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg,
             transparent,
             rgba(255, 255, 255, 0.4),
             transparent);
     transition: left 0.6s ease;
 }

 .the_logo-image:hover {
     transform: scale(1.08) rotate(-3deg);
     box-shadow:
         var(--shadow-color-strong),
         0 12px 40px rgba(47, 164, 231, 0.3);
 }

 .the_logo-image:hover::before {
     left: 100%;
 }

 .the_logo-image img {
     filter: brightness(1) invert(0);
     transition: all 0.4s ease;
     transform: translateZ(0);
     height: calc(var(--fs-xs) + 15px);
     width: 100%;
 }

 .logo-text {
     display: flex;
     flex-direction: column;
     align-items: center;
     position: relative;

 }

 .logo-text-h5 {
     font-size: calc(var(--fs-xxs));
     font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
     font-weight: bolder;
     background: var(--bg-secondary);
     color: #fff;
     -webkit-background-clip: text;

     background-clip: text;
     margin: 0;
     line-height: 1.1;
     letter-spacing: -0.02em;
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     position: relative;
     padding: 0.25rem 0;

 }

 .logo-text-h5::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 0;
     height: 2px;
     background: var(--gradient-primary);
     transition: width 0.4s ease;
 }

 .logo-div:hover .logo-text-h5::after {
     width: 100%;
 }

 /* =============== PREMIUM SEARCH SECTION ============== */
 .search-form {
     position: relative;
     max-width: 650px;
     margin: 0 auto;
     background: var(--bg-secondary);
     flex: 1;
 }

 .search-form-form {
     position: relative;
     width: 100%;
     background: var(--bg-primary);
     color: var(--bg-secondary);
     isolation: isolate;
 }

 .search-input {
     width: 100%;
     padding: 1.5rem 4rem 1.5rem 2rem;
     border: 2px solid var(--bg-primary);
     border-image-slice: 1;
     border-radius: 50px;
     background: rgba(255, 255, 255, 0.1);
     color: var(--accent-secondary);
     font-size: 1.05rem;
     font-weight: 500;
     transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05), 0 4px 20px rgba(0, 0, 0, 0.08);
 }

 .search-input:focus {
     outline: none;

     border-image-slice: 1;
     background: rgba(255, 255, 255, 0.08);
     box-shadow:
         inset 0 2px 8px rgba(0, 0, 0, 0.1),
         0 6px 25px rgba(47, 164, 231, 0.15),
         0 0 0 3px rgba(47, 164, 231, 0.1);
     transform: translateY(-2px);
     padding: 0.3rem 3.0rem 0.3rem 0.5rem;
 }

 .search-input::placeholder {
     color: var(--text-muted);
     font-weight: 400;
     transition: all 0.3s ease;
 }

 .search-input:focus::placeholder {
     opacity: 0.7;
     transform: translateX(5px);
 }

 .search-icon {
     position: absolute;
     right: 1.5rem;
     top: 50%;
     transform: translateY(-50%);
     color: var(--bg-secondary);
     transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
     z-index: 2;
     background: var(--gradient-primary);
     -webkit-background-clip: text;
     /* -webkit-text-fill-color: transparent; */
     background-clip: text;
     width: 20px;
     height: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .search-form-form:focus-within .search-icon {
     color: var(--bg-secondary);
     transform: translateY(-50%) scale(1.2) rotate(8deg);
     right: 1.75rem;
 }

 /* Search suggestions dropdown */
 .search-suggestions {
     position: absolute;
     top: 100%;
     left: 0;
     right: 0;
     background: var(--bg-primary);
     border: 1px solid var(--border-color);
     border-radius: 16px;
     backdrop-filter: blur(40px);
     -webkit-backdrop-filter: blur(40px);
     box-shadow: var(--shadow-color-strong);
     margin-top: 0.5rem;
     opacity: 0;
     visibility: hidden;
     transform: translateY(-10px);
     transition: all 0.3s ease;
     z-index: 1001;
 }

 .search-form-form:focus-within .search-suggestions {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
 }

 /* =============== PREMIUM ACCOUNT LINKS SECTION ============== */
 .account-links {
     display: flex;
     align-items: center;
     gap: 1.25rem;
     justify-content: flex-end;
     position: relative;
 }

 .account-link {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     padding: 0.5rem 1.25rem;
     border-radius: 14px;
     transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     position: relative;
     background: var(--bg-secondary);
     border: 1px solid;
     border-image: linear-gradient(135deg,
             transparent 0%,
             var(--border-color) 50%,
             transparent 100%) 1;
     overflow: hidden;
     text-decoration: none !important;
     color: var(--accent-primary) !important;
     font-weight: 600;
     font-size: calc(100vw - 99.2vw);
     white-space: nowrap;
 }

 .account-link::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: var(--gradient-primary);
     transition: left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     z-index: -1;
 }

 .account-link:hover {
     background: transparent;
     border-image: var(--gradient-primary) 1;
     border-image-slice: 1;
     transform: translateY(-3px);
     box-shadow:
         var(--shadow-color-strong),
         0 8px 25px rgba(47, 164, 231, 0.15);
     color: white !important;
     text-decoration: none !important;
 }

 .account-link:hover::before {
     left: 0;
 }

 .account-link:hover i {
     transform: scale(1.15) rotate(5deg);
     color: white !important;
 }

 .account-link i {
     font-size: var(--fs-xs);
     transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
 }

 /* =============== PREMIUM THEME TOGGLE ============== */
 .theme-toggle-btn {
     background: var(--gradient-primary);
     border: none;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
     box-shadow:
         var(--shadow-color),
         0 8px 25px rgba(47, 164, 231, 0.2);
     font-size: var(--fs-sm);
     position: relative;
     overflow: hidden;
 }

 .theme-toggle-btn::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%, rgba(255, 255, 255, 0.1) 100%);
     opacity: 0;
     transition: opacity 0.3s ease;
 }

 .theme-toggle-btn:hover {
     transform: scale(1.15) rotate(180deg);
     box-shadow:
         var(--shadow-color-strong),
         0 12px 35px rgba(47, 164, 231, 0.3);
 }

 .theme-toggle-btn:hover::before {
     opacity: 1;
 }

 .theme-toggle-btn:active {
     transform: scale(1.05) rotate(180deg);
     transition: transform 0.1s ease;
 }

 /* =============== PREMIUM MINI WIDGETS ENHANCEMENT ============== */
 .mini-widgets {
     display: flex;
     align-items: center;
     gap: 1rem;
     margin-left: 1rem;
 }

 .minimal-widget .widget-btn {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     padding: 0.875rem 1.25rem;
     background: var(--bg-secondary);
     border: 1px solid;
     border-image: linear-gradient(135deg,
             var(--border-color) 0%,
             transparent 50%,
             var(--border-color) 100%) 1;
     border-radius: 12px;
     color: var(--text-primary);
     font-size: var(--fs-xxs);
     font-weight: 600;
     cursor: pointer;
     transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     min-width: 140px;
     justify-content: space-between;
     position: relative;
     overflow: hidden;
 }

 .minimal-widget .widget-btn::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: var(--gradient-primary);
     transition: left 0.4s ease;
     z-index: -1;
 }

 .minimal-widget .widget-btn:hover {
     border-image: var(--gradient-primary) 1;
     border-image-slice: 1;
     background: transparent;
     transform: translateY(-2px);
     box-shadow:
         var(--shadow-color),
         0 6px 20px rgba(47, 164, 231, 0.15);
     color: white;
 }

 .minimal-widget .widget-btn:hover::before {
     left: 0;
 }

 .minimal-widget .dropdown-menu {
     border: 1px solid;
     border-image: linear-gradient(135deg,
             rgba(47, 164, 231, 0.3) 0%,
             rgba(255, 255, 255, 0.1) 50%,
             rgba(47, 164, 231, 0.3) 100%) 1;
     border-image-slice: 1;
     border-radius: 16px;
     background: rgba(255, 255, 255, 0.08);
     backdrop-filter: blur(40px);
     -webkit-backdrop-filter: blur(40px);
     box-shadow:
         var(--shadow-color-strong),
         inset 0 1px 0 rgba(255, 255, 255, 0.1);
     padding: 0.75rem;
     margin-top: 0.75rem !important;
     animation: premiumDropdownSlide 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
 }

 @keyframes premiumDropdownSlide {
     from {
         opacity: 0;
         transform: translateY(-15px) scale(0.95);
     }

     to {
         opacity: 1;
         transform: translateY(0) scale(1);
     }
 }

 .dropdown-item {
     display: flex;
     align-items: center;
     gap: 0.875rem;
     padding: 0.875rem 1rem;
     border-radius: 10px;
     color: var(--text-primary);
     transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     font-weight: 500;
     position: relative;
     overflow: hidden;
 }

 .dropdown-item::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: var(--gradient-primary);
     transition: left 0.3s ease;
     z-index: -1;
 }

 .dropdown-item:hover {
     color: white;
     transform: translateX(8px);
 }

 .dropdown-item:hover::before {
     left: 0;
 }

 /* =============== PREMIUM CART BADGE ============== */
 .cart-badge {
     position: absolute;
     top: 6px;
     right: -9px;
     background: linear-gradient(135deg, #ff6b6b, #ee5a24);
     color: white;
     border-radius: 50%;
     width: 8px;
     height: 17px;
     font-size: 0.7rem;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 800;
     animation: premiumPulse 2s ease-in-out infinite;
     box-shadow: 0 2px 8px rgba(238, 90, 36, 0.4);
     border: 2px solid var(--bg-primary);
 }

 @keyframes premiumPulse {

     0%,
     100% {
         transform: scale(1);
         box-shadow: 0 2px 8px rgba(238, 90, 36, 0.4);
     }

     50% {
         transform: scale(1.1);
         box-shadow: 0 4px 12px rgba(238, 90, 36, 0.6);
     }
 }

 /* =============== ENHANCED RESPONSIVE DESIGN ============== */

 /* Large Desktop (1400px+) */
 @media (min-width: 1400px) {
     .top-header-div {
         gap: 3.5rem;
         padding: 0.0rem 1rem;
     }

     .account-links {
         gap: 1.75rem;
     }

     .logo-text-h5 {
         font-size: calc(var(--fs-xxs));
     }

     .search-input {
         padding: 0.5rem 3.5rem 0.5rem 0.5rem;
     }
 }

 /* Tablet Landscape (1024px - 1399px) */
 /* Tablet Landscape (1024px - 1399px) */
 @media (max-width: 1399px) and (min-width: 1024px) {
     .top-header-div {
         gap: 1.5rem;
         padding: 0.0rem 1rem;
         grid-template-columns: auto minmax(188px, 1fr) auto;
     }

     .the_logo-image {
         padding: 0.5rem;
     }

     .the_logo-image img {
         width: 100%;
         /* height: 1.2rem; */
         height: calc(var(--fs-xxs) + 12px);
     }

     .logo-text-h5 {
         font-size: calc(var(--fs-xxs) - 0.3vw);
         font-weight: 700;
     }

     .logo-div {
         gap: 0.8rem;
     }

     .search-form {
         max-width: 300px;
         margin: 0 auto;
     }

     .search-input {
         padding: 0.4rem 2.5rem 0.4rem 1rem;
         font-size: 0.75rem;
         width: 100%;
     }

     .search-icon {
         right: 1rem;
         width: 16px;
         height: 16px;
     }

     .account-links {
         gap: 0.5rem;
         flex-wrap: nowrap;
     }

     .account-link {
         padding: 0.4rem 0.6rem;
         height: 2rem;
         font-size: 0.7rem;
         min-width: auto;
     }

     .account-link i {
         font-size: var(--fs-xs);
         margin-right: 0.2rem;
     }

     .account-link span {
         font-size: 0.65rem;
     }

     /* Hide some text to save space */
     .account-link span:not(.cart-badge) {
         display: none;
     }

     .theme-toggle-btn {
         width: 2.5rem;
         height: 2.5rem;
         font-size: var(--fs-sm);
         ;
         min-width: 2.5rem;
     }

     .mini-widgets {
         gap: 0.5rem;
         margin-left: 0.5rem;
     }

     .minimal-widget .widget-btn {
         padding: 0.5rem 0.8rem;
         min-width: 110px;
         font-size: 0.75rem;
         gap: 0.4rem;
         color: var(--accent-primary);
     }

     .minimal-widget .widget-btn .emoji {
         font-size: 0.8rem;
         color: var(--text-primary);
     }



     .top-header-div {
         min-width: 0;
         /* Allow grid to shrink */
     }
 }

 /* Tablet (768px - 1023px) */
 @media (max-width: 1023px) and (min-width: 768px) {

     .top-header,
     .top-header-div {
         display: none;
         width: 0;
         /* overflow-x: hidden; */
     }
 }

 /* Mobile (480px - 767px) */
 @media (max-width: 767px) and (min-width: 480px) {

     .top-header,
     .top-header-div {
         display: none;
         width: 0;
         overflow-x: hidden;
     }
 }

 /* Small Mobile (320px - 479px) */
 @media (max-width: 479px) {

     .top-header,
     .top-header-div {
         display: none;
         width: 0;
         overflow-x: hidden;
     }
 }

 /* =============== PREMIUM ANIMATIONS & ENHANCEMENTS ============== */
 @keyframes headerSlideIn {
     from {
         opacity: 0;
         transform: translateY(-100%);
         backdrop-filter: blur(0);
     }

     to {
         opacity: 1;
         transform: translateY(0);
         backdrop-filter: blur(40px);
     }
 }

 .top-header {
     animation: headerSlideIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

 /* Enhanced icon animations */
 .bi::before {
     transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
 }

 .account-link:hover .bi::before {
     transform: scale(1.25);
 }

 /* Premium focus states for accessibility */
 .search-input:focus,
 .widget-btn:focus,
 .theme-toggle-btn:focus,
 .account-link:focus {
     outline: 2px solid var(--bg-secondary);
     outline-offset: 3px;
     box-shadow: 0 0 0 4px rgba(47, 164, 231, 0.1);
 }

 /* =============== DARK MODE ENHANCEMENTS ============== */
 :root[data-theme="dark"] .top-header {
     background: var(--footer-divider);
     border-image: linear-gradient(90deg,
             transparent 0%,
             rgba(47, 164, 231, 0.3) 50%,
             transparent 100%) 1;
     border-image-slice: 1;
 }

 :root[data-theme="dark"] .search-input {
     background: rgba(255, 255, 255, 0.03);
     border-image: linear-gradient(135deg,
             rgba(47, 164, 231, 0.2) 0%,
             transparent 50%,
             rgba(47, 164, 231, 0.2) 100%) 1;
 }

 :root[data-theme="dark"] .account-link:hover {
     background: transparent;
 }

 :root[data-theme="dark"] .top-header.scrolled {
     background: rgba(10, 12, 18, 0.92);
     box-shadow:
         0 8px 32px rgba(0, 0, 0, 0.3),
         inset 0 1px 0 rgba(255, 255, 255, 0.05);
 }

 /* =============== PERFORMANCE OPTIMIZATIONS ============== */
 @media (prefers-reduced-motion: reduce) {

     .top-header,
     .account-link,
     .theme-toggle-btn,
     .widget-btn,
     .search-input {
         transition: none;
         animation: none;
     }

     .account-link:hover,
     .theme-toggle-btn:hover,
     .widget-btn:hover {
         transform: none;
     }
 }

 /* High contrast mode support */
 @media (prefers-contrast: high) {
     .top-header {
         backdrop-filter: none;
         background: var(--bg-primary);
         border-bottom: 2px solid var(--text-primary);
     }

     .account-link {
         border: 2px solid var(--text-primary);
         background: var(--bg-primary);
     }

     .account-link:hover {
         background: var(--text-primary);
         color: var(--bg-primary) !important;
     }
 }

 /* Reduced transparency support */
 @media (prefers-reduced-transparency: reduce) {
     .top-header {
         backdrop-filter: none;
         background: var(--bg-primary);
     }

     .search-input,
     .account-link,
     .widget-btn {
         backdrop-filter: none;
         background: var(--bg-secondary);
     }
 }

 /* =============== TOUCH DEVICE OPTIMIZATIONS ============== */
 @media (hover: none) and (pointer: coarse) {

     .account-link,
     .widget-btn,
     .theme-toggle-btn {
         min-height: 44px;
     }

     .account-link:active,
     .widget-btn:active,
     .theme-toggle-btn:active {
         transform: scale(0.98);
         background: var(--gradient-primary);
         color: white !important;
     }

     .account-link:active {
         color: white !important;
     }
 }

 /* Print styles */
 @media print {
     .top-header {
         background: white !important;
         border-bottom: 1px solid #000 !important;
         box-shadow: none !important;
         backdrop-filter: none !important;
     }

     .account-link,
     .widget-btn {
         border: 1px solid #000 !important;
         background: #f8f9fa !important;
         color: #000 !important;
     }
 }

































 /*  =============== top header style 3 ================= */



























































































































































 /* =============== Second-navbar  ============== */
 .shar-header {
     position: relative;
     z-index: 2;
     background: var(--bg-primary);
     backdrop-filter: var(--morphism-blur);
     -webkit-backdrop-filter: var(--morphism-blur);
     border-bottom: 1px solid var(--border-color);

 }

 .main-header {
     background: transparent;
 }

 /* =============== REFINED SECOND NAVBAR ============== */
 .second-navbar {
     background: rgba(255, 255, 255, 0.02);
     backdrop-filter: var(--morphism-blur);
     -webkit-backdrop-filter: var(--morphism-blur);
     border-bottom: 1px solid var(--border-color);
     box-shadow: var(--shadow-color);
     position: relative;
     z-index: 1;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }

 /* =============== REFINED NAV ITEMS ============== */
 .nav-itmes {
     background: var(--bg-tertiary);
     border: 1px solid var(--border-color);
     padding: 0.875rem 1.25rem;
     border-radius: 12px;
     transition: all 0.3s var(--premium-timing);
     position: relative;
     overflow: hidden;
     font-weight: 600;
     font-size: 0.95rem;
 }

 .nav-itmes::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: var(--gradient-primary);
     transition: left 0.4s var(--premium-timing);
     z-index: -1;
 }

 .nav-itmes:hover {
     transform: translateY(-2px);
     box-shadow: var(--premium-glow);
     border-color: var(--accent-primary);
     color: white !important;
 }

 .nav-itmes:hover::before {
     left: 0;
 }

 /* Special hover effect for category links */
 #all-categorices-links:hover,
 #CategorySystemLinksscript:hover {
     background: var(--gradient-primary);
     border-color: transparent;
     cursor: alias;
 }

 #all-categorices-links:hover a,
 #CategorySystemLinksscript:hover a {
     color: white !important;
 }

 /* =============== REFINED DROPDOWN CONTAINERS ============== */
 #categoryContainer_Father,
 #SubCategorySystemContainerFather {
     background: var(--bg-primary);
     border: 1px solid var(--border-color);
     border-radius: 16px;
     box-shadow: var(--premium-glow-strong);
     backdrop-filter: var(--morphism-blur);
     -webkit-backdrop-filter: var(--morphism-blur);
     padding: 2rem;
     margin-top: 0.5rem;
     animation: refinedSlideDown 0.3s var(--premium-timing);
     position: absolute;
     top: 100%;
     left: 0;
     right: 0;
     z-index: 100;
     display: none;
 }

 @keyframes refinedSlideDown {
     from {
         opacity: 0;
         transform: translateY(-10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* Grid layout */
 #categoryContainer_Father,
 #SubCategorySystemContainerFather {
     display: grid;
     grid-template-columns: 1fr 1.5fr 2fr;
     gap: 2rem;
     max-height: 65vh;
     overflow: hidden;
 }

 /* =============== REFINED CATEGORY SECTIONS ============== */
 #all-categoriece,
 #all-SubcategorieceSystem {
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
     border-right: 1px solid var(--border-color);
     padding-right: 0.5rem;
     max-height: 100%;
     overflow-y: auto;
 }

 #all-subcategorices,
 #all-SubSubCategorySystem {
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
     border-right: 1px solid var(--border-color);
     padding-right: 1.5rem;
     max-height: 100%;
     overflow-y: auto;
 }

 #all-SubSubcategorices,
 #all-ProductSystem {
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
     max-height: 100%;
     overflow-y: auto;
 }

 /* =============== REFINED CATEGORY ITEMS ============== */





 .category-item-premium,
 .category-item,
 .SubSubCategorySystem-item,
 #ProductSystemElements {
     background: var(--bg-secondary);
     border: 1px solid var(--border-color);
     border-radius: 10px;
     padding: 1rem 1.25rem;
     transition: all 0.3s var(--premium-timing);
     position: relative;
     overflow: hidden;
     cursor: pointer;
 }

 .SubSubCategorySystem-item {
     width: 15em;
 }

 .category-item-premium::before,
 .category-item::before,
 .SubSubCategorySystem-item::before,
 #ProductSystemElements::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: var(--gradient-primary);
     transition: left 0.3s var(--premium-timing);
     z-index: -1;
 }

 .category-item-premium:hover,
 .category-item:hover,
 .SubSubCategorySystem-item:hover,
 #ProductSystemElements:hover {
     transform: translateX(4px);
     border-color: var(--accent-primary);
     box-shadow: var(--shadow-color);
     color: white;
 }

 .category-item-premium:hover::before,
 .category-item:hover::before,
 .SubSubCategorySystem-item:hover::before,
 #ProductSystemElements:hover::before {
     left: 0;
 }

 .category-item-premium:hover a,
 .category-item:hover #categoryElement-a,
 .SubSubCategorySystem-item:hover,
 #ProductSystemElements:hover {
     color: white !important;
 }

 /* Active state indicator */
 .category-item::after {
     content: "";
     position: absolute;
     left: -1rem;
     top: 50%;
     transform: translateY(-50%);
     width: 3px;
     height: 0;
     background: var(--accent-primary);
     border-radius: 2px;
     transition: all 0.3s ease;
 }

 .category-item:hover::after {
     height: 50%;
 }

 /* Arrow indicator for subcategories */
 .SubSubCategorySystem-item::before {
     content: "→";
     position: absolute;
     left: 1rem;
     top: 50%;
     transform: translateY(-50%);
     opacity: 0;
     transition: all 0.3s ease;
     color: var(--accent-primary);
 }

 .SubSubCategorySystem-item:hover::before {
     opacity: 1;
     transform: translateY(0%) translateX(-2px);
 }

 /* Arrow indicator for products */
 #ProductSystemElements::after {
     content: "→";
     position: absolute;
     right: 1rem;
     top: 50%;
     transform: translateY(-50%);
     opacity: 0;
     transition: all 0.3s ease;
     color: var(--accent-primary);
 }

 #ProductSystemElements:hover::after {
     opacity: 1;
     transform: translateY(-50%) translateX(2px);
 }

 /* =============== REFINED SCROLLBAR ============== */
 #all-categoriece::-webkit-scrollbar,
 #all-subcategorices::-webkit-scrollbar,
 #all-SubSubcategorices::-webkit-scrollbar,
 #all-SubcategorieceSystem::-webkit-scrollbar,
 #all-SubSubCategorySystem::-webkit-scrollbar,
 #all-ProductSystem::-webkit-scrollbar {
     width: 4px;
 }

 #all-categoriece::-webkit-scrollbar-track,
 #all-subcategorices::-webkit-scrollbar-track,
 #all-SubSubcategorices::-webkit-scrollbar-track,
 #all-SubcategorieceSystem::-webkit-scrollbar-track,
 #all-SubSubCategorySystem::-webkit-scrollbar-track,
 #all-ProductSystem::-webkit-scrollbar-track {
     background: var(--bg-tertiary);
     border-radius: 10px;
 }

 #all-categoriece::-webkit-scrollbar-thumb,
 #all-subcategorices::-webkit-scrollbar-thumb,
 #all-SubSubcategorices::-webkit-scrollbar-thumb,
 #all-SubcategorieceSystem::-webkit-scrollbar-thumb,
 #all-SubSubCategorySystem::-webkit-scrollbar-thumb,
 #all-ProductSystem::-webkit-scrollbar-thumb {
     background: var(--accent-primary);
     border-radius: 10px;
 }

 /* =============== REFINED BADGES & INDICATORS ============== */
 .nav-itmes.hot::after {
     content: "HOT";
     position: absolute;
     top: -6px;
     right: -6px;
     background: linear-gradient(45deg, #ff6b6b, #ee5a24);
     color: white;
     padding: 0.2rem 0.5rem;
     border-radius: 12px;
     font-size: 0.65rem;
     font-weight: 700;
     animation: refinedPulse 2s ease-in-out infinite;
 }

 .nav-itmes.new::after {
     content: "NEW";
     position: absolute;
     top: -6px;
     right: -6px;
     background: linear-gradient(45deg, #4ecdc4, #44a08d);
     color: white;
     padding: 0.2rem 0.5rem;
     border-radius: 12px;
     font-size: 0.65rem;
     font-weight: 700;
     animation: refinedPulse 2s ease-in-out infinite;
 }

 @keyframes refinedPulse {

     0%,
     100% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.05);
     }
 }

 /* =============== REFINED LOADING STATES ============== */
 .nav-itmes.loading,
 .category-item.loading {
     position: relative;
     color: transparent;
 }

 .nav-itmes.loading::before,
 .category-item.loading::before {
     content: "";
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     width: 18px;
     height: 18px;
     border: 2px solid transparent;
     border-top: 2px solid var(--accent-primary);
     border-radius: 50%;
     animation: refinedSpin 1s linear infinite;
 }

 @keyframes refinedSpin {
     0% {
         transform: translate(-50%, -50%) rotate(0deg);
     }

     100% {
         transform: translate(-50%, -50%) rotate(360deg);
     }
 }

 /* =============== REFINED RESPONSIVE DESIGN ============== */

 /* Large Desktop */
 @media (min-width: 1400px) {
     .second-navbar-div-five {
         gap: 2rem;
     }

     .nav-itmes {
         padding: 1rem 1.5rem;
         font-size: 1rem;
     }

     #categoryContainer_Father,
     #SubCategorySystemContainerFather {
         grid-template-columns: 1fr 1.5fr 2fr;
         gap: 2.5rem;
         padding: 2.5rem;
     }
 }

 /* Tablet */
 @media (max-width: 1024px) {
     .second-navbar-div-five {
         gap: 1rem;
     }

     .nav-itmes {
         padding: 0.75rem 1rem;
         font-size: 0.9rem;
     }

     #categoryContainer_Father,
     #SubCategorySystemContainerFather {
         grid-template-columns: 1fr 1fr;
         gap: 1.5rem;
         padding: 1.5rem;
     }

     #all-SubSubcategorices,
     #all-ProductSystem {
         grid-column: 1 / -1;
         margin-top: 1rem;
     }
 }

 /* Mobile */
 @media (max-width: 768px) {
     .second-navbar {
         display: none !important;
     }
 }

 /* =============== REFINED DARK MODE ENHANCEMENTS ============== */
 :root[data-theme="dark"] .second-navbar {
     background: rgba(26, 29, 35, 0.95);
     border-bottom-color: rgba(255, 255, 255, 0.1);
 }

 :root[data-theme="dark"] #categoryContainer_Father,
 :root[data-theme="dark"] #SubCategorySystemContainerFather {
     background: rgba(26, 29, 35, 0.98);
     border-color: rgba(255, 255, 255, 0.15);
 }

 :root[data-theme="dark"] .nav-itmes:hover {
     background: var(--gradient-primary);
 }

 /* =============== REFINED ACCESSIBILITY ============== */
 .nav-itmes:focus-visible,
 .category-item:focus-visible,
 .SubSubCategorySystem-item:focus-visible,
 #ProductSystemElements:focus-visible {
     outline: 2px solid var(--accent-primary);
     outline-offset: 2px;
 }

 /* Reduced motion support */
 @media (prefers-reduced-motion: reduce) {

     .nav-itmes,
     .category-item-premium,
     .category-item,
     .SubSubCategorySystem-item,
     #ProductSystemElements,
     #categoryContainer_Father,
     #SubCategorySystemContainerFather {
         transition: none;
         animation: none;
     }

     .nav-itmes:hover,
     .category-item-premium:hover,
     .category-item:hover,
     .SubSubCategorySystem-item:hover,
     #ProductSystemElements:hover {
         transform: none;
     }
 }

 /* =============== REFINED PERFORMANCE OPTIMIZATIONS ============== */
 .nav-itmes,
 .category-item,
 .SubSubCategorySystem-item,
 #ProductSystemElements {
     will-change: transform;
     backface-visibility: hidden;
 }

 /* =============== REFINED MICRO-INTERACTIONS ============== */

 /* Smooth active states */
 .nav-itmes:active,
 .category-item:active,
 .SubSubCategorySystem-item:active,
 #ProductSystemElements:active {
     transform: translateY(1px);
     transition: transform 0.1s ease;
 }

 /* Enhanced selection styles */
 ::selection {
     background: var(--accent-primary);
     color: white;
 }

 ::-moz-selection {
     background: var(--accent-primary);
     color: white;
 }

 /* =============== REFINED TYPOGRAPHY ============== */
 .nav-itmes,
 .category-item-premium,
 .category-item,
 .SubSubCategorySystem-item,
 #ProductSystemElements {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
     font-weight: 500;
     line-height: 1.4;
 }

 /* Premium text rendering */
 .nav-itmes,
 #categoryElement-a {
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }


































 /* =============== ENHANCED CROSS-DEVICE COMPATIBILITY ============== */

 /* Base responsive variables */
 :root {
     --mobile-breakpoint: 768px;
     --tablet-breakpoint: 1024px;
     --desktop-breakpoint: 1200px;
     --large-desktop-breakpoint: 1400px;
 }

 /* =============== UNIVERSAL DEVICE SUPPORT ============== */

 /* Touch device optimizations */
 @media (hover: none) and (pointer: coarse) {
     .nav-itmes {
         min-height: 44px;
         /* Apple's recommended touch target size */
         min-width: 44px;
         padding: 12px 16px;
         color: var(--text-primary);
     }

     .category-item,
     .SubSubCategorySystem-item,
     #ProductSystemElements {
         min-height: 44px;
         padding: 14px 16px;
     }

     /* Remove hover effects on touch devices */
     .nav-itmes:hover,
     .category-item:hover,
     .SubSubCategorySystem-item:hover,
     #ProductSystemElements:hover {
         transform: none;
     }

     /* Enhanced touch feedback */
     .nav-itmes:active,
     .category-item:active,
     .SubSubCategorySystem-item:active,
     #ProductSystemElements:active {
         background: var(--gradient-primary);
         color: white !important;
         transform: scale(0.98);
     }
 }

 /* High-DPI screen optimizations */
 @media (-webkit-min-device-pixel-ratio: 2),
 (min-resolution: 192dpi) {

     .nav-itmes,
     .category-item,
     .SubSubCategorySystem-item,
     #ProductSystemElements {
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
         border-width: 0.5px;
         /* Crisper borders on retina */
     }
 }

 /* =============== ENHANCED RESPONSIVE BREAKPOINTS ============== */

 /* Extra Large Desktop (1400px and above) */
 @media (min-width: 1400px) {
     .second-navbar-div-five {
         gap: 2.5rem;
     }

     .nav-itmes {
         padding: 1.25rem 2rem;
         font-size: 1.1rem;
     }

     #categoryContainer_Father,
     #SubCategorySystemContainerFather {
         grid-template-columns: 1fr 1.5fr 2fr;
         gap: 3rem;
         padding: 3rem;
         max-height: 75vh;
     }
 }

 /* Standard Desktop (1200px - 1399px) */
 @media (min-width: 1200px) and (max-width: 1399px) {
     .second-navbar-div-five {
         gap: 1.75rem;
     }

     .nav-itmes {
         padding: 1rem 1.5rem;
         font-size: 1rem;
     }

     #categoryContainer_Father,
     #SubCategorySystemContainerFather {
         grid-template-columns: 1fr 1.5fr 2fr;
         gap: 2.5rem;
         padding: 2.5rem;
         max-height: 70vh;
     }
 }

 /* Small Desktop (1025px - 1199px) */
 @media (min-width: 1025px) and (max-width: 1199px) {
     .second-navbar-div-five {
         gap: 1.5rem;
     }

     .nav-itmes {
         padding: 0.875rem 1.25rem;
         font-size: 0.95rem;
     }

     #categoryContainer_Father,
     #SubCategorySystemContainerFather {
         grid-template-columns: 1fr 1.5fr 2fr;
         gap: 2rem;
         padding: 2rem;
         max-height: 65vh;
     }
 }

 /* Tablet Landscape (768px - 1024px) */
 @media (min-width: 768px) and (max-width: 1024px) {
     .second-navbar-div-five {
         gap: 1rem;
         flex-wrap: wrap;
         justify-content: center;
     }

     .nav-itmes {
         padding: 0.75rem 1rem;
         font-size: 0.9rem;
         margin: 0.25rem;
     }

     #categoryContainer_Father,
     #SubCategorySystemContainerFather {
         grid-template-columns: 1fr 1fr;
         gap: 1.5rem;
         padding: 1.5rem;
         max-height: 60vh;
         width: 95%;
         left: 2.5%;
     }

     #all-SubSubcategorices,
     #all-ProductSystem {
         grid-column: 1 / -1;
         margin-top: 1rem;
     }

     /* Adjust category sections for tablet */
     #all-categoriece,
     #all-SubcategorieceSystem,
     #all-subcategorices,
     #all-SubSubCategorySystem {
         padding-right: 1rem;
         max-height: 50vh;
     }
 }

 /* Tablet Portrait (601px - 767px) */
 @media (min-width: 601px) and (max-width: 767px) {
     .second-navbar {
         display: none !important;
     }

     /* Optional: Show a simplified mobile menu instead */
     .mobile-nav-toggle {
         display: block !important;
     }
 }

 /* Mobile Landscape (481px - 600px) */
 @media (min-width: 481px) and (max-width: 600px) {
     .second-navbar {
         display: none !important;
     }
 }

 /* Mobile Portrait (320px - 480px) */
 @media (max-width: 480px) {
     .second-navbar {
         display: none !important;
     }

     /* Ensure dropdowns are mobile-friendly when triggered elsewhere */
     #categoryContainer_Father,
     #SubCategorySystemContainerFather {
         grid-template-columns: 1fr;
         gap: 1rem;
         padding: 1rem;
         max-height: 80vh;
         width: 98%;
         left: 1%;
         border-radius: 12px;
     }

     #all-categoriece,
     #all-SubcategorieceSystem,
     #all-subcategorices,
     #all-SubSubCategorySystem,
     #all-SubSubcategorices,
     #all-ProductSystem {
         border: none;
         padding: 0.5rem;
         max-height: 200px;
     }

     .category-item,
     .SubSubCategorySystem-item,
     #ProductSystemElements {
         padding: 1rem;
         font-size: 0.9rem;
         text-align: center;
     }
 }

 /* =============== FOLDABLE & UNIQUE DEVICE SUPPORT ============== */

 /* Foldable devices */
 @media (spanning: single-fold-vertical) {
     .second-navbar-div-five {
         padding-left: env(fold-left);
         padding-right: env(fold-right);
     }
 }

 /* Very large screens (4K and above) */
 @media (min-width: 2000px) {
     .second-navbar-div-five {
         gap: 3rem;
     }

     .nav-itmes {
         padding: 1.5rem 2.5rem;
         font-size: 1.2rem;
     }

     #categoryContainer_Father,
     #SubCategorySystemContainerFather {
         max-width: 1800px;
         left: 50%;
         transform: translateX(-50%);
     }
 }

 /* =============== ORIENTATION SUPPORT ============== */

 /* Landscape orientation optimizations */
 @media (orientation: landscape) and (max-height: 500px) {

     #categoryContainer_Father,
     #SubCategorySystemContainerFather {
         max-height: 80vh;
         grid-template-columns: 1fr 1fr;
     }

     #all-categoriece,
     #all-SubcategorieceSystem,
     #all-subcategorices,
     #all-SubSubCategorySystem {
         max-height: 65vh;
     }
 }

 /* Portrait orientation optimizations */
 @media (orientation: portrait) and (max-width: 768px) {

     #categoryContainer_Father,
     #SubCategorySystemContainerFather {
         grid-template-columns: 1fr;
     }
 }

 /* =============== BROWSER-SPECIFIC ENHANCEMENTS ============== */

 /* Safari specific optimizations */
 @supports (-webkit-touch-callout: none) {

     .nav-itmes,
     .category-item,
     .SubSubCategorySystem-item,
     #ProductSystemElements {
         -webkit-tap-highlight-color: transparent;
     }

     #categoryContainer_Father,
     #SubCategorySystemContainerFather {
         -webkit-overflow-scrolling: touch;
     }
 }

 /* Firefox specific optimizations */
 @-moz-document url-prefix() {

     .nav-itmes,
     .category-item,
     .SubSubCategorySystem-item,
     #ProductSystemElements {
         scrollbar-width: thin;
     }
 }

 /* Edge specific optimizations */
 @supports (-ms-ime-align: auto) {

     .nav-itmes:hover,
     .category-item:hover,
     .SubSubCategorySystem-item:hover,
     #ProductSystemElements:hover {
         transform: translateY(-1px);
         /* Reduced transform for better performance */
     }
 }

 /* =============== PERFORMANCE OPTIMIZATIONS ============== */

 /* Reduced motion for all interactive elements */
 @media (prefers-reduced-motion: reduce) {

     .nav-itmes,
     .category-item,
     .SubSubCategorySystem-item,
     #ProductSystemElements,
     #categoryContainer_Father,
     #SubCategorySystemContainerFather {
         transition: none;
         animation: none;
     }

     .nav-itmes:hover,
     .category-item:hover,
     .SubSubCategorySystem-item:hover,
     #ProductSystemElements:hover {
         transform: none;
     }
 }

 /* Optimize for low-end devices */
 @media (prefers-reduced-data: reduce) {
     .second-navbar {
         backdrop-filter: none;
         -webkit-backdrop-filter: none;
     }

     #categoryContainer_Father,
     #SubCategorySystemContainerFather {
         backdrop-filter: none;
         -webkit-backdrop-filter: none;
         box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     }
 }

 /* =============== ACCESSIBILITY ENHANCEMENTS ============== */

 /* High contrast mode support */
 @media (prefers-contrast: high) {
     .nav-itmes {
         border: 2px solid var(--text-primary);
         background: var(--bg-primary);
     }

     .nav-itmes:hover {
         background: var(--text-primary);
         color: var(--bg-primary) !important;
     }

     #categoryContainer_Father,
     #SubCategorySystemContainerFather {
         border: 2px solid var(--text-primary);
     }
 }

 /* Forced colors mode (Windows High Contrast) */
 @media (forced-colors: active) {
     .nav-itmes {
         border: 1px solid ButtonText;
         background: ButtonFace;
         color: ButtonText !important;
     }

     .nav-itmes:hover {
         background: Highlight;
         color: HighlightText !important;
     }
 }

 /* =============== PROGRESSIVE ENHANCEMENTS ============== */

 /* Support for modern features with fallbacks */
 @supports (backdrop-filter: blur(10px)) {
     .second-navbar {
         backdrop-filter: var(--morphism-blur);
         -webkit-backdrop-filter: var(--morphism-blur);
     }
 }

 @supports not (backdrop-filter: blur(10px)) {
     .second-navbar {
         background: var(--bg-primary);
     }

     #categoryContainer_Father,
     #SubCategorySystemContainerFather {
         background: var(--bg-primary);
         box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
     }
 }

 /* =============== INTERACTION ENHANCEMENTS ============== */

 /* Improved focus management for keyboard navigation */
 .nav-itmes:focus-visible,
 .category-item:focus-visible,
 .SubSubCategorySystem-item:focus-visible,
 #ProductSystemElements:focus-visible {
     outline: 3px solid var(--accent-primary);
     outline-offset: 2px;
     z-index: 101;
     /* Ensure focus rings are visible */
 }

 /* Enhanced active states for better feedback */
 .nav-itmes:active,
 .category-item:active,
 .SubSubCategorySystem-item:active,
 #ProductSystemElements:active {
     transform: scale(0.98);
     transition: transform 0.1s ease;
 }

 /* =============== LOADING & STATE MANAGEMENT ============== */

 /* Loading state improvements */
 .nav-itmes.loading::before,
 .category-item.loading::before {
     border-top: 2px solid var(--accent-primary);
     border-right: 2px solid var(--accent-primary);
     border-bottom: 2px solid transparent;
     border-left: 2px solid transparent;
 }

 /* Success state feedback */
 .nav-itmes.success {
     background: var(--success-color);
     color: white !important;
 }

 /* Error state feedback */
 .nav-itmes.error {
     background: var(--error-color);
     color: white !important;
 }

 /* =============== PRINT OPTIMIZATIONS ============== */

 @media print {
     .second-navbar {
         display: none !important;
     }

     #categoryContainer_Father,
     #SubCategorySystemContainerFather {
         display: none !important;
     }
 }

 /* =============== UTILITY CLASSES FOR DEVICE DETECTION ============== */

 /* Hide on specific devices */
 .hide-on-mobile {
     @media (max-width: 767px) {
         display: none !important;
     }
 }

 .hide-on-tablet {
     @media (min-width: 768px) and (max-width: 1024px) {
         display: none !important;
     }
 }

 .hide-on-desktop {
     @media (min-width: 1025px) {
         display: none !important;
     }
 }

 .show-on-mobile {
     @media (min-width: 768px) {
         display: none !important;
     }
 }

 .show-on-tablet {

     @media (max-width: 767px),
     (min-width: 1025px) {
         display: none !important;
     }
 }

 .show-on-desktop {
     @media (max-width: 1024px) {
         display: none !important;
     }
 }

 /* =============== SAFETY OVERRIDES ============== */

 /* Ensure critical styles always apply */
 .second-navbar {
     position: relative !important;
     z-index: 1 !important;
 }

 #categoryContainer_Father,
 #SubCategorySystemContainerFather {
     z-index: 100 !important;
 }

 /* Prevent horizontal scrolling on mobile */
 @media (max-width: 768px) {
     .second-navbar-div-five {
         overflow-x: hidden;
     }
 }













 /* =============== COMPACT LUXURY SECOND NAVBAR ============== */
 .second-navbar {
     background: rgba(255, 255, 255, 0.02);
     backdrop-filter: var(--morphism-blur);
     -webkit-backdrop-filter: var(--morphism-blur);
     border-bottom: 1px solid var(--border-color);
     box-shadow: var(--shadow-color);
     position: relative;
     z-index: 1;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     padding: 0.3rem 0;
 }

 .second-navbar-div-five {
     display: flex;
     align-items: center;
     gap: 0.8rem;
     flex-wrap: nowrap;
     overflow-x: auto;
     padding: 0.2rem 0.5rem;
 }

 .second-navbar-div-five::-webkit-scrollbar {
     height: 3px;
 }

 .second-navbar-div-five::-webkit-scrollbar-thumb {
     background: var(--accent-primary);
     border-radius: 3px;
 }

 /* =============== COMPACT NAV ITEMS ============== */
 .nav-itmes {
     background: var(--bg-secondary);
     border: 1px solid var(--border-color);
     padding: 0.5rem 0.8rem;
     border-radius: 8px;
     transition: all 0.3s var(--premium-timing);
     position: relative;
     overflow: hidden;
     font-weight: 600;
     font-size: 0.8rem;
     white-space: nowrap;
     flex-shrink: 0;
     min-height: 32px;
     display: flex;
     align-items: center;
 }

 .nav-itmes::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: var(--gradient-primary);
     transition: left 0.3s var(--premium-timing);
     z-index: -1;
 }

 .nav-itmes:hover {
     transform: translateY(-1px);
     box-shadow: var(--premium-glow);
     border-color: var(--accent-primary);
     color: white !important;
 }

 .nav-itmes:hover::before {
     left: 0;
 }

 .nav-itmes a {
     text-decoration: none !important;
     color: var(--text-primary);
     font-size: 0.8rem;
     font-weight: 600;
 }

 /* =============== COMPACT DROPDOWN CONTAINERS ============== */
 #categoryContainer_Father,
 #SubCategorySystemContainerFather {
     background: var(--bg-primary);
     border: 1px solid var(--border-color);
     border-radius: 12px;
     box-shadow: var(--premium-glow-strong);
     backdrop-filter: var(--morphism-blur);
     -webkit-backdrop-filter: var(--morphism-blur);
     padding: 1rem;
     margin-top: 0.3rem;
     animation: refinedSlideDown 0.3s var(--premium-timing);
     position: absolute;
     top: 100%;
     left: 0;
     right: 0;
     z-index: 100;
     display: none;
     max-height: 50vh;
     overflow: hidden;
 }

 @keyframes refinedSlideDown {
     from {
         opacity: 0;
         transform: translateY(-8px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* Compact grid layout */
 #categoryContainer_Father,
 #SubCategorySystemContainerFather {
     display: grid;
     grid-template-columns: 1fr 1.2fr 1.5fr;
     gap: 1rem;
 }

 /* =============== COMPACT CATEGORY SECTIONS ============== */
 #all-categoriece,
 #all-SubcategorieceSystem,
 #all-subcategorices,
 #all-SubSubCategorySystem,
 #all-SubSubcategorices,
 #all-ProductSystem {
     display: flex;
     flex-direction: column;
     gap: 0.3rem;
     max-height: 45vh;
     overflow-y: auto;
     padding-right: 0.5rem;
 }

 #all-categoriece,
 #all-SubcategorieceSystem {
     border-right: 1px solid var(--border-color);
 }

 #all-subcategorices,
 #all-SubSubCategorySystem {
     border-right: 1px solid var(--border-color);
 }

 /* =============== COMPACT CATEGORY ITEMS ============== */
 .category-item-premium,
 .category-item,
 .SubSubCategorySystem-item,
 #ProductSystemElements {
     background: var(--bg-secondary);
     border: 1px solid var(--border-color);
     border-radius: 6px;
     padding: 0.6rem 0.8rem;
     transition: all 0.2s var(--premium-timing);
     position: relative;
     overflow: hidden;
     cursor: pointer;
     font-size: 0.75rem;
     min-height: 36px;

     display: flex;
     align-items: center;
 }

 .category-item-premium::before,
 .category-item::before,
 .SubSubCategorySystem-item::before,
 #ProductSystemElements::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: var(--gradient-primary);
     transition: left 0.2s var(--premium-timing);
     z-index: -1;
 }

 .category-item-premium:hover,
 .category-item:hover,
 .SubSubCategorySystem-item:hover,
 #ProductSystemElements:hover {
     transform: translateX(2px);
     border-color: var(--accent-primary);
     box-shadow: var(--shadow-color);
     color: white;
 }

 .category-item-premium:hover::before,
 .category-item:hover::before,
 .SubSubCategorySystem-item:hover::before,
 #ProductSystemElements:hover::before {
     left: 0;
 }

 /* =============== COMPACT SCROLLBARS ============== */
 #all-categoriece::-webkit-scrollbar,
 #all-subcategorices::-webkit-scrollbar,
 #all-SubSubcategorices::-webkit-scrollbar,
 #all-SubcategorieceSystem::-webkit-scrollbar,
 #all-SubSubCategorySystem::-webkit-scrollbar,
 #all-ProductSystem::-webkit-scrollbar {
     width: 3px;
 }

 #all-categoriece::-webkit-scrollbar-track,
 #all-subcategorices::-webkit-scrollbar-track,
 #all-SubSubcategorices::-webkit-scrollbar-track,
 #all-SubcategorieceSystem::-webkit-scrollbar-track,
 #all-SubSubCategorySystem::-webkit-scrollbar-track,
 #all-ProductSystem::-webkit-scrollbar-track {
     background: var(--bg-tertiary);
     border-radius: 3px;
 }

 #all-categoriece::-webkit-scrollbar-thumb,
 #all-subcategorices::-webkit-scrollbar-thumb,
 #all-SubSubcategorices::-webkit-scrollbar-thumb,
 #all-SubcategorieceSystem::-webkit-scrollbar-thumb,
 #all-SubSubCategorySystem::-webkit-scrollbar-thumb,
 #all-ProductSystem::-webkit-scrollbar-thumb {
     background: var(--accent-primary);
     border-radius: 3px;
 }

 /* =============== COMPACT RESPONSIVE DESIGN ============== */

 /* Large Desktop (1400px+) */
 @media (min-width: 1400px) {
     .second-navbar-div-five {
         gap: 1rem;
     }

     .nav-itmes {
         padding: 0.6rem 1rem;
         font-size: 0.85rem;
     }
 }

 /* Tablet Landscape (1024px - 1399px) */
 @media (max-width: 1399px) and (min-width: 1024px) {
     .second-navbar-div-five {
         gap: 0.6rem;
         padding: 0.2rem 0.3rem;
     }

     .nav-itmes {
         padding: 0.4rem 0.7rem;
         font-size: 0.75rem;
         min-height: 28px;
     }

     .nav-itmes a {
         font-size: 0.75rem;
     }

     /* Further reduce dropdown sizes */
     #categoryContainer_Father,
     #SubCategorySystemContainerFather {
         padding: 0.8rem;
         gap: 0.8rem;
         grid-template-columns: 1fr 1fr;
     }

     .category-item,
     .SubSubCategorySystem-item,
     #ProductSystemElements {
         padding: 0.5rem 0.6rem;
         font-size: 0.7rem;
         min-height: 32px;
     }

     /* Hide third column on smaller tablets */
     #all-SubSubcategorices,
     #all-ProductSystem {
         display: none;
     }
 }

 /* Tablet (768px - 1023px) */
 @media (max-width: 1023px) and (min-width: 768px) {
     .second-navbar {
         display: none !important;
     }
 }

 /* Mobile (below 768px) */
 @media (max-width: 767px) {
     .second-navbar {
         display: none !important;
     }
 }

 /* =============== COMPACT DARK MODE ============== */
 :root[data-theme="dark"] .second-navbar {
     background: rgba(26, 29, 35, 0.95);
     border-bottom-color: rgba(255, 255, 255, 0.1);
 }

 :root[data-theme="dark"] #categoryContainer_Father,
 :root[data-theme="dark"] #SubCategorySystemContainerFather {
     background: rgba(26, 29, 35, 0.98);
     border-color: rgba(255, 255, 255, 0.15);
 }

 /* =============== COMPACT ACCESSIBILITY ============== */
 .nav-itmes:focus-visible,
 .category-item:focus-visible,
 .SubSubCategorySystem-item:focus-visible,
 #ProductSystemElements:focus-visible {
     outline: 2px solid var(--accent-primary);
     outline-offset: 1px;
 }

 /* Touch device optimizations */
 @media (hover: none) and (pointer: coarse) {
     .nav-itmes {
         min-height: 36px;
         padding: 0.6rem 0.8rem;
     }

     .nav-itmes:active {
         transform: scale(0.98);
         background: var(--gradient-primary);
         color: white !important;
     }
 }

 /* Reduced motion support */
 @media (prefers-reduced-motion: reduce) {

     .nav-itmes,
     .category-item,
     .SubSubCategorySystem-item,
     #ProductSystemElements {
         transition: none;
         animation: none;
     }

     .nav-itmes:hover,
     .category-item:hover,
     .SubSubCategorySystem-item:hover,
     #ProductSystemElements:hover {
         transform: none;
     }
 }

 /* =============== COMPACT OVERFLOW PROTECTION ============== */
 .second-navbar-div-five {
     overflow-x: auto;
     scrollbar-width: thin;
     -ms-overflow-style: -ms-autohiding-scrollbar;
 }

 /* Prevent horizontal overflow */
 .second-navbar-div-five {
     max-width: 100%;
     min-width: 0;
 }

 .nav-itmes {
     flex-shrink: 0;
 }

 /* Emergency overflow fix for very small screens */
 @media (max-width: 1100px) {
     .second-navbar-div-five {
         gap: 0.4rem;
     }

     .nav-itmes {
         padding: 0.3rem 0.6rem;
         font-size: 0.7rem;
     }

     /* Hide less important items */
     #CategorySystemLinksscript {
         display: grid;
     }
 }



















 /* =============== COMPACT LUXURY SECOND NAVBAR ============== */
 .second-navbar {
     background: var(--bg-secondary);
     backdrop-filter: var(--morphism-blur);
     -webkit-backdrop-filter: var(--morphism-blur);
     border-bottom: 1px solid var(--border-color);
     box-shadow: var(--shadow-color);
     position: relative;
     z-index: 1;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     padding: 0.3rem 0;
 }

 .second-navbar-div-five {
     display: flex;
     align-items: center;
     gap: 0.8rem;
     flex-wrap: nowrap;
     overflow-x: auto;
     padding: 0.2rem 0.5rem;
 }

 .second-navbar-div-five::-webkit-scrollbar {
     height: 3px;
 }

 .second-navbar-div-five::-webkit-scrollbar-thumb {
     background: var(--accent-primary);
     border-radius: 3px;
 }

 /* =============== COMPACT NAV ITEMS ============== */
 .nav-itmes {
     background: var(--accent-primary) !important;
     border: 1px solid var(--border-color);
     padding: 0.5rem 0.8rem;
     border-radius: 8px;
     transition: all 0.3s var(--premium-timing);
     position: relative;
     overflow: hidden;
     font-weight: 600;
     font-size: 0.8rem;
     white-space: nowrap;
     flex-shrink: 0;
     min-height: 32px;
     display: flex;
     align-items: center;
 }

 .nav-itmes::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: var(--gradient-primary);
     transition: left 0.3s var(--premium-timing);
     z-index: -1;
 }

 .nav-itmes:hover {
     transform: translateY(-1px);
     box-shadow: var(--premium-glow);
     border-color: var(--accent-primary);
     color: white !important;
 }

 .nav-itmes:hover::before {
     left: 0;
 }

 .nav-itmes a {
     text-decoration: none !important;
     color: var(--bg-secondary) !important;
     font-size: 0.8rem;
     font-weight: 600;
 }

 /* =============== COMPACT DROPDOWN CONTAINERS ============== */
 #categoryContainer_Father,
 #SubCategorySystemContainerFather {
     background: var(--bg-primary);
     border: 1px solid var(--border-color);
     border-radius: 12px;
     box-shadow: var(--premium-glow-strong);
     backdrop-filter: var(--morphism-blur);
     -webkit-backdrop-filter: var(--morphism-blur);
     padding: 1rem;
     margin-top: 0.3rem;
     animation: refinedSlideDown 0.3s var(--premium-timing);
     position: absolute;
     top: 100%;
     left: 0;
     right: 0;
     z-index: 100;
     display: none;
     max-height: 50vh;
     overflow: hidden;
 }

 @keyframes refinedSlideDown {
     from {
         opacity: 0;
         transform: translateY(-8px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* Proportional grid layout - Small → Medium → Large */
 #categoryContainer_Father,
 #SubCategorySystemContainerFather {
     display: grid;
     grid-template-columns: 0.51fr 1fr 2fr;
     /* Small → Medium → Large */
     gap: 1rem;
 }

 /* =============== COMPACT CATEGORY SECTIONS ============== */
 #all-categoriece,
 #all-SubcategorieceSystem {
     display: flex;
     flex-direction: column;
     gap: 0.3rem;
     max-height: 45vh;
     overflow-y: auto;
     padding-right: 0.5rem;
     border-right: 1px solid var(--border-color);
     /* First column - smallest */
     min-width: 0;
     /* Allow shrinking */
 }

 #all-subcategorices,
 #all-SubSubCategorySystem {
     display: flex;
     flex-direction: column;
     gap: 0.3rem;
     max-height: 45vh;
     overflow-y: auto;
     padding-right: 0.5rem;
     border-right: 1px solid var(--border-color);
     /* Second column - medium size */
 }

 #all-SubSubcategorices,
 #all-ProductSystem {
     display: flex;
     flex-direction: column;
     gap: 0.3rem;
     max-height: 45vh;
     overflow-y: auto;
     /* Third column - largest */
 }

 /* =============== COMPACT CATEGORY ITEMS ============== */
 .category-item-premium,
 .category-item,
 .SubSubCategorySystem-item,
 #ProductSystemElements {
     background: var(--bg-secondary);
     border: 1px solid var(--border-color);
     border-radius: 6px;
     padding: 0.6rem 0.8rem;
     transition: all 0.2s var(--premium-timing);
     position: relative;
     overflow: hidden;
     cursor: default;
     font-size: 0.75rem;
     min-height: 36px;

     display: flex;
     align-items: center;
 }

 #ProductSystemElements {

     cursor: pointer;

 }

 /* Different padding for different columns based on size */
 #all-categoriece .category-item,
 #all-SubcategorieceSystem .category-item {
     padding: 0.5rem 0.6rem;
     /* Smallest padding for first column */
     font-size: 0.7rem;
 }

 #all-subcategorices .category-item,
 #all-SubSubCategorySystem .category-item {
     padding: 0.6rem 0.8rem;
     /* Medium padding for second column */
     font-size: 0.75rem;
 }

 #all-SubSubcategorices .category-item,
 #all-ProductSystem .category-item {
     padding: 0.7rem 1rem;
     /* Largest padding for third column */
     font-size: 0.8rem;
 }

 .category-item-premium::before,
 .category-item::before,
 .SubSubCategorySystem-item::before,
 #ProductSystemElements::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: var(--gradient-primary);
     transition: left 0.2s var(--premium-timing);
     z-index: -1;
 }

 .category-item-premium:hover,
 .category-item:hover,
 .SubSubCategorySystem-item:hover,
 #ProductSystemElements:hover {
     transform: translateX(2px);
     border-color: var(--accent-primary);
     box-shadow: var(--shadow-color);
     color: white;
 }

 .category-item-premium:hover::before,
 .category-item:hover::before,
 .SubSubCategorySystem-item:hover::before,
 #ProductSystemElements:hover::before {
     left: 0;
 }

 /* =============== COMPACT SCROLLBARS ============== */
 #all-categoriece::-webkit-scrollbar,
 #all-subcategorices::-webkit-scrollbar,
 #all-SubSubcategorices::-webkit-scrollbar,
 #all-SubcategorieceSystem::-webkit-scrollbar,
 #all-SubSubCategorySystem::-webkit-scrollbar,
 #all-ProductSystem::-webkit-scrollbar {
     width: 3px;
 }

 #all-categoriece::-webkit-scrollbar-track,
 #all-subcategorices::-webkit-scrollbar-track,
 #all-SubSubcategorices::-webkit-scrollbar-track,
 #all-SubcategorieceSystem::-webkit-scrollbar-track,
 #all-SubSubCategorySystem::-webkit-scrollbar-track,
 #all-ProductSystem::-webkit-scrollbar-track {
     background: var(--bg-tertiary);
     border-radius: 3px;
 }

 #all-categoriece::-webkit-scrollbar-thumb,
 #all-subcategorices::-webkit-scrollbar-thumb,
 #all-SubSubcategorices::-webkit-scrollbar-thumb,
 #all-SubcategorieceSystem::-webkit-scrollbar-thumb,
 #all-SubSubCategorySystem::-webkit-scrollbar-thumb,
 #all-ProductSystem::-webkit-scrollbar-thumb {
     background: var(--accent-primary);
     border-radius: 3px;
 }

 /* =============== COMPACT RESPONSIVE DESIGN ============== */

 /* Large Desktop (1400px+) */
 @media (min-width: 1400px) {
     .second-navbar-div-five {
         gap: 1rem;
     }

     .nav-itmes {
         padding: 0.6rem 1rem;
         font-size: 0.85rem;
     }

     #categoryContainer_Father,
     #SubCategorySystemContainerFather {
         grid-template-columns: 0.51fr 1fr 2fr;
         gap: 1.2rem;
         padding: 1.2rem;
     }
 }

 /* Tablet Landscape (1024px - 1399px) */
 @media (max-width: 1399px) and (min-width: 1024px) {
     .second-navbar-div-five {
         gap: 0.6rem;
         padding: 0.2rem 0.3rem;
     }

     .nav-itmes {
         padding: 0.4rem 0.7rem;
         font-size: 0.75rem;
         min-height: 28px;
     }

     .nav-itmes a {
         font-size: 0.75rem;
     }

     /* Keep the proportional layout but make it more compact */
     #categoryContainer_Father,
     #SubCategorySystemContainerFather {
         padding: 0.8rem;
         gap: 0.8rem;
         grid-template-columns: 0.51fr 1fr 2fr;
         /* Maintain proportions */
     }

     /* Adjust item padding for tablet */
     #all-categoriece .category-item,
     #all-SubcategorieceSystem .category-item {
         padding: 0.4rem 0.5rem;
         font-size: 0.65rem;
     }

     #all-subcategorices .category-item,
     #all-SubSubCategorySystem .category-item {
         padding: 0.5rem 0.6rem;
         font-size: 0.7rem;
     }

     #all-SubSubcategorices .category-item,
     #all-ProductSystem .category-item {
         padding: 0.6rem 0.8rem;
         font-size: 0.75rem;
     }
 }

 /* Tablet (768px - 1023px) */
 @media (max-width: 1023px) and (min-width: 768px) {
     .second-navbar {
         display: none !important;
     }
 }

 /* Mobile (below 768px) */
 @media (max-width: 767px) {
     .second-navbar {
         display: none !important;
     }
 }

 /* =============== COMPACT DARK MODE ============== */
 :root[data-theme="dark"] .second-navbar {
     background: rgba(26, 29, 35, 0.95);
     border-bottom-color: rgba(255, 255, 255, 0.1);
 }

 :root[data-theme="dark"] #categoryContainer_Father,
 :root[data-theme="dark"] #SubCategorySystemContainerFather {
     background: rgba(26, 29, 35, 0.98);
     border-color: rgba(255, 255, 255, 0.15);
 }

 /* =============== COMPACT ACCESSIBILITY ============== */
 .nav-itmes:focus-visible,
 .category-item:focus-visible,
 .SubSubCategorySystem-item:focus-visible,
 #ProductSystemElements:focus-visible {
     outline: 2px solid var(--accent-primary);
     outline-offset: 1px;
 }

 /* Touch device optimizations */
 @media (hover: none) and (pointer: coarse) {
     .nav-itmes {
         min-height: 36px;
         padding: 0.6rem 0.8rem;
     }

     .nav-itmes:active {
         transform: scale(0.98);
         background: var(--gradient-primary);
         color: white !important;
     }
 }

 /* Reduced motion support */
 @media (prefers-reduced-motion: reduce) {

     .nav-itmes,
     .category-item,
     .SubSubCategorySystem-item,
     #ProductSystemElements {
         transition: none;
         animation: none;
     }

     .nav-itmes:hover,
     .category-item:hover,
     .SubSubCategorySystem-item:hover,
     #ProductSystemElements:hover {
         transform: none;
     }
 }

 /* =============== COMPACT OVERFLOW PROTECTION ============== */
 .second-navbar-div-five {
     overflow-x: auto;
     scrollbar-width: auto;
     background: var(--bg-primary);
     scroll-margin: 100px;
 }

 /* Prevent horizontal overflow */
 .second-navbar-div-five {
     max-width: 100%;
     min-width: 0;
 }

 .nav-itmes {
     flex-shrink: 0;
 }

 /* Emergency overflow fix for very small screens */
 @media (max-width: 1100px) {
     .second-navbar-div-five {
         gap: 0.4rem;
     }

     .nav-itmes {
         padding: 0.3rem 0.6rem;
         font-size: 0.7rem;
     }
 }
















































































































 /* ========== MODERN SCROLLBAR STYLING ========== */
 .second-navbar-div-three {
     max-width: calc(100vw - 0.3vw);
 }

 .second-navbar-div-five {
     scrollbar-width: thin;
     /* Firefox */
     scrollbar-color: var(--accent-primary) transparent;
     /* Firefox */

     /* WebKit (Chrome, Safari, Edge) */
     &::-webkit-scrollbar {
         height: 6px;
         background: transparent;
     }

     &::-webkit-scrollbar-track {
         background: rgba(0, 0, 0, 0.05);
         border-radius: 10px;
         margin: 0 10px;
     }

     &::-webkit-scrollbar-thumb {
         background: linear-gradient(135deg, var(--accent-primary), #667eea);
         border-radius: 10px;
         border: 1px solid rgba(255, 255, 255, 0.2);
         background-clip: padding-box;
     }

     &::-webkit-scrollbar-thumb:hover {
         background: linear-gradient(135deg, #667eea, var(--accent-primary));
         transform: scale(1.1);
     }

     &::-webkit-scrollbar-thumb:active {
         background: linear-gradient(135deg, #5a6fd8, var(--accent-primary));
     }

     /* Smooth scrolling */
     scroll-behavior: smooth;
     -webkit-overflow-scrolling: touch;
 }

 /* ========== ENHANCED NAVIGATION CONTAINER ========== */
 .second-navbar-div-five {
     display: flex;
     align-items: center;
     gap: 0.8rem;
     flex-wrap: nowrap;
     overflow-x: auto;
     padding: 0.5rem 0.75rem;
     position: static;

     /* Hide scrollbar when not scrolling */
     scrollbar-width: thin;
     -ms-overflow-style: -ms-autohiding-scrollbar;
 }

 /* ========== RESPONSIVE SCROLLBAR STYLING ========== */

 /* Large Desktop (1400px+) */
 @media (min-width: 1400px) {
     .second-navbar-div-five {
         gap: 1rem;
         padding: 0.6rem 1rem;

         &::-webkit-scrollbar {
             height: 8px;
         }
     }
 }

 /* Standard Desktop (1200px - 1399px) */
 @media (min-width: 1200px) and (max-width: 1399px) {
     .second-navbar-div-five {
         gap: 0.8rem;
         padding: 0.4rem 0.8rem;

         &::-webkit-scrollbar {
             height: 6px;
         }
     }
 }

 /* Small Desktop & Tablet (1024px - 1199px) */
 @media (max-width: 1199px) and (min-width: 1024px) {
     .second-navbar-div-five {
         gap: calc(100vw - 99.5vw);
         padding: 0.3rem 0.6rem;

         &::-webkit-scrollbar {
             height: 5px;
         }

         &::-webkit-scrollbar-track {
             margin: 0 8px;
         }
     }
 }

 /* Tablet (768px - 1023px) */
 @media (max-width: 1023px) and (min-width: 768px) {
     .second-navbar-div-five {
         gap: 0.5rem;
         padding: 0.3rem 0.5rem;

         &::-webkit-scrollbar {
             height: 4px;
         }

         &::-webkit-scrollbar-track {
             margin: 0 5px;
             background: rgba(0, 0, 0, 0.03);
         }
     }
 }

 /* Mobile Devices - Hide scrollbar for better UX */
 @media (max-width: 767px) {
     .second-navbar-div-five {
         scrollbar-width: none;
         /* Firefox */
         -ms-overflow-style: none;
         /* IE/Edge */

         &::-webkit-scrollbar {
             display: none;
             /* Chrome, Safari, Edge */
             width: 0;
             height: 0;
         }
     }
 }

 /* ========== SMOOTH SCROLLING ENHANCEMENTS ========== */
 .second-navbar-div-five {
     /* Hide scrollbar but keep functionality */
     -webkit-overflow-scrolling: touch;


     /* Prevent horizontal overflow */
     max-width: 100%;
     min-width: 0;
 }

 /* ========== SCROLLBAR ANIMATIONS ========== */
 @keyframes scrollbarFadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 .second-navbar-div-five::-webkit-scrollbar-thumb {
     animation: scrollbarFadeIn 0.3s ease-in-out;
 }

 /* ========== ACCESSIBILITY & INTERACTION ========== */
 .second-navbar-div-five:focus {
     outline: 2px solid var(--accent-primary);
     outline-offset: 2px;
 }

 /* High contrast mode support */
 @media (prefers-contrast: high) {
     .second-navbar-div-five::-webkit-scrollbar-thumb {
         background: #000;
         border: 2px solid #fff;
     }
 }

 /* Reduced motion support */
 @media (prefers-reduced-motion: reduce) {
     .second-navbar-div-five {
         scroll-behavior: auto;
     }

     .second-navbar-div-five::-webkit-scrollbar-thumb:hover {
         transform: none;
     }
 }

 /* ========== FALLBACK FOR OLDER BROWSERS ========== */
 .second-navbar-div-five {
     /* IE 10+ */
     -ms-overflow-style: -ms-autohiding-scrollbar;

     /* Ensure content is always accessible */
     overflow-x: auto;
     overflow-y: hidden;
 }

 /* ========== ENHANCED NAV ITEMS FOR BETTER SCROLLING ========== */
 .nav-itmes {
     flex-shrink: 0;
     transition: all 0.3s ease;

     /* Better touch targets for mobile */
     min-height: 44px;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 /* Hover effects for better interaction */
 .nav-itmes:hover {
     transform: translateY(-1px);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }





























































































































































































































































 /* ============================= Location Box and Currency  =========================== */
 .navbar-mini {
     font-size: 0.9rem;
     color: #444;
 }

 .mini-select {
     border: none;
     background: transparent;
     font-size: 0.9rem;
     padding: 4px 6px;
     cursor: pointer;
     appearance: none;
 }

 .mini-select:focus {
     outline: none;
 }

 .mini-location {
     position: relative;
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 4px;
 }

 .mini-location .location-icon {
     font-size: 1rem;
     opacity: 0.8;
 }

 .mini-location .location-text {
     font-size: 0.9rem;
 }

 .location-dropdown {
     display: none;
     position: absolute;
     top: 120%;
     left: 0;
     background: #fff;
     border: 1px solid #ddd;
     border-radius: 8px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     padding: 6px;
     z-index: 1000;
 }

 .location-dropdown select {
     border: none;
     font-size: 0.85rem;
     background: transparent;
 }

 .location-dropdown select:focus {
     outline: none;
 }

 .mini-location.active .location-dropdown {
     display: block;
 }

























 /* ==============================  Location Box and Currency 2 ============================ */
 .mini-widgets {
     font-size: 0.9rem;
     color: #333;
 }

 .minimal-widget {
     position: relative;
 }

 .widget-btn {
     background: transparent;
     border: none;
     color: inherit;
     font-weight: 500;
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 6px;
     transition: color 0.2s ease;
 }

 .widget-btn:hover {
     color: #0d6efd;
 }

 .widget-btn .emoji {
     font-size: 1rem;
     opacity: 0.9;
 }

 .dropdown-menu {
     border-radius: 10px;
     padding: 0.4rem;
     border: 1px solid rgba(0, 0, 0, 0.08);
     animation: fadeIn 0.15s ease-in-out;
 }

 .dropdown-item {
     display: flex;
     align-items: center;
     gap: 8px;
     border-radius: 8px;
     transition: background 0.2s ease;
 }

 .dropdown-item:hover {
     background: #f0f2f5;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(-4px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }















































 /* ================== Location and Currency styles 3 ========================= */

 .mini-widgets {
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .widget-container {
     position: relative;
 }

 .minimal-widget {
     position: relative;
 }

 .widget-btn {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 8px 12px;
     background: var(--background);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     color: var(--text-primary);
     font-size: 14px;
     font-weight: 500;
     cursor: pointer;
     transition: var(--transition);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     box-shadow: var(--shadow);
     min-width: 120px;
     justify-content: space-between;
 }

 .widget-btn:hover {
     border-color: var(--primary-color);
     box-shadow: var(--shadow-lg);
     transform: translateY(-1px);
 }

 .widget-btn:active {
     transform: translateY(0);
 }

 .widget-btn::after {
     content: "⌄";
     font-size: 12px;
     opacity: 0.6;
     transition: var(--transition);
 }

 .widget-btn[aria-expanded="true"]::after {
     transform: rotate(180deg);
     opacity: 1;
 }

 .emoji {
     font-size: 16px;
     filter: grayscale(0.3);
     transition: var(--transition);
 }

 .widget-btn:hover .emoji {
     filter: grayscale(0);
     transform: scale(1.1);
 }

 /* Dropdown Menu */
 .minimal-widget .dropdown-menu {
     border: 1px solid var(--border);
     border-radius: var(--radius);
     background: var(--bg-primary);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     box-shadow: var(--shadow-lg);
     padding: 8px;
     margin-top: 4px !important;
     animation: dropdownSlide 0.2s ease-out;
 }

 @keyframes dropdownSlide {
     from {
         opacity: 0;
         transform: translateY(-8px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .dropdown-item {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 10px 12px;
     border-radius: 8px;
     font-size: var(--fs-xxs);
     font-weight: 500;
     color: var(--text-primary);
     transition: var(--transition);
     text-decoration: none;
 }

 .dropdown-item:hover {
     background: var(--primary-color);
     color: white;
     transform: translateX(4px);
 }

 .dropdown-item:active {
     background: var(--primary-hover);
     transform: translateX(2px);
 }

 /* Badge for current selection */
 .current-badge {
     background: var(--primary-color);
     color: white;
     padding: 2px 8px;
     border-radius: 6px;
     font-size: 12px;
     font-weight: 600;
 }

 /* Dark mode support */
 @media (prefers-color-scheme: dark) {


     .widget-btn {
         background: var(--bg-primary);
         color: var(--text-primary);
     }
 }

 /* Mobile responsiveness */
 @media (max-width: 768px) {
     .mini-widgets {
         gap: 6px;
     }

     .widget-btn {
         min-width: 100px;
         padding: 6px 10px;
         font-size: var(--fs-xxs);
     }

     .dropdown-item {
         padding: 8px 10px;
         font-size: var(--fs-xxs);
     }
 }

 /* Loading state */
 .widget-btn.loading {
     opacity: 0.7;
     pointer-events: none;
 }

 .widget-btn.loading::before {
     content: "";
     width: 12px;
     height: 12px;
     border: 2px solid transparent;
     border-top: 2px solid var(--primary-color);
     border-radius: 50%;
     animation: spin 1s linear infinite;
 }

 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }







































































































































































 /* =============== ULTRA LUXURY MODERN STYLES ============== */

 /* Luxury Mobile Navbar - Crystal Glass Effect */
 /* =============== COMPACT LUXURY MOBILE STYLES ============== */

 /* Compact Mobile Navbar */
 .the-navbar-collapse {
     background: var(--bg-primary);
     border-bottom: 1px solid var(--border-color);
     box-shadow: var(--shadow-color);
     padding: 0.5rem 0.8rem;
     position: relative;
     z-index: 1040;
 }

 .collapse-div-a {
     transition: transform 0.3s ease;
     padding: 0.2rem;
 }

 .collapse-div-a:hover {
     transform: scale(1.05);
 }

 .collapse-div-a-img {
     height: 32px !important;
     filter: brightness(0) invert(0);
     transition: filter 0.3s ease;
 }

 :root[data-theme="dark"] .collapse-div-a-img {
     filter: brightness(0) invert(1);
 }

 /* Compact Toggle Button */
 .btn-collapse {
     background: var(--gradient-primary) !important;
     border: none !important;
     border-radius: 8px;
     padding: 0.4rem 0.6rem;
     transition: all 0.3s ease;
     box-shadow: var(--shadow-color);
 }

 .btn-collapse:hover {
     background: var(--secondary-color) !important;
     transform: scale(1.05);
 }

 .navbar-toggler-icon {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
     width: 20px;
     height: 20px;
 }

 /* Compact Offcanvas */
 .offcanvas {
     background: var(--bg-primary) !important;
     border-right: 1px solid var(--border-color);
 }

 /* Compact Header */
 .parentOffcanvas-header {
     background: var(--bg-secondary);
     border-bottom: 1px solid var(--border-color);
     padding: 1rem 1.2rem;
     margin-bottom: 0;
     margin-right: 0;
     margin-left: -20px;
 }

 .parentOffcanvas-Title {
     font-weight: 600;
     font-size: 1rem;
     color: var(--text-primary);
     margin: 0;
 }



 /* Base close button styling */
 .parentOffcanvas-btn-colse.btn-close {
     background: none !important;
     /* remove Bootstrap SVG */
     color: var(--text-primary) !important;
     font-size: 1.2rem;
     opacity: 0.8;
     transition: all 0.3s ease;
     border: none;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 0.4rem;
 }

 /* Hover animation + gradient effect */
 .parentOffcanvas-btn-colse.btn-close:hover {
     opacity: 1;
     transform: rotate(90deg);
     background: var(--gradient-primary);
     /* ✅ gradient works here */
     color: var(--text-primary);
     box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
 }

 /* Optional: dark mode variant */
 :root[data-theme="dark"] .parentOffcanvas-btn-colse.btn-close {
     color: var(--text-primary);
 }

 :root[data-theme="dark"] .parentOffcanvas-btn-colse.btn-close:hover {
     background: var(--gradient-primary);
     box-shadow: 0 0 8px rgba(255, 255, 255, 0.15);
 }


 .parentOffcanvas-body {
     padding: 1rem 1.2rem;
     overflow-y: visible;
     background: var(--bg-tertiary);
 }

 /* Compact Section Styling */
 .user-section,
 .favorites-cart-section,
 .theme-toggle,
 .widgets-section,
 .menu-links {
     margin-bottom: 1.2rem;
     padding-bottom: 1rem;
     border-bottom: 1px solid var(--border-color);
 }

 /* Compact Link Styling */
 .parentOffcanvas-body a {
     display: flex;
     align-items: center;
     padding: 0.6rem 0.8rem;
     border-radius: 8px;
     margin-bottom: 0.4rem;
     transition: all 0.3s ease;
     color: var(--text-primary);
     text-decoration: none;
     background: transparent;
     border: 1px solid transparent;
     font-size: 0.9rem;
 }

 .parentOffcanvas-body a:hover {
     background: var(--bg-secondary);
     border-color: var(--accent-primary);
     transform: translateX(3px);
     text-decoration: none;
 }

 .parentOffcanvas-body a i {
     margin-left: 0.6rem;
     font-size: calc(100vw - 98.3vw) !important;
     width: 16px;
     text-align: center;
     color: var(--text-muted) !important;
 }

 /* Compact Cart Badge */
 .cart-badge {
     font-size: 0.65rem;
     padding: 0.2rem 0.4rem;
     animation: gentle-pulse 2s infinite;
 }

 @keyframes gentle-pulse {

     0%,
     100% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.05);
     }
 }

 /* Compact Theme Toggle */
 #mobile-theme-toggle {
     background: var(--bg-secondary);
     border: 1px solid var(--border-color);
     border-radius: 6px;
     padding: 0.6rem 0.8rem;
     transition: all 0.3s ease;
     color: var(--text-primary);
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.4rem;
     font-size: 0.85rem;
 }

 #mobile-theme-toggle:hover {
     background: var(--bg-tertiary);
     border-color: var(--accent-primary);
     transform: translateY(-1px);
 }

 #mobile-theme-icon {
     font-size: 1rem;
     transition: transform 0.3s ease;
 }

 #mobile-theme-toggle:hover #mobile-theme-icon {
     transform: scale(1.2);
 }

 /* Compact Dropdown Styling */
 .widgets-section .dropdown-toggle {
     background: var(--bg-secondary);
     border: 1px solid var(--border-color);
     border-radius: 6px;
     padding: 0.6rem 0.8rem;
     color: var(--text-primary);
     transition: all 0.3s ease;
     margin-bottom: 0.6rem;
     width: 100%;
     text-align: right;
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-size: 0.85rem;
 }

 .widgets-section .dropdown-toggle:hover {
     background: var(--bg-tertiary);
     border-color: var(--accent-primary);
 }

 .widgets-section .dropdown-menu {
     background: var(--bg-primary);
     border: 1px solid var(--border-color);
     border-radius: 6px;
     box-shadow: var(--shadow-color);
     padding: 0.4rem;
     min-width: 100%;
 }

 .widgets-section .dropdown-item {
     padding: 0.5rem 0.8rem;
     border-radius: 4px;
     color: var(--text-primary);
     transition: all 0.2s ease;
     margin-bottom: 0.1rem;
     font-size: 0.85rem;
 }

 .widgets-section .dropdown-item:hover {
     background: var(--bg-secondary);
     transform: translateX(2px);
 }

 /* Compact Menu Links */
 .menu-links>div,
 .menu-links a {
     background: transparent;
     border: 1px solid transparent;
     border-radius: 6px;
     padding: 0.7rem 0.8rem;
     margin-bottom: 0.4rem;
     transition: all 0.3s ease;
     color: var(--text-primary);
     text-decoration: none;
     display: block;
     cursor: pointer;
     font-size: 0.9rem;
 }

 .menu-links>div:hover,
 .menu-links a:hover {
     background: var(--bg-secondary);
     border-color: var(--accent-primary);
     transform: translateX(3px);
     text-decoration: none;
 }

 .menu-links>div {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .menu-links img {
     width: 16px !important;
     height: 16px !important;
     border-radius: 4px;
     transition: transform 0.3s ease;
 }

 .menu-links>div:hover img {
     transform: scale(1.1);
 }

 /* Compact Child Offcanvas */
 .childOffcanvas-header {
     background: var(--bg-secondary);
     border-bottom: 1px solid var(--border-color);
     padding: 1rem 1.2rem;
     margin-bottom: 0;
 }

 .childOffcanvas-header-d1 {
     font-weight: 600;
     font-size: 0.95rem;
     color: var(--text-primary);
     display: flex;
     align-items: center;
 }

 .childOffcanvas-header-d2-d1 {
     display: flex;
     align-items: center;
     justify-content: flex-end;
     gap: 0.6rem;
     color: var(--text-primary);
     font-size: 0.85rem;
 }

 .childOffcanvas-header-d2-d1-img {
     width: 24px !important;
     height: 24px !important;
     border-radius: 6px;
     transition: all 0.3s ease;
     border: 1px solid var(--border-color);
     padding: 0.1rem;
 }

 .childOffcanvas-header-d2-d1-img:hover {
     transform: scale(1.1);
     border-color: var(--accent-primary);
 }

 .childOffcanvas-body {
     padding: 1rem 1.2rem;
     overflow-y: visible;
 }

 /* Compact Categories Accordion */
 .accordion-item {
     background: transparent;
     border: none;
     border-bottom: 1px solid var(--border-color);
     margin-bottom: 0;
 }

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

 .accordion-button {
     background: transparent !important;
     border: none !important;
     padding: 0.8rem 0 !important;
     color: var(--text-primary) !important;
     font-weight: 500;
     font-size: 0.9rem;
     transition: all 0.3s ease;
 }

 .accordion-button:not(.collapsed) {
     color: var(--accent-primary) !important;
     box-shadow: none !important;
 }

 .accordion-button:hover {
     color: var(--accent-primary) !important;
     transform: translateX(3px);
 }

 .accordion-button::after {
     transform: scale(0.7);
 }

 .accordion-button:not(.collapsed)::after {
     transform: scale(0.7) rotate(-90deg);
 }

 .accordion-body {
     padding: 0.5rem 0 0.8rem 1rem !important;
     border: none !important;
 }

 /* Compact Subcategory Styling */
 .fw-medium {
     transition: all 0.3s ease;
     padding: 0.6rem 0;
     border-bottom: 1px solid var(--border-color);
     margin-bottom: 0;
     cursor: pointer;
     font-weight: 500;
     color: var(--text-secondary);
     font-size: 0.85rem;
 }

 .fw-medium:hover {
     color: var(--accent-primary) !important;
     transform: translateX(3px);
 }

 .text-muted.small {
     padding-left: 0.8rem;
     font-size: 0.8rem;
 }

 .text-muted.small a {
     display: block;
     padding: 0.4rem 0;
     color: var(--text-muted) !important;
     text-decoration: none;
     transition: all 0.3s ease;
     border-bottom: 1px solid transparent;
     font-size: 0.8rem;
 }

 .text-muted.small a:hover {
     color: var(--accent-primary) !important;
     transform: translateX(3px);
     border-bottom-color: var(--accent-primary);
 }

 .text-muted.small a:last-child {
     border-bottom: none;
 }

 /* Smooth transitions */
 .offcanvas-start {
     transform: translateX(-100%);
     transition: transform 0.3s ease;
 }

 .offcanvas.show {
     transform: translateX(0);
 }

 /* Loading states */
 .loading {
     position: relative;
     opacity: 0.7;
     pointer-events: none;
 }

 .loading::after {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     margin-left: -0.4rem;
     margin-top: -0.4rem;
     width: 0.8rem;
     height: 0.8rem;
     border: 2px solid transparent;
     border-top: 2px solid var(--accent-primary);
     border-radius: 50%;
     animation: spin 1s linear infinite;
 }

 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 /* Responsive adjustments */
 @media (max-width: 576px) {

     .parentOffcanvas-body,
     .childOffcanvas-body {
         padding: 0.8rem 1rem;
     }

     .parentOffcanvas-header,
     .childOffcanvas-header {
         padding: 0.8rem 1rem;
     }

     .parentOffcanvas-body a,
     .menu-links>div,
     .menu-links a {
         padding: 0.5rem 0.7rem;
         font-size: 0.85rem;
     }

     .widgets-section .dropdown-toggle,
     #mobile-theme-toggle {
         padding: 0.5rem 0.7rem;
         font-size: 0.8rem;
     }

     .parentOffcanvas-body a i {
         font-size: 0.9rem;
         margin-left: 0.5rem;
     }
 }

 /* Focus states for accessibility */
 .parentOffcanvas-body a:focus,
 .widgets-section .dropdown-toggle:focus,
 #mobile-theme-toggle:focus,
 .menu-links>div:focus,
 .accordion-button:focus {
     outline: 2px solid var(--accent-primary);
     outline-offset: 1px;
 }

 /* Dark mode adjustments */
 :root[data-theme="dark"] .parentOffcanvas-body a:hover,
 :root[data-theme="dark"] .menu-links>div:hover,
 :root[data-theme="dark"] .menu-links a:hover {
     background: var(--bg-primary);
 }

 /* Simple scrollbar */
 .parentOffcanvas-body::-webkit-scrollbar,
 .childOffcanvas-body::-webkit-scrollbar {
     width: 4px;
 }

 .parentOffcanvas-body::-webkit-scrollbar-track,
 .childOffcanvas-body::-webkit-scrollbar-track {
     background: var(--bg-secondary);
 }

 .parentOffcanvas-body::-webkit-scrollbar-thumb,
 .childOffcanvas-body::-webkit-scrollbar-thumb {
     background: var(--accent-primary);
     border-radius: 2px;
 }

 /* Compact luxury effects */
 .parentOffcanvas-body a,
 .menu-links>div,
 .menu-links a,
 .widgets-section .dropdown-toggle,
 #mobile-theme-toggle {
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
 }

 .parentOffcanvas-header,
 .childOffcanvas-header {
     backdrop-filter: blur(15px);
     -webkit-backdrop-filter: blur(15px);
 }

 /* Micro animations for luxury feel */
 .parentOffcanvas-body a:hover,
 .menu-links>div:hover,
 .menu-links a:hover {
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }

 .widgets-section .dropdown-toggle:hover,
 #mobile-theme-toggle:hover {
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }







 /* ============================================
   🌟 ULTRA LUXURY NAVBAR + OFFCANVAS STYLE
   ============================================ */

 /* 🔹 Navbar Base */
 .the-navbar-collapse {
     background: var(--gradient-bg);
     border-bottom: 1px solid var(--border-color);
     box-shadow: var(--premium-glow);
     padding: 0.6rem 1rem;
     position: relative;
     z-index: 1040;
     backdrop-filter: var(--morphism-blur);
     -webkit-backdrop-filter: var(--morphism-blur);
     transition: background 0.3s var(--premium-timing);
 }

 /* Logo */
 .collapse-div-a {
     padding: 0.2rem;
     transition: transform 0.3s var(--premium-timing);
 }

 .collapse-div-a:hover {
     transform: scale(1.08);
 }

 .collapse-div-a-img {
     height: 34px !important;
     transition: filter 0.4s var(--premium-timing), transform 0.3s ease;
 }

 :root[data-theme="light"] .collapse-div-a-img {
     filter: drop-shadow(0 2px 4px rgba(47, 164, 231, 0.15));
 }

 :root[data-theme="dark"] .collapse-div-a-img {
     filter: brightness(1.2) drop-shadow(0 0 6px rgba(47, 164, 231, 0.4));
 }

 .collapse-div-a-img:hover {
     transform: scale(1.05);
 }

 /* 🔹 Toggle Button */
 .btn-collapse {
     background: var(--gradient-primary) !important;
     border: none !important;
     border-radius: 12px;
     padding: 0.45rem 0.6rem;
     transition: all 0.3s var(--premium-timing);
     box-shadow: var(--premium-glow);
 }

 .btn-collapse:hover {
     transform: scale(1.07);
     box-shadow: var(--premium-glow-strong);
 }

 /* 🔹 Offcanvas (Main Menu) */
 .offcanvas {
     background: var(--accent-primary) !important;
     border-right: 1px solid var(--border-color);
     box-shadow: var(--shadow-color);
     transition: all 0.4s var(--premium-timing);
     backdrop-filter: var(--morphism-blur);
 }

 /* Header */
 .parentOffcanvas-header {
     background: var(--bg-secondary);
     border-bottom: 1px solid var(--border-color);
     padding: 1rem 1.2rem;
     margin: 0;
     backdrop-filter: blur(20px);
 }

 .parentOffcanvas-Title {
     font-weight: 700;
     font-size: 1.05rem;
     background: var(--gradient-bg);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     letter-spacing: 0.5px;
 }

 /* Close button */
 .parentOffcanvas-btn-colse.btn-close {
     background: none !important;
     color: var(--text-primary) !important;
     font-size: 1.3rem;
     opacity: 0.8;
     transition: all 0.3s var(--premium-timing);
     border: none;
     border-radius: 50%;
     padding: 0.4rem;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .parentOffcanvas-btn-colse.btn-close:hover {
     opacity: 1;
     transform: rotate(90deg);
     background: var(--gradient-primary);
     color: #fff;
     box-shadow: var(--premium-glow-strong);
 }

 /* Body */
 .parentOffcanvas-body {
     padding: 1rem 1.2rem;
     background: var(--bg-tertiary);
 }

 /* Section dividers */
 .user-section,
 .favorites-cart-section,
 .theme-toggle,
 .widgets-section,
 .menu-links {
     margin-bottom: 1.2rem;
     padding-bottom: 1rem;
     border-bottom: 1px solid var(--border-color);
 }

 /* Links */
 .parentOffcanvas-body a {
     display: flex;
     align-items: center;
     padding: 0.6rem 0.8rem;
     border-radius: 10px;
     transition: all 0.3s var(--premium-timing);
     color: var(--text-primary);
     text-decoration: none;
     font-size: calc(100% - 32.8%);
     background: transparent;
     border: 1px solid transparent;
 }

 .parentOffcanvas-body a:hover {
     background: var(--bg-secondary);
     border-color: var(--accent-primary);
     transform: translateX(3px);
     box-shadow: var(--premium-glow);
 }

 .parentOffcanvas-body a i {
     margin-left: 0.6rem;
     font-size: 1rem;
     opacity: 0.9;
 }

 /* Cart badge */
 .cart-badge {
     font-size: 0.7rem;
     padding: 0.2rem 0.5rem;
     animation: gentle-pulse 2s infinite;
     box-shadow: 0 0 5px rgba(255, 0, 0, 0.4);
 }

 @keyframes gentle-pulse {

     0%,
     100% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.1);
     }
 }

 /* Theme toggle */
 #mobile-theme-toggle {
     background: var(--bg-secondary);
     border: 1px solid var(--border-color);
     border-radius: 10px;
     color: var(--text-primary);
     transition: all 0.3s var(--premium-timing);
     width: 100%;
     padding: 0.6rem 0.8rem;
     font-size: calc(100% - 22.8%);
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.5rem;
 }

 #mobile-theme-toggle:hover {
     background: var(--bg-tertiary);
     border-color: var(--accent-primary);
     transform: translateY(-2px);
     box-shadow: var(--premium-glow);
 }

 #mobile-theme-icon {
     font-size: 1rem;
     transition: transform 0.3s ease;
 }

 #mobile-theme-toggle:hover #mobile-theme-icon {
     transform: scale(1.3);
 }

 /* Dropdowns */
 .widgets-section .dropdown-toggle {
     background: var(--bg-secondary);
     border: 1px solid var(--border-color);
     border-radius: 8px;
     color: var(--text-primary);
     transition: all 0.3s var(--premium-timing);
     padding: 0.6rem 0.8rem;
     text-align: right;
     width: 100%;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .widgets-section .dropdown-toggle:hover {
     background: var(--bg-tertiary);
     border-color: var(--accent-primary);
     box-shadow: var(--premium-glow);
 }

 .widgets-section .dropdown-menu {
     background: var(--bg-primary);
     border: 1px solid var(--border-color);
     box-shadow: var(--premium-glow);
     border-radius: 8px;
 }

 .widgets-section .dropdown-item:hover {
     background: var(--bg-secondary);
     transform: translateX(3px);
 }

 /* Child offcanvas */
 .childOffcanvas-header {
     background: var(--bg-secondary);
     border-bottom: 1px solid var(--border-color);
     padding: 1rem 1.2rem;
 }

 .childOffcanvas-header-d1 {
     font-weight: 600;
     color: var(--text-primary);
 }

 .childOffcanvas-header-d2-d1-img {
     width: 26px;
     height: 26px;
     border-radius: 6px;
     border: 1px solid var(--border-color);
     transition: all 0.3s var(--premium-timing);
 }

 .childOffcanvas-header-d2-d1-img:hover {
     border-color: var(--accent-primary);
     transform: scale(1.1);
 }

 /* Micro hover glow */
 .menu-links>div:hover,
 .menu-links a:hover {
     box-shadow: var(--premium-glow);
 }

 /* Responsive adjustments */
 @media (max-width: 576px) {

     .parentOffcanvas-body,
     .childOffcanvas-body {
         padding: 0.8rem 1rem;
     }
 }
















 /* ===================== LUXURY MOBILE NAVBAR STYLE ===================== */

 /* Navbar - The "Best" Professional Look: Neutral, Glassy, Clean */
 .the-navbar-collapse {
     background: var(--glass-bg);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border-bottom: 1px solid var(--glass-border);
     box-shadow: var(--glass-shadow);
     padding: 0.7rem 1rem;
     border-radius: 0 0 1rem 1rem;
     transition: all 0.4s var(--premium-timing);
 }

 /* Brand Logo */
 .collapse-div-a-img {
     height: 40px;
     filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
     /* Neutral shadow */
     transition: transform 0.4s ease;
 }

 .collapse-div-a-img:hover {
     transform: scale(1.05);
 }

 /* Toggle Button */
 .btn-collapse {
     background: transparent !important;
     /* Cleaner look: Ghost button */
     border: 1px solid var(--glass-border);
     border-radius: 50%;
     padding: 0.3rem 0.3rem;
     transition: all 0.3s ease;
     color: var(--accent-primary) !important;
     /* Color icon instead of bg */
 }

 .btn-collapse:hover {
     background: var(--bg-secondary) !important;
     transform: rotate(90deg);
     color: var(--accent-secondary) !important;
     box-shadow: var(--glass-shadow);
 }

 .btn-collapse i {
     font-size: 1.5rem;
     color: var(--accent-primary);
     transition: color 0.3s ease;
 }

 .btn-collapse:hover i {
     color: var(--accent-secondary);
 }

 /* Offcanvas Main */
 .offcanvas {
     background: var(--glass-bg);
     backdrop-filter: blur(30px);
     /* Heavier blur for menu */
     -webkit-backdrop-filter: blur(30px);
     border-right: 1px solid var(--glass-border);
     box-shadow: var(--glass-shadow);
     color: var(--text-primary);
 }

 /* Offcanvas Header - CLEAN, No Gradient */
 .parentOffcanvas-header {
     background: transparent;
     border-bottom: 1px solid var(--glass-border);
     padding: 1.2rem;
 }

 .parentOffcanvas-Title {
     font-weight: 800;
     font-size: 1.2rem;
     letter-spacing: -0.5px;
     color: var(--text-primary);
     /* Neutral Title */
 }

 /* Close Button - Subtle */
 .parentOffcanvas-btn-colse.btn-close {
     background: transparent !important;
     opacity: 1;
     color: var(--text-muted) !important;
     box-shadow: none;
     border: 1px solid var(--glass-border);
     border-radius: 50%;
     padding: 0.5rem;
     width: 2.5rem;
     height: 2.5rem;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .parentOffcanvas-btn-colse.btn-close:hover {
     background: var(--bg-secondary) !important;
     color: var(--accent-primary) !important;
     transform: rotate(90deg);
     border-color: var(--accent-primary);
 }

 /* Offcanvas Body */
 .parentOffcanvas-body {
     padding: 1.5rem;
 }

 /* Links - The "Best" Interactive Style */
 .parentOffcanvas-body a {
     display: flex;
     align-items: center;
     padding: 1rem;
     border-radius: 12px;
     color: var(--text-secondary);
     font-weight: 600;
     transition: all 0.2s ease;
     background: transparent;
     margin-bottom: 5px;
     border: 1px solid transparent;
 }

 .parentOffcanvas-body a:hover {
     background: var(--bg-secondary);
     color: var(--accent-primary);
     transform: translateX(5px);
     border-color: var(--glass-border);
     box-shadow: none;
     /* Flat, clean hover is more 'pro' than heavy shadows */
 }

 .parentOffcanvas-body a i {
     font-size: 1.1rem;
     margin-left: 10px;
     /* RTL compatible spacing */
     transition: color 0.2s;
 }

 .parentOffcanvas-body a:hover i {
     color: var(--accent-secondary);
 }

 /* Section Dividers */
 .user-section,
 .favorites-cart-section,
 .theme-toggle,
 .widgets-section,
 .menu-links {
     border-bottom: 1px solid rgba(255, 255, 255, 0.08);
     margin-bottom: 1rem;
     padding-bottom: 0.8rem;
 }

 /* Dropdown Buttons */
 .widgets-section .dropdown-toggle {
     background: rgba(255, 255, 255, 0.06);
     border-radius: 8px;
     border: 1px solid rgba(255, 255, 255, 0.12);
     color: var(--text-primary);
     transition: all 0.3s ease;
 }

 .widgets-section .dropdown-toggle:hover {
     background: var(--gradient-primary);
     color: #fff;
     transform: translateY(-2px);
 }

 /* Theme Toggle Button */
 #mobile-theme-toggle {
     background: rgba(255, 255, 255, 0.06);
     border-radius: 8px;
     border: 1px solid rgba(255, 255, 255, 0.12);
     color: var(--text-primary);
     font-weight: 500;
     transition: all 0.3s ease;
 }

 #mobile-theme-toggle:hover {
     background: var(--gradient-primary);
     color: #fff;
     box-shadow: 0 0 10px rgba(47, 164, 231, 0.4);
 }

 /* Accordion Luxury Style */
 .accordion-button {
     background: transparent !important;
     color: var(--text-primary) !important;
     font-weight: 600;
     letter-spacing: 0.3px;
     transition: all 0.3s ease;
 }

 .accordion-button:hover {
     color: var(--accent-primary) !important;
     text-shadow: 0 0 8px rgba(47, 164, 231, 0.4);
     transform: translateX(4px);
 }

 /* Sub-items */
 .text-muted.small a {
     color: var(--text-muted);
     font-weight: 400;
 }

 .text-muted.small a:hover {
     color: var(--accent-primary);
     transform: translateX(4px);
 }

 /* Cart Badge Animation */
 .cart-badge {
     background: linear-gradient(145deg, #ff3b3b, #ff6b6b);
     box-shadow: 0 0 10px rgba(255, 59, 59, 0.4);
     animation: glow-pulse 2s infinite ease-in-out;
 }

 @keyframes glow-pulse {

     0%,
     100% {
         box-shadow: 0 0 8px rgba(255, 59, 59, 0.4);
         transform: scale(1);
     }

     50% {
         box-shadow: 0 0 15px rgba(255, 59, 59, 0.8);
         transform: scale(1.1);
     }
 }

 /* Floating Glow Effect */
 .offcanvas.show {
     box-shadow: 0 0 30px rgba(47, 164, 231, 0.4);
 }


















































































 /* ----------- swiper-button style ---------------- */

 .swiper-button-prev,
 .swiper-rtl .swiper-button-next {
     left: var(--swiper-navigation-sides-offset, 10px);
     right: auto;
     top: calc(var(--fs-xxs) + 65%);
 }

 .swiper-button-next,
 .swiper-rtl .swiper-button-prev {
     right: var(--swiper-navigation-sides-offset, 10px);
     left: auto;
     top: calc(var(--fs-xxs) + 65%);
 }

 .swiper-pagination-bullet-active {
     background: var(--accent-secondary) !important;
 }