.shopify-section--search {
  position: relative;
  inline-size: 100%;
  block-size: 100%;
  overflow: hidden;
  z-index: 30;

  & zag-search {
    display: flex;
    flex-flow: column nowrap;
    block-size: 100%;
    inline-size: 100%;
    max-inline-size: 56.25rem;
    margin: 0 auto;
  }

  & .search-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    border-block-end: 0.0625rem solid var(--grey-200-color);
  }

  & .search-title {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    inline-size: 100%;
    margin-inline: auto;

    & svg {
      inline-size: 0.625rem;
      block-size: 0.625rem;
    }
  }

  & .close-button {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    color: var(--black-color);
    background-color: transparent;
    border: 0.0625rem solid var(--black-color);
    cursor: pointer;
    transition: 0.15s ease-out;

    & svg {
      inline-size: 0.5rem;
      block-size: 0.5rem;
      transition: 0.15s ease-out;
    }

    &:hover {
      opacity: 0.6;
    }
  }

  & .search-input-container {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: flex-start;
    inline-size: calc(100% - 3rem);
    margin-block-start: 0.75rem;
    margin-inline: auto;
    border-block-end: 0.0625rem solid var(--black-color);

    @media (width >= 60rem) {
      inline-size: calc(100% - 4rem);
    }

    & input {
      inline-size: 100%;
      font-size: 0.875rem;
      padding: 0.75rem;
      border: none;
      appearance: none;
    }

    & .confirm-search-button {
      position: absolute;
      block-size: 1rem;
      inline-size: 1rem;
      inset-block: 50%;
      inset-inline-end: 0.75rem;
      translate: 0 -50%;
      color: var(--black-color);
      border: none;
      appearance: none;
      cursor: pointer;
    }

    & svg {
      block-size: 1rem;
      inline-size: 1rem;
    }
  }

  & .search-body {
    block-size: 100%;
    overflow-y: auto;

    @media (width >= 60rem) {
      /* max-block-size: calc(
        100svh - var(--header-inset-block-start) - var(--header-block-size) -
          var(--mega-menu-inset-block-start) - 19rem
      ); */
    }
  }

  & .popular-search-container {
    margin-block-start: 2.5rem;
    padding-inline: 1.5rem;

    @media (width >= 60rem) {
      padding-inline: 2rem;
    }
  }

  & .popular-collections {
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.25rem;
    margin-block-start: 1.25rem;
  }

  & .popular-collection {
    font-size: 1.125rem;
  }

  & .search-tabs {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 3rem;
    inline-size: calc(100% - 4rem);
    margin-block-start: 1rem;
    margin-inline: auto;
    border-block-end: 0.0625rem solid var(--grey-200-color);

    @media (width < 60rem) {
      display: none;
    }
  }

  & [data-resource-type-count="1"] .search-tabs {
    display: none;
  }

  & .search-tab {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    text-align: center;
    block-size: 2.5rem;
    cursor: pointer;

    &::after {
      content: "";
      display: block;
      position: absolute;
      inset-inline: 0;
      inset-block-end: 0;
      inline-size: 100%;
      block-size: 0.25rem;
      background-color: transparent;
      transition: 0.15s ease-out;
    }

    &:hover::after,
    &[aria-selected="true"]::after {
      background-color: var(--black-color);
    }
  }

  & .resource-results-container {
    margin-block: 1.5rem;

    @media (width >= 60rem) {
      margin-block-end: 2rem;
    }
  }

  & .results-title {
    padding-inline: 1.5rem;

    @media (width >= 60rem) {
      display: none;
      padding-inline: 2rem;
    }
  }

  & [data-resource-type-count="1"] .results-title {
    display: grid;
  }

  & .search-results {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-block-start: 1rem;
    padding-inline: 1.5rem;

    @media (width >= 30rem) {
      grid-template-columns: repeat(3, 1fr);
    }

    @media (width >= 60rem) {
      grid-template-columns: repeat(4, 1fr);
      padding-inline: 2rem;
    }
  }

  & .search-results--product {
    margin-block: 1rem 2rem;
    padding-inline: 1.5rem;

    @media (width >= 60rem) {
      padding-inline: 2rem;
    }

    & .media-container {
      margin-block: 0rem;
      min-block-size: 17.5rem;
      max-block-size: 17.5rem;
    }

    & img:first-child {
      min-block-size: 17.5rem;
      max-block-size: 17.5rem;
      margin-block-start: 0.75rem;
      /* padding-block: 1rem; */
    }

    & .content-container {
      inline-size: calc(100% + 3rem);
      margin-inline: -1.5rem;
    }

    & .title {
      font-size: 0.875rem;
    }

    & zag-price {
      font-size: 0.75rem;
    }

    & .label {
      inset-block-start: 1.5rem;
    }
  }

  & .search-results--page,
  & .search-results--article {
    grid-template-columns: 1fr;
  }

  & .search-result--page,
  & .search-result--article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    inline-size: 100%;
    transition: 0.15s ease-out;

    &:hover {
      opacity: 0.6;
    }
  }

  @media (width >= 60rem) {
    &
      .search-body:not([data-resource-type-count="0"]):not(
        [data-resource-type-count="1"]
      ) {
      & .search-results {
        display: none;
      }

      &:has(.search-tab--product[aria-selected="true"])
        .search-results--product {
        display: grid;
      }

      &:has(.search-tab--collection[aria-selected="true"])
        .search-results--collection {
        display: grid;
      }

      &:has(.search-tab--page[aria-selected="true"]) .search-results--page {
        display: grid;
      }

      &:has(.search-tab--article[aria-selected="true"])
        .search-results--article {
        display: grid;
      }
    }
  }

  & .no-search-results {
    margin-block-start: 2.5rem;
    padding-inline: 1.5rem;
    font-size: 1.125rem;

    @media (width >= 60rem) {
      padding-inline: 2rem;
    }
  }
}

html[data-modifiers*="template:search"] .shopify-section--search {
  & zag-search {
    inline-size: calc(100% - var(--zag-gutter) * 2);
    max-inline-size: 90rem;
  }

  & .search-header {
    display: block;
    inline-size: calc(100% - var(--margin-inline-start));
    margin-inline-start: var(--margin-inline-start);
    padding-inline: var(--zag-gutter);
    padding-block-end: 4.5rem;
    border-block-end: none;

    --margin-inline-start: 0rem;

    @media (width >= 60rem) {
      --margin-inline-start: 11.75rem;
      padding-block-end: 6rem;
    }

    @media (width >= 70rem) {
      --margin-inline-start: 16.75rem;
    }

    @media (width >= 80rem) {
      --margin-inline-start: 28.75rem;
      padding-inline: 0rem;
    }
  }

  & h1 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;

    & svg {
      inline-size: 0.625rem;
      block-size: 0.625rem;
    }
  }

  & .search-input-container {
    inline-size: 100%;
    margin-block-start: 2.5rem;
    margin-inline: 0rem;
  }

  & .clear-search-query {
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    inset-block-start: 50%;
    inset-inline-end: 0.75rem;
    translate: 0 -50%;
    color: var(--grey-400-color);
    transition: 0.15s ease-out;

    &:hover {
      opacity: 0.6;
    }
  }

  & .result-grid {
    display: flex;
    position: relative;
    flex-flow: column nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    inline-size: 100%;
    max-inline-size: var(--max-inline-size, 120rem);
    margin-inline: auto;
    margin-block-end: 2.5rem;

    @media (width >= 60rem) {
      margin-block-end: 3.5rem;
    }
  }

  & .grid-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    inline-size: 100%;
    margin-block-end: 2rem;

    @media (width >= 60rem) {
      margin-block-end: 2.5rem;
    }
  }

  & .show-filters {
    position: relative;
    transition: 0.15s ease-out;

    &:hover {
      opacity: 0.6;
    }
  }

  & .sort-options-container {
    position: relative;

    &::before {
      content: "";
      display: block;
      position: absolute;
      block-size: 100%;
      inline-size: 0.0625rem;
      inset-block: 0rem;
      inset-inline-start: -0.5rem;
      background-color: var(--grey-300-color);
      pointer-events: none;
    }
  }

  & .show-sort-options {
    position: relative;
    transition: 0.15s ease-out;

    &:hover {
      opacity: 0.6;
    }
  }

  & .sort-options {
    display: flex;
    position: absolute;
    flex-flow: column nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.75rem;
    min-inline-size: 18rem;
    inset-block-start: 1.5rem;
    inset-inline-start: 50%;
    padding: 1rem 1.5rem;
    translate: -50% 0;
    font-size: 0.75rem;
    background-color: var(--white-color);
    color: var(--black-color);
    border: 0.0625rem solid var(--grey-100-color);
    border-radius: 0.125rem;
    visibility: hidden;
    opacity: 0;
    transition: 0.15s ease-out;
    z-index: 1000;
  }

  & .sort-option {
    position: relative;
    inline-size: 100%;
    text-align: left;

    &[aria-selected="true"] {
      text-decoration: underline;
    }
  }

  & .show-sort-options[data-active] + .sort-options {
    visibility: visible;
    opacity: 1;
  }

  & .item-count {
    margin-inline-start: auto;
  }

  & .filters-popin-container {
    display: flex;
    position: fixed;
    align-items: flex-start;
    justify-content: flex-end;
    inline-size: 100%;
    block-size: 100%;
    inset: 0;
    transition: 0.15s ease-out;
    z-index: 20;

    pointer-events: none;
  }

  & [data-modifiers*="filters-popin"] .filters-popin-container {
    pointer-events: initial;

    @media (width >= 40rem) {
      background-color: color-mix(in srgb, var(--black-color) 30%, transparent);
      cursor: pointer;
    }
  }

  & .filters-popin {
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    inline-size: 100%;
    block-size: 100%;
    inset-block-start: 0rem;
    inset-inline-end: 0rem;
    translate: 120% 0%;
    background-color: var(--white-color);

    cursor: initial;
    transition: 0.15s ease-out;

    @media (width >= 40rem) {
      max-inline-size: 30rem;
      margin-inline-end: 3.5rem;
      block-size: calc(100svh - 6rem);
      margin-block: auto;
      border-radius: 0.25rem;
    }

    & .header {
      display: flex;
      position: relative;
      align-items: center;
      justify-content: space-between;
      inline-size: 100%;
      padding: 1.5rem;
      background-color: var(--orange-color);
      color: var(--white-color);

      @media (width >= 40rem) {
        border-radius: 0.25rem 0.25rem 0 0;
      }
    }

    & .filters {
      padding-block: 1.5rem;
    }

    & .applied-filters {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 1.5rem 1rem;

      &[data-applied-filter-count="0"] .applied-filter-cards {
        display: none;
      }
    }

    & .applied-filters-title {
      grid-column: span 1;
      font-size: 0.75rem;
      line-height: 1.35;
      font-weight: 500;

      & span {
        display: inline;
      }
    }

    & .clear-filters {
      grid-column: span 1;
      position: relative;
      font-size: 0.75rem;
      line-height: 1.35;
      font-weight: 500;
      transition: 0.15s ease-out;

      &:hover {
        opacity: 0.6;
      }
    }

    & .applied-filter-cards {
      grid-column: span 2;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.5rem;
    }

    & .applied-filter-card {
      grid-column: span 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.75rem 1rem;
      border: 0.0625rem solid var(--black-color);
      border-radius: 0.125rem;
      appearance: none;

      &[aria-selected="false"] {
        display: none;
      }

      & p {
        font-size: 0.75rem;
        font-weight: 500;
      }

      & .remove-filter-value {
        position: relative;
        appearance: none;
        transition: 0.15s ease-out;

        &:hover {
          opacity: 0.6;
        }
      }

      & svg {
        position: relative;
        inline-size: 0.625rem;
        block-size: 0.625rem;
      }
    }

    & .filters {
      inline-size: 100%;
      block-size: 100%;
      padding-inline: 1.5rem;
      overflow-y: auto;
    }

    & .filter {
      margin-block-start: 1.5rem;
      padding-block-start: 1.5rem;
      border-block-start: 0.0625rem solid var(--grey-200-color);
      transition: 0.15s ease-out;

      &:first-child {
        margin-block-start: 0;
        border-block-start: none;
      }
    }

    & .title {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 0.5rem;

      & svg {
        block-size: 0.625rem;
        inline-size: 0.625rem;
      }
    }

    & .values {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.5rem;
      margin-block-start: 1rem;
    }

    & .filter-value {
      block-size: 2.5rem;
      font-size: 0.75rem;
      font-weight: 500;
      border: 0.0625rem solid var(--grey-300-color);
      border-radius: 0.125rem;
      appearance: none;
      transition: 0.15s ease-out;

      &:hover {
        border-color: var(--black-color);
      }

      &[aria-selected="true"] {
        border-color: var(--black-color);
      }
    }

    & .footer {
      inline-size: 100%;
      margin-block-start: auto;
      padding: 1rem 1.5rem;
      border-block-start: 0.0625rem solid var(--grey-100-color);

      @media (width >= 40rem) {
        padding: 1.5rem 2rem;
      }
    }

    & .confirm-filter-selection {
      inline-size: 100%;
    }
  }

  & .popin-close {
    position: relative;

    & svg {
      inline-size: 0.75rem;
      block-size: 0.75rem;
      transition: 0.15s ease-out;
    }

    &:hover {
      opacity: 0.6;
    }
  }

  & [data-modifiers*="filters-popin"] .filters-popin {
    translate: 0% 0%;
    transition-duration: 0.3s;
  }

  & .product-grid-container {
    display: flex;
    position: relative;
    flex-flow: column nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    inline-size: 100%;
  }

  & .product-grid {
    container-type: inline-size;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem 1rem;
    inline-size: 100%;

    @container (width >= 37.5rem) {
      grid-template-columns: repeat(2, 1fr);
    }

    @container (width >= 60rem) {
      grid-template-columns: repeat(3, 1fr);
    }

    &:not([data-page-number="last"])[data-edito-card-count="1"] > :last-child {
      display: none;
    }

    &:not([data-page-number="last"])[data-edito-card-count="2"]
      > :is(:nth-last-child(1), :nth-last-child(2)) {
      display: none;
    }
  }

  & .product-card {
    inline-size: 100%;
  }

  & .grid-footer {
    margin: 2.5rem auto 0;

    @media (width >= 60rem) {
      margin-block-start: 3.5rem;
    }
  }

  & .product-count {
    font-size: 0.875rem;
    text-align: center;

    & span {
      display: inline;
    }
  }

  & .progress-bar {
    position: relative;
    inline-size: 10rem;
    block-size: 0.25rem;
    margin-block-start: 0.5rem;
    margin-inline: auto;
    background-color: var(--grey-300-color);
    border-radius: 0.25rem;
  }

  & .progress-bar-value {
    position: absolute;
    block-size: 100%;
    inline-size: var(--progress-percentage);
    inset: 0;
    background-color: var(--black-color);
    border-radius: inherit;
    transition: 0.15s ease-out;
  }

  & zag-spinner {
    display: none;
    margin-block-start: 1.5rem;
  }

  & > [data-modifiers*="loading"] zag-spinner {
    display: block;
  }

  & .grid-footer .shopify-block--button {
    max-inline-size: 100%;
    margin-block-start: 1.5rem;

    & button {
      inline-size: 20rem;
      max-inline-size: 100%;
      justify-content: center;
      margin: 0 auto;

      @media (width >= 37.5rem) {
        inline-size: 12rem;
      }
    }
  }

  & > [data-modifiers*="loading"] .grid-footer .shopify-block--button {
    display: none;
  }
}

/* Hide header when bundle popin is opened */
[data-modifiers*="template:collection"]:has([data-modifiers*="filters-popin"])
  zag-header {
  visibility: hidden;
  opacity: 0;
}

dual-handle-range {
  margin-block-start: 1rem;

  & .range-values {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
  }

  & .range-value {
    position: relative;
    font-size: 0.75rem;

    &::after {
      content: attr(data-value) " " attr(data-unit);
    }
  }

  & .range-slider {
    position: relative;
    block-size: 0.25rem;
    margin-block-start: 1rem;
  }

  & .range-track {
    position: absolute;
    block-size: 100%;
    inline-size: 100%;
    background-color: var(--grey-100-color);
    border-radius: 0.25rem;
  }

  & .range-fill {
    position: absolute;
    block-size: 100%;
    inline-size: var(--range-fill-size, 0%);
    inset-inline-start: var(--range-fill-offset, 0%);
    background-color: var(--black-color);
    transition: 0.15s ease-out;
  }

  & .range-handle {
    position: absolute;
    block-size: 0.75rem;
    inline-size: 0.75rem;
    background-color: var(--white-color);
    border: 0.0625rem solid var(--black-color);
    border-radius: 50%;
    translate: 0% calc(0.125rem - 50%);
    transition: 0.15s ease-out;

    &:hover {
      scale: 1.1;
    }

    &:active {
      scale: 1.2;
    }

    &::after {
      content: "";
      position: absolute;
      inline-size: calc(100% + 1rem);
      block-size: calc(100% + 1rem);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    &.range-handle--min {
      inset-inline-start: var(--min-handle-offset, 0%);
    }

    &.range-handle--max {
      inset-inline-start: var(--max-handle-offset, 100%);
    }
  }
}