.slide-menu {
  width: 70%;
}
.slide-menu,
.slide-menu a {
  font-size: 1.2rem;
  color: inherit;
  z-index: 9999999999;
}
.slide-menu a {
  padding: 15px;
  text-decoration: none;
}

.slide-menu .controls {
  display: flex;
  margin-bottom: 1rem;
}

.slide-menu ul {
  padding-right: 0;
}

.slide-menu-ul-li {
  border-top: 1px solid #efefef;
  padding: 10px;
}

.slide-menu .slide-menu__backlink {
  text-transform: uppercase;
}

/* .slide-menu__backlink is now a <button>; restore the look/box-model it had as an <a> */
button.slide-menu__backlink {
  display: block;
  width: 100%;
  border: none;
  background: none;
  margin: 0;
  padding: 15px;
  font-size: 1.4rem;
  font-weight: 700;
  color: inherit;
  text-decoration: none;
  text-align: inherit;
  cursor: pointer;
}

/* custom.css forces `.slide-menu a { color: #000 !important }` but the back
   link is a <button>, not an <a>, so it never got that override and stayed
   white-on-white (inherited from the theme's text-for-primary-bg utility
   class on the menu <ul>), making the back arrow invisible. */
.slide-menu button.slide-menu__backlink {
  color: #000 !important;
}

.rtl .slide-menu ul ul {
  left: unset;
  right: 100%;
}

.slide-menu__decorator {
  float: right;
}

.rtl .slide-menu__decorator {
  float: left;
}

.slide-menu-arrow {
  font-size: 26px;
}

.slide-menu-arrow-back {
  position: relative;
  top: 3px;
  right: 5px;
  font-size: 26px;
}

.rtl .slide-menu-arrow-back {
  right: unset;
  left: 5px;
}

#test-menu-left p {
  font-size: 110%;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

#sidenav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  cursor: pointer;
  z-index: 100;
}

.sidenav-open .sidenav {
  width: 250px;
}
.sidenav-open #sidenav-overlay {
  width: 100%;
}

.cart_section {
  .container-fluid {
    max-width: 1900px;
    margin: 0 auto;
  }
}