.hdt-input--search {
  --height-input: 5.4rem;
  grid-area: search / search / reset / reset;
  padding-block: 1rem;
  padding-inline: 8.4rem 6.4rem;
}
.hdt-search__btn,
.hdt-reset-search__btn {
  grid-area: search;
  height: 100%;
  display: grid;
  place-items: center;
}
.hdt-search__btn {
  padding-inline-start: .5rem;
  > :where(svg, div) {
    grid-area: 1/-1;
  }
}
.hdt-reset-search__btn {
  grid-area: reset;

  .hdt-s-reset-text {
    display: block;
    font-weight: var(--font-medium);
  }
  .hdt-icon-reset {
    display: none;
  }
  &.hidden {
    display: none !important;
  }
}
.hdt-close-search__btn {
  grid-area: close;
  button {
    width: 4.5rem;
    height: 5.4rem;
    margin-inline-start: 1.5rem;
    display: grid;
    place-content: center;
  }
  svg {
    width: 3rem;
    height: 3rem;
  }
  line {
    stroke-width: .68px;
  }
}
.hdt-search__line {
  grid-area: line;
  width: .1rem;
  height: 3.3rem;
  background-color: var(--color-line-border);
}
.hdt-predictive-search .hdt-icon-spinner {
  width: 1.5rem;
  height: 1.5rem;
  line-height: 0;
}
.hdt-icon-reset {
  height: 1.8rem;
  width: 1.8rem;
  stroke-width: .1rem;
}
.hdt-main-search {
  .hdt-predictive-search, .hdt-container--without-predictive {
    display: block;
    margin-block: 4rem;
    position: relative;
    z-index: 10;
    pointer-events: none;
  }
}
.hdt-main-search-group-title {
  margin-bottom: 4rem;
}
.hdt-results-list-wrap + .hdt-results-list-wrap {
  margin-top: 4rem;
  padding-top: 4rem;
  border-top: 1px solid var(--color-line-border);
}
.hdt-predictive-search__result-tabs {
  .hdt-collection-list {
    .hdt-collection-card__title {
      color: var(--color-btn-secondary);
    }
  }
}

#main-search-form {
  .hdt-predictive-search__result-tabs .hdt-predictive-search__heading {
    opacity: 1;
  }
  #predictive-search-queries {
    margin-bottom: .3rem;
  }
  .hdt-search__btn .hdt-icon-search {
    width: 1.4rem;
  }
}
@media (max-width: 767.98px) {
    .hdt-reset-search__btn.hidden ~ .hdt-search__line {
      opacity: 0;
    }
    .hdt-predictive-search-groups-wrapper {
      padding-top: 3rem;
    }
    .hdt-predictive-search[open] #main-search-form .hdt-predictive-search-wrapp {
       padding: 3rem 1.5rem; 
    }
    #main-search-form {
      .hdt-predictive-search-groups-wrapper--suggestions {
        display: block;
      }
      .hdt-predictive-search__result-tabs {
        display: block;
        overflow: hidden;
      }
    }
    #main-search-results {
      .hdt-predictive-search__result-group {
        margin-bottom: 1.65rem;
      }
    }
    .hdt-input--search {
      --height-input: 5rem;
      grid-area: input / input / search / search;
      padding-block: 1rem;
      padding-inline: 1.7rem 10.1rem;
    }
    .hdt-search__btn .hdt-icon-search {
      width: 1.5rem;
      height: 1.5rem;
    }
    .hdt-close-search__btn button {
      width: 4.4rem;
      height: 5rem;
      margin-inline-start: 0.6rem;
    }
    .hdt-reset-search__btn {
      .hdt-s-reset-text {
        display: none;
      }
      .hdt-icon-reset {
        display: block;
      }
    }
    .hdt-predictive-search__results-list,
    .hdt-predictive-search__result-tabs::part(hdt-tabs-slot) {
      padding-inline: 0;
    }
    .hdt-predictive-search__result-tabs::part(hdt-tabs-header) {
      grid-template-columns: minmax(0, 1fr);
      align-content: start;
      display: grid;
    }
    .hdt-predictive-search__result-tabs::part(hdt-tabs-slot), #predictive-search-results-queries-list {
      display: block;
      column-count: 2;
    }
    #predictive-search-queries {
      margin-bottom: 2rem;
      padding-inline: 0;
    }
    .hdt-predictive-search-status {
      padding: 3rem 1.5rem 0;
    }
    .hdt-predictive-search__search-for-button {
      margin-top: 4rem;
      text-align: center;
    }
    .hdt-main-search .hdt-predictive-search {
      margin-block: 2rem 1.5rem;
    }
    .hdt-main-search__results-list.hdt-facets-horizontal {
      margin-top: -2rem;
      .hdt-facets-wrapper {
        border-top-width: 0;
        > .hdt-facets-container:first-child {
          padding-block: 1.2rem 0.5rem;
        }
      }
    }
  }
  #main-search-form {
    .hdt-predictive-search-wrapp {
      display: none;
      position: absolute;
      left: 0;
      right: 0;
      border: 1px solid var(--color-line-border);
      padding: 5rem 3rem;
      max-width: 100rem;
      margin: 1rem auto 0;
      border-radius: var(--corner-radius-sm);
      background: var(--gradient-background);
      pointer-events: auto;
    }
    .hdt-predictive-search-groups-wrapper,
    .hdt-predictive-search-status:not(.hdt-search--empty-title) {
      padding-top: 0
    }
    .hdt-predictive-search__search-for-button {
      margin-top: 3rem;
    }
    .hdt-search-field {
      display: grid;
      grid: "search line input reset" / 4.5rem 0.1rem minmax(0, 1fr) 6.5rem;
      pointer-events: auto;
      padding-inline: 0;
      height: 5rem;
      max-width: 66rem;
      align-items: center;
      margin: 0 auto;
    }
    .hdt-input--search {
      grid-area: search / search / reset / reset;
      padding-inline: 5.8rem 6.5rem;
      border-radius: var(--rounded-full);
      margin-block-start: 0;
      --height-input: 100%;
      background: color-mix(in srgb,var(--color-foreground),transparent 96%);
    }
  }
  .hdt-predictive-search[open] #main-search-form .hdt-predictive-search-wrapp {
    display: block;
  }
  
  .hdt-main-search-wrap {
    min-height: 80vh;
  }
  .hdt-main-search__result-tabs::part(hdt-tabs-header) {
    margin-bottom: 4.5rem;
    &:after {
      content: '';
      display: block;
      width: 100%;
      height: 1px;
      max-width: 100%;
      position: absolute;
      inset-inline-start: 0;
      background: color-mix(in srgb, var(--color-foreground), transparent 88%);
      z-index: 1;
    }
  }
  .hdt-main-search__result-tabs .hdt-shape__slash:before {
    background-color: color-mix(in srgb, var(--color-foreground), transparent 88%);
  }
  .hdt-main-search__result-tabs::part(hdt-tabs-slot) {
    width: max-content;
    margin-inline: auto;
    display: flex;
    align-items: center;
  }
  .hdt-main-search__heading {
    padding: 2rem;
    position: relative;
    color: var(--color-foreground);
    font-size: var(--text-lg);
    &:after {
      content: '';
      display: block;
      position: absolute;
      bottom: -1px;
      width: calc(100% - 4rem);
      height: 1px;
      background-color: currentColor;
      transform: scaleX(0);
      transform-origin: var(--value-origin-start);
      transition: transform .25s linear;
      z-index: 2;
    }
    &[aria-selected="true"]:after {
      transform: scaleX(1);
    }
  }
  .hdt-search--empty-title {
    row-gap: 1rem;
  }
  
  #main-search-results {
    .hdt-slider__slide {
      flex: 0 0 auto;
    }
  }
  
  .hdt-pagination-wrapper[loading] {
    .hdt-loamore-btn {
      position: relative;

      &::after,
      &::before {
        content: "";
        position: absolute;
        top: calc(50% - 3rem);
        inset-inline-start: calc(50% - 3rem);
        background: var(--color-button-text);
        border-radius: 50%;
        transition: 0.3s;
        opacity: 0;
        width: 6rem;
        height: 6rem;
        animation: pulse 1.5s infinite ease-out;
        grid-area: auto;
      }

      &::before {
        animation-delay: 0;
      }

      &::after {
        animation-delay: 0.75s;
      }
    }
  }
  .hdt-card-page {
    .hdt-card-product__wrapper {
      border-radius: var(--rounded-product-card);
      overflow: hidden;
      display: grid;
    }
    .hdt-card-product__media {
      grid-area: 1 / -1;
    }
    .hdt-card-product__content {
      padding: 1.5rem;
      grid-area: 1 / -1;
      place-self: center;
      text-align: center;
      z-index: 2;
    }
  }
  .hdt-card-page {
    display: grid;
    padding: 2.2rem 2.3rem;
    border-radius: var(--rounded-product-card);
    background: rgb(var(--color-text-rgb) / .04);
    border: 1px solid var(--color-line-border);
    &.hdt-ratio:before {
      grid-area: 1/-1;
    }
    .hdt-icon-page {
      margin: 0 auto .5rem;
    }
    &:after {
      content: "";
      z-index: 0;
      border-top-left-radius: calc(var(--rounded-product-card) * 4);
      border-top-right-radius: calc(var(--rounded-product-card) * 4);
      background: rgb(var(--color-text-rgb) / .04);
      transform-origin: 50% 100%;
      height: 100%;
      transition: transform .3s linear;
      position: absolute;
      inset: auto 0% 0%;
      transform: scale(1,0);
    }
  }
  @media screen and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .hdt-card-page:hover:after {
      transform: scale(1.2, 1.4);
    }
  }
  .hdt-ratio--portrait .hdt-main-search__result-item.hdt-post-card {
    --ratio-percent: 125%;
  }
  .hdt-main-search__result-item .hdt-post-title {
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    font-family: var(--font-body-family);
  }
  .hdt-product-grid-wrapper--line_max .hdt-post-title {
    -webkit-line-clamp: var(--pr-clamp-count, 2);
    -webkit-box-orient: vertical;
    line-clamp: var(--pr-clamp-count, 2);
    display: -webkit-box;
    overflow: hidden;
  }
  .hdt-main-search__result-item .hdt-post-card-media {
    border-radius: var(--rounded-product-card) !important;
  }
  .hdt-product-grid-wrapper--border {
    .hdt-post-card {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--color-line-border);
      border-radius: var(--rounded-product-card);
      .hdt-post-card-media {
        border-radius: 0 !important;
      }
      .hdt-post-card-info {
        background: var(--color-pr-background);
        padding: 1.2rem 2rem 1.6rem !important;
      }
    }
  }


@keyframes pulse {
  0% {
      transform: scale(0);
      opacity: 0.4;
  }
  100% {
      transform: scale(3);
      opacity: 0;
  }
}
@media (min-width: 768px) {
  .hdt-main-search__heading {
    font-size: var(--text-xl)
  }
  #main-search-form #predictive-search-queries {
    padding-bottom: 2rem;
  }
}
@media (min-width: 1150px) {
    .hdt-main-search-wrap.hdt-facets-vertical {
        display: grid;
        grid-template-areas:
        "title title"
        "search search"
        "filter facets"
        "filter main";
        grid-template-rows: auto auto auto 1fr;
        h1 {
            grid-area: title;
        }
        .hdt-predictive-search {
            grid-area: search;
        }
    }
    .hdt--main-search-empty, .hdt-main-search__result-tabs {
        grid-area: filter / filter / filter / main;
    }
    .hdt-results-list-wrap + .hdt-results-list-wrap {
      margin-top: 9rem;
      padding-top: 8.5rem;
    }
}
@media (max-width: 767px) {
    .hdt-main-search__result-tabs::part(hdt-tabs-header) {
        margin-bottom: 2rem;
    }
    .hdt-main-search__heading {
        padding: 1rem 2rem;
    }
}
@media screen and (pointer: fine) and (prefers-reduced-motion: no-preference)  {
    .hdt-pagination-wrapper[loading] .hdt-loamore-btn:hover span:first-child {
        transform: translateY(0);
        opacity: 1;
    }
}