/* Mobile drawer CSS (left side, starts 150px down, 1 row, 50% opaque backdrop) */

/* Top Nav Links Ctrl */
.topLinks {display: block;}
.topNavMenu {display: block;}

.button.top-menu_cat-img {
    background: transparent;
}

.top-menu__cat-img {
    background: transparent;
	  background: #fff;
}

.top-menu__cat-label {
    background: transparent;
    font-size: 16px;
  font-weight: 700;
}


/* FOR 1-COLUMN OF LINKS */

/* Backdrop over the page (50% opaque) */
.top-menu__overlay{
  position: fixed;
  inset: 0;
  /* background: rgba(0,0,0,.5); TEST -BELOW- */
    background: transparent;
  z-index: 9997;

  /* JS sets hidden attribute; keep behavior consistent */
  display: block;
}

.top-menu__overlay[hidden]{
  display: none;
}

/* Drawer */
.top-menu__drawer{
  position: fixed;
  left: 0;
  top: 182px;                 /* 150px from the top */
  height: calc(100dvh - 150px);
  width: min(420px, 92vw);

  background: #fff;
  z-index: 9998;

  transform: translateX(-102%);
  transition: transform 220ms ease;

  overflow: auto;
  padding: 12px;

  /* ensure it can show contents */
  display: block;
}

.top-menu__drawer.is-open{
  transform: translateX(0);
}

/* 1 column (vertical list) */
.top-menu__grid{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Link styling */
.top-menu__item{
  display: block;
  text-decoration: none;

  padding: 10px 12px;
  background: #fff; /* Item Image - Was:#f7f7f7*/
  /*  background: transparent; TRY THIS? */
  border: 1px solid #eee;
  border-radius: 10px;
}

/* Hide header/close button if you want only the list */
.top-menu__drawer-header{
  display: none;
}

/* ADDED BELOW FOR COLOR - 2026-06-26 */

.top-menu__toggle{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 0;
  border-radius: 10px;

  background: #0b5ed7;       /* #0b5ed7: IS DARK BLUE - button color */
  color: #fff;

  font-size: 16px;
  font-weight: 700;
  cursor: pointer;

  -webkit-tap-highlight-color: transparent;
}

/* Make the icon bigger */
.top-menu__toggle-icon{
  font-size: 22px;
  line-height: 1;
}

/* Optional: hide the text if space is tight - WAS SET TO 360, TESTED FOR 760 - OK (ON SMALL PHONES)  */
@media (max-width: 360px){
  .top-menu__toggle-text{ display: none; }
}