.search-modal--open {
    overflow: hidden;
  }
  
  .search-modal--open .transition-content,
  .search-modal--open .announcement-bar,
  .search-modal--open .header-wrapper {
    padding-inline-end: var(--scrollbar-width);
  }
  
  .search-modal--open .header-wrapper {
    z-index: 30;
  }
  
  .search-modal {
    z-index: 30;
    display: block;
    height: 100%;
    transition: height var(--duration-long) ease;
  }
  
  .search-modal .page-width,
  .search-modal__content {
    height: 100%;
  }
  
  details[open] > .search-modal {
    animation: fade-in var(--duration-default) ease;
    height: 120px;
  }
  
  details[open] > .search-modal .modal-overlay {
    display: block;
    animation: fade-in var(--duration-default) ease;
  }
  
  details[open] > .search-modal .modal-overlay::after {
    content: '';
    position: absolute;
    background-color: rgba(var(--color-overlay), 0.5);
    top: 100%;
    left: 0;
    right: 0;
    height: 100vh;
  }
  
  .js details[open] > .search-modal .modal-overlay::after {
    cursor: url(cross.svg),url(cross.png),zoom-out;
  }
  
  .search-modal__form {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  
  .no-js .search-modal__form {
    justify-content: center;
  }
  
  .search-modal__form .field {
    flex: 0 0 auto;
    align-self: center;
    width: 100%;
    display: flex;
    align-items: center;
    background-color: rgba(var(--color-foreground), 0.08);
    border-radius: 50rem;
    column-gap: 1.5rem;
    padding: 0 1.2rem;
    margin-top: 40px;
  }
  
  .shopify-section-header-sticky:not(.shopify-section-header-hidden) .search-modal__form .field {
    margin-top: calc(calc(var(--header-height) - 4rem) / 2);
  }
  
  @media screen and (min-width: 750px) {
    .search-modal__form .field {
      width: 600px;
      max-width: 100%;
    }
  }
  
  .search-modal__form .search__input {
    padding: 0;
    font-size: 16px;
    box-shadow: none;
    border: none;
    height: 40px;
    min-height: auto;
  }
  
  .search-modal__form .search__button {
    color: rgb(var(--color-foreground));
    background: none;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  
  .search-modal__form .search__button .header-icon {
    width: 15px;
    overflow: visible;
    stroke-width: var(--icon-weight);
  }
  
  .no-js .search-modal__form .search__button[type="button"] {
    display: none;
  }
  
  .search-modal__form .search__button[type="button"] {
    min-width: 24px;
    min-height: 24px;
    border-radius: 50%;
    background-color: rgb(var(--color-background));
  }
  
  .search-modal__form .search__button[type="button"] .header-icon {
    width: 12px;
    stroke-width: calc(var(--icon-weight) - 0.1px);
    transition: transform var(--duration-default) ease;
  }
  
  @media screen and (hover: hover) {
    .search-modal__form .search__button[type="button"]:hover .header-icon {
      transform: scale(0.8) rotate(90deg);
    }
  }
  
  .search__recommendation {
    z-index: 1;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    padding: 2rem 0;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    background-color: rgb(var(--color-background));
  }
  
  .search__recommendation a {
    display: block;
    text-decoration: none;
    padding: 0.5rem 3rem;
    color: rgb(var(--color-link));
    line-height: calc(1 + 0.6 / var(--font-body-scale));
    transition: background-color var(--duration-default) ease;
  }
  
  @media screen and (hover: hover) {
    .search__recommendation a:hover {
      background-color: rgba(var(--color-foreground), 0.08);
    }
  }