img { display: block; max-width: 100%; }
    a { text-decoration: none; color: inherit; }
    button { border: none; background: none; cursor: pointer; font-family: inherit; color: inherit; }
    ul, ol { list-style: none; }

    /* ---------- CUSTOM SCROLLBAR ---------- */
    ::-webkit-scrollbar { width: 4px; background: #000; }
    ::-webkit-scrollbar-thumb { background: var(--gray3); border-radius: 4px; }

    /* ---------- STICKY NAVBAR (with blur on scroll) ---------- */
    .navbar {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 200;
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      background: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, transparent 100%);
      backdrop-filter: blur(0px);
      transition: backdrop-filter .3s, background .3s;
	  margin-bottom: 10px;
    }
    .navbar.scrolled {
      background: rgba(0,0,0,0.92);
      backdrop-filter: blur(16px);
    }

    /* ---------- LOGO (geometric) ---------- */
    /* Container link handling the click area */
.logo-image {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    text-decoration: none;
    height: 100%; /* Matches your navbar height constraint */
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Subtle brand micro-interaction on hover */
.logo-image:hover {
    transform: scale(1.1);
}

/* Image scaling properties to match mobile-first responsiveness */
.logo-image {
    height: 50px !important;          /* Perfect modern height for standard mobile viewports */
    width: auto !important;           /* Automatically calculates proportional width so it never squishes */
    object-fit: contain !important;   /* Safeguards the asset against layout stretching */
    display: block !important;
}

#vyxra-main{
	background: var(--bg);
}

/* Upscale slightly for polished desktop layouts */
@media (min-width: 1024px) {
    .logo-image {
        height: 44px !important;      /* Scales slightly larger to pop on wide screens */
    }
}
    /* Desktop navigation links */
    .nav-links {
      display: none;
      gap: 36px;
    }
    .nav-links a {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.8);
      transition: color .2s;
      position: relative;
    }
    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: -3px; left: 0; right: 0;
      height: 1px;
      background: var(--purple);
      transform: scaleX(0);
      transition: transform .2s;
      transform-origin: left;
    }
    .nav-links a:hover { color: var(--white); }
    .nav-links a:hover::after { transform: scaleX(1); }

    /* Right side icons (user, cart, hamburger) */
    .nav-icons { display: flex; gap: 16px; align-items: center; }
    .nav-icon {
      width: 40px; height: 40px;   /* larger tap area */
      display: flex; align-items: center; justify-content: center;
      border-radius: 50%;
      transition: background .2s;
    }
    .nav-icon:hover { background: rgba(255,255,255,0.08); }
    .nav-icon svg {
      width: 22px; height: 22px;   /* larger icons */
      stroke: var(--white);
      fill: none;
      stroke-width: 1.7;
    }
    .cart-wrap { position: relative; }
    .cart-badge {
      position: absolute;
      top: 3px; right: 3px;
      width: 8px; height: 8px;
      background: var(--purple);
      border-radius: 50%;
      border: 1.5px solid #000;
    }
	
#vyxra-main{
	background: black;
}

    /* Mobile hamburger menu button */
    .hamburger {
      display: flex;
      flex-direction: column;
      gap: 5px;
      padding: 6px;
      cursor: pointer;
      border-radius: 8px;
      transition: background .2s;
    }
    .hamburger:hover { background: rgba(255,255,255,0.06); }
    .hamburger span {
      display: block;
      width: 24px; height: 2px;
      background: var(--white);
      border-radius: 2px;
      transition: transform .3s, opacity .3s, width .3s;
    }
    .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamburger.open span:nth-child(2) { opacity: 0; width: 0; }
    .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* Mobile drawer menu */
    .mobile-menu {
      position: fixed;
      top: var(--nav-h); left: 0; right: 0; bottom: 0;
      z-index: 190;
      background: rgba(0,0,0,0.97);
      backdrop-filter: blur(20px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 40px;
      transform: translateX(100%);
      transition: transform .4s cubic-bezier(.77,0,.175,1);
    }
    .mobile-menu.open { transform: translateX(0); }
    .mobile-menu a {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 48px;
      letter-spacing: 0.06em;
      color: var(--white);
      opacity: 0.85;
      transition: opacity .2s, color .2s;
    }
    .mobile-menu a:hover { opacity: 1; color: var(--purple); }