@layer blocks {
  .search {
    padding: var(--space-s) 0 var(--space-2xs);
    border-bottom: var(--border-width-thin) var(--border-style) var(--color-border);
    position: sticky;
    top: var(--sticky-offset, 0);
    background: var(--color-bg);
    z-index: 50;
  }

  @media (max-width: 680px) {
    .search {
      border-bottom: none;
      border-top: var(--border-width-thin) var(--border-style) var(--color-border);
      padding: var(--space-2xs) 0 var(--space-s);
      position: fixed;
      top: auto;
      left: var(--wrapper-padding-inline);
      right: var(--wrapper-padding-inline);
      bottom: 0;
      z-index: 50;
    }
  }
}