.wp-block-surge-blocks-hamburger-toggle {
  display: inline-block;
}

.wp-block-surge-blocks-hamburger-toggle.has-store-search {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.wp-block-surge-blocks-hamburger-toggle .hamburger {
  padding: 0px;
  box-sizing: border-box;
  background-color: var(--hamburger-bg-color, #2c3e50);
  text-align: center;
  display: inline-block;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.wp-block-surge-blocks-hamburger-toggle .hamburger .line {
  width: 40px;
  height: 5px;
  background-color: var(--hamburger-line-color, #ecf0f1);
  display: block;
  margin: 8px auto;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.wp-block-surge-blocks-hamburger-toggle .hamburger:hover {
  cursor: pointer;
}

.wp-block-surge-blocks-hamburger-toggle .hamburger-toggle-store-search {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.wp-block-surge-blocks-hamburger-toggle .store-search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: var(--store-search-icon-color, #ecf0f1);
  background: transparent;
  cursor: pointer;
}

.wp-block-surge-blocks-hamburger-toggle .store-search-toggle:hover,
.wp-block-surge-blocks-hamburger-toggle .store-search-toggle:focus-visible {
  color: var(--store-search-icon-hover-color, #2c3e50);
  outline: none;
}

.wp-block-surge-blocks-hamburger-toggle .store-search-icon {
  display: block;
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.wp-block-surge-blocks-hamburger-toggle .store-search-form {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  width: min(220px, calc(100vw - 24px));
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.wp-block-surge-blocks-hamburger-toggle .hamburger-toggle-store-search.is-search-open .store-search-form {
  display: block;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.wp-block-surge-blocks-hamburger-toggle .store-search-field {
  box-sizing: border-box;
  width: 100%;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid #d8d8d8;
  border-radius: 999px;
  color: #111;
  background: #fff;
  font-size: 14px;
  line-height: 1.2;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.wp-block-surge-blocks-hamburger-toggle .store-search-field:focus {
  border-color: #111;
  outline: none;
}

/* ONE */
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-1.is-active .line:nth-child(2) { opacity: 0; }
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-1.is-active .line:nth-child(1) { transform: translateY(13px) rotate(45deg); }
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-1.is-active .line:nth-child(3) { transform: translateY(-13px) rotate(-45deg); }

/* TWO */
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-2.is-active .line:nth-child(1) { transform: translateY(13px); }
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-2.is-active .line:nth-child(3) { transform: translateY(-13px); }

/* THREE */
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-3.is-active .line:nth-child(1),
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-3.is-active .line:nth-child(3) { width: 40px; }
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-3.is-active .line:nth-child(1) { transform: translateX(-10px) rotate(-45deg); }
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-3.is-active .line:nth-child(3) { transform: translateX(-10px) rotate(45deg); }

/* FOUR */
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-4.is-active .line:nth-child(1),
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-4.is-active .line:nth-child(3) { width: 40px; }
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-4.is-active .line:nth-child(1) { transform: translateX(10px) rotate(45deg); }
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-4.is-active .line:nth-child(3) { transform: translateX(10px) rotate(-45deg); }

/* FIVE */
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-5.is-active { transform: rotate(90deg); }
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-5.is-active .line:nth-child(2) { transition: none; opacity: 0; }
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-5 .line:nth-child(2) { transition-delay: 0.3s; }
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-5.is-active .line:nth-child(1),
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-5.is-active .line:nth-child(3) { width: 35px; transform-origin: right; }
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-5.is-active .line:nth-child(1) { transform: translateY(15px) rotate(45deg); }
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-5.is-active .line:nth-child(3) { transform: translateY(-15px) rotate(-45deg); }

/* SIX */
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-6.is-active { transition: all 0.3s ease-in-out; transition-delay: 0.6s; transform: rotate(45deg); }
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-6.is-active .line:nth-child(2) { width: 0px; }
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-6.is-active .line:nth-child(1),
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-6.is-active .line:nth-child(3) { transition-delay: 0.3s; }
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-6.is-active .line:nth-child(1) { transform: translateY(13px); }
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-6.is-active .line:nth-child(3) { transform: translateY(-13px) rotate(90deg); }

/* SEVEN */
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-7.is-active .line:nth-child(1) { width: 30px; }
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-7.is-active .line:nth-child(2) { width: 40px; }
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-7.is-active .line { transform: rotate(30deg); }

/* EIGHT */
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-8.is-active .line:nth-child(2) { opacity: 0; }
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-8.is-active .line:nth-child(1) { transform: translateY(13px); }
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-8.is-active .line:nth-child(3) { transform: translateY(-13px) rotate(90deg); }

/* NINE */
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-9 { position: relative; transition: all 0.3s ease-in-out; }
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-9.is-active { transform: rotate(45deg); }
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-9:before {
  content: ""; position: absolute; box-sizing: border-box; width: 70px; height: 70px;
  border: 5px solid transparent; top: calc(50% - 35px); left: calc(50% - 35px);
  border-radius: 100%; transition: all 0.3s ease-in-out;
}
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-9.is-active:before { border: 5px solid var(--hamburger-line-color, #ecf0f1); }
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-9.is-active .line { width: 35px; }
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-9.is-active .line:nth-child(2) { opacity: 0; }
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-9.is-active .line:nth-child(1) { transform: translateY(13px); }
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-9.is-active .line:nth-child(3) { transform: translateY(-13px) rotate(90deg); }

/* TEN */
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-10 { transition: all 0.3s ease-in-out; }
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-10.is-active { transform: rotate(90deg); }
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-10.is-active .line:nth-child(1) { width: 30px; }
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-10.is-active .line:nth-child(2) { width: 40px; }

/* ELEVEN */
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-11 { transition: all 0.3s ease-in-out; }
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-11.is-active { animation: smallbig 0.6s forwards; }
@keyframes smallbig {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0); }
}
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-11.is-active .line:nth-child(1),
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-11.is-active .line:nth-child(2),
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-11.is-active .line:nth-child(3) { transition-delay: 0.2s; }
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-11.is-active .line:nth-child(2) { opacity: 0; }
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-11.is-active .line:nth-child(1) { transform: translateY(13px) rotate(45deg); }
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-11.is-active .line:nth-child(3) { transform: translateY(-13px) rotate(-45deg); }

/* TWELVE */
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-12.is-active .line:nth-child(1) { opacity: 0; transform: translateX(-100%); }
.wp-block-surge-blocks-hamburger-toggle .hamburger.style-12.is-active .line:nth-child(3) { opacity: 0; transform: translateX(100%); }