:root {
           --accent: #000066;
           --accent-secondary: #03045e;
           --header-bg: #03045e;
           --nav-bg: #f7f7f7;
           --border: #ececec;
       }

       body {
           margin: 0;
           font-family: 'Inter', Arial, sans-serif;
           background: #f9f9f9;
           overflow-x: hidden;
       }

       /* HEADER */
       .desktop-header {
           position: relative;
           margin: 0;
           padding: 0;
           z-index: 9;
           z-index: 999;
           box-shadow: none;
       }

       .header-main {
           display: flex;
           align-items: center;
           justify-content: space-between;
           background-color: var(--accent-secondary);
           padding: 0 32px;
           /* border-bottom: 1.5px solid var(--border); */
           height: 74px;
           position: relative;
           transition: box-shadow 0.35s cubic-bezier(.4, 1.4, .6, 1),
               transform 0.5s cubic-bezier(.4, 1.4, .6, 1),
               opacity 0.25s;
       }

       .header-logo {
           display: flex;
           align-items: center;
       }

       .header-logo img {
           width: 14em;
           max-width: 100%;
           height: auto;
       }

       .header-nav-secondary.sticky {
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           z-index: 999;
           box-shadow: 0 4px 24px rgba(0, 0, 0, 0.09);
           animation: headerSlideDown 0.5s cubic-bezier(.4, 1.4, .6, 1);
           background: #f8f9fa;
           /* Ensure background is set */
       }

       .nav-placeholder {
           width: 100%;
           display: block;
       }


       @keyframes headerSlideDown {
           from {
               transform: translateY(-40%);
               opacity: 0;
           }

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


       /* .header-search {
            flex: 1;
            margin: 0 32px;
            display: flex;
            align-items: center;
            max-width: 480px;
        }

        .header-search input {
            width: 100%;
            padding: 11px 16px;
            border-radius: 24px;
            border: 1.5px solid var(--border);
            font-size: 1rem;
            outline: none;
            transition: border 0.2s;
        }

        .header-search input:focus {
            border-color: var(--accent);
        } */

       .header-search.search-wrapper {
           position: relative;
           flex: 1;
           max-width: 480px;
           margin: 0 32px;
       }

       .header-search input {
           max-width: 100%;
           width: -webkit-fill-available;
           padding: 8px 44px 8px 12px;
           border-radius: 4px;
           border: 1.5px solid #ececec;
           font-size: 1rem;
       }

       /* .header-search input:active,
       .header-search input:focus,
       .header-search input:hover,
       .header-search input:focus-visible {
           border: 1.5px solid var(--accent);
       } */

       .header-search .search-btn {
           position: absolute;
           right: 10px;
           top: 50%;
           transform: translateY(-50%);
           background: none;
           border: none;
           color: #03045e;
           font-size: 1.15rem;
           padding: 0 8px;
           cursor: pointer;
           transition: color 0.2s;
           outline: none;
           z-index: 2;
       }

       .header-search .search-btn:hover {
           color: var(--accent);
       }

       .header-right {
           display: flex;
           align-items: center;
           justify-content: flex-end;
           gap: 1.2rem;
       }

       /* Account Dropdown */
       .account-dropdown {
           position: relative;
           margin-left: 0;
           display: inline-block;
       }

       .account-btn {
           display: flex;
           align-items: center;
           gap: 7px;
           background: none;
           border: none;
           color: #ffffff;
           font-size: 1.08rem;
           font-weight: 500;
           cursor: pointer;
           padding: 7px 10px 8px;
           transition: background 0.15s, color 0.15s;
       }

       .account-btn i {
           font-size: 1.2rem;
       }

       .account-list {
           display: none;
           position: absolute;
           top: 100%;
           right: 0;
           min-width: 130px;
           background: #fff;
           border-radius: 4px;
           /* box-shadow: 0 6px 24px rgba(207, 29, 97, 0.15); */
           border: 1px solid #ececec;
           opacity: 0;
           pointer-events: none;
           transform: translateY(10px) scale(0.98);
           transition: opacity 0.24s cubic-bezier(.4, 1.4, .6, 1), transform 0.24s cubic-bezier(.4, 1.4, .6, 1);
           z-index: 111;
       }

       .account-dropdown:hover .account-list,
       .account-dropdown:focus-within .account-list {
           display: block;
           opacity: 1;
           pointer-events: auto;
           transform: translateY(0) scale(1);
       }

       .account-list a {
           display: block;
           padding: 12px 20px;
           color: #222;
           text-decoration: none;
           font-size: 1rem;
           border-bottom: 1px solid #f5f5f5;
           transition: background 0.15s, color 0.15s;
       }

       .account-list a:last-child {
           border-bottom: none;
       }

       .account-list a:hover {
           background: #f8f8f8;
           color: var(--accent);
       }

       .user-avatar {
           background: linear-gradient(to right, #5179d9, #5353ff96);
           color: #fff;
           width: 28px;
           height: 28px;
           display: inline-flex;
           align-items: center;
           justify-content: center;
           border-radius: 50%;
           font-weight: 600;
           font-size: 1rem;
           letter-spacing: 0.5px;
           margin-right: 4px;
       }

       .header-cart,
       .header-location,
       .header-wishlist {
           position: relative;
           color: #ffffff;
           font-size: 1.5rem;
           text-decoration: none;
           transition: color 0.18s;
       }

       .header-cart .cart-count {
           position: absolute;
           top: -2px;
           right: -5px;
           background-color: #cf2e2e;
           color: #fff;
           font-size: 0.65rem;
           border-radius: 50%;
           width: 19px;
           height: 19px;
           display: flex;
           align-items: center;
           justify-content: center;
           font-weight: 600;
           /* box-shadow: 0 1px 4px rgb(101 101 101); */
       }

       .header-nav-secondary {
           width: 100%;
           background: #f8f9fa;
           border-bottom: 1px solid #e5e5e5;
           box-shadow: 0 1px 2px rgba(0, 0, 0, 0.01);
       }

       .nav-secondary-container {
           max-width: 1400px;
           margin: 0 auto;
           display: flex;
           align-items: center;
           justify-content: space-between;
           padding: 0.7rem 2vw;
       }

       .header-nav-secondary ul {
           display: flex;
           align-items: center;
           gap: 1.4rem;
           list-style: none;
           margin: 0;
           padding: 0;
       }

       .header-nav-secondary ul li a {
           color: #454545;
           text-decoration: none;
           font-weight: 500;
           font-size: 1rem;
           transition: color 0.2s;
       }

       .header-nav-secondary ul li a:hover,
       .header-nav-secondary ul li a.active {
           color: var(--accent-secondary);
       }

       .nav-secondary-actions {
           display: flex;
           justify-content: flex-end;
           align-items: center;
           gap: 1.5rem;
       }

       .call-link {
           display: flex;
           align-items: center;
           color: var(--accent-secondary);
           font-weight: 600;
           font-size: 1.05rem;
           text-decoration: none;
           background: #e3f0ff;
           padding: 6px 14px;
           border-radius: 20px;
           transition: background 0.2s, color 0.2s;
           gap: 0.5em;
       }

       .call-link:hover {
           background: var(--accent-secondary);
           color: #fff;
       }

       .call-link i {
           transform: rotate(90deg);
           font-size: 1.1em;
       }

       /* NAVBAR */
       .main-navbar {
           background: var(--nav-bg);
           border-bottom: 1.5px solid var(--border);
           display: flex;
           justify-content: center;
           gap: 44px;
           padding: 0 32px;
           height: 52px;
           align-items: center;
       }

       .main-navbar a {
           text-decoration: none;
           color: #222;
           font-size: 1.07rem;
           font-weight: 500;
           padding: 7px 2px;
           border-bottom: 1.5px solid transparent;
           transition: background 0.15s, color 0.15s;
       }

       .main-navbar a.active {
           color: var(--accent);
       }

       .main-navbar a:hover {
           color: var(--accent);
           border-bottom: 1.5px solid var(--accent);
       }

       /* MOBILE HEADER */
       .header-mobile {
           display: none;
           align-items: center;
           justify-content: space-between;
           background: var(--header-bg);
           padding: 0 14px;
           height: 62px;
           /* border-bottom: 1.5px solid var(--border); */
           position: relative;
           z-index: 100;
       }

       .mobile-logo,
       .drawer-logo {
           display: flex;
           align-items: center;
       }

       .mobile-logo img,
       .drawer-logo img {
           width: 12em;
           max-width: 100%;
           height: auto;
       }

       .mobile-actions {
           display: flex;
           align-items: center;
           gap: 18px;
           margin-right: 5px;
       }

       .mobile-cart-header {
           position: relative;
           color: #ffffff;
           /* right: 35px; */
           font-size: 1.5rem;
           text-decoration: none;
           transition: color 0.18s;
       }

       .mobile-cart-header:hover,
       .mobile-cart-header:active,
       .mobile-search-btn:active,
       .mobile-search-btn:hover,
       .mobile-menu-btn:active,
       .mobile-menu-btn:hover,
       .header-cart:hover,
       .header-location:hover,
       .header-wishlist:hover,
       .account-btn:hover,
       .account-dropdown:hover .account-btn {
           color: #dde7ff;
       }

       .mobile-cart-header .cart-count {
           position: absolute;
           top: -7px;
           right: -10px;
           background: var(--accent);
           color: #fff;
           font-size: 0.8rem;
           border-radius: 50%;
           width: 17px;
           height: 17px;
           display: flex;
           align-items: center;
           justify-content: center;
           font-weight: 600;
           box-shadow: 0 1px 4px rgba(207, 29, 97, 0.13);
       }

       .mobile-menu-btn,
       .mobile-search-btn {
           background: none;
           border: none;
           font-size: 1.5rem;
           color: #ffffff;
           cursor: pointer;
           transition: color 0.18s;
           padding: 0;
       }

       /* MOBILE NAV DRAWER */
       .overlay {
           position: fixed;
           top: 0;
           left: 0;
           right: 0;
           bottom: 0;
           background: rgba(0, 0, 0, 0.5);
           z-index: 998;
           opacity: 0;
           visibility: hidden;
           transition: opacity 0.3s;
       }

       .overlay.active {
           opacity: 1;
           visibility: visible;
       }

       .mobile-nav-drawer {
           position: fixed;
           top: 0;
           left: 0;
           width: 80vw;
           max-width: 320px;
           height: 100%;
           background: #fff;
           box-shadow: 2px 0 16px rgba(0, 0, 0, 0.13);
           z-index: 999;
           transform: translateX(-100%);
           transition: transform 0.3s ease-out;
           display: flex;
           flex-direction: column;
       }

       .mobile-nav-drawer.open {
           transform: translateX(0);
       }

       .drawer-header {
           display: flex;
           align-items: center;
           justify-content: space-between;
           padding: 18px 20px;
           border-bottom: 1px solid var(--border);
       }

       .drawer-close {
           background: none;
           border: none;
           font-size: 1.4rem;
           color: #888;
           cursor: pointer;
           padding: 5px;
       }

       .drawer-links {
           flex: 1;
           overflow-y: auto;
           padding: 20px 0;
       }

       .drawer-links a {
           padding: 14px 26px;
           font-size: 1.1rem;
           color: #222;
           text-decoration: none;
           font-weight: 500;
           border-left: 4px solid transparent;
           transition: background 0.14s, border 0.14s;
           display: block;
       }

       .drawer-links a.active,
       .drawer-links a:hover {
           background: #f7f7f7;
           border-left: 4px solid var(--accent);
           color: var(--accent);
       }

       .drawer-social {
           display: flex;
           justify-content: center;
           gap: 22px;
           padding: 10px 10px 8px;
           border-top: 1px solid var(--border);
       }

       .drawer-social a {
           color: #555;
           font-size: 1.3rem;
           transition: color 0.2s;
       }

       .drawer-social a:hover {
           color: var(--accent);
       }

       .drawer-links .category-dropdown {
           display: block;
           position: relative;
           transition: background 0.18s, color 0.18s;
       }

       .drawer-dropdown {
           position: relative;
       }

       .drawer-dropdown-menu {
           width: 95%;
           justify-self: center;
           position: static;
           background: #fff;
           border-radius: 0.6em;
           box-shadow: 0 8px 24px rgba(9, 61, 145, 0.07);
           margin-top: -0.8em;
           padding: 0.3em 0.5em;
           display: flex;
           flex-direction: column;
           gap: 0.1em;
           opacity: 0;
           max-height: 0;
           visibility: hidden;
           transform: translateY(-10px);
           transition: all 0.28s cubic-bezier(.4, 1.4, .6, 1);
           overflow: hidden;
       }

       .drawer-dropdown.open .drawer-dropdown-menu {
           margin-top: 0.8em;
       }

       .drawer-dropdown.open .drawer-dropdown-menu {
           opacity: 1;
           visibility: visible;
           max-height: 400px;
           transform: translateY(0);
       }

       .drawer-dropdown-menu .dropdown-item {
           color: #093d91;
           padding: 0.6em 1em;
           border-radius: 0.5em;
           font-weight: 500;
           text-decoration: none;
           transition: background 0.18s, color 0.18s;
       }

       .drawer-dropdown-menu .dropdown-item:hover {
           background: #f6fbff;
           color: #222;
       }

       .dropdown-arrow {
           transition: transform 0.25s cubic-bezier(.4, 1.4, .6, 1);
           font-size: 1.2em;
       }

       .drawer-dropdown.open .dropdown-arrow {
           transform: rotate(180deg);
       }

       /* SEARCH CANVAS */
       .search-canvas {
           position: fixed;
           width: 100%;
           background: #fff;
           padding: 16px;
           z-index: 9;
           box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
           transform: translateY(-200%);
           transition: transform 0.3s;
       }

       .search-canvas.open {
           transform: translateY(0);
       }

       .search-form {
           position: relative;
           max-width: 600px;
           margin: 0 auto;
       }

       .search-form input {
           max-width: 100%;
           width: -webkit-fill-available;
           padding: 10px 50px 10px 20px;
           border-radius: 30px;
           border: 1.5px solid var(--border);
           font-size: 0.9rem;
           outline: none;
           transition: border 0.2s;
       }

       .search-form input:focus {
           border-color: var(--accent);
       }

       .search-form button {
           position: absolute;
           right: 15px;
           top: 50%;
           transform: translateY(-50%);
           background: none;
           border: none;
           color: var(--accent-secondary);
           font-size: 1.2rem;
           cursor: pointer;
           transition: color 0.2s;
       }

       .search-form button:hover {
           color: var(--accent);
       }

       /* RESPONSIVE */
       @media (max-width: 900px) {

           .desktop-header,
           .main-navbar {
               display: none;
           }

           .header-mobile {
               display: flex;
           }
       }

       @media (min-width: 901px) {

           .header-mobile,
           .mobile-nav-drawer,
           .search-canvas,
           .overlay {
               display: none !important;
           }

           .header-main,
           .main-navbar {
               display: flex;
           }
       }