/* Mobile sidebar menu styles */
:root{
  --menu-bg:#0f0f10;
  --menu-text:#ffffff;
  --muted:#bdbdbd;
  --accent:#28a745;
}

/* Sticky mobile navigation bar variables */
:root{
  --sticky-bg: #2d5f4f;
  --sticky-fg: #ffffff;
  --sticky-transition: 0.3s;
  --sticky-height: 56px;
}

/* Hamburger */
.mobile-hamburger{
  display:inline-flex;
  flex-direction:column;
  justify-content:space-between;
  width:36px;
  height:22px;
  background:transparent;
  border:none;
  padding:0;
  margin-right:12px;
  cursor:pointer;
}
.mobile-hamburger-line{
  display:block;
  height:3px;
  background:#000; /* hamburger lines: black */
  border-radius:2px;
}

/* Backdrop */
.mobile-menu-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  z-index:9998;
  opacity:0;
  transition:opacity .25s ease;
}
.mobile-menu-backdrop[hidden]{
  display:none;
}

/* Sidebar */
.mobile-menu{
  position:fixed;
  top:0;
  left:0;
  height:100vh;
  width:88%;
  max-width:420px;
  background:var(--menu-bg);
  color:var(--menu-text);
  z-index:9999;
  transform:translateX(-110%);
  transition:transform .32s cubic-bezier(.2,.9,.2,1);
  box-shadow:2px 0 20px rgba(0,0,0,0.6);
  display:flex;
  flex-direction:column;
}
.mobile-menu[aria-hidden="false"]{
  transform:translateX(0);
}

.mobile-menu__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 16px;
  border-bottom:1px solid rgba(255,255,255,0.04);
}
.mobile-menu__title{font-weight:600;font-size:18px}
.mobile-menu__close{background:transparent;border:none;color:var(--menu-text);font-size:22px;cursor:pointer}

.mobile-menu__search{display:flex;gap:8px;padding:12px 12px 10px 12px}
.mobile-menu__search input{flex:1;padding:10px 12px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:var(--menu-text)}
.mobile-menu__search input::placeholder{color:var(--muted)}
.btn--green{background:var(--accent);border:none;color:#fff;padding:8px 12px;border-radius:8px;cursor:pointer}

.mobile-menu__nav{padding:8px 8px 24px 8px;overflow:auto}
.mobile-menu__list{list-style:none;margin:0;padding:0}
.mobile-menu__item{border-bottom:1px solid rgba(255,255,255,0.03)}
.mobile-menu__link{display:block;padding:14px 16px;color:var(--menu-text);text-decoration:none;font-weight:500}
.mobile-menu__link:hover{background:rgba(255,255,255,0.02)}

.mobile-menu__collapser{width:100%;text-align:left;padding:14px 16px;background:transparent;border:none;color:var(--menu-text);font-weight:600;display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.mobile-menu__collapser .mobile-menu__collapser-arrow{font-size:14px;opacity:.9}

.mobile-menu__submenu{list-style:none;margin:0;padding:0 8px 8px 20px;overflow:hidden;transition:max-height .28s ease}
.mobile-subitem a{display:block;padding:10px 8px;color:var(--menu-text);text-decoration:none;font-weight:500}
.mobile-subitem a::after{content:'→';float:right;opacity:.75}

/* When submenu is visible (we toggle hidden attribute in JS) */
.mobile-menu__submenu[hidden]{max-height:0;padding-top:0;padding-bottom:0}
.mobile-menu__submenu:not([hidden]){max-height:600px;padding-top:8px;padding-bottom:12px}

/* Responsive: hide the hamburger on larger screens */
@media(min-width:900px){
  .mobile-hamburger{display:none}
  .mobile-menu{display:none}
  .mobile-menu-backdrop{display:none}
}

/* Ensure hamburger stays clickable and above other navbar items */
.mobile-hamburger{
  position:relative;
  z-index:11000;
  flex: 0 0 auto;
}

/* Hide badges when JS marks them as empty/hidden */
.navbar__cart-count.hidden{ display:none !important; }

/* Hide numeric cart badges inside the mobile sidebar / dropdowns - we use the sticky overlay instead */
.mobile-menu .navbar__cart-count,
.mobile-menu .cart-count,
.navbar__dropdown-menu .navbar__cart-count{ display:none !important }

/* Remove any cart link or cart button inside the mobile aside/dropdown */
.mobile-menu a[href="cart.html"],
.mobile-menu button.navbar__cart-btn { display:none !important }

/* If center nav grows, prevent it from overlapping the hamburger */
.navbar__container {
  align-items: center;
}
.navbar__center {
  min-width: 0;
}

/* Accessibility focus styles */
.mobile-menu__link:focus,.mobile-menu__collapser:focus,.mobile-menu__close:focus,.mobile-hamburger:focus{outline:2px solid rgba(255,255,255,0.08);outline-offset:2px}