@layer blocks {
  .search-wrapper:has(.sticky-grid) {
    background-color: var(--theme-surface-primary);
  }
  .search {
    box-sizing: content-box;
    margin-inline: auto;
    max-width: 100%;
    padding-inline: 1.5rem;
  }
  @media (min-width: 768px) {
    .search {
      padding-inline: 3rem;
    }
  }
  @media (min-width: 1024px) {
    .search {
      max-width: 120rem;
      padding-inline: 5rem;
    }
  }
  @media (min-width: 1024px) {
    .search {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 0.5rem;
    }
  }
  @media (min-width: 1024px) {
    .search .sticky-grid {
      grid-column: 1/-1;
    }
  }
  @media (max-width: 1023px) {
    .search .sticky-grid__section {
      transition: top 0.25s cubic-bezier(0.55, 0.06, 0.68, 0.19);
    }
  }
  @media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
    .search .sticky-grid__section {
      transition: none;
    }
  }
  @media (max-width: 1023px) {
    :root[data-header-scroll-state=hidden] .search .sticky-grid__section {
      transition: none;
    }
  }
  @media (max-width: 1023px) {
    .search.search--scrolled .sticky-grid--sticky-mobile .sticky-grid__section--1 {
      padding-block: 0.5rem;
    }
    .search.search--scrolled .sticky-grid--sticky-mobile .search-panel {
      --search-panel-gap: 0.5rem;
    }
  }
  @media (min-width: 1024px) {
    .search .sticky-grid__section--2 {
      display: grid;
      grid-template-columns: subgrid;
    }
  }
  @media (max-width: 1023px) {
    .search-panel__filter-header {
      max-height: 2.5rem;
      overflow: hidden;
      opacity: 1;
      transition: max-height 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), margin 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
    }
  }
  @media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
    .search-panel__filter-header {
      transition: none;
    }
  }
  @media (max-width: 1023px) {
    .search--scrolled .search-panel__filter-header {
      max-height: 0;
      opacity: 0;
      margin-block-end: calc(-1 * 1rem);
    }
  }
  @media (min-width: 1024px) {
    .search-results-area {
      display: grid;
      grid-template-columns: subgrid;
      grid-column: 1/-1;
    }
    .search-results-area > * {
      grid-column: 1/-1;
    }
  }
  .search-color-section:not([hidden]) ~ .search-archived-color-section,
  .search-color-section:not([hidden]) ~ .search-other-section,
  .search-archived-color-section:not([hidden]) ~ .search-other-section {
    border-top: 1px solid var(--theme-border-secondary);
    margin-top: 4rem;
    padding-top: 4rem;
  }
}