@import url(./font.css);

:root {
  --primary: #6D758F;
  --primary2: #9F75EB;
  --primary-light: #B4B9C9;
  --primary-bg: #F1F3F7;
  --primary-bg2: #2C2C2C;
  --white: #FFFFFF;
  --white2: #FFFEFA;
  --boxShadow: #19213D14;
  --pink: #FB5B93;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  transition: 0.3s;
}

::-webkit-scrollbar {
  width: 6px;
  background: var(--primary-bg2);
} ::-webkit-scrollbar-thumb {
  background: var(--primary2);
}

.container {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 0 67px;
}

.header {
  position: sticky;
  top: 0;
  z-index: 100;
} .header .container {
  padding: 24px 67px;
  background: var(--primary-bg2);
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
} .header_top {
  display: flex;
  align-items: center;
} .header_top_left {
  display: flex;
  align-items: center;
} .header_top_right {
  display: flex;
  align-items: center;
  width: 100%;
} .logo {
  min-width: 36px;
  min-height: 36px;
  cursor: pointer;
  color: var(--white2);
} .header__catalog-button {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 0 44px;
  background: var(--primary2);
  border-radius: 8px;
  box-shadow: 0px 1px 4px 0px var(--boxShadow);
  cursor: pointer;

  font-family: 'Inter';
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  text-align: center;
  color: var(--white2);

  margin-left: 28px;
  margin-right: 12px;
  border: none;
  outline: none;
} .header__filter-button {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 18px;
  border-radius: 15px;
  cursor: pointer;

  background: none;
  border: 1px solid var(--white2);
  outline: none;
} .header__filter-button svg {
  color: var(--primary2);
} .search-form {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 925px;
  width: 100%;
  height: 50px;
  margin-left: 28px;
} .search-form input {
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
  padding: 0 16px;
  border: 1px solid #F1F3F7;
  border-radius: 8px;
  outline: none;
  box-shadow: 0px 1px 4px 0px var(--boxShadow);

  font-family: 'Inter';
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--primary);
} .search-form svg {
  position: absolute;
  right: 15px;
  color: var(--primary);
} .header__cart-link {
  position: relative;
  margin-left: 28px;
} .header__cart-link svg {
  color: var(--white2);
} .header .nav .header_top_left a:hover svg,
  .header .nav .header__list li:hover a,
  .header .nav .nav_right div:hover svg,
  .header .nav .nav_right div:hover,
  .header .nav .nav_right a:hover svg,
  .header .nav .nav_right a:hover {
  color: var(--primary2);
} .header .nav .header_top_left .header__catalog-button:hover {
  background: var(--primary);
} .header__cart-link__count {
  position: absolute;
  top: 8px;
  left: 14px;
  width: 15px;
  height: 15px;
  border-radius: 20px;
  padding: 4px;
  background: var(--pink);

  font-family: 'Inter';
  font-size: 10px;
  font-weight: 600;
  line-height: 8px;
  text-align: center;
  color: var(--white);
} .nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 25px;
} .header__list {
  display: flex;
  align-items: center;
  gap: 24px;
} .header__list-item a {
  font-family: 'Inter';
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
  color: var(--white2);
} .nav_right {
  display: flex;
  align-items: center;
  gap: 24px;
} .nav__country {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;

  font-family: 'Inter';
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
  color: var(--white2);
  cursor: pointer;
} .nav__country svg {
  color: var(--white2);
} .nav__country-list {
  position: absolute;
  left: 0;
  bottom: -42px;
  z-index: 10;
  display: none;
  flex-direction: column;
  gap: 10px;
  background: var(--primary2);
  border-radius: 8px;
  padding: 5px 10px;
} .nav__country-list.active {
  display: flex;
} .nav__country-list > li {
  display: flex;
  align-items: center;
  gap: 5px;
} .nav__country-list > li p {
  color: var(--white2);
} .nav__country-list > li:hover p {
  color: var(--primary-bg2);
}

.nav__phone {
  font-family: 'Inter';
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
  color: var(--white2);
}

.header.unsearch .nav,
.header.unsearch .nav .header__cart-link {
  margin: 0;
}

@media (max-width: 700px) {
  .header_top {
    flex-direction: column;
    gap: 16px;
  } .header__catalog-button {
    margin: 0 16px;
  } .search-form {
    margin-left: 0;
  } .header__cart-link {
    margin-left: 16px;
  } .nav {
    flex-direction: column;
    gap: 8px;
  }
} @media (max-width: 500px) {
  .header .container {
    padding: 24px 20px;
  } .container {
    padding: 0 20px;
  }
} @media (max-width: 420px) {
  .header_top_left {
    width: 100%;
    justify-content: space-between;
  } .header__catalog-button {
    padding: 0 16px;
    margin: 0 8px;
  }
} @media (max-width: 380px) {
  .header__list {
    gap: 18px;
  } .nav_right {
    gap: 12px;
  }
}

.text-page {
  padding: 80px 0;
} .text-page h1 {
  font-family: 'Inter';
  font-size: 32px;
  font-weight: 700;
  color: var(--primary-bg2);
  margin-bottom: 30px;
} .text-page h2 {
  font-family: 'Inter';
  font-size: 20px;
  font-weight: 700;
  color: var(--primary-bg2);
  margin-top: 15px;
  margin-bottom: 15px;
} .text-page p {
  font-family: 'Inter';
  font-size: 16px;
  font-weight: 400;
  color: var(--primary-bg2);
  margin-bottom: 8px;
} .text-page p a {
  color: var(--primary2);
} .text-page ul {
  padding-left: 20px;
  margin: 15px 0;
} .text-page ul li {
  font-family: 'Inter';
  font-size: 16px;
  font-weight: 400;
  color: var(--primary-bg2);
  margin-bottom: 8px;
  list-style: disc;
} @media (max-width: 500px) {
  .text-page h1 {
    font-size: 24px;
  } .text-page h2 {
    font-size: 17px;
  } .text-page p {
    font-size: 14px;
  } .text-page ul li {
    font-size: 14px;
  }
}

@media (max-width: 1440px) {
  .index-page .catalog-filter .catalog-filter__search,
  .index-page .catalog-filter .catalog-filter__colors,
  .index-page .catalog-items {
    display: none;
  } .index-page .catalog-filter .catalog-filter__content h1 {
    margin: 0 auto;
  }
}



.header_mobile {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1000;
  display: none;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 10px 20px;
  background: var(--primary-bg2);
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
} .header_mobile-icons {
  display: flex;
  align-items: center;
  gap: 12px;
} .header_mobile-icons .header__cart-link {
  padding: 10px;
  margin-left: 0;
  background: #434343;
  border-radius: 8px;
} .header_mobile-icons .header__cart-link:hover svg path {
  fill: var(--primary2);
} .header_mobile-icons .header__cart-link__count {
  top: 23px;
  left: 20px;
  background: var(--primary2);
} .burger:hover rect {
  fill: var(--primary2);
}

.header_mobile-popup {
  position: fixed;
  top: 0;
  left: -120%;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  background: var(--primary-bg2);
  padding: 40px 72px 20px 40px;
  transition: 0.3s ease;
} .header_mobile-popup.active {
  position: fixed;
  left: 0;
  overflow: auto;
} .header_mobile-popup_top {
  position: fixed;
  right: 20px;
  opacity: 0;
  user-select: none;
  pointer-events: none;
} .header_mobile-popup.active .header_mobile-popup_top {
  opacity: 1;
  user-select: auto;
  pointer-events: all;
} .header_mobile__menu {
  display: flex;
  flex-direction: column;
  gap: 25px;
  margin: auto 0;
} .header_mobile__menu > li.open > .header_mobile__submenu {
  margin-top: 15px;
} .header_mobile__menu li {
  display: flex;
  flex-direction: column;
  /* gap: 10px; */
  width: 100%;
} .header_mobile__menu li a,
  .header_mobile__menu li p {
  height: auto;
  font-family: 'Inter';
  font-size: 24px;
  font-weight: 700;
  line-height: 20px;
  vertical-align: middle;
  color: var(--white);
  transition: 0.3s ease;
} .header_mobile__menu .header_mobile__item_text > a:hover,
  .header_mobile__menu .header_mobile__item_text > p:hover {
  color: var(--primary2);
} .header_mobile__item_text {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  width: 100%;
} .header_mobile__item_text svg {
  width: 24px;
  height: 24px;
  color: var(--white);
  transform: rotate(90deg);
} .header_mobile__submenu {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 15px;
} .header_mobile__submenu > .header_mobile__item {
  gap: 10px;
} .header_mobile__submenu .header_mobile__submenu {
  gap: 5px;
} .header_mobile__menu .header_mobile__submenu a,
  .header_mobile__menu .header_mobile__submenu p {
  font-size: 20px;
  font-weight: 500;
  line-height: 20px;
} .header_mobile__menu .header_mobile__submenu .header_mobile__submenu a,
  .header_mobile__menu .header_mobile__submenu .header_mobile__submenu p {
  font-size: 16px;
  font-weight: 400;
  line-height: 16px;
} .header_mobile__menu .header_mobile__item_text svg:hover {
  color: var(--primary2);
} .header_mobile__menu .header_mobile__item_text svg.active {
  color: var(--primary2);
  transform: rotate(-90deg);
} .header_mobile__menu .social-icons {
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
} .social-icons a svg {
  color: var(--white);
} .social-icons a:hover svg {
  color: var(--primary2);
} .header_mobile__menu .last {
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
} .header_mobile__menu .last > a {
  font-size: 18px;
  font-weight: 500;
} .header_mobile__menu .last > a:hover {
  color: var(--primary2);
} .header_mobile__menu .nav__country {
  font-size: 18px;
  font-weight: 500;
} .header_mobile__menu .nav__country:hover {
  color: var(--primary2);
} .header_mobile__menu .nav__country svg {
  width: 20px;
  height: 20px;
} .header_mobile__menu .nav__country:hover svg {
  color: var(--primary2);
} .header_mobile__menu .nav__country-list > li {
  flex-direction: row;
} .header_mobile__menu .nav__country-list > li p {
  font-size: 18px;
  font-weight: 500;
}

@media (max-width: 1440px) {
  .header {
    display: none;
  } .header_mobile {
    display: flex;
  }
}