.filter-control {
  height: -moz-max-content;
  height: max-content;
  top: calc(var(--header-height) - 2px);
  z-index: 99;
  position: sticky;
  margin-bottom: 1.5rem;
}@media (min-width: 1024px) {.filter-control {
    display: none;
  }
}

  .filter-control::before {
    content: '';
    background: rgba(67, 67, 67, 0.5);
    -webkit-backdrop-filter: blur(60px);
            backdrop-filter: blur(60px);
    z-index: -1;
    position: absolute;
    top: 0px;
    left: 50%;
    display: block;
    height: 100%;
    width: 100vw;
    opacity: 0;
    transform: translateX(-50%) translateY(0%);
    transition: opacity 0.1s ease-in-out, transform 0.3s ease-in-out;
  }

  .filter-control {

  --gap: 24px;
  gap: var(--gap);
}

  @media (min-width: 1024px) {.filter-control.sticking {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
}

  .filter-control.sticking::before {
  opacity: 1;
}

  .filter-control.sticking.scroll-up::before {
        transform: translateX(-50%) translateY(-100%);
      }

  .filter-control.sticking.scroll-up .filter-control-wrapper {
        transform: translateY(-100%);
      }

  .filter-control-wrapper {
  display: flex;
  justify-content: space-between;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.6;
  letter-spacing: 0.04rem;

    transform: translateY(0%);
    transition: transform 0.3s ease-in-out;
}

  .filter-control #sheet-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

  .filter-control #sheet-trigger svg {
  height: 1rem;
  width: 1rem;
}

  .filter-control #reset-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
    line-height: 20px;
}

  .filter-control #reset-btn::before {
      content: '';
      width: 1px;
      height: 14px;
      left: calc(var(--gap) / 2 * -1);
      position: absolute;
      top: 50%;
      display: block;
      --tw-translate-y: -50%;
      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
      --tw-bg-opacity: 1;
      background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
      opacity: 0.6;
    }

  @media (min-width: 1024px) {.filter-control #reset-btn::before {
    display: none;
  }
}

/* 防止產生橫向捲軸 */

body {
  overflow-x: hidden;
}
/*# sourceMappingURL=filter-control.css.map */