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

html,body{
  width:100%;
  max-width:100%;
  overflow-x:clip;
}

/* ================= HEADER ================= */

.site-header{
  background:#000;
  color:#aba0a0;
  height:64px;
  width:100%;
  position:sticky;
  top:0;
  z-index:1000;
}

.header-container{
  max-width:1200px;
  margin:auto;
  padding:0 24px;
  height:64px;
  display:flex;
  align-items:center;
  gap:20px;
}

/* LOGO */

.logo{
  background:#fff;
  border-radius:5px;
  font-size:26px;
  font-weight:700;
  letter-spacing:1px;
  margin-right:auto;
  text-decoration:none;
  color:inherit;
  display:flex;
  align-items:center;
}

.logo-ka{
  color:#5A0E24;
}

/* ================= NAV ================= */

.nav-menu{
  display:flex;
  gap:28px;
  position:relative;
  z-index:1200;
}

.nav-menu a{
  color:#fff;
  text-decoration:none;
  font-size:16px;
  transition:color .2s ease,background .15s ease;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

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

/* ACTIVE LINK */

.nav-menu a.active{
  color:#caa34d;
  font-weight:600;
  position:relative;
}

.nav-menu a.active::after{
  content:"";
  position:absolute;
  bottom:-6px;
  left:0;
  width:100%;
  height:2px;
  background:#caa34d;
}

/* ================= AGE FILTER ================= */

.age-filter{
  max-width:160px;
  flex-shrink:0;
  position:relative;
}

.age-filter select{
  background:#000;
  color:#fff;
  border:1px solid #444;
  padding:8px 14px;
  border-radius:6px;
  font-size:14px;
  cursor:pointer;
  width:100%;
  appearance:none;
}

.age-filter::after{
  content:"▾";
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  color:#fff;
  font-size:12px;
}

/* ================= HEADER ACTIONS ================= */

.header-actions{
  display:flex;
  align-items:center;
  gap:18px;
  margin-left:10px;
}

/* ICON BUTTON */

.icon-btn{
  position:relative;
  color:#fff;
  font-size:22px;
  text-decoration:none;
  transition:.2s ease;
}

.icon-btn:hover{
  color:#caa34d;
}

/* CART BADGE */

.cart-count{
  position:absolute;
  top:-6px;
  right:-10px;
  background:#caa34d;
  color:#000;
  font-size:11px;
  padding:2px 6px;
  border-radius:50%;
  font-weight:700;
}

/* ================= PROFILE DROPDOWN ================= */

.profile-menu{
  position:relative;
  cursor:pointer;
}

.profile-menu i{
  font-size:26px;
  color:#fff;
}

.profile-dropdown{
  position:absolute;
  top:120%;
  right:0;
  background:#111;
  min-width:170px;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 8px 25px rgba(0,0,0,.6);
  display:none;
  flex-direction:column;
  z-index:9999;
}

.profile-dropdown a{
  padding:12px 16px;
  color:#fff;
  text-decoration:none;
  font-size:14px;
  border-bottom:1px solid #222;
}

.profile-dropdown a:hover{
  background:#caa34d;
  color:#000;
}

.profile-menu:hover .profile-dropdown{
  display:flex;
}

/* ================= MOBILE MENU ================= */

@media (max-width:768px){

  .nav-menu{
    position:fixed;
    top:0;
    right:-100%;
    height:100vh;
    width:280px;

    background:#111;
    flex-direction:column;

    padding:90px 30px 30px;
    gap:25px;

    transition:right .35s ease;

    z-index:2001;
    box-shadow:-8px 0 25px rgba(0,0,0,.5);
  }

  .nav-menu.active{
    right:0;
  }

  .nav-menu a{
    font-size:18px;
    padding:10px 0;
    border-bottom:1px solid #222;
  }

  .nav-menu a:last-child{
    border-bottom:none;
  }

  .nav-menu a:active{
    background:#1a1a1a;
    color:#caa34d;
  }

  .age-filter{
    max-width:130px;
  }

  .age-filter select{
    font-size:13px;
  }

  .header-actions{
    gap:14px;
  }

  .icon-btn{
    font-size:20px;
  }

  .profile-dropdown{
    right:-10px;
    min-width:140px;
  }

}

/* ================= OVERLAY ================= */

.menu-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
  z-index:2000;
}

.menu-overlay.active{
  opacity:1;
  pointer-events:auto;
}

/* ================= MOBILE MENU BUTTON ================= */

.mobile-menu-btn{
  display:none;
  position:fixed;
  bottom:22px;
  right:22px;

  background:linear-gradient(135deg,#caa34d,#e5c06b);
  color:#000;

  font-size:24px;
  width:54px;
  height:54px;

  border-radius:50%;

  align-items:center;
  justify-content:center;

  cursor:pointer;
  z-index:3000;

  box-shadow:0 8px 25px rgba(0,0,0,.5);
  transition:transform .15s ease;
}

.mobile-menu-btn:active{
  transform:scale(.9);
}

@media (max-width:768px){
  .mobile-menu-btn{
    display:flex;
  }
}