.header-search {
  /*
  * @ Search Icon Header
  */
  /*
  * @ Popup
  */
  --search-offset: 150px;
}
.header-search-trigger {
  transition: all 0.2s ease-in-out;
  padding: 8px;
  margin-left: 12px;
  color: #525e21;
}
@media (min-width: 777px) {
  .header-search-trigger {
    border-radius: 100%;
  }
  .header-search-trigger:hover {
    background: var(--wp--preset--color--tertiary);
  }
}
@media (max-width: 777px) {
  .header-search-trigger {
    padding: 4px;
    display: none;
  }
}
.header-search-trigger.active svg {
  opacity: 0;
}
.header-search-trigger.active .icon-container {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23525e21'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 18 18 6M6 6l12 12' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
}
@media (max-width: 777px) {
  .header-search {
    --search-offset: 0px;
  }
}
.header-search.popup {
  z-index: 10;
  position: absolute;
  top: var(--search-offset);
  align-items: flex-start;
}
.header-search.popup .popup-inner {
  margin: 0;
  margin-top: -70px;
  max-width: inherit;
  border-top: 1px solid rgba(85, 85, 85, 0.33);
  border-radius: 0;
  /*
  * Search inner
  */
}
@media (max-width: 777px) {
  .header-search.popup .popup-inner {
    margin-top: 0;
    padding-top: 5vh;
  }
  .header-search.popup .popup-inner-close {
    display: flex;
    display: flex !important;
    top: 0;
    right: 0;
  }
  .header-search.popup .popup-inner-content {
    min-height: 50vh;
  }
}
.header-search.popup .popup-inner-content {
  min-height: 300px;
  max-height: inherit;
  overflow: inherit;
}
.header-search.popup .popup-inner-close {
  display: none;
}
.header-search.popup .popup-inner .global-search {
  /*
  * Search form
  */
  /*
  * Result
  */
  /*
  * Popular Wrapper
  */
  /*
  * Has filtered
  */
}
@media (max-width: 777px) {
  .header-search.popup .popup-inner .global-search {
    padding-left: 0;
    padding-right: 0;
  }
}
.header-search.popup .popup-inner .global-search .search-filter-field .search-filter-field__input {
  border-radius: 100px;
  height: 48px;
  border: solid 1px rgba(85, 85, 85, 0.33);
}
.header-search.popup .popup-inner .global-search .search-filter-query {
  margin-top: 32px;
}
.header-search.popup .popup-inner .global-search .search-filter-query > ul {
  max-height: 300px;
  overflow: scroll;
  gap: 16px;
  display: grid;
}
.header-search.popup .popup-inner .global-search .search-filter-query > ul p {
  margin: 0;
}
.header-search.popup .popup-inner .global-search .most-popular-wrapper {
  margin-top: 24px;
}
.header-search.popup .popup-inner .global-search .most-popular-wrapper .navigation-items-item-link {
  --color: var(--wp--preset--color--secondary);
}
.header-search.popup .popup-inner .global-search .most-popular-wrapper ul {
  align-items: flex-start;
  gap: 12px;
}
.header-search.popup .popup-inner .global-search .most-popular-wrapper ul .navigation-items-item-link {
  padding: 0;
}
.header-search.popup .popup-inner .global-search .most-popular-wrapper ul > a {
  padding: 0;
}
.header-search.popup .popup-inner .global-search:not(.hide-popular) .search-filter-query {
  display: none;
}
.header-search.popup .popup-inner .global-search.hide-popular .most-popular-wrapper {
  display: none;
}
.header-search.popup .popup-inner .navigation {
  padding: 0;
  --color: #45501a;
  --fontSize: 16px;
  --font-weight: 500;
  --colorHover: #45501a;
  --colorActive: #45501a;
}
.header-search.popup .popup-bg-color {
  top: var(--search-offset);
  position: absolute;
  height: 100vh;
}

@media (max-width: 777px) {
  .header-search-trigger.inside-nav {
    display: flex !important;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
    margin-top: 6px;
    background-color: white;
    color: var(--wp--preset--color--primary) !important;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 0px;
    font-weight: 300;
    font-size: 14px;
  }
  .header-search-trigger.inside-nav .icon-container {
    order: -1;
  }
  .header-search-trigger.inside-nav .icon-container svg {
    fill: none !important;
  }
}
.header-search.popup .popup-inner .global-search .search-filter-field .search-filter-field__input {
  width: 100%;
}