*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Переменные, шрифты, UI kit */

/* 
700 - Bold
600 - SemiBold / Demi
500 - Medium
400 - Regular
*/

/* Craftwork Grotesk */
@font-face {
    font-family: "Craftwork Grotesk";
    src: local("Craftwork Grotesk Bold"),
      url("/assets/fonts/craftwork/CraftworkGrotesk-SemiBold.woff2") format("woff2"),
      url("/assets/fonts/craftwork/CraftworkGrotesk-Bold.woff") format("woff"),
      url("/assets/fonts/craftwork/craftwork-grotesk-bold.ttf") format("ttf");
    font-weight: 700;
}
@font-face {
    font-family: "Craftwork Grotesk";
    src: local("Craftwork Grotesk SemiBold"),
      url("/assets/fonts/craftwork/CraftworkGrotesk-SemiBold.woff2") format("woff2"),
      url("/assets/fonts/craftwork/CraftworkGrotesk-SemiBold.woff") format("woff"),
      url("/assets/fonts/craftwork/craftwork-grotesk-semi-bold.ttf") format("ttf");
    font-weight: 600;
}
@font-face {
    font-family: "Craftwork Grotesk";
    src: local("Craftwork Grotesk Medium"),
      url("/assets/fonts/craftwork/CraftworkGrotesk-Medium.woff2") format("woff2"),
      url("/assets/fonts/craftwork/CraftworkGrotesk-Medium.woff") format("woff"),
      url("/assets/fonts/craftwork/craftwork-grotesk-medium.ttf") format("ttf");
    font-weight: 500;
}
@font-face {
    font-family: "Craftwork Grotesk";
    src: local("Craftwork Grotesk Regular"),
      url("/assets/fonts/craftwork/CraftworkGrotesk-Regular.woff2") format("woff2"),
      url("/assets/fonts/craftwork/CraftworkGrotesk-Regular.woff") format("woff"),
      url("/assets/fonts/craftwork/craftwork-grotesk-regular.ttf") format("ttf");
    font-weight: 400;
}
/* Craftwork Grotesk */

/* din 2014 */
@font-face {
    font-family: "DIN 2014 Rounded";
    src: local("DIN 2014 Rounded Demi"),
      url("/assets/fonts/din-2014/din-2014-rounded-demi.woff2") format("woff2"),
      url("/assets/fonts/din-2014/din-2014-rounded-demi.woff") format("woff"),
      url("/assets/fonts/din-2014/din-2014-rounded-demi.ttf") format("ttf");
    font-weight: 600;
}
@font-face {
    font-family: "DIN 2014 Rounded";
    src: local("DIN 2014 Rounded Regular"),
      url("/assets/fonts/din-2014/din-2014-rounded-regular.woff2") format("woff2"),
      url("/assets/fonts/din-2014/din-2014-rounded-regular.woff") format("woff"),
      url("/assets/fonts/din-2014/din-2014-rounded-regular.ttf") format("ttf");
    font-weight: 400;
}
/* din 2014 */

/* roboto */
@font-face {
    font-family: "Roboto";
    src: local("Roboto Medium"),
      url("/assets/fonts/roboto/Roboto-Medium.woff2") format("woff2"),
      url("/assets/fonts/roboto/Roboto-Medium.woff") format("woff"),
      url("/assets/fonts/roboto/roboto-medium.ttf") format("ttf");
    font-weight: 500;
}
@font-face {
    font-family: "Roboto";
    src: local("Roboto Regular"),
      url("/assets/fonts/roboto/Roboto-Regular.woff2") format("woff2"),
      url("/assets/fonts/roboto/Roboto-Regular.woff") format("woff"),
      url("/assets/fonts/roboto/roboto-medium.ttf") format("ttf");
    font-weight: 400;
}
/* roboto */

/* Глобальные переменные: */

:root {
    /* fonts */
    --font-family: "Craftwork Grotesk", sans-serif;
    --second-family: "DIN 2014 Rounded", sans-serif;
    --third-family: "Roboto", sans-serif;

    /* color */
    /* text */
    --text-white: #fff;
    --text-black: #121212;
    --text-dark: #2b2b3b;
    --text-grey: #999;

    /* background */
    --background-white: #fff;
    --background-black: #121212;
    --background-grey: #f2f2f2;

    /* gradient */
    --gradient-blue: radial-gradient(346.57% 244.17% at 149.73% -58.39%, rgb(15, 88, 129) 0%, rgb(30, 164, 156) 51.21689438819885%, rgb(118, 206, 117) 80.70731163024902%, rgb(236, 243, 159) 91.14583134651184%);
    --gradient-turquoise: radial-gradient(346.57% 244.17% at 149.73% -58.39%, rgb(117, 196, 240) 0%, rgb(126, 231, 225) 51.21689438819885%, rgb(181, 228, 180) 80.70731163024902%, rgb(237, 244, 164) 91.14583134651184%);
    --gradient-red: linear-gradient(22deg, #f44242 0%, #569ef0 100%);
} 


/* общие */
button{
  cursor: pointer;
}

.wrapper{
  margin: 0 auto;

  width: 1280px;
}

/* компоненты */

/* lang*/
.lang{
  position: relative;
}
.lang__open{
  padding: 12px 15px;

  width: 74px;

  background: none;
  border: none;

  font-family: var(--font-family);
  font-weight: 700;
  font-size: 16px;
  line-height: 125%;

  text-align: start;
  
  color: var(--text-black);

  position: relative;

  transition: opacity .2s ease-out;
}
.lang__open::before{
  content: '';

  position: absolute;
  top: 19.25px;
  right: 18.25px;

  width: 10px;
  height: 6px;

  background-image: url(../img/svg/main/arrow-black.svg);
  background-repeat: no-repeat;
}
.lang__open:hover{
  opacity: .8;
}
.lang__content{
  position: absolute;
  top: 33px;
  left: -13px;

  /* height: 0; */

  border-radius: 6px;

  transition: height .2s ease-out;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1), 0 0 2px 0 rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.lang__list{
  width: 104px;

  padding: 8px;

  list-style-type: none;
}
.lang__item{
  margin-top: 8px;
}
.lang__item:first-child{
  margin-top: 0;
}
.lang__link{
  display: block;

  width: 100%;

  padding: 4px;

  border-radius: 6px;

  font-family: var(--font-family);
  font-weight: 400;
  font-size: 20px;
  line-height: 120%;
  color: var(--text-dark);

  text-decoration: none;

  position: relative;

  transition: background-color .2s ease-out;
}
.lang__link:hover,
.lang__item.active .lang__link{
  background-color: var(--background-grey);
}
.lang__item.active .lang__link::before{
  content: '';

  position: absolute;
  top: 10px;
  right: 8px;

  width: 16px;
  height: 12px;

  background-image: url(../img/svg/main/arrow-selected.svg);
}
/* lang */


/* mini-profile */
.mini-profile{
  display: flex;
  align-items: center;    
}
.mini-profile__item{
  margin-left: 8px;
}
.mini-profile__item:first-child{
  margin-left: 0;
}
.mini-profile__button{
  display: block;

  padding: 8px;

  display: flex;
  justify-content: center;
  align-items: center;

  background: none;
  border: none;

  transition: opacity .2s ease-out;
}
.mini-profile__button:hover{
  opacity: .8;
}
.mini-profile__icon{
  width: 24px;
  aspect-ratio: 1;
}
/* mini-profile */


/* main-menu */
.main-menu{
  display: flex;
  align-items: center;

  list-style-type: none;
}
.main-menu__item{
  margin-left: 24px;

  transition: opacity .2s ease-out;
}
.main-menu__item:first-child{
  margin-left: 0;
}
.main-menu__item:hover{
  opacity: .8;
}
.main-menu__link{
  display: block;

  padding: 8px 12px;

  font-family: var(--font-family);
  font-weight: 700;
  font-size: 16px;
  line-height: 125%;
  color: var(--text-black);

  text-decoration: none;
}
.main-menu__button{
  padding: 8px 32px 8px 12px;

  font-family: var(--font-family);
  font-weight: 700;
  font-size: 16px;
  line-height: 125%;
  color: var(--text-black);

  border: none;
  border-radius: 24px;

  background: var(--gradient-turquoise);

  position: relative;
}
.main-menu__button::before{
  content: '';

  position: absolute;
  top: 14px;
  right: 14px;

  width: 13px;
  height: 8px;

  background-image: url(../img/svg/main/arrow-black.svg);
  background-repeat: no-repeat;
  background-size: contain;
}
/* main-menu */


/* form */
.form{
  width: 100%;

  padding: 24px 24px 43px;

  display: flex;
  flex-direction: column;

  border-radius: 24px;
  background: var(--gradient-turquoise);
}
.form__item{
  margin-top: 16px;
}
.form__title{
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 24px;
  line-height: 133%;
  color: var(--text-black);
}
.form__input{
  width: 100%;

  border-radius: 20px;
  padding: 12px 16px;
  border: 1px solid var(--text-black);

  background: var(--background-white);

  font-family: var(--font-family);
  font-weight: 400;
  font-size: 20px;
  line-height: 120%;

  color: var(--text-black);
}
.form__input::placeholder{
  color: var(--text-grey);
}
.form__input--textarea{
  height: 96px;
  resize: none;
}
.form__button{
  width: 100%;

  padding: 12px 24px;

  font-family: var(--font-family);
  font-weight: 400;
  font-size: 20px;
  line-height: 120%;
  color: var(--text-white);

  border-radius: 16px;
  border: none;
  background: var(--background-black);

  cursor: pointer;

  transition: background-color .2s ease-out;
}
.form__button:hover{
  opacity: .8;
}
/* form */


/* social media */
.social-media{
  display: flex;
  align-items: center;
}
.social-media__item{
  margin-left: 32px;
}
.social-media__item:first-child{
  margin-left: 0px;
}
.social-media__icon{
  width: 32px;
  aspect-ratio: 1;
}
/* social media */


/* product */
.product{
  margin: -24px;

  width: 100%;

  display: flex;
  align-items: start;
}
.product__item{
  margin: 24px;

  width: calc(33.3% - 48px);

  background-color: var(--background-grey);

  border-radius: 24px;
}
.product__product-card{
  height: 274px;

  display: flex;
  justify-content: center;
  align-items: center;
}
.product__images{
  height: 242px;
  object-fit: contain;
}
.product__content-card{
  padding: 15px;
}
.product__title{
  margin-top: 8px;

  font-family: var(--font-family);
  font-weight: 500;
  font-size: 20px;
  line-height: 120%;
  color: var(--text-black);
}
.product__price{
  margin-top: 8px;

  font-family: var(--font-family);
  font-weight: 700;
  font-size: 20px;
  line-height: 200%;
  text-transform: uppercase;
  color: var(--text-black);
}
.product__price::after{
  content: '₽';
}
.product__bye{
  margin-top: 8px;
}
/* product */

/* compound */
.compound{
  margin: -5px;

  display: flex;
  align-items: start;
}
.compound__item{
  margin: 5px;

  padding: 4px 8px;

  font-family: var(--font-family);
  font-weight: 700;
  font-size: 12px;
  line-height: 133%;
  color: var(--text-black);

  border-radius: 16px;
  background-color: var(--background-white);
}
.compound__item:first-child{
  margin-left: 0;
}
/* compound */

/* button */
.button{
  font-weight: 600;
  font-size: 20px;
  line-height: 120%;
  color: var(--text-black);

  border-radius: 20px;
}
.button--white{
  width: 100%;

  padding: 12px;
  
  text-align: center;

  background-color: var(--background-white);
  border: 1px solid var(--background-black);

  transition: opacity .2s ease-out;
}
.button--white:hover{
  opacity: .8;
}
/* button */