.menu__toggler {
  position: absolute;
  /* top: 35px; */
  right: 60px;
  z-index: 999;
  height: 34px;
  width: 36px;
  outline: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid 2px #555;
  border-radius: 5px;
}
/* .menu__toggler.admin-bar{
	top: 65px;
} */
.menu__toggler:hover{
	border-color: #faaa64;
	transition: .2s;
}
.menu__toggler:hover span,
.menu__toggler:hover span::before,
.menu__toggler:hover span::after{
	background: #faaa64;
	transition: .2s;
}
.menu__toggler span,
.menu__toggler span::before,
.menu__toggler span::after {
  position: absolute;
  content: '';
  width: 28px;
  height: 2px;
  background: #222;
  border-radius: 20px;
  transition: 500ms cubic-bezier(0.77, 0, 0.175, 1);
}
.menu__toggler span::before {
  top: -8px;
}
.menu__toggler span::after {
  top: 8px;
}
.menu__toggler.active > span {
  background: transparent;
}
.menu__toggler.active > span::before, .menu__toggler.active > span::after {
  background: #222;
  top: 0px;
}
.menu__toggler.active > span::before {
  -webkit-transform: rotate(-225deg);
          transform: rotate(-225deg);
}
.menu__toggler.active > span::after {
  -webkit-transform: rotate(225deg);
          transform: rotate(225deg);
}

.menu-toggle-header {
  position: fixed;
  top: 102px;
  right: -30%;
  z-index: 998;
  color: #222;
  background: #f2f2f2;
  width: 30%;
  height: calc(100vh - 102px);
  padding: 20px 30px 30px 30px;
  transition: 300ms right cubic-bezier(0.77, 0, 0.175, 1);
  transform: translateX(100%);
  border-radius: 20px 0 0 20px;
  box-shadow: 0 0px 3px #222;
}
/* .menu-toggle-header.admin-bar {
	top: 110px;
	height: calc(100% - 110px);
} */
.menu-toggle-header ul.menu {
	margin: 0;
	list-style: none;
}
.menu-toggle-header .menu-item-has-children > a{
	border-right: solid 2px #faaa64;
}
.menu-toggle-header .sub-menu {
  display: none;
  list-style: none;
}
/* .menu-toggle-header .sub-menu > li:not(.menu-item-has-children):hover a {
  color: #a52a2a;
} */
.menu-toggle-header .menu-item-has-children > .sub-menu {
  transition: all 0.3s ease;
}
.menu-toggle-header li {
  white-space: nowrap;
  margin: 5px 0;
}
.menu-toggle-header li a{
  padding: 0 15px;
  display: block;
  line-height: 2.5;
}
.menu-toggle-header li a:hover{
	background: #faaa64;
	color: #fff;
	border-radius: 16px;
	transition: all .2s;
}
@media only screen and (max-width: 600px) {
	.menu-toggle-header {
		width: 250px;
		left: -250px;
		padding: 50px;
	}
	.header-right_section,
	.menu__toggler	{
		display: none !important;
	}
}
.menu-toggle-header.active {
	right: 0;
	transform: translateX(0);
}
.menu-toggle-header p {
	font-size: 1.4rem;
	margin-bottom: 1rem;
}

/*
 * BASIC STYLES
 */

/* ------------ card menu -----------------------*/
.header-right_section {
  display: flex;
  gap: 15px;
  margin-right: 35px;
}
.header-right_section .signin{
  color: #222;
  background-color: #faaa64;
}
.header-right_section .signin:hover{
  color: #fff;
}
.header-right_section img{
	filter: brightness(0);
}
.header-right_section img:hover{
	filter: brightness(1);
	transition: all .2s;
}
.badge-center {
  display: flex;
  align-items: center;
}
.dropbtn {
  background-color: transparent;
  padding: 0;
}
.dropbtn .bg{
  /* animation: blink 1.2s ease infinite; */
  background: #008000;
  width: 15px;
  height: 15px;
  position: absolute;
  border-radius: 50%;
  right: -5px;
  bottom: -3px;
  border: 3px solid #f2f2f2;
  z-index: 1;
}

.dropdown {
  position: relative;
  display: flex;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f2f2f2;
  min-width: max-content;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 9;
  border-radius: 5px;
  top: 35px;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: flex;
  gap: 10px;
}

#cartsBadge {
  position: absolute;
  right: -15px;
  top: -10px;
  border: 3.5px solid #f2f2f2;
  border-radius: 5px;
}

.dropdown-content a:hover {background-color: #faaa64;}

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

.dropdown:hover .dropbtn {background-color: transparent;}


@keyframes blink {
  from { opacity: 1; transform: scale3d(1,1,1); }
  to { opacity: 0; transform: scale3d(1.5,1.5,1); }
}