.pet {
  padding: 162px 0 40px;
  background: linear-gradient(180deg, #180d43 700px, #fff 700px, #fff 90%, #180d43 90%);
}
.pet__breadcrumbs {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 64px; 
  padding-left: 32px;
  list-style: none;
}
.pet__breadcrumbs a {
  font-weight: 600;
  font-size: 14px;
  color: var(--primary-50, #EFE5FD);
  display: block;
  transition: .3s;
}
.pet__breadcrumbs a:hover {
  color: var(--primary-200, #b593f6);
}
.pet__heading {
  font-weight: 500;
  font-size: 60px;
  line-height: 120%;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--white, #fff);
  margin-bottom: 24px;
}
.pet__heading em {
  -webkit-text-fill-color: transparent;
  background: var(--violet-text-gradient, linear-gradient(92.81deg, #D3BFF9 29.71%, #7A3FF1 111.85%));
  -webkit-background-clip: text;
  font-style: normal; 
}
.pet__description {
  max-width: 800px;
  margin: 0 auto 60px;
  font-size: 20px;
  line-height: 1.5;
  text-align: center;
  color: var(--gray-100, #F0E7FA);
}
.pet__wrap {
  display: flex;
  column-gap: 48px;
  border-radius: 20px;
  box-shadow: 0 8px 8px -4px rgba(91, 6, 237, 0.03), 0 20px 24px -4px rgba(91, 6, 237, 0.08);
  background: var(--white, #fff);
  padding: 32px 32px 56px;
}
.pet__col-filters {
  max-width: 312px;
}
.pet__filters-search {
  position: relative;
  margin-bottom: 16px;
}
.pet__filters-search-icon {
  position: absolute;
  top: 12px;
  left: 16px;
  cursor: pointer;
}
.pet__filters-search input {
  width: 100%;
  border: 1px solid #cdc5d7;
  border-radius: 30px;
  padding: 12px 16px 12px 44px;
  box-shadow: 0 1px 2px 0 rgba(46, 40, 54, 0.05);
  background: var(--white, #fff);
  outline: none;
}
.pet__filters-search input:focus,
.pet__filters-wrap-tablet.active {
  border-color: #1A5EDD;
}
.pet__filters-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.pet__filters-applied,
.pet__filters-clear-btn:not(.pet__filter-btn) {
  font-size: 14px;
  line-height: 1.43;
  color: var(--gray-700, #4C4554);
}
.pet__filters-clear-btn:not(.pet__filter-btn) {
  display: inline-block;
  border-bottom: 1px solid var(--black, #000);
  cursor: pointer;
  transition: .3s;
}
.pet__filters-clear-btn:hover:not(.pet__filter-btn) {
  border-color: transparent;
  transform: scale(1.1);
}
.pet__filters-wrap {
  list-style: none;
  margin: 0;
  padding: 0;
  transition: .3s;
}
.pet__filter {
  cursor: pointer;
  margin-bottom: 16px;
}
.pet__filter:last-child {
  margin-bottom: 0;
}
.pet__filter-title-chevron,
.pet__cards-sort-label-shevron,
.pet__filters-wrap-tablet-shevron {
  transition: .3s;
}
.pet__filter.active .pet__filter-title-chevron,
.pet__cards-sort-label.active .pet__cards-sort-label-shevron,
.pet__filters-wrap-tablet.active .pet__filters-wrap-tablet-shevron {
  transform: rotate(180deg);
  transition: .3s;
}
.pet__filter-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  font-size: 18px;
  line-height: 156%;
  color: var(--primary-400, #7A3FF1);
}
.pet__filter.active .pet__filter-title {
  font-weight: 900;
}
.pet__filter-checkbox-wrap {
  display: flex;
  flex-direction: column;
  height: fit-content;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  overflow: hidden;
}
.pet__filter.active .pet__filter-checkbox-wrap {   
  max-height: 1000px;
  padding: 20px 0 16px;
  opacity: 1;
  visibility: visible;
  border-bottom: 1px solid var(--gray-100, #F0E7FA);
}
.pet__filter-checkbox-select-all {
  border-radius: 8px;
  padding: 10px 16px;
  height: 44px;
  background: var(--primary-50, #EFE5FD);
  cursor: pointer;
}
.pet__filter-checkbox-label {
  display: inline-block;
  margin-bottom: 0;
}
.pet__filter-checkbox-label input[type="checkbox"],
.pet__cards-sort-option input[type="radio"] {
  opacity: 0;
  position: absolute;
  z-index: -1;
}
.pet__filter-checkbox-text {
  cursor: pointer;
  padding: 10px 16px 10px 48px;
  position: relative;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: var(--gray-600, #5F5867);
}
.pet__filter-checkbox-text:before {
  content: "";
  position: absolute;
  left: 16px;
  top: 12px;
  font-size: 14px;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  fill: var(--white, #fff);
  border: 1px solid var(--gray-300, #CDC5D7);
  transition: .3s;
}
.pet__filter-checkbox-label input[type="checkbox"]:checked + .pet__filter-checkbox-text:before {
  border-color: var(--primary-600, #4D00E7);
  background-color: var(--primary-50, #EFE5FD);
}
.pet__filter-checkbox-text:after {
  opacity: 0;
  content: "";
  position: absolute;
  top: 15px;
  left: 19px;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.6666 3.5L5.24992 9.91667L2.33325 7' stroke='%234D00E7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transition: .3s;
}
.pet__filter-checkbox-label input[type="checkbox"]:checked + .pet__filter-checkbox-text:after {
  opacity: 1;
}
.pet__filter-btns {
  display: none;
}
.pet__col-cards {
  width: 100%;
}
.pet__cards-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 32px;
  padding-block: 8px;
}
.pet__cards-sort-label {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.pet__cards-sort-label.active  {
  margin-bottom: 8px;
}
.pet__cards-sort-label span {
  margin-right: 8px;
  font-weight: 500;
  font-size: 16px;
  line-height: 150%;
  color: var(--gray-900, #0E0416);
}
.pet__cards-sort-options {
  position: relative;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  width: 264px;
  height: 144px;
  box-shadow: 0 2px 4px -2px rgba(91, 6, 237, 0.06), 0 4px 8px -2px rgba(91, 6, 237, 0.1);
  background: #fff;
  transition: .3s;
}
.pet__cards-sort-label.active + .pet__cards-sort-options {
  max-height: 150px;
  opacity: 1;
  visibility: visible;
  padding: 16px 8px;
}
.pet__cards-sort-option {
  margin-bottom: 0;
}
.pet__cards-sort-option:last-child {
  border-bottom: 1px solid #dfdfdf;
}
.pet__cards-sort-option-text {
  position: relative;
  cursor: pointer;
  padding: 16px 16px 16px 48px;
  font-size: 16px;
  line-height: 150%;
  color: #4c4554;
}
.pet__cards-sort-option-text:before {
  content: "";
  position: absolute;
  top: 16px;
  left: 16px;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  border: 1px solid var(--gray-300, #CDC5D7);
}
.pet__cards-sort-option input[type="radio"]:checked + .pet__cards-sort-option-text:before {
  border-color: var(--primary-600: #4D00E7);
  background-color: var(--primary-50, #EFE5FD);
}
.pet__cards-sort-option-text:after {
  opacity: 0;
  content: "";
  position: absolute;
  top: 22px;
  left: 22px;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background-color: var(--primary-600, #4D00E7);
}
.pet__cards-sort-option input[type="radio"]:checked + .pet__cards-sort-option-text:after {
  opacity: 1;
}
.pet__cards-results {
  font-size: 14px;
  line-height: 143%;
  color: var(--gray-700, #4C4554);
  padding-block: 2px;
}
.pet__card {
  position: relative;
  box-shadow: 0 2px 4px -2px rgba(91, 6, 237, 0.06), 0 4px 8px -2px rgba(91, 6, 237, 0.1);
  background: var(--white, #fff);
  border: 1px solid var(--gray-200, #E2D9EB);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 12px;
  cursor: pointer;
}
.pet__card.active {
  padding-bottom: 0;
}
.pet__card-btn {
  position: absolute;
  right: 23px;
  top: 23px;
  display: block;
  width: 24px;
  height: 24px;
  transition: .3s;
}
.pet__card-btn-plus,
.pet__card-btn-minus {
  position: absolute;
  right: 0;
  top: 0; 
  transition: .3s;
}
.pet__card-btn-plus,
.pet__card.active .pet__card-btn-minus{
  opacity: 1;
}
.pet__card.active .pet__card-btn-plus,
.pet__card-btn-minus {
  opacity: 0;
}
.pet__card-row {
  display: flex;
  column-gap: 32px;
}
.pet__card.active .pet__card-row {
  padding-bottom: 31px;
  border-bottom: 1px solid var(--gray-200, #E2D9EB);
}
.pet__card-col-heading {
  width: 100%;
  max-width: 312px;
}
.pet__card-date {
  font-family: Jost, sans-serif;
  font-size: 12px;
  line-height: 150%;
  color: var(--gray-600, #5F5867);
  margin-bottom: 6px; 
}
.pet__card-title {
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 16px;
}
.pet__card-description {
  max-width: 464px;
  padding-right: 35px;
  font-size: 14px;
  line-height: 143%;
  color: var(--gray-600, #5F5867);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}
.active .pet__card-description {
  -webkit-line-clamp: 12;
}
.pet__card-description ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pet__card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pet__card-badge-country {
  display: flex;
  align-items: center;
  column-gap: 6px;  
}
.pet__card-badge-country-icon {
  width: 21px;
  height: 16px;
  border-radius: 2px;
  overflow: hidden;
}
.pet__card-inner-row {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  display: flex;
  column-gap: 12px;
  transition: .3s;
}
.pet__card.active .pet__card-inner-row {
  max-height: 600px;
  opacity: 1;
  visibility: visible;
  padding-block: 12px;
}
.pet__card-inner-col {
  position: relative;
  width: 100%;
  border-bottom: 1px solid var(--gray-100, #F0E7FA);
  padding: 16px 16px 15px;
}
.pet__card-inner-col.link {
  border-radius: 8px;
  background: linear-gradient(44deg, #f7f1ff 0%, #e2d2ff 100%);
}
.pet__card-inner-col:last-child {
  max-width: 50%;
}
.pet__card-inner-title {
  font-weight: 600;
  font-size: 16px;
  line-height: 150%;
  color: var(--gray-900, #0E0416);
  margin-bottom: 8px;
}
.pet__card-inner-description {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  width: fit-content;
  font-size: 14px;
  line-height: 143%;
  color: var(--gray-600, #5F5867);
}
.pet__card-badge {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-weight: 500;
  font-size: 14px;
  line-height: 129%;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: center;
  color: var(--black, #000);
  border-radius: 16px;
  padding: 4px 12px;
}
.pet__card-badge.no-styles {
  text-transform: unset;
  border-radius: 0;
  padding: 0;
  background: unset !important;
  line-height: 143%;
  color: var(--gray-600, #5F5867);
  text-align: left;
}
.pet__card-inner-description .pet__card-badge:nth-child(3n+1),
.pet__card-badge-retail {
  background: linear-gradient(44deg, #f7f1ff 0%, #e2d2ff 100%);
}
.pet__card-inner-description .pet__card-badge:nth-child(3n+2),
.pet__card-badge-country {
  background: linear-gradient(230deg, #e2f5fe 0%, #e0f7eb 100%);
}
.pet__card-inner-description .pet__card-badge:nth-child(3n+3) {
  background: linear-gradient(225deg, #faf0f9 0%, #f5ebf5 0.01%, #f1e0f0 100%);
}
.pet__card-inner-link {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.pet__card-inner-link-text svg {
  transition: .3s;
}
.pet__card-inner-link:hover ~ .pet__card-inner-link-text svg {
  transform: translateX(5px);
}
.pet__card-inner-link-text {
  display: flex;
  gap: 8px;
  align-items: center;
  font-weight: 500;
  font-size: 16px;
  line-height: 150%;
  color: var(--gray-900, #0E0416);
  margin-top: 8px;
}
.pet__card-pagination-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 32px;
}
.pet__card-btn-prev,
.pet__card-btn-next,
.pet__card-pages {
  display: flex;
  gap: 8px;
  align-items: center;
  font-weight: 600;
  font-size: 14px;
  line-height: 143%;
  color: var(--gray-900, #0E0416);
}
.pet__card-btn-prev,
.pet__card-btn-next {
  cursor: pointer;
}
.pet__card-btn-prev.disabled,
.pet__card-btn-next.disabled {
  pointer-events: none;
  color: #a8a0b1;
}
.pet__card-btn-prev svg,
.pet__card-btn-next svg {
  transition: .3s;
}
.pet__card-btn-prev:hover svg {
  transform: translateX(-5px);
}
.pet__card-btn-next:hover svg {
  transform: translateX(5px);
}
.pet__card-pages {
  gap: 12px;
}
.pet__card-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  cursor: pointer;
  transition: .3s;
}
.pet__card-page:hover:not(.active):not(.ellipsis) {
  transform: scale(1.1);
}
.pet__card-page.active {
  border: 1px solid var(--gray-900, #0E0416);
  border-radius: 4px;
}
.pet__card-page.ellipsis {
  width: 13px;
}

@media (min-width: 1200px) {
  .pet__container {
    max-width: 1310px !important;
  }
  .pet__filters-wrap-tablet-label {
    display: none;
  }
}
@media (max-width: 1200px) {
  .pet {
    padding: 135px 0 59px;
    background: linear-gradient(180deg, #180d43 580px, #fff 580px);
  }
  .shows-announcement-banner .pet {
    padding: 150px 0 59px;
    background: linear-gradient(180deg, #180d43 600px, #fff 580px);
  }
  .pet__container {
    max-width: 798px !important;
  }
  .pet__card.active .pet__card-col-heading {
    max-width: 159px;
  }
  .pet__heading {
    font-size: 48px;
    margin-bottom: 32px;
  }
  .pet__description {
    margin: 0 auto 54px;
  }
  .pet__wrap {
    flex-wrap: wrap;
    position: relative;
  }
  .pet__col-filters {
    display: grid;
    grid-template-columns: 49% 49%;
    column-gap: 16px;
    row-gap: 8px;
    width: 100%;
    max-width: 100%;
  }
  .pet__filters-info {
    grid-column: 1 / -1;
    order: 3;
  }
  .pet__filters-wrap-tablet {
    border: 1px solid #cdc5d7;
    border-radius: 30px;
    padding: 10px 16px;
    box-shadow: 0 1px 2px 0 rgba(46, 40, 54, 0.05);
    background: var(--white, #fff);
    height: fit-content;
    cursor: pointer;
  }
  .pet__filters-wrap-tablet-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 150%;
    color: var(--gray-500, #867E8E);
  }
  .pet__filters-wrap-wrap {
    display: none;
  }
  .pet__filters-wrap-tablet.active .pet__filters-wrap-wrap {
    display: block;
    top: 130px;
    left: 0;
    z-index: 1;
    position: absolute;
    width: 100%;
    border-radius: 8px;
    padding: 24px 32px;
    box-shadow: 0 4px 6px -2px rgba(91, 6, 237, 0.03), 0 12px 16px -4px rgba(91, 6, 237, 0.08);
    background: var(--white, #fff);
  }
  .pet__filters-wrap {
    margin-bottom: 32px;
  }
  .pet__filters-wrap-tablet.active .pet__filter-btns {
    display: flex;
    gap: 16px;
    align-items: center;
  }
  .pet__filters-wrap-tablet.active .pet__filter-btn {
    flex: 0 0 calc(50% - 8px)
  }
  .secondary-btn.pet__filter-btn {
    color: var(--gray-900, #0E0416);
  }
  .secondary-btn.pet__filter-btn:before {
    background: var(--white, #fff);
  }
  .secondary-btn.pet__filter-btn:hover:before {
    background: background: var(--gray-blue-900);
  }
  .secondary-btn.pet__filter-btn:hover {
    color: var(--white, #fff);
  }
  .primary-btn.pet__filter-btn {
    gap: 4px;
  }
  .pet__card-inner-col {
    padding: 16px 6px 15px;
  }
}
@media (min-width: 575px) and (max-width: 1199px) {
  .pet__card:not(.active) .pet__card-row {
    flex-direction: column;
  }
  .pet__card.active .pet__card-row {
    padding-bottom: 25px;
  }
  .pet__card:not(.active) .pet__card-col-heading {
    max-width: 100%;
    display: grid;
    grid-template-columns: 25% 63%;
    column-gap: 16px;
  }
  .pet__card:not(.active) .pet__card-title {
    grid-column: 1 / -1;
    order: 3;
  }
  .pet__card:not(.active) .pet__card-badges {
    margin-bottom: 6px;
    justify-content: end;
  } 
  .pet__card:not(.active) .pet__card-description {
    max-width: 100%;
  }

}
@media (max-width: 767px) {
  .pet__card-inner-row {
    flex-wrap: wrap;
    padding-block: 0;
  }
  .pet__card-inner-col {
    flex: 0 0 calc(50% - 6px);
    margin-bottom: 18px;
  }
  .pet__card-inner-col.link {
    flex: 0 0 100%;
  }
  /*   .pet__card-badge {
  font-size: 12px;
} */
}
@media (max-width: 575px) {
  .pet {
    background: linear-gradient(180deg, #180d43 580px, #fff 0, #180d43 90%);
    padding: 102px 0 0;
  }
  .shows-announcement-banner .pet {
    background: linear-gradient(180deg, #180d43 670px, #fff 0, #180d43 90%);
    padding: 190px 0 0;
  }
  .pet__breadcrumbs {
    gap: 8px;
    padding-left: 0;
  }
  .pet__heading {
    font-size: 36px;
    margin-bottom: 16px;
    padding-inline: 16px;
  }
  .pet__description {
    font-size: 18px;
    line-height: 156%;
    margin: 0 auto 48px;
  }
  .pet__wrap {
    padding: 32px 16px;
    margin-inline: -16px;
  }
  .pet__col-filters {
    grid-template-columns: 100%;
    row-gap: 0;
  }
  .pet__filters-wrap-tablet {
    margin-bottom: 24px;
  }
  .pet__filters-info {
    margin-bottom: 24px;
  }
  .pet__filters-wrap-tablet.active .pet__filters-wrap-wrap {
    top: 190px;
    padding: 0 16px 24px;
  }
  .pet__cards-info {
    padding-block: 0;
  }
  .pet__cards-sort-dropdown {
    width: 25%;
  }
  .pet__card {
    padding: 40px 16px;
    margin-bottom: 16px;
  }
  .pet__card-btn {
    right: 15px;
    top: 15px;
  }
  .pet__card-row {
    flex-direction: column;
  }
  .pet__card-col-heading,
  .pet__card.active .pet__card-col-heading {
    max-width: 100%;
    margin-bottom: 16px;
  }
  .pet__card-description {
    padding-right: 0;
  }
  .pet__card-inner-col {
    padding: 16px 8px 15px;
  }
  .pet__card-pages {
    gap: 3px;
  }
  .pet__card-badge {
    word-break: break-word;
  }
}