@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: relative;
} .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__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 {
  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__phone {
  font-family: 'Inter';
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
  color: var(--white2);
}

@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: 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;
  }
}