body, html{
  overflow-x:hidden;
}

/* logo */
.nav-logo img{
  height:40px;
  width:auto;
  object-fit:contain;
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0;
}

/* ===== GLOBAL RESET ===== */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  margin:0;
}

body.no-scroll {
  overflow: hidden;
}

/* ===== NAVBAR ===== */
.navbar{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;

  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  padding:15px 30px;
  background: #0B1C3D;
  color:#fff;
}

/* LEFT */
.nav-left{
  justify-self: start;
  display:flex;
  align-items:center;
  gap:10px;
}

.navbar.scrolled{
  background: rgba(11,28,61,0.9);
  backdrop-filter: blur(8px);
}

.nav-logo{
  display:flex;
  align-items:center;
  gap:10px;
}

.logo{
  font-weight:bold;
  font-size:20px;
  color:#DAA520;
}

.brand-name{
  color:#fff;
  font-weight:600;
  font-size:16px;
  line-height: 1;
}

/* MENU */
.nav-menu{
  display:flex;
  justify-self: center;
  list-style:none;
  gap:25px;
}

.nav-menu li{
  position:relative;
}

.nav-menu a{
  position: relative;
  color:#fff;
  text-decoration:none;
  font-size:14px;
  transition: 0.3s;
}

.nav-menu a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-5px;
  width:0;
  height:2px;
  background:#DAA520;
  transition:0.3s;
}

.nav-menu a:hover{
  color:#DAA520;
}

.nav-menu a:hover::after{
  width:100%;
}

/* DROPDOWN */
.dropdown-menu{
  display:none;
  position:absolute;
  top: 105%;
  left:0;
  background:#122a5a;
  color:#000;
  min-width:180px;
  border-radius:8px;
  overflow:hidden;
}

.dropdown-menu li{
  padding:10px;
}

.dropdown-menu li a{
  color:#fcfafa;
}

.dropdown:hover .dropdown-menu{
  display:block;
}

@media (max-width: 768px){

  .dropdown-menu{
    display:none;
  }

  .dropdown.active .dropdown-menu{
    display:block;
  }

}

/* RIGHT */
.nav-right{
  justify-self: end;
  display:flex;
  align-items:center;
  gap:15px;
}

.cart-icon{
  cursor:pointer;
  position:relative;
}

#cart-count{
  position:absolute;
  top:-8px;
  right:-10px;
  background:#DAA520;
  color:#000;
  font-size:12px;
  padding:2px 6px;
  border-radius:50%;
}

/* HAMBURGER */
.hamburger{
  display:none;
  cursor:pointer;
}

/* ===== MOBILE ===== */
@media (max-width: 768px){

   .navbar{
    grid-template-columns: auto 1fr;
  }

  .nav-right{
    justify-self: end;
  }

  .nav-menu{
    position:absolute;
    transform: none;
    top:60px;
    left:0;
    width:100%;
    background:#0B1C3D;
    flex-direction:column;
    display:none;
    padding:20px;
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .nav-menu .nav-menu-inner {
  padding-bottom: 20px;
}

  .nav-menu.active{
    display:flex;
  }

  .hamburger{
    display:block;
  }

  .dropdown-menu{
    position:static;
    background:#142a5c;
  }

  .dropdown-menu li a{
    color:#fff;
  }
}