.product-container {
  display: grid;
  margin-block: 3rem 0;
  gap: 2em 0;

  @media (width >= 1200px) {
    grid-template-columns: 25% 1fr;
    gap: 2em 6em;
    margin-block: 3rem 0;
  }
}

.product-container-no-filters {
  @media (width >= 1200px) {
    grid-template-columns: 1fr;
  }
}

.woocommerce-products-header {
  margin: 3rem auto;
  max-width: 1000px;
  text-align: center;

  .product-category-description {
    height: 80px;
    overflow: hidden;
    position: relative;

    @media (width >= 1200px) {
      height: 65px;
    }

    &:after {
      background: #ffffff;
      background: linear-gradient(
        0deg,
        rgba(255, 255, 255, 1) -48%,
        rgba(247, 247, 247, 0.7) 230%
      );
      height: 27px;
      content: "";
      inset: auto 0 0 0;
      position: absolute;
      width: 100%;

      @media (width >= 1200px) {
        background: #ffffff;
        background: linear-gradient(
          0deg,
          rgba(255, 255, 255, 0.75) 38%,
          rgba(247, 247, 247, 0.89) 79%
        );
        height: 11px;
      }
    }
  }

  button#description-more {
    background-color: #fff;
    border: 0;
    color: #7c7c7c;
  }

  .product-category-description-expand {
    height: 100%;
    transition: 0.3s height ease-in-out;

    &:after {
      opacity: 0;
    }
  }
}

.woocommerce-notices-wrapper {
  grid-column: 1 / -1;
}

.product-grid-container {
  display: grid;
  grid-template-columns: 100%;
  gap: 2em 1rem;

  @media (width >= 600px) {
    grid-template-columns: repeat(2, 1fr);
  }

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

.product-grid-container-no-filters {
  @media (width >= 600px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media (width >= 800px) {
    grid-template-columns: repeat(5, 1fr);
  }
}

.product-grid-ordering {
  background-color: var(--light-grey);
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  justify-content: space-between;
  gap: 1em;
  padding: 1rem 1.5rem;

  div {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .woocommerce-ordering {
    height: 23px;
    margin: 0;
    select {
      appearance: none;
      background-color: var(--light-grey);
      border: 0;
      cursor: pointer;
      padding: 0;
      vertical-align: middle;
    }
  }

  p,
  p.woocommerce-result-count,
  select {
    margin: 0;
    font-size: 0.9em;
  }
}

button.product-filter-main {
  align-items: center;
  background-color: #fff;
  box-shadow: none;
  border: 1px solid #949494;
  display: flex;
  gap: 0.5em;
  justify-content: center;
  margin-bottom: 2rem;
  padding: 1rem;

  @media (width >= 1200px) {
    display: none;
  }
}

.product-filters button.product-filter-main-close-top {
  font-family: var(--cabin);
  font-size: 1.5rem;
  justify-content: flex-end;
  padding-top: 0;

  @media (width >= 1200px) {
    display: none;
  }
}

.product-filters .product-filter-main-apply {
  /* https://smoothshadows.com/#djEsMSwxLDAuMDgsMjQsLTUsMCwjMDMwNzEyLCNmM2Y0ZjYsI2ZmZmZmZiwy */
  background-color: #fff;
  bottom: 0;
  box-shadow: 0px -5px 24px rgba(3, 7, 18, 0.08);
  left: 0;
  padding: 2rem;
  position: absolute;
  width: 100%;
  z-index: 999;

  @media (width >= 1200px) {
    display: none;
  }

  button {
    background-color: #ace0ae;
    border: 1px solid var(--light-black);
    font-size: 1em;
    font-family: var(--cabin);
    justify-content: center;
    margin: 0;
    padding: 1rem;
    text-align: center;
  }
}

aside.product-filters {
  height: 100%;
  inset: 0 0 auto auto;
  opacity: 0;
  position: fixed;
  width: 100%;
  visibility: hidden;
  z-index: 99999999;

  &:after {
    content: "";
    background: #000;
    opacity: 0.8;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: -1;

    @media (width >= 1200px) {
      display: none;
    }
  }

  @media (width >= 1200px) {
    height: auto;
    width: auto;
    box-shadow: none;
    padding: 0;
    position: relative;
    opacity: 1;
    visibility: visible;
    z-index: 1;
  }

  .product-filters-container {
    @media (width < 1200px) {
      background-color: #fff;
      height: 100%;
      float: right;
      padding: 2em;
      position: relative;
      width: 80%;
    }

    @media (width < 500px) {
      width: 100%;
    }
  }

  .product-filter-menu {
    @media (width < 1200px) {
      max-height: 70dvh;
      overflow-y: scroll;
      padding: 0 2em 2em 0;
    }
  }

  /* .product-filters-container {
    background-color: #fff;
    box-shadow:
      -5px 0px 2px rgba(3, 7, 18, 0.01),
      -20px 0px 9px rgba(3, 7, 18, 0.02),
      -46px 0px 20px rgba(3, 7, 18, 0.02),
      -82px 0px 36px rgba(3, 7, 18, 0.03),
      -128px 0px 56px rgba(3, 7, 18, 0.04),
      -184px 0px 81px rgba(3, 7, 18, 0.05),
      -251px 0px 110px rgba(3, 7, 18, 0.06),
      -328px 0px 143px rgba(3, 7, 18, 0.06),
      -415px 0px 181px rgba(3, 7, 18, 0.07),
      -512px 0px 224px rgba(3, 7, 18, 0.08);
  } */

  .facetwp-selections {
    .facetwp-selection-label {
      display: none;
    }

    ul {
      display: flex;
      flex-wrap: wrap;
      gap: 1em;
      font-size: 0.825em;
      margin: 0 0 2rem;
      padding: 0;
      li {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;

        span {
          border: 1px solid #939393;
          border-radius: 20px;
          background-position: 93% center;
          background-size: 7px;
          margin: 0;
          padding: 7px 25px 7px 10px;

          &:hover {
            background-color: var(--light-black);
            color: #fff;
          }
        }
      }
    }
  }

  .facetwp-facet-clear_selection {
    button {
      border: 1px solid #8b8b8b;
      justify-content: center;
      padding: 0.75rem;
      text-align: center;
      font-family: var(--cabin);
      font-size: 1rem;

      &:hover {
        background-color: var(--light-black);
        color: #fff;
      }
    }
  }

  button {
    background-color: transparent;
    border: 0;
    display: flex;
    justify-content: space-between;
    gap: 1em;
    font-family: var(--lora);
    font-size: 1.2rem;
    padding: 1rem 0 0 0;
    text-align: left;
    margin-bottom: 1rem;
    width: 100%;

    @media (width>= 1200px) {
      border-top: 1px solid #8b8b8b;
    }

    img {
      margin-right: 0.5rem;
      rotate: 90deg;
    }

    &.filter_button--active {
      img {
        rotate: -90deg;
      }
    }
  }

  .facetwp-facet {
    display: none;

    @media (width < 1200px) {
      font-size: 14px;
      margin-bottom: 0;
    }

    margin-bottom: 20px;
  }

  .facet-wrap.active {
    .facetwp-facet {
      display: block;
    }
  }

  .facetwp-facet-price {
    .facetwp-slider-wrap {
      padding-bottom: 25px;

      .noUi-target {
        background: var(--dark-grey);
        border-radius: 0;
      }

      .noUi-horizontal {
        height: 5px;
      }

      .noUi-connect {
        background-color: var(--light-black);
      }

      .noUi-handle {
        background-color: var(--light-black);
        border-radius: 50%;
        top: -8px;
      }
    }

    .facetwp-slider-reset {
      border-radius: 20px;
      color: var(--light-black);
      display: inline-block;
      outline: 1px solid var(--light-black);
      box-shadow: 0;
      padding: 0.5rem 1.5rem;
      line-height: 1.4em;
      max-height: 40px;
      transition: 0.3s all ease-in-out;

      &:hover {
        background: var(--light-black);
        color: #fff;
        text-decoration: none;
      }
    }

    .facetwp-slider-label {
      color: #6b6b6b;
      float: right;
    }
  }

  .facetwp-checkbox {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 10px;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='15' height='15' rx='1.5' fill='white' stroke='%23757575'/%3E%3C/svg%3E%0A");
    .facetwp-counter {
      opacity: 0.6;
    }
  }

  .facetwp-checkbox.checked {
    background-image: url("data:image/svg+xml,%0A%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.6 13.2L14.65 6.15L13.25 4.75L7.6 10.4L4.75 7.55L3.35 8.95L7.6 13.2ZM2 18C1.45 18 0.979167 17.8042 0.5875 17.4125C0.195833 17.0208 0 16.55 0 16V2C0 1.45 0.195833 0.979167 0.5875 0.5875C0.979167 0.195833 1.45 0 2 0H16C16.55 0 17.0208 0.195833 17.4125 0.5875C17.8042 0.979167 18 1.45 18 2V16C18 16.55 17.8042 17.0208 17.4125 17.4125C17.0208 17.8042 16.55 18 16 18H2Z' fill='%231E1E1E'/%3E%3C/svg%3E%0A");
  }
}

aside.product-filters--open {
  @media (width < 1200px) {
    opacity: 1;
    visibility: visible;
  }
}

/* .woocommerce-page {
  .product-card {
    img {
      border: 1px solid #949494;
      padding: 5px;
    }
  }
} */

.facetwp-facet-load_more.facetwp-facet {
  display: flex;
  justify-content: center;
  margin-bottom: 0;

  @media (width >= 1200px) {
    grid-column: 2;
  }
}

.product-container-no-filters {
  .facetwp-facet-load_more.facetwp-facet {
    @media (width >= 1200px) {
      grid-column: 1 / -1;
    }
  }
}

.facetwp-load-more {
  background-color: #ace0ae;
  border: 1px solid var(--light-black);
  color: var(--light-black);
  cursor: pointer;
  font-family: var(--cabin);
  font-size: 1em;
  padding: 1rem 2rem;
  text-align: center;

  &:hover,
  &:focus {
    background-color: var(--light-black);
    color: #fff;
  }

  &[disabled] {
    cursor: default;
    opacity: 0.5;
  }
}