@font-face {
  font-family: Inter;
  font-weight: 400;
  font-style: normal;

  src: url("../fonts/inter-400.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: Inter;
  font-weight: 700;
  font-style: normal;

  src: url("../fonts/inter-700.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: Inter;
  font-weight: 900;
  font-style: normal;

  src: url("../fonts/inter-900.woff2") format("woff2");
  font-display: swap;
}

:root {
  --basic-extra-dark: #2d3440;
  --basic-dark: #565c66;
  --basic-neutral: #b9b9b9;
  --basic-light: #e7e7e7;
  --basic-extra-light: #fcfcfc;
  --basic-white: #fff;
  --special-extra-bright: #ff2f64;
  --special-bright: #ff4a78;
  --special-neutral: #f79;
  --special-light: #feafc3;
  --special-extra-light: #ffcbd8;
  --special-blue: #69a9ff;
  --special-yellow: #fcc850;
  --status-error: #ea5454;
  --status-warning: #fd912e;
  --status-success: #00e484;
}

html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;

  min-width: 1366px;
  min-height: 100%;
  margin: 0;

  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  color: var(--basic-extra-dark);

  background-color: var(--special-light);

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slide-one-active {
  background-color: var(--special-light);
}

.slide-two-active {
  background-color: var(--special-blue);
}

.slide-three-active {
  background-color: var(--special-yellow);
}

.main-container {
  flex-grow: 1;

  width: 1170px;
  margin: 0 auto;
}

.main-container a {
  text-decoration: none;
  color: inherit;
}

.heading-2 {
  font-size: 32px;
  font-weight: 900;
  line-height: 46px;
  text-align: center;
}

.visually-hidden {
  position: absolute;

  clip: rect(0 0 0 0);

  width: 1px;
  height: 1px;
  margin: -1px;
}

/* ----навигация---- */

.navigation {
  display: flex;
  align-items: center;

  width: 1170px;
  margin: auto;
  margin-bottom: 21px;
  padding: 24px 0;

  line-height: 20px;
}

.navigation a {
  text-decoration: none;
}

.navigation ul {
  list-style: none;
}

.navigation-left {
  display: flex;
  flex-wrap: wrap;

  max-width: 500px;
  margin: 0;
  margin-left: 16px;
  padding: 0;
}

.navigation-left-item {
  position: relative;
}

.navigation-left-link {
  display: inline-block;

  padding: 8px 16px;

  color: var(--basic-extra-dark);
  white-space: nowrap;

  border-radius: 26px;
}

.navigation-left-link.current {
  color: var(--basic-extra-light);

  background-color: var(--special-extra-bright);
}

.navigation-left-link:hover {
  color: var(--basic-extra-dark);

  background-color: rgba(252, 252, 252, 0.5);
}

.navigation-left-link:focus {
  color: var(--basic-extra-dark);

  outline: none;
  background-color: rgba(252, 252, 252, 0.5);
  box-shadow: inset 0 0 0 2px var(--basic-extra-dark);
}

.navigation-left-link.active,
.navigation-left-link:active {
  color: var(--basic-extra-dark);

  background-color: var(--basic-extra-light);
  box-shadow: none;
}


.popover-categories {
  position: absolute;
  z-index: 1;
  top: 30px;
  display: none;
  width: max-content;
  border-radius: 4px;
  background-color: var(--basic-extra-light);
  filter: drop-shadow(0 8px 16px rgba(45, 52, 64, 0.12));
}

.catalog-container:hover .popover-categories {
  display: block;
}

.popover-categories-list {
  margin: 0;
  padding: 8px 0;
}

.popover-category {
  padding: 8px 16px;
}

.popover-category:first-of-type {
  padding-bottom: 0;

  font-weight: 700;
}

.popover-category:first-of-type::after {
  display: block;

  height: 1px;
  margin-top: 12px;

  background-color: var(--basic-neutral);

  content: "";
}

.popover-category:hover {
  background-color: var(--special-extra-light);
}

.popover-category:active {
  background-color: var(--special-neutral);
}

.popover-category.current {
  color: var(--basic-extra-light);

  background-color: var(--special-extra-bright);
}

.popover-category-link {
  color: var(--basic-extra-dark);
}

.current .popover-category-link {
  color: var(--basic-extra-light);
}

.navigation-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  max-width: 500px;
  margin: 0;
  margin-left: auto;
  padding: 0;

  font-size: 14px;
}

.navigation-right-item {
  position: relative;
  display: inherit;

  margin-left: 18px;
  margin-bottom: 5px;
}

.navigation-right-phone {
  font-size: 16px;
  font-weight: 700;
  color: var(--basic-extra-dark);
}

.navigation-right-phone:hover {
  opacity: 0.7;
}

.navigation-right-phone:active {
  opacity: 1;
}

.navigation-right-link {
  position: relative;

  display: inline-block;
  box-sizing: border-box;

  padding: 6px 16px;

  color: var(--basic-extra-dark);
  white-space: nowrap;

  border-radius: 26px;
  background-color: rgba(252, 252, 252, 0.3);
}

.navigation-right-link:hover {
  background-color: rgba(252, 252, 252, 0.5);
}

.navigation-right-link:focus {
  outline: none;
  background-color: rgba(252, 252, 252, 0.5);
  box-shadow: inset 0 0 0 2px var(--basic-extra-dark);
}

.navigation-right-link.active,
.navigation-right-link:active {
  background-color: var(--basic-extra-light);
  box-shadow: none;
}

.navigation-right-link.search {
  width: 32px;
  height: 32px;
  padding: 7px;

  background-image: url("../img/search.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}

/* поповер */

.popover {
  position: absolute;
  z-index: 1;
  top: 40px;
  right: 0;

  display: none;

  border-radius: 4px;
  background-color: var(--basic-extra-light);

  filter: drop-shadow(0 15px 40px rgba(45, 52, 64, 0.12));
}

.popover.open {
  display: block;
}

/* поповер поиска */

.popover-search {
  box-sizing: border-box;
  width: 356px;
  padding: 24px 16px;
}

.popover-search .field {
  width: 100%;
  padding-right: 38px;

  -webkit-appearance: none;
}

.popover-search .field:focus {
  box-shadow: inset 0 0 0 1px var(--basic-neutral);
}

.popover-search .field::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.search-reset-btn {
  position: absolute;
  top: 28px;
  right: 17px;

  width: 16px;
  height: 16px;
  margin: 0;
  padding: 20px;

  opacity: 0.4;
  border: none;
  background-color: var(--basic-extra-light);
  background-image: url("../img/cross.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}

.search-reset-btn:hover,
.search-reset-btn:focus {
  opacity: 1;
}

.search-reset-btn:active {
  opacity: 0.4;
}

.navigation-right-link.log-in {
  padding-left: 40px;

  background-image: url("../img/log-in.svg");
  background-repeat: no-repeat;
  background-position: center left 16px;
  background-size: 18px 18px;
}

/* поповер входа */

.popover-login {
  width: 420px;
}

.login-form {
  display: flex;
  flex-direction: column;

  padding: 0 48px 50px 48px;
}

.popover-login-heading {
  margin-top: 48px;
  margin-bottom: 32px;

  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}

.login-form .field {
  margin-bottom: 16px;
}

.login-form .btn-extra {
  margin-right: 19px;
}

.login-bottom-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-top: 10px;
}

.login-links {
  padding-top: 5px;
}

.login-form .login-link {
  display: inline-block;

  margin-bottom: 4px;

  text-decoration: underline;
  color: inherit;
}

.login-form .login-link:hover {
  text-decoration: none;
}

.login-form .login-link:active {
  text-decoration: none;

  opacity: 0.6;
}

.navigation-right-link.cart {
  padding-left: 40px;

  background-image: url("../img/cart.svg");
  background-repeat: no-repeat;
  background-position: center left 16px;
  background-size: 18px 18px;
}

.navigation-right-link.cart-full {
  padding-left: 40px;

  background-image: url("../img/cart-full.svg");
  background-repeat: no-repeat;
  background-position: center left 16px;
  background-size: 18px 18px;
}

.navigation-right-link-cart-icon {
  margin-right: 6px;
}

.popover-cart-empty {
  position: absolute;
  top: 40px;
  right: 0;

  box-sizing: border-box;
  width: 288px;
  padding: 48px;

  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
  text-align: center;

  border-radius: 4px;
  background-color: var(--basic-extra-light);

  filter: drop-shadow(0 8px 16px rgba(45, 52, 64, 0.12));
}

.popover-cart {
  box-sizing: border-box;
  width: 440px;
  padding: 48px;
  padding-bottom: 44px;
}

.cart-content h2 {
  margin: 0;

  font-size: 24px;
  line-height: 30px;
}

.cart-content-list {
  margin-bottom: 26px;
  padding: 33px 0;

  border-bottom: 1px solid var(--basic-light);
}

.cart-item {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 100px 28px;

  column-gap: 16px;
}

.cart-item-link {
  display: flex;
  align-items: center;

  color: var(--basic-extra-dark);
}

.cart-item-link:hover .cart-item-img {
  filter: drop-shadow(rgba(45, 52, 64, 0.4) 0 4px 10px);
}

.cart-item-link:active .cart-item-img {
  filter: drop-shadow(rgba(45, 52, 64, 1) 0 4px 10px);
}

.cart-item:not(:last-of-type) {
  margin-bottom: 24px;
}

.cart-item-title {
  margin: 0;
  margin-bottom: 3px;

  font-size: 18px;
}

.cart-item-img {
  margin-right: 16px;
}

.cart-item-amount {
  display: flex;

  font-size: 14px;
  line-height: 20px;
  color: var(--basic-neutral);
}

.cart-item-amount p {
  margin: 0;
}

.cart-item-price {
  justify-self: center;

  margin: 0;

  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
}

.cart-checkout {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding-right: 2px;
}

.cart-total {
  margin: 0;

  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
}

.cart-checkout .btn-extra {
  color: var(--basic-extra-light);
}

.cart-button-delete {
  width: 16px;
  height: 16px;
  padding: 20px;

  border: none;
  background-color: transparent;
  background-image: url("../img/cross.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px;

  cursor: pointer;
}


.cart-button-delete:hover {
  opacity: 0.3;
}

.cart-button-delete:active {
  opacity: 1;
}

/* ----слайдшоу---- */

.slideshow {
  position: relative;
  overflow: hidden;

  margin-bottom: 75px;
}

.slideshow-items {
  display: flex;
  align-items: center;

  margin: 0;
  margin-left: 70px;
  padding: 0;

  list-style-type: none;
}

.slideshow-item {
  display: flex;
  align-items: center;
  flex: none;

  margin-right: 40px;
}

.slideshow-item:last-child {
  margin-right: 0;
}

.slideshow-item-description {
  display: none;
}

.slideshow-item-img {
  flex: none;

  width: 100px;

  opacity: 0.4;
}

.slideshow-item-img img {
  display: block;

  width: 100%;

  object-fit: contain;
  object-position: center;
}

.slideshow-item.active {
  flex-grow: 1;
  order: -1;
}

.slideshow-item.active .slideshow-item-description {
  display: block;

  width: 470px;
  margin-right: 20px;
  padding-bottom: 35px;
}

.slideshow-item-description h3 {
  margin-bottom: 24px;

  font-size: 36px;
  font-weight: 900;
  line-height: 46px;
}

.slideshow-item-description p {
  width: 414px;
  margin-bottom: 44px;

  font-size: 18px;
  line-height: 24px;
}

.slideshow-item.active .slideshow-item-img {
  width: 312px;

  opacity: 1;
}

/* кнопки слайдшоу */

.slideshow-controls {
  position: absolute;
  top: 50%;
  right: 280px;

  display: flex;
  justify-content: space-between;

  width: 350px;

  transform: translateY(-100%);
}

.slideshow-item-arrow {
  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
  width: 38px;
  height: 38px;

  border: 2px solid var(--basic-extra-light);
  border-radius: 26px;
  background-color: rgba(252, 252, 252, 0.3);
  background-repeat: no-repeat;
  background-position: center;

  cursor: pointer;
}

.slideshow-item-arrow path {
  fill: var(--basic-extra-light);
}

.slideshow-item-arrow:hover {
  background-color: var(--basic-extra-light);
}

.slideshow-item-arrow:hover path {
  fill: var(--basic-extra-dark);
}

.slideshow-item-arrow:focus {
  border: 2px solid var(--basic-extra-dark);
  outline: none;
  background-color: rgba(252, 252, 252, 0.3);
}

.slideshow-item-arrow:focus path {
  fill: var(--basic-extra-dark);
}

.slideshow-item-arrow:disabled {
  opacity: 0.4;
  border: 2px solid var(--basic-extra-light);
  background-color: rgba(252, 252, 252, 0.3);

  cursor: auto;
}

.slideshow-item-arrow:disabled:hover path {
  fill: var(--basic-extra-light);
}

.slideshow-bottom-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* пагинация слайдшоу */

.slideshow-pagination {
  display: flex;
}

.slideshow-pagination-link {
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  margin-right: 8px;

  border-radius: 100px;
  outline: none;
  background-color: rgba(252, 252, 252, 0.3);
}

.slideshow-pagination-link.current {
  background-color: var(--basic-extra-light);
}

.slideshow-pagination-link:hover {
  border: 1px solid var(--basic-extra-light);
  background-color: rgba(252, 252, 252, 0.3);
}

.slideshow-pagination-link:focus {
  border: 1px solid var(--basic-extra-dark);
  background-color: rgba(252, 252, 252, 0.3);
}

/* ----соцсети---- */

.socials {
  display: flex;
  flex-wrap: wrap;

  margin: 0;
  padding: 0;

  list-style-type: none;
}

.socials-link-icon {
  display: block;

  width: 24px;
  height: 24px;
  margin-left: 12px;

  border: 2px solid rgba(252, 252, 252, 0.2);
  border-radius: 100px;
  outline: none;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: top left;
  background-clip: padding-box;
  background-size: 24px 24px;
}

.socials-link-icon:hover {
  border: 2px solid rgba(252, 252, 252, 0.2);
  background-color: var(--basic-extra-dark);
}

.socials-link-icon:focus {
  border: 2px solid var(--basic-extra-dark);
  background-color: var(--basic-extra-dark);
}

.vk-icon {
  background-image: url("../img/vk.svg");
}

.socials-link-icon.fb-icon {
  background-image: url("../img/facebook.svg");
}

.socials-link-icon.insta-icon {
  background-image: url("../img/instagram.svg");
}

/* ----промо---- */

.promo {
  margin-bottom: 81px;
}

.promo-header {
  width: 443px;
  margin: auto;
  margin-bottom: 56px;
}

.promo-container {
  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 30px;
}

.promo-item {
  box-sizing: border-box;
  max-width: 570px;
  padding: 28px 15px 40px 40px;

  border-radius: 16px;
  background-color: var(--special-neutral);
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: cover;
}

.promo-item.raspberry {
  background-image: url("../img/promo-raspberry.png");
  background-position: right 15px bottom;
  background-size: 181px auto;
}

.promo-item.marshmallow {
  background-image: url("../img/promo-marshmallow.png");
  background-position: right 3px bottom;
  background-size: 240px auto;
}

.promo-text {
  display: flex;
  align-items: flex-start;
  flex-direction: column;

  width: 320px;
}

.promo-item-header {
  margin: 0;
  padding: 12px 0 15px 0;

  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}

.promo-text p {
  margin: 0;
  padding-bottom: 25px;
}

.promo-img {
  align-self: flex-end;
}

/* ----популярное---- */

.popular {
  margin-bottom: 80px;
}

.popular-header {
  width: 527px;
  margin: auto;
  padding-bottom: 23px;
}

/* ----карточки товаров--- */

.products-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, 270px);

  margin-top: 82px;
  padding: 0;

  list-style: none;

  gap: 92px 30px;
}

.products-list-card {
  display: flex;
  flex-direction: column;

  width: 270px;

  border-radius: 8px;
  background-color: var(--basic-extra-light);

  transition: ease-out;
  transition-duration: 200ms;
}

.products-list-card:hover {
  transition: ease-in;
  transition-duration: 200ms;
  transform: translateY(-5px);
}

.products-list-card-link {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.products-list-card:active {
  box-shadow: inset 0 0 0 1px var(--basic-extra-dark);
}

.products-list-card-img {
  width: 168px;
  height: 168px;
  margin-top: -50px;

  border-radius: 50%;

  object-fit: cover;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}

.products-list-card-title {
  margin-top: 16px;
  margin-bottom: 8px;

  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
}

.products-list-card-description {
  width: 190px;
  margin-top: 0;
  margin-bottom: 15px;

  text-align: center;
  color: var(--basic-dark);
}

.product-purchase {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-top: auto;
  padding: 0 40px 24px 40px;
}

.products-list-card-price {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}

/* ----преимущества---- */

.advantages {
  box-sizing: border-box;
  width: 1170px;
  margin-bottom: 80px;
  padding: 24px;

  border-radius: 16px;
  background-image: url("../img/advantages-background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.advantages-card {
  padding: 56px 40px 16px 40px;

  border-radius: 16px;
  background-color: var(--basic-extra-light);
}

.advantages-header {
  width: 995px;
  margin: auto;
}

.advantages-list {
  display: flex;
  flex-wrap: wrap;

  margin: 0;
  margin-top: 56px;
  padding: 0;

  color: var(--basic-dark);

  list-style: none;
}

.advantages-list-item {
  display: flex;
  align-content: center;

  box-sizing: border-box;
  width: 506px;
  margin-bottom: 40px;
  padding-left: 64px;

  background-repeat: no-repeat;
  background-position: left top;
  background-size: 48px 48px;
}

.advantages-list-item:nth-child(odd) {
  margin-right: 30px;
}

.advantages-list-item.popsicle {
  background-image: url("../img/popsicle.svg");
}

.advantages-list-item.cow {
  background-image: url("../img/cow.svg");
}

.advantages-list-item.leaf {
  background-image: url("../img/leaf.svg");
}

.advantages-list-item.thermometer {
  background-image: url("../img/thermometer.svg");
}

.advantages-list-item-description {
  margin: 0;
  padding: 0;
}

/* ----блог---- */

.blog-news-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  margin-bottom: 56px;
}

.blog-news-container > section {
  margin-bottom: 20px;
}

.blog {
  box-sizing: border-box;
  min-width: 570px;
  padding: 32px;

  border-radius: 16px;
  background-color: var(--basic-extra-light);
  background-image: url("../img/blog.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.blog:hover {
  text-decoration: underline;
}

.blog:active {
  text-decoration: none;
}

.blog-header {
  margin: 0;

  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  text-align: left;
  color: var(--basic-dark);
}

.blog p {
  width: 305px;
  margin: 13px 0;

  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}

/* ----рассылка---- */

.newsletter {
  display: flex;
  flex-direction: column;

  box-sizing: border-box;
  width: 570px;
  padding: 6px;

  color: var(--basic-dark);

  border-radius: 16px;
  background-color: var(--basic-extra-light);
  background-image: url("../img/newsletter-background-postal.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.newsletter-card {
  flex-grow: 1;

  box-sizing: border-box;
  padding: 26px;

  border-radius: 16px;
  background-color: var(--basic-extra-light);
}

.newsletter-card p {
  margin: 0 0 38px 0;
}

.newsletter-form {
  display: flex;
  justify-content: space-between;
}

.newsletter-form .field {
  align-self: center;

  width: 316px;
  margin-right: 20px;
}

/* ----доставка---- */

.delivery {
  margin-bottom: 80px;

  border-radius: 16px;
  background-color: var(--basic-extra-light);
  background-image: url("../img/delivery.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.delivery-container {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 64px;
  padding-left: 100px;
}

.delivery-description-container {
  width: 371px;

  text-align: left;
}

.delivery-description {
  margin-top: 0;

  color: var(--basic-dark);
}

.delivery-header {
  margin-top: 20px;
  margin-bottom: 24px;

  text-align: left;
}

.delivery-form-card {
  margin: 0;
  padding: 40px;

  border-radius: 8px;
  background-color: var(--basic-extra-light);
  box-shadow: 0 15px 40px rgba(45, 52, 64, 0.12);
}

.delivery-form {
  display: grid;
  grid-template-columns: 117px 287px;

  gap: 0 16px;
}

.delivery-info {
  display: flex;
  align-items: stretch;
  flex-direction: column;

  margin-top: 0;
  margin-bottom: 20px;
}

.delivery-legend {
  width: 380px;
  margin: 0;
  margin-bottom: 30px;

  color: var(--basic-dark);
}

.delivery-form-label {
  display: flex;

  margin-bottom: 8px;
  padding-right: 16px;
}

.delivery-label {
  margin-right: 4px;

  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
}

.tooltip-wrap {
  display: grid;
  grid-template-columns: 14px max-content;

  height: 20px;
  padding-right: 20px;
}

.tooltip-btn {
  width: 14px;
  height: 14px;
  margin-top: 2px;

  border: none;
  background-color: transparent;
  background-image: url("../img/info-label.svg");
  background-repeat: no-repeat;
  background-position: center;
}

.tooltip-content {
  position: relative;
  z-index: 1;
  top: -7px;

  display: none;
  flex-grow: 1;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  max-width: 162px;
  margin-left: 10px;
  padding: 10px 7px;

  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--basic-dark);

  border: 1px solid var(--basic-neutral);
  border-radius: 1px;
  background-color: var(--basic-white);
  box-shadow: 0 4px 8px rgba(194, 194, 194, 0.2);
}

.tooltip-wrap:hover .tooltip-content {
  display: unset;
}

.tooltip-content::before {
  position: absolute;
  z-index: 3;
  top: 10px;
  left: -6.8px;

  display: block;

  width: 10px;
  height: 10px;

  border-bottom: 1px solid var(--basic-neutral);
  border-left: 1px solid var(--basic-neutral);
  background-color: var(--basic-white);

  transform: rotate(45deg);

  content: "";
}

.delivery-submit {
  grid-column: 1 / -1;
  justify-self: center;

  margin: 0 auto;
}

.delivery-address {
  grid-column: 1/-1;

  margin-bottom: 28px;
}

.field {
  height: 48px;
  padding: 0 16px;

  font-family: inherit;
  font-size: 16px;
  line-height: normal;
  color: var(--basic-extra-dark);

  border: none;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--basic-neutral);
}

.field::placeholder {
  color: var(--basic-neutral);
}

.field:hover {
  box-shadow: inset 0 0 0 1px var(--basic-extra-dark);
}

.field:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--basic-extra-dark);
}

.field:invalid:not(:placeholder-shown) {
  box-shadow: inset 0 0 0 1px var(--status-error);
}

.field:disabled,
.field:disabled:hover {
  background-color: var(--basic-light);
  box-shadow: inset 0 0 0 1px var(--basic-neutral);
}

/* ----контакты---- */

.contacts {
  padding: 64px;

  border-radius: 16px;
  background-color: var(--basic-extra-light);
  background-image: url("../img/contacts.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.contacts-card {
  width: 263px;
  padding: 40px;
  padding-bottom: 37px;

  border-radius: 8px;
  background-color: var(--basic-extra-light);
  box-shadow: 0 8px 16px rgba(45, 52, 64, 0.12);
}

.contacts-address {
  margin-bottom: 28px;

  font-style: normal;
}

.contacts-address p {
  margin: 0;
  margin-bottom: 12px;

  color: var(--basic-dark);
}

.contacts-address b {
  display: block;

  margin-bottom: 24px;
}

.contacts-address b,
.contacts-phone {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}

.contacts-phone:hover {
  opacity: 0.7;
}

.contacts-phone:active {
  opacity: 1;
}

.contacts-fineprint {
  font-size: 14px;
  line-height: 20px;
}

.contacts-address .contacts-fineprint {
  margin: 0;
}

.contacts-feedback.btn-extra {
  color: var(--basic-extra-light);
}

/* ----подвал---- */

.footer-container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;

  box-sizing: border-box;
  width: 1170px;
  margin: 0 auto;
  padding: 48px 7px 48px 0;
}

.footer-container a {
  text-decoration: none;
  color: inherit;
}

.footer-container ul {
  margin: 0;

  list-style: none;
}

.footer-container p {
  margin: 0;
}

.footer-container .socials {
  max-width: 200px;
}

.footer-container .socials-link-icon {
  margin: 0;
  margin-right: 12px;
}

.footer-menu {
  display: grid;
  align-content: start;
  grid-template-columns: 150px auto;
  justify-self: center;

  padding: 0;
  padding-left: 31px;

  font-size: 14px;
  line-height: 20px;
}

.footer-menu-item {
  width: max-content;
  padding-bottom: 8px;
}

.footer-menu-item-link:hover {
  text-decoration: underline;
}

.footer-menu-item-link:active {
  text-decoration: none;
}

.supply {
  font-weight: 700;
}

.footer-menu-item-link.supply {
  position: relative;
}

.footer-menu-item-link.supply:before {
  position: absolute;

  width: 16px;
  height: 16px;

  background-image: url("../img/heart-fill.svg");
  background-repeat: no-repeat;

  transform: translate(-24px, 2px);

  content: "";
}

.credits {
  width: 200px;
  margin-right: 7px;
}

.credits-organization {
  font-size: 12px;
  line-height: 16px;
}

.credits a {
  display: inline-block;

  text-decoration: underline;
}

.credits a:hover {
  text-decoration: none;
}

.credits a:active {
  text-decoration: underline;
}

.credits-logo {
  display: block;

  margin-bottom: 10px;
}

.credits-logo:hover {
  filter: drop-shadow(rgba(45, 52, 64, 0.4) 0 4px 1px);
}

.credits-logo:active {
  filter: none;
}

.credits-organization p {
  margin: 0;
}

/* ----каталог---- */

/* хлебные крошки */

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;

  margin: 0;
  margin-top: 6px;
  padding: 0;

  list-style: none;
}

.breadcrumbs-item {
  position: relative;

  font-size: 14px;
  font-weight: 700;
  line-height: 20px;

  padding-right: 28px;
}

.breadcrumbs-item:not(:last-child)::after {
  position: absolute;
  top: 4px;
  right: 8px;

  width: 12px;
  height: 12px;

  background-image: url("../img/chevrons-right.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  content: "";
}

.breadcrumbs-item:hover .breadcrumbs-item-link::after {
  visibility: hidden;
}

.breadcrumbs-item:active {
  color: var(--basic-extra-light);
}

.breadcrumbs-item-link {
  position: relative;

  padding-bottom: 4px;
}

.breadcrumbs-item:not(:last-child) .breadcrumbs-item-link::after {
  position: absolute;
  left: 0;
  bottom: 0;

  width: 100%;
  height: 1px;

  background-color: var(--basic-extra-dark);
  content: "";
}

.catalogue-products-type {
  margin: 18px 0 38px 0;
}

/* ----фильтры---- */

.filter,
.control-label {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.filter-set {
  display: flex;
  flex-wrap: wrap;

  width: 831px;
  margin: 0 -12px;
  padding: 0;
}

.filter-group {
  margin: 0 12px 16px 12px;
  padding: 0;

  border: none;
}

.filter-group-list {
  display: flex;
  flex-wrap: wrap;

  margin: 0;
  padding: 8px 0 0 16px;

  border-radius: 20px;
  list-style: none;
  background-color: var(--special-extra-light);
}

.filter-group-name {
  margin: 0;
  margin-bottom: 8px;
  padding: 0;
  padding-left: 16px;
}

.filter-button {
  align-self: center;

  margin-left: 12px;
}

.select-sorting {
  box-sizing: border-box;
  width: 196px;
  padding: 8px 36px 8px 16px;

  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: inherit;

  border: none;
  border-radius: 20px;
  background-color: rgba(252, 252, 252, 0.3);
  background-image: url("../img/arrow-down.svg");
  background-repeat: no-repeat;
  background-position: center right 13px;
  background-size: 16px 16px;

  appearance: none;
  -webkit-appearance: none;
}

.select-sorting:hover {
  background-color: rgba(252, 252, 252, 0.5);
}

.select-sorting:focus {
  box-sizing: border-box;

  outline: none;
  box-shadow: inset 0 0 0 2px var(--basic-extra-light);
}

/* слайдер в фильтрах */

.filter-group.price {
  width: 196px;
}

.price-range-wrapper {
  padding: 17px 16px;

  border: none;
  border-radius: 20px;
  background-color: var(--special-extra-light);
}

.price-range-scale {
  position: relative;

  height: 2px;
  margin: auto;

  border-radius: 2px;
  background-color: rgba(86, 92, 102, 0.3);
}

.price-range-bar {
  position: absolute;

  height: 2px;

  background-color: var(--basic-dark);
}

.range-toggle {
  position: absolute;

  width: 16px;
  height: 16px;

  border: none;
  border-radius: 50%;
  background-color: var(--basic-extra-dark);

  cursor: pointer;
}

.range-toggle-inside {
  position: absolute;
  top: 6px;
  left: 6px;

  width: 4px;
  height: 4px;

  border: none;
  border-radius: 50%;
  background-color: var(--basic-extra-light);
}

.range-toggle:hover {
  background-color: var(--basic-extra-light);
}

.range-toggle:hover .range-toggle-inside {
  background-color: var(--basic-extra-dark);
}

.range-toggle:focus {
  outline: none;
  background-color: var(--basic-extra-light);
  box-shadow: inset 0 0 0 2px var(--basic-extra-dark);
}

.range-toggle:focus > .range-toggle-inside {
  background-color: var(--basic-extra-dark);
}

.range-toggle:active,
.range-toggle:active .range-toggle-inside {
  background-color: var(--basic-extra-dark);
}

.toggle-min {
  top: -7px;
  left: -8px;
}

.toggle-max {
  top: -7px;
  right: -8px;
}

.price-range-input-wrapper {
  display: flex;
}

.catalog-filter-label {
  display: flex;
}

.range-input {
  width: 30px;
  margin-bottom: 8px;
  padding: 0 0 0 2px;

  font: inherit;
  text-align: center;
  color: inherit;

  border: none;
  background-color: transparent;

  appearance: textfield;
}

.range-input::-webkit-inner-spin-button,
.range-input::-webkit-outer-spin-button {
  margin: 0;

  -webkit-appearance: none;
}

/* радио-кнопки жыр */

.control {
  position: relative;

  display: block;

  margin-bottom: 8px;
  padding-right: 16px;
  padding-left: 24px;
}

.control-mark-radio {
  position: absolute;
  top: 2px;
  left: 0;

  box-sizing: border-box;
  width: 16px;
  height: 16px;

  border: 1px solid var(--basic-extra-dark);
  border-radius: 50%;

  cursor: pointer;
}

/* состояния */

.control:hover .control-mark-radio,
.control-input:focus + .control-mark-radio {
  border: 1px solid var(--basic-extra-light);
}

.control-input:disabled + .control-mark-radio {
  opacity: 0.4;
  border: 1px solid var(--basic-extra-dark);

  pointer-events: none;
}

.control-input:disabled ~ .control-label {
  opacity: 0.4;
}

.control-input:checked + .control-mark-radio::before {
  position: absolute;
  top: 4px;
  left: 4px;

  width: 6px;
  height: 6px;

  border-radius: 50%;
  background-color: var(--basic-extra-dark);

  content: "";
}

.control-input:hover:checked + .control-mark-radio::before,
.control-input:focus + .control-mark-radio::before {
  background-color: var(--basic-extra-light);
}

.control:hover .control-input:disabled:checked + .control-mark-radio::before {
  background-color: var(--basic-extra-dark);
}

/* чекбоксы */

.checkbox {
  display: flex;
  align-items: center;

  margin-right: 16px;
  padding: 0;

  color: inherit;
}

.control-mark-checkbox {
  width: 16px;
  height: 16px;
  margin-right: 8px;

  cursor: pointer;
}

.control-mark-checkbox .checked {
  opacity: 0;
}

/* состояния */

.control-input:checked + .control-mark-checkbox .checked {
  opacity: 1;
}

.control-input:checked + .control-mark-checkbox .unchecked {
  opacity: 0;
}

.checkbox:hover .control-mark-checkbox,
.control-input:focus + .control-mark-checkbox {
  color: var(--basic-extra-light);
}

.control-input:disabled + .control-mark-checkbox {
  opacity: 0.4;
}

.control-input:disabled ~ .control-label {
  opacity: 0.4;
}

.checkbox:hover .control-input:disabled + .control-mark-checkbox {
  color: var(--basic-extra-dark);

  pointer-events: none;
}

/* ----каталог---- */

.catalogue-products-type {
  font-size: 32px;
  font-weight: 900;
  line-height: 46px;
}

.catalogue-pagination {
  position: relative;

  display: grid;
  grid-template-columns: 1fr 1fr 1fr;

  padding: 37px 0 77px 0;

  border-bottom: 1px solid rgba(252, 252, 252, 0.3);
}

.catalogue-pagination-more {
  grid-column-start: 2;
  justify-self: center;
}

.catalogue-pagination-pages {
  display: flex;
  align-items: center;
  grid-column-start: 3;
  justify-self: flex-end;

  margin: 0;
  padding: 0;

  list-style-type: none;
}

.catalogue-pagination-pages-button-link {
  width: 16px;
  height: 16px;
  padding: 16px;

  background-repeat: no-repeat;
  background-size: 16px 16px;
}

.prev .catalogue-pagination-pages-button-link {
  background-image: url("../img/arrow-left.svg");
  background-position: left;

  cursor: pointer;
}

.next .catalogue-pagination-pages-button-link {
  background-image: url("../img/arrow-right.svg");
  background-position: right;

  cursor: pointer;
}

.catalogue-pagination-pages-button.disabled {
  opacity: 0.2;

  pointer-events: none;
}

.disabled .catalogue-pagination-pages-button-link:focus {
  outline: none;
}

.catalogue-pagination-pages-button:hover {
  opacity: 0.5;
}

.catalogue-pagination-pages-button:active {
  opacity: 1;
}

.catalogue-pagination-pages-item {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 24px;
  height: 24px;
  margin: 1px;
}

.catalogue-pagination-pages-item.current {
  border-radius: 50px;
  background-color: var(--basic-extra-light);
}

.catalogue-pagination-pages-item:hover {
  border-radius: 50px;
  background-color: rgba(252, 252, 252, 0.3);
  box-shadow: inset 0 0 0 1px var(--basic-extra-light);
}

.catalogue-pagination-pages-item:focus,
.catalogue-pagination-pages-item:active {
  border-radius: 50px;
  background-color: rgba(252, 252, 252, 0.3);
  box-shadow: inset 0 0 0 1px var(--basic-extra-dark);
}

.catalogue-pagination-pages-item-link {
  padding: 0 8px;
}

/* ----кнопки---- */

.btn-main {
  display: inline-block;

  box-sizing: border-box;
  padding: 12px 32px;

  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;

  border: 4px solid rgba(252, 252, 252, 0.4);
  border-radius: 26px;
  outline: none;
  background-color: var(--basic-extra-light);
  background-clip: padding-box;
  box-shadow: 0 4px 12px rgba(45, 52, 64, 0.1);

  cursor: pointer;
}

.btn-main:hover {
  border: 4px solid var(--basic-extra-light);
  background-color: rgba(252, 252, 252, 0.4);
  box-shadow: 0 4px 15px rgba(133, 133, 133, 0.15);
}

.btn-main:focus,
.btn-main:active {
  padding: 14px 34px;

  border: 2px solid var(--basic-extra-dark);
  background-color: var(--basic-extra-light);
  box-shadow: 0 4px 12px rgba(45, 52, 64, 0.1);
}

.btn-main.disabled,
.btn-main:disabled {
  font-weight: 400;
  color: var(--basic-neutral);

  border: 4px solid rgba(252, 252, 252, 0.4);
  background-color: var(--basic-light);

  cursor: auto;
  pointer-events: none;
}

.btn-extra {
  display: inline-block;

  box-sizing: border-box;
  padding: 12px 32px;

  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  color: var(--basic-extra-light);

  border: 4px solid rgba(255, 47, 100, 0.3);
  border-radius: 26px;
  outline: none;
  background-color: var(--special-extra-bright);
  background-clip: padding-box;
  box-shadow: 0 4px 12px rgba(45, 52, 64, 0.1);

  cursor: pointer;
}

.btn-extra:hover {
  color: var(--basic-extra-dark);

  border: 4px solid var(--special-extra-bright);
  background-color: rgba(252, 252, 252, 0.3);
  box-shadow: none;
}

.btn-extra:focus,
.btn-extra:active {
  padding: 14px 34px;

  color: var(--basic-extra-light);

  border: 2px solid var(--basic-extra-dark);
  background-color: var(--special-extra-bright);
  box-shadow: 0 4px 12px rgba(45, 52, 64, 0.1);
}

.btn-extra.disabled,
.btn-extra:disabled {
  color: var(--basic-dark);

  border: 4px solid rgba(185, 185, 185, 0.3);
  background-color: var(--basic-neutral);
  box-shadow: none;

  cursor: auto;
  pointer-events: none;
}

.filter-button {
  display: inline-block;
  align-self: center;

  box-sizing: border-box;
  margin-top: 10px;
  padding: 8px 53px;

  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  color: var(--basic-extra-dark);

  border: 2px solid var(--basic-extra-light);
  border-radius: 20px;
  outline: none;
  background-color: rgba(252, 252, 252, 0.3);

  cursor: pointer;
}

.filter-button:hover {
  border: 2px solid rgba(252, 252, 252, 0.3);
  background-color: var(--basic-extra-light);
  background-clip: padding-box;
}

.filter-button:focus,
.filter-button:active {
  border: 2px solid var(--basic-extra-dark);
  background-color: rgba(252, 252, 252, 0.3);
}

.filter-button:disabled {
  opacity: 0.4;
  border: 2px solid var(--basic-extra-light);
  background-color: rgba(252, 252, 252, 0.3);

  cursor: auto;
}

.btn-cart {
  position: relative;

  display: block;

  box-sizing: border-box;
  width: 32px;
  height: 32px;
  padding: 8px;

  border-radius: 26px;
  outline: none;
  background-color: var(--special-extra-bright);

  cursor: pointer;
}

.btn-cart-icon {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  margin: auto;
}

.btn-cart-icon path {
  fill: var(--basic-extra-light);
}

.btn-cart:hover {
  border: 2px solid var(--special-extra-bright);
  background-color: rgba(252, 252, 252, 0.3);
}

.btn-cart:hover path {
  fill: var(--basic-extra-dark);
}

.btn-cart:focus,
.btn-cart:active {
  border: 2px solid var(--basic-extra-dark);
  background-color: var(--special-extra-bright);
}

.btn-cart:focus path,
.btn-cart:active path {
  fill: var(--basic-extra-light);
}

.btn-cart.disabled {
  border: 2px solid var(--basic-neutral);
  background-color: var(--basic-neutral);

  pointer-events: none;
}

.btn-cart.disabled path {
  fill: var(--basic-dark);
}

/* ---модальное окно--- */

.modal-container {
  position: fixed;
  top: 0;
  left: 0;

  display: none;

  width: 100%;
  height: 100%;

  background-color: rgba(45, 52, 64, 0.3);
}

.modal-container.open {
  display: flex;
}

.modal-feedback {
  position: relative;

  display: block;
  overflow-x: hidden;
  overflow-y: auto;

  width: 570px;
  max-height: calc(100vh - 40px);
  margin: auto;

  border-radius: 8px;
  background-color: var(--basic-extra-light);
  box-shadow: 0 15px 40px rgba(45, 52, 64, 0.12);
}

.modal-close-button {
  position: absolute;
  top: 21px;
  right: 22px;

  width: 20px;
  height: 20px;
  padding: 20px;

  border: none;
  background-color: transparent;
  background-image: url("../img/cross.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;

  cursor: pointer;
}

.modal-form {
  display: flex;
  flex-direction: column;

  padding: 0 64px 64px 64px;
  padding-top: 0;
}

.modal-heading {
  margin: 32px 64px;
  margin-top: 64px;

  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}

.modal-form .field {
  margin-bottom: 16px;
}

.modal-form-msg.field {
  box-sizing: border-box;

  height: 150px;
  margin-bottom: 24px;
  padding: 14px 16px;

  resize: vertical;
}

.modal-form .btn-extra {
  align-self: flex-end;
}