.category-tags__groups {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}


.tag-group__title {
  color: var(--c-dark-gray-text);
  margin-bottom: 0 !important;
}
.tag-group__items-wrap {
  margin-top: 12px;
  display: inline-flex;
  gap: 5px;
  flex-wrap: wrap;

  .tag-group__item {
    position: relative;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid var(--c-gray-border-2);

    @media (hover: hover) {
      transition: border-color var(--root-transition-duration) var(--root-transition-timing-function);

      &:hover {
        border-color: var(--c-green);

        & > a {
          color: var(--c-green);
        }
      }

      & > a {
        transition: color inherit inherit;
      }
    }

    & > a {
      color: var(--c-gray-text);
      text-wrap: nowrap;
      text-decoration: none;

      &::before {
        content: "";
        position: absolute;
        inset: 0;
      }
    }
  }
}


.category-catalog__header {
  margin-bottom: 40px;

  @media (960px <= width < 1200px) {
    margin-bottom: 25px;
  }
  @media (width < 640px) {
    margin-bottom: 30px;
  }
}
.category-catalog__title {
  max-width: 575px;

  @media (width < 1200px) {
    max-width: 464px;
  }
  @media (width < 960px) {
    max-width: 100%;
  }
}

.catalog {
  display: grid;
  gap: 30px 9px;
  grid-template-columns: repeat(4, 1fr);

  @media (width < 1200px) {
    column-gap: 10px;
  }
  @media (width < 960px) {
    grid-template-columns: 1fr 1fr;
  }
  @media (width < 480px) {
    grid-template-columns: 1fr;
  }

  .catalog__item {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;

    .product {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 2;
      row-gap: 0;
    }
  }
}


.product {
  background-color: #fff;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  overflow: hidden;
  position: relative;

  .product__img-wrap {
    position: relative;
    width: 100%;
    height: 206px;
    border-radius: 5px;
    overflow: hidden;

    .product__img-overlay .product__properties-wrap {
      position: absolute;
      top: 10px;
      right: 10px;
      left: 10px;
      display: inline-flex;
      flex-wrap: wrap;
      gap: 4px 5px;

      .product__property {
        display: inline flex;
        align-items: center;
        column-gap: 7px;
        padding: 4px 10px 4px 4px;
        color: #fff;
        font: 400 14px / normal Arial, sans-serif;
        letter-spacing: -0.56px;
        border-radius: 4px;

        & > svg {
          width: 20px;
          height: 20px;
        }
      }
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }
  .product__title {
    display: block;
    margin-top: 12px;
    padding-inline: 5px 80px;
    text-wrap: balance;
    text-decoration: none;

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 10;
    }

    @media (width < 1200px) {
      padding-inline-end: 24px;
    }
    @media (width < 960px) {
      padding-inline-end: 102px;
    }
    @media (width < 480px) {
      padding-inline-end: 97px;
    }
  }
  .product__footer {
    margin-top: 6px;
    padding-left: 5px;

    .product__price-and-btn-wrap {
      display: flex;
      justify-content: space-between;

      .product__price-wrap {
        align-self: end;

        p {
          margin-bottom: 0;
        }
      }
      .product__btn {
        width: 46px;
        height: 46px;
        display: grid;
        place-items: center;
        padding: 12px;
        position: relative;
        z-index: 20;

        & > svg {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}


.category-catalog__filter {
  margin-bottom: 26px;

  @media (width < 1200px) {
    margin-bottom: 20px;
  }
  @media (width < 640px) {
    margin-bottom: 10px;
  }
}

.custom-filter {
  --cf-summary-border-width: 1px;
  --cf-summary-border-color: var(--c-gray-border-3, hsl(0 0 80));

  .custom-filter__summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(13px - var(--cf-summary-border-width)) 16px;
    border: var(--cf-summary-border-width) solid var(--cf-summary-border-color);
    border-radius: 5px;
    color: var(--c-dark-gray-text);
    line-height: 24px;
    position: relative;

    @media (width < 640px) {
      &.custom-filter__summary--section {
        --c-section-summary-title: var(--c-black-darker, hsl(0 0 10));

        padding: 20px 10px;
        font-weight: 700;
        font-size: 16px;
        letter-spacing: 0;
        color: var(--c-section-summary-title);
        border-style: none;
        border-radius: 0;

        &::after {
          content: '';
          width: 5px;
          height: 4px;
          clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
          background-color: var(--c-section-summary-title);
          rotate: 90deg;
        }
      }
    }

    &::after {
      content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzI1M18zNzYpIj4KPHBhdGggZD0iTTcuNDEgOC41ODk5N0wxMiAxMy4xN0wxNi41OSA4LjU4OTk3TDE4IDkuOTk5OTdMMTIgMTZMNiA5Ljk5OTk3TDcuNDEgOC41ODk5N1oiIGZpbGw9IiNDQ0NDQ0MiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF8yNTNfMzc2Ij4KPHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=);
      width: 24px;
      height: 24px;
    }
    &::-webkit-details-marker {
      display: none;
    }
  }
  .custom-filter__sections-wrap {
    display: flex;
    column-gap: 9px;

    @media (width < 640px) {
      display: block;
    }

    .custom-filter__section {
      width: 283px;
      position: relative;
      z-index: 1000;

      @media (width < 1200px) {
        width: 227px;
      }
      @media (width < 960px) {
        width: 200px;
      }
      @media (width < 640px) {
        width: 100%;

        &[open] .custom-filter__summary.custom-filter__summary--section {
          color: var(--c-orange);

          &::after {
            background-color: var(--c-orange);
            rotate: 180deg;
          }
        }
        &:not(:first-child) .custom-filter__summary.custom-filter__summary--section {
          border-top-style: solid;
        }
      }

      .custom-filter__dropdown {
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        z-index: 2;
        padding: 20px 16px;
        border: var(--cf-summary-border-width) solid var(--cf-summary-border-color);
        border-radius: 5px;
        background-color: #fff;
        width: 100%;

        @media (width < 960px) {
          padding: 10px;
        }
        @media (width < 640px) {
          position: static;
          padding: 0;
          border: none;
          border-radius: 0;
        }

        .custom-filter__section-search {
          margin-bottom: 10px;
          height: 45px;
          border: 1px solid var(--cf-summary-border-color);
          border-radius: 8px;
          padding: 8px 16px;
          display: flex;
          column-gap: 16px;
          align-items: center;

          &::before {
            content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMTEuNzY2NiIgY3k9IjExLjc2NjYiIHI9IjguOTg4NTYiIHN0cm9rZT0iIzEzMEYyNiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTguMDE4MyAxOC40ODUyTDIxLjU0MjMgMjIuMDAwMSIgc3Ryb2tlPSIjMTMwRjI2IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=);
            width: 24px;
            height: 24px;
          }

          & > input {
            width: 100%;
            height: 29px;
            padding: 0;
            border: none;
            outline: none;
          }
        }
        .custom-filter__options-wrap {
          --scroll-thumb-color: var(--c-orange);
          --scroll-track-color: hsl(202 26 96);

          max-height: 421px;
          overflow-y: auto;
          display: flex;
          flex-direction: column;
          row-gap: 6px;

          /* Firefox */
          scrollbar-width: thin;
          scrollbar-color: var(--scroll-thumb-color) var(--scroll-track-color);

          @media (width < 640px) {
            max-height: unset;
            display: block;
          }

          /* webkit */
          &::-webkit-scrollbar {
            width: 7px;
          }
          &::-webkit-scrollbar-track {
            background-color: var(--scroll-track-color);
            border-radius: 20px;
            -webkit-border-radius: 20px;
          }
          &::-webkit-scrollbar-thumb {
            background-color: var(--scroll-thumb-color);
            border-radius: 20px;

            &:hover {
              background-color: var(--scroll-thumb-color) !important;
            }
          }
          &::-webkit-scrollbar-button {
            display: none !important;
            width: 0 !important;
            height: 0 !important;

            &:vertical:start:decrement, &:vertical:end:increment {
              display: none !important;
              width: 0 !important;
              height: 0 !important;
            }
          }

          &.custom-filter__options-wrap--radio .custom-filter__option > label {
            --radio-size: 35px;

            display: flex;
            column-gap: 10px;
            align-items: center;
            color: hsl(202 8 18);
            position: relative;

            @media (640px <= width < 960px) {
              --label-inline-padding: 0px;
            }
            @media (width < 640px) {
              --label-block-padding: 10px;
            }

            &::before {
              content: '';
              width: var(--radio-size);
              height: var(--radio-size);
              border-radius: 4px;
              background-color: hsl(0 0 85);
              flex-shrink: 0;
            }
          }
          &.custom-filter__options-wrap--radio .custom-filter__option:has(input:checked) > label {
            color: var(--c-orange);

            &::before {
              background-color: var(--c-orange);
            }
          }
          &.custom-filter__options-wrap--select .custom-filter__option:has(input:checked) > label {
            color: var(--c-orange);
          }

          .custom-filter__option {
            cursor: pointer;

            @media (hover: hover) {
              &:hover > label {
                color: var(--c-orange);
              }
            }

            & > label {
              --label-block-padding: 10px;
              --label-inline-padding: 10px;

              color: #000;
              padding: var(--label-block-padding) var(--label-inline-padding);
              width: fit-content;
              margin-bottom: 0;

              @media (width < 640px) {
                --label-block-padding: 20px;
                --label-inline-padding: 20px;

                width: 100%;
                border-top: 1px solid var(--cf-summary-border-color);
              }
            }
          }
        }
      }
    }
  }
}


.catalog-form__wrap {
  display: flex;
  column-gap: 21px;

  @media (width < 1200px) {
    column-gap: 41px;
  }
  @media (width < 960px) {
    display: block;
  }

  .catalog-form__header {
    flex: 0 0 565px;
    background-position: right center;
    background-size: 100%;
    background-repeat: no-repeat;
    padding: 41px 0 0 27px;
    border-radius: 5px;

    @media (width < 1200px) {
      flex: 0 0 433px;
      background: unset !important;
      padding: unset;
      border-radius: unset;
    }
    @media (width < 960px) {
      margin-bottom: 40px;
    }
    @media (width < 480px) {
      margin-bottom: 30px;
    }

    .catalog-form__title {
      margin-bottom: 0;
      max-width: 433px;
      color: #fff;

      @media (width < 1200px) {
        color: var(--c-black-darker, hsl(0 0 10));
      }
    }
  }
  .catalog-form__form-wrap {
    width: 100%;
  }
}