:root {
  --text-text-basic: #000000;
  --text-text-second: #333333;
  --text-text-on-background: #ffffff;
  --text-text-active-button: rgba(255, 255, 255, 0.3);
  --text-text-filter-1:  rgba(0, 0,  0, 0.3);
  --text-text-filter-2:  rgba(0, 0,  0, 0.1);
  --text-text-filter-3:  rgba(0, 0,  0, 0.6);
  --text-error: #ff5757;

  --button-basic: #756157;
  --button-basic-hover: #615048;
  --button-second: #82b3d3;
  --button-second-hover: #68A2CA;
  --button-select: #7db54f;
  --button-select-hover: #6C9E42;
  --button-disabled: #E5E5E5;

  --backgroundd-basic-0: #f2f2f2;
  --background-basic-1:  #ffffff;
  --background-basic-2: #82b3d3;
  --background-basic-3: rgba(0, 0, 0, 0);
  --background-second-1: rgba(131, 179, 211, 0.12);  /*#83b3d31f; */
  --background-second-2:  rgba(131, 179, 211, 0.2); /*#83b3d333; */


  --icnos-basic: #000000;
  --icons-second: #83b3d3;
  --icons-text: #7db54f;

  --form-input: #3F5E72;
  --form-disabled: #e5e5e5;
  --form-elements: #f2f2f2;

  --element-decore-1: #756257;
  --element-decore-2: rgba(117, 97, 87, 0.3);
  --element-decore-3: #68a2ca;
}

@font-face {
  font-family: "PT Sans", sans-serif;
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/ptsans-400.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "PT Sans", sans-serif;
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/ptsans-700.woff2") format("woff2");
  font-display: swap;
}

body {
  font-family: "PT Sans", sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-text-basic);
  background-color: var(--backgroundd-basic-0);
}

/* Pages */

/* Header */
.page-header,
.advantages,
.service,
.search,
.main-footer {
  background-color: var(--background-basic-1);
}

.page-header a,
.main-footer a,
.main-inner__breadcrumbs a,
.product-card a {
  text-decoration: none;
}

.navigation__link,
.navigation__link-icon {
  color: inherit;
  background-color: inherit;
  text-align: center;
  font-size: 20px;
  line-height: inherit;
  font-family: inherit;
}

.navigation__link--current {
  border-bottom: 2px solid var(--element-decore-1);
}

.button {
  font-family: "PT Sans", sans-serif;
  font-size: inherit;
  font-weight: 700;
  line-height: 20px;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: var(--text-text-on-background);
}

.button--color-1,
.button--color-1:active {
  background-color: var(--button-basic);
}

.button--color-1:hover,
.button--color-1:focus-visible{
  background-color: var(--button-basic-hover);
}

.button:active {
  color: var(--text-text-active-button);
}

.button--color-2,
.button--color-2:active {
  background-color: var(--button-second);
}

.button--color-2:hover,
.button--color-2:focus-visible {
  background-color: var(--button-second-hover);
}

.button--color-3,
.button--color-3:active {
  background-color: var(--button-select);
}

.button--color-3:hover,
.button--color-3:active {
  background-color: var(--button-select-hover);
}

.button:disabled {
  background-color: var(--button-disabled);
}

.button--color-4,
.button--color-4:active,
.button--color-4:focus-visible,
.button--color-4:hover,
.button--color-4:disabled {
  background-color: var(--background-basic-3);
}

.button--color-4:disabled {
  color: var(--text-text-filter-2);
}

.button--color-4:hover,
.button--color-4:active {
  opacity: 60%;
}

.button--color-4:focus-visible {
  outline: 2px  solid  var(--element-decore-3);
}

/* Promo */

.promo {
  background-color: var(--background-basic-2);
  background-image: url("../images/backgrounds/divider-background.png"), url("../images/backgrounds/index-background.jpg");

  background-repeat: no-repeat;
  background-position: bottom center, top center;
  background-size: contain, cover;

}

/* Advantages */

.title {
  font-family: "PT Sans", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-text-basic);
  font-size: 30px;
  line-height: 36px;
  text-align: center;
}

.subtitle {
  font-family: "PT Sans", sans-serif;
  color: var(--text-text-basic);
  font-size: 22px;
  line-height: 26px;
  text-align: center;
}

.title--small {
  font-size: 24px;
  line-height: 28px;
}

.subtitle--small {
  font-size: 18px;
  line-height: 21px;
}

.advantages__item:nth-child(4n+1) {
  background-color: var(--background-basic-2);
}

.advantages__item:nth-child(4n+1) > .advantages__title,
.advantages__item:nth-child(4n+1) > .advantages__subtitle {
  color: var(--text-text-on-background);
}

.advantages__item:nth-child(2n) {
  background-color: var(--background-second-2);
}

.advantages__item:nth-child(4n+3) {
  background-color: var(--background-second-1);
}

/* Service */

.service__item:nth-child(2n+1) {
  background-color: var(--background-second-1);
}

.service__item:nth-child(2n) {
  background-color: var(--background-basic-1);
}

.subscribe {
  background-color: var(--background-basic-2);
  background-image: url("../images/backgrounds/subscribe-background.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.button--big {
  font-size: 20px;
  line-height: 36px;
}

.subscribe__title,
.subscribe__subtitle {
  color: var(--text-text-on-background);
}

.subscribe__input,
.range__input {
  background-color: var(--backgroundd-basic-0);
  outline: 2px solid var(--element-decore-2);
  outline-offset: -2px;
  border: none;
  border-radius: 4px;
  color: var(--text-text-second);
}

.subscribe__input:hover,
.subscribe__input:focus,
.range__input:hover,
.range__input:focus {
  outline-color: var(--element-decore-3);
}

.subscribe__input:active,
.range__input:active {
  color: var(--element-decore-2);
}

.subscribe__input::placeholder,
.range__input::placeholder {
  color: var(--element-decore-2);
}

.button--color-2 {
  background-color: var(--button-second);
  color: var(--text-text-on-background);
}

/* Footer */

.main-footer__contact {
  font-family: "PT Sans", sans-serif;
  font-size: 40px;
  line-height: 40px;
  text-align: center;
  text-decoration: none;
  color: var(--text-text-basic);
}


/* CATALOG*/

.main-inner__header-container {
  background-color: var(--background-basic-2);
  background-image: url("../images/backgrounds/catalog-filter-background.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.main-inner__header {
  font-family: inherit;
  font-weight: 700;
  font-size: 60px;
  line-height: 78px;
  color: var(--text-text-on-background);
}

.breadcrumbs__link {
  color: var(--text-text-on-background);
}

/* Filters */

.filters__group {
  border:  unset;
}

.filters__title {
  font-family: inherit;
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  text-align: left;
  color: var(--text-text-on-background);
}

.label {
  font-family: inherit;
  font-weight: 400;
  font-size: 18px;
  line-height: 23px;
  color: var(--text-text-on-background);

}

.range__label {
  line-height:  24px;
  color: var(--text-text-filter-1);
}

/* VIEW  SETTINGS */

.view-settings__title {
  text-align: left;
}

.main-inner__view-settings {
  background-color: var(--background-basic-1);
}

.view-settings__sorting {
  background-color: var(--background-basic-1);
  border: 1px solid var(--form-disabled);
  font-size: 18px;
  line-height: 21px;
  font-family: inherit;
}

.view-settings__sorting-option {
  color: var(--text-text-second);
  font-size: 18px;
  line-height: 21px;
  font-family: inherit;
}

.view-settings__view-type-item {
  border: 2px solid var(--form-disabled);
}

.view-settings__view-type-item:has(.view-settings__view-type-link--active) {
  border-color: var(--icnos-basic);
}

/* Product card */

.product-card {
  background-color: var(--background-basic-1);
}

.card__info > dd {
  color: var(--text-text-second);
}

.card__rating-text {
  background-color: var(--backgroundd-basic-0);
}

.card__rating-text,
.card__rating-value {
  color: var(--text-text-second);
  font-size: 16px;
  line-height: 20px;
  font-family: inherit;
  text-transform: uppercase;
}

.pagination__link {
  font-family: inherit;
  font-weight: 700;
  font-size: 20px;
  line-height: 36px;
  color: var(--text-text-on-background);
}

.pagination__link--current,
.pagination__button {
  color: var(--text-text-basic);
}

.pagination__item {
  background-color: var(--background-basic-2);
}

.pagination__item:has( > .pagination__link--current) {
  background-color: var(--form-elements);
}

.pagination__item:has( > .pagination__button) {
  background-color: var(--background-basic-1);
}

.pagination__button {
  background-color: var(--background-basic-3);
  border: none;
}

.main-inner .subscribe {
  background-color: var(--background-basic-1);
  background-image: unset;
}

.main-inner .subscribe__title,
.main-inner .subscribe__subtitle {
  color: var(--text-text-basic);
}